expected image size will not be served

  • Hi,

    thx for this great plugin, but i have an issue with it.
    The following situation:

    I have images with some resolutions like 640×428, 667×286, 860×484, 1200×514, 1680×720.
    The srcsets are injected correctly, i can see them in the source code.

    If i test this configuration with a viewport of 375×667 (iPhone 6 portrait mode) i would expect that the image with 667×286 will be served, but it is 860×484.
    If i change to 667×375 (iPhone 6 landscape mode) 1680×720 will be served.

    On an iPad (viewport = 768×1024 in portrait) 1680×720 is served as well.

    Why s it so? This makes no sense in my eyes.

    https://www.ads-software.com/plugins/responsify-wp/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author stefanledin

    (@stefanledin)

    Hi mupa!
    Sorry for the late reply. My theory is that the 860×484 size is selected because the iPhone wants a highres/retina image. 375*2 is 750, so the 667×286 size is a bit to small.
    The same goes for 667*2, which is 1334. I would expect the iPhone to select the 1680 image in that case.

    Thread Starter mupa

    (@mupa)

    This was my theory as well. But is there a way to prevent loading high resolution images in mobile mode? I mean, there is really no big visual difference between a 667×375 image and a 1334×750 image on such a small screen.

    Plugin Author stefanledin

    (@stefanledin)

    How does the sizes attribute look like?

    Thread Starter mupa

    (@mupa)

    <img srcset="https://localhost/wordpress/wp-content/uploads/2016/04/Anlage-1-410x231.jpg 410w, https://localhost/wordpress/wp-content/uploads/2016/04/Anlage-1-640x428.jpg 640w, https://localhost/wordpress/wp-content/uploads/2016/04/Anlage-1-860x484.jpg 860w, https://localhost/wordpress/wp-content/uploads/2016/04/Anlage-1-1200x514.jpg 1200w, https://localhost/wordpress/wp-content/uploads/2016/04/Anlage-1-1680x720.jpg 1680w" sizes="(min-width: 1200px) 1680px, (min-width: 860px) 1200px, (min-width: 640px) 860px, (min-width: 410px) 640px, 410px" width="1680" height="720" class="pngfix wp-post-image" alt="" title="">

    Thread Starter mupa

    (@mupa)

    I think the problem is the missing viewport width (vw) information in your sizes tag. Please read this article. It explains the problem very well.

    Plugin Author stefanledin

    (@stefanledin)

    What happens if you switch to the picture element instead?
    Does it really matter which unit that is being used in the sizes attribute? You can always override the sizes attribute and use vw if you want, but RWP can’t know how many percents of the screen each image will fill.

    Thread Starter mupa

    (@mupa)

    Switching to the picture element works. But i found out that it isn’t enough to just switch the config from img to picture. You have to change something on your site (e.g. custom CSS) and save this state. Otherwise the config switch won’t work.

    Thread Starter mupa

    (@mupa)

    Edit:
    I found out that only the image sizes from my theme and the defaults from WordPress are used. Adding an image size via add_image_size in the function.php will create an entry in the RWP-options, activating them doesn’t work. There are not in the srcsets.

    Plugin Author stefanledin

    (@stefanledin)

    Have you tried with a new image? You have to use something like Regenerate thumbnails after adding a new image size.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘expected image size will not be served’ is closed to new replies.