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:

fillinthe-blog-post-01

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:

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

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:

To a size bigger with the same ratio:

Then in CSS we define either:

Or:

You could even use percentages.

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