the_post_thumbnail() │ WP 2.9.0

// Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

// With WooCommerce
the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard cropped)
the_post_thumbnail( 'shop_catalog' );   // Shop catalog (300 x 300 hard cropped)
the_post_thumbnail( 'shop_single' );    // Shop single (600 x 600 hard cropped)

// Other resolutions
the_post_thumbnail( [ 100, 100 ] );  

Use the following code to show thumbnail image inside a link to a post. This code need to be used inside the WordPress Loop:

<?php if ( has_post_thumbnail() ) { ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
	   <?php the_post_thumbnail(); ?>
   </a>
 <?php } ?>

Using hook

Use the post_thumbnail_html hook. In this case the image will be a link to the post immediately when the_post_thumbnail() function is called. The code must be added to the functions.php theme file:

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';

	return $html;

}

An example showing how to create a thumbnail that refers to the original picture size:

<?php
if ( has_post_thumbnail() ) {

	$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
	?>

	<a href="<?= $large_image_url[0] ?>" title="<?= the_title_attribute('echo=0') ?>" >
		<?php the_post_thumbnail( 'thumbnail' ) ?>
	</a>

	<?php
}
?>

With add_image_size() you can register a new size and then get it by key:

// let's say in functions.php we register the additional size like this:
add_image_size( 'spec_thumb', 360, 240, true );

// then in the loop output this size as follows:
the_post_thumbnail( 'spec_thumb' );

An example of the attr argument using an array can be seen below:

the_post_thumbnail( 'post-thumbnail', [ 
	'class' => 'img-responsive responsive--full', 
	'title' => 'Feature image',
] );

Using the array’s keys and values to populate different attributes. You can use this to add classes to the post thumbnail.

Disable lazy loading where this post thumbnail is displayed Introduce in WordPress 5.5.:

the_post_thumbnail( 'post-thumbnail', [ 'loading' => false ] ); 

Set 'sizes' attribute

If you are worried about the sizes attributes are too big for your usage, you can do something like this :

the_post_thumbnail( 'large', [ 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ] );

The 'sizes' array consists of media queries, so the first parameter is your media query, and the second if what size-width image, should be rendered at that viewportsize. the last parameter is the default size if none of the given media-queries applies.

Useful if you use a column-based grid, where you don’t want the image to be rendered 100vw on smaller viewports.

If you’d like to remove the hardcoding of the ‘height’ and ‘width’ attributes on thumbnail images, which will often effect adaptive/responsive/fluid CSS stylesheets, you can add this snippet to your functions.php:

// remove width & height attributes from images

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

function remove_img_attr( $html ) {
	return preg_replace( '/(width|height)="\d+"\s/', '', $html );
}