I have the following Image Sizes defined under Media Settings:

Thumbnail Size: 125x69
Medium Size: 461x257
Large Size: 1070x600

I have EWWW Image Optimizer and Regenerate Thumbnails installed on the latest WP (4.8). I checked the ‘Advanced Settings’ on EWWW Optimizer and in the following screenshot, it lists what I think is the sizes that will be generated.

enter image description here

Yet when I upload an image or Force Regenerate Thumbnails, the width of the generated images just do not match up at all. For Instance, I uploaded a 1070×600 image, here is the size it actually generated:

image-123x69.jpg
image-294x165.jpg
image-323x181.jpg
image-335x188.jpg
image-458x257.jpg
image-679x381.jpg
image-768x431.jpg

I can understand the height will be different based on aspect ratio but I don’t understand why it is changing even the width of the generated images?

The only bit of code I have in the functions.php is the following:

// Add custom image sizes
add_image_size('home-thumbnail-highlight', 694, 381);
add_image_size('home-thumbnail', 330, 181);
add_image_size('listing-thumbnail', 342, 188);
add_image_size('sidebar-small-thumbnail', 300, 165);

This issue means, for example, when I use a thumbnail (125xh), the image gets slightly pixelated as the generated image is 123xh while the rendered image is 125xh. Am I missing something obvious or is there a way to ensure that the generated width always matches the width in the Media Settings page?

1 Answer
1

By default add_image_size will attempt to resize your custom image sizes instead of cropping them (see the fourth argument in the function).

So you have a couple of options here…

  1. Perform a crop by passing true for the fourth argument of add_image_size, or customize how the crop will be positioned by passing an array for the fourth argument (see documentation). This will force the image dimensions to be resized exactly as defined (for example ‘home-thumbnail-highlight’ will be 694×381)
  2. Set the height to a very high value and do not pass a fourth argument for cropping (to perform a resize).

For example:

add_image_size('home-thumbnail-highlight', 694, 99999);
add_image_size('home-thumbnail', 330, 99999);
add_image_size('listing-thumbnail', 342, 99999);
add_image_size('sidebar-small-thumbnail', 300, 99999);

This will force your custom sizes to always constrain at the width instead of the height.

Leave a Reply

Your email address will not be published. Required fields are marked *