Crunching: how WordPress resizes featured images: problems and solutions

The way WordPress handles uploaded images is somewhat confusing. If you've ever struggled to make your featured images cover the entire width of your post columns, then you 'll probably realize that something has actually happened when the text Crunching has appeared during the upload process.

WordPress has two ways to handle the dimensions of uploaded images:

With the Media tab of your settings.
With the add_image_size() function.

The former method let the user to specify three dimensions (plus the original size, which is not mentioned):

Thumbnail – The minimum size.
Medium
Large

Finally, there's also the full size, which corresponds to the original image size. If you browse your upload folder, you'll see the original image with its default file name, plus other three images with a pair of numbers which correspond to the width and height of the newly resized images.

When you see that WordPress is "crunching" an image, it simply means that it's extracting all the metadata from an image, plus creating the resized versions of the original images and moving them into place. When the upload process is complete, WordPress has also stored all the relevant data associated with an image into the database so that the newly uploaded image can be properly listed in the Media Library.

The the_post_thumbnail() function can be invoked using one of the already mentioned dimensions. The default size is thumb which is also the fallback value in the case of misconfigured custom image sizes when using the add_image_size() function.

If you use the Media settings, you won't probably need to add further custom sizes unless your site explicitly requires it due to its particular layout or taxonomy order.

Now our main question: why WordPress doesn't always honor our image dimensions when it comes to featured images? The problem lies in the preservation of the original aspect ratio of the uploaded images.

Every image has an aspect ratio which comes from the mathematical relationship between the width and height of the image. WordPress tends to preserve this ratio when resizing images. For example, if you upload a 1024 x 768 image and in your settings you have 150 x 150 for the thumbnail size, 250 x 160 for the medium size and 500 x 350 for the large size, everything should work as expected, though I strongly recommend to perform some calculations when defining your settings in order to get the same aspect ratio.

Conversely, if you upload a 640 x 400 image with the same media settings, you'll probably get unwanted results, because the aspect ratio is different. A client-side solution to this problem requires the use of the background-size CSS3 property and jQuery.

If you have the following post structure:


<h1><?php the_title(); ?></h1>
<div class="featured-image">
	<?php the_post_thumbnail('large'); ?>
</div>

You can remove the featured image and assign it as a background image to its parent, with the following CSS code:


.featured-image {
	height: 200px;
	width: 100%;
	margin-bottom: 1em;
	background-repeat: no-repeat;
	background-size: contain; /* or 'cover' */
}

and the following jQuery code:


$('div.featured-image').each(function() {
	var $div = $(this),
		$img = $('img', $div),
		src = $img.attr('src');
		$div.css('backgroundImage', 'url(' + src + ')');
		$img.remove();
});

CSS3.info says:

[quote cite="http://www.css3.info/preview/background-size/" text="CSS3.info"] If the contain keyword is used, the background image is scaled, while preserving the image’s original proportions / aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area, ie. neither the image’s width or height exceed the background positioning area. As such, depending on whether or not the proportions of the background image match those of the background positioning area, there may be some areas of the background which are not covered by the background image. If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. both the images width or height are equal to or exceed the background positioning area. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area. [/quote]

However, the CSS3 solution doesn't work in IE8 and lower so I recommend a specific jQuery plugin for that purpose.