PB Responsive Images
[resolved] blurry images on smartphones (4 posts)

  1. fathoni
    Posted 3 years ago #

    Hi, The idea behind this plugin is great.

    I have problem when using this plugin for mobile devices.
    The image loaded from iPhone / Android smartphones seems so blurry, even when the quality has been set into q100.
    Here are my settings:

    Any ideas on how to make the images sharper?


  2. Jacob Dunn
    Plugin Author

    Posted 3 years ago #

    Looking at those settings, you don't actually serve retina specific images to iPhones at the moment. You only have one "min-device-pixel-ratio" query and it's for screen sizes 640px and higher (iPhones weigh in at 320px wide).

    Typically speaking, if you want to do high-res assets, you provide a counterpart "min-device-pixel-ratio" query for every single one of your media queries, so that you can get high res assets at any ratio. So, if you added the following below the "all" query:

    media: (min-device-pixel-ratio:2) query:w600

    That would get you high res assets for iPhone4+.

    The other thing that may be causing issues is the actual size of the image. Is the image having to scale up at the screen-sizes you're looking at? For example, at 419 pixels wide, you're serving assets that are only 300 pixels wide - do you have 59.5 pixels of padding to either side of those images? It's better as far as clarity goes for images to scale down, rather than up. So you should look at the largest size that will occur for any of your media queries, and set the image size accordingly. For example, if your images were to have 10px of padding on either side of the content, I'd set the "all" media query to:

    media: all query:w400

    Since your next media query is at 420px. (Technically I'd almost bump it up to 421px, as well, as the image is still sized correctly AT 420px. Minor quibbles at that point, though)

    Hope that helps!

  3. Jacob Dunn
    Plugin Author

    Posted 3 years ago #

    Marking this as resolved, let me know otherwise.

  4. fathoni
    Posted 3 years ago #

    Yes, this actually resolves the problem. Thanks Jake!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • PB Responsive Images
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic