Blurry Jpegs in WordPress (multiple solutions)

Today we find ourselves pulling our hair out as a result of trying to resize JPEGs in WordPress.

The Issue:

We are currently working on a project where we needed to upload multiple images. Once that was done, we could use the trustee AJAX Thumbnail Rebuild plug-in and it would resize everything later if we wanted it to. And we did, but kept encountering the following issue:


Solution #1

This comes from WPLifeguard+ (you can read it in full here). Essentially, you add this line of code to your function.php file:

add_filter('jpeg_quality', function($arg){return 100;});

If you want to compress things more, you can also do it this way:

add_filter('jpeg_quality', function($arg){return 60;});

This is great, but it did nothing to help our issue. We were still getting the same result.


We began to think it was AJAX Thumbnail Rebuild plug-in causing the problem. We tried another plugin, Regenerate Thumbnails, which we now hold much more dearly than the AJAX plugin because you can resize one single image as a test. It is capable of handling the whole media library in one pass, as AJAX is.


Solution #2

What worked for us was to set the image size slightly larger than the window size, then resize the image in CSS. We set the image size from:

add_image_size( 'slide-regular', 600, 405, true );

To a size bigger with the same ratio:

add_image_size( 'slide-regular', 652, 440, true );

Then in CSS we define either:

img {width:600px}



You could even use percentages.

This made all the images look a bit sharper. Run Regenerate Thumbnails once more, and you are finished.