Blurry images on mobile only

  • Hunterphoto

    (@hunterphoto)


    8 years, 10 months ago

    Hello

    Having an odd issue with some photos on my site markhunter.net

    Images appear compressed and blurry on mobile platforms in blog posts and about section but when you click on the actual image, it looks fine.

    I’ve gone to a few other wordpress sites that seem to have a similar issue but others look fine.

    Can’t seem to figure out what this issue is.

    We’ve tried adding plug-ins to enhance quality, retina, different sizes and file types. Also read this could be cellular data issue? But then why does it still look blurry on wifi?

    Envira gallery images appear to be fine for the most part but I do notice a slight loss of quality.

    Appreciate any advice here.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Chris A. a11n

    (@aprea)

    8 years, 10 months ago

    I had a quick look at your about page and I’m fairly certain of what the problem is.

    The image at the top of that page is 300px by 200px. The same image is being served to my iPhone 5 which has a horizontal resolution of 640px. In this scenario your 300px image is being stretched to match the width of my device resulting in a blurry image.

    As such you’ll need to upload an image twice the size of your current image if you want to support HiDPI devices.

    Additionally, if you haven’t already you might want to try out this plugin https://wordpress.org/plugins/wp-retina-2x/

    Thread Starter Hunterphoto

    (@hunterphoto)

    8 years, 10 months ago

    Thanks for the reply.

    I’ve been using the retina plug-in but still having this issue.
    On mobiles the image is 300×200 no matter what way it’s held so the image is not being resized.

    Chris A. a11n

    (@aprea)

    8 years, 10 months ago

    You’ll need to ensure that the source image meets the required image dimensions. If your source image is 300×200 you’re going to run into problems regardless of whether you’re using a retina plugin or not. A 600×400 variation of that image needs to exist on your server before you’ll see a crisp HiDPI image on your mobile device.

    You might also want to check that these plugins work retroactively, i.e. that it’ll serve retina images for existing media library images and not just new ones.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Blurry images on mobile only’ is closed to new replies.