[Support request] Fuzzy Excerpt Images on IOS

Home Forums Support Fuzzy Excerpt Images on IOS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1384214
    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!

    #1384284
    Tom
    Lead Developer
    Lead Developer

    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!

    #1384879
    John

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

    #1385055
    Tom
    Lead Developer
    Lead Developer

    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?

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.