[Support request] Fuzzy Excerpt Images on IOS

[John]

Hi!

Here’s the website page I’m having issues with https://www.lucybarber.com/blog/

The first four article thumbnails are sharp on a laptop, but out of focus on IOS.

The fifth and sixth article thumbnails (Studio News and Updates, An Auspicious Start to a New Decade) are in focus both on the laptop and IOS.

Any ideas why this is happening?

Thanks!

[Tom]

Hi there,

It seems like those images are set to display at 150×150. Since iOS devices are retina displays, the images should be 300×300 to display at 150×150 in high resolution.

The reason the other images look fine is they have srcset attributes to display the larger image on certain resolutions. Not sure why they’re doing that while the other ones aren’t.

To fix, you can go to Settings > Media and make your thumbnails 300×300, then regenerate your thumbnails with a plugin like this: https://wordpress.org/plugins/regenerate-thumbnails/

Then go into the Customizer > Layout > Blog section, and choose the thumbnail size for the featured images.

Lastly, use the width and height values to make the images 150×150.

That way the 300×300 images will resize down to 150×150 and look good on retina devices.

Hope this helps!

[John]

Thank you, Tom. Worked like a charm. Now you’ve got me curious about why the srcset attributes specifically on those images.

[Tom]

Yes, that’s weird. I’m not sure what could cause that, as srcset should happen automatically. Perhaps it’s due to the size of the image you’re uploading?

[Author]

Posts