Responsive image

  • Hello,
    I’ve been happily using Lazy Load XT so far, but I’m just updating to WP 4.4 and therefore, I’ve got a few questions regarding the srcset workaround and the sizes attribute :

    1- While digging in the jquery.lazyloadxt.srcset.js code, I don’t really get what you’re doing with the devicePixelRatio. To me, it doesn’t really do anything at the moment. What would be nice would be that a device with a devicePixelRatio==2 and a width==375 loads an image with a width>=750, but it doesn’t do that. I’ve tried a quick and dirty fix which is just under

    viewport = {
            w: window.innerWidth || documentElement.clientWidth,
            h: window.innerHeight || documentElement.clientHeight,
            x: window.devicePixelRatio || 1
        };

    I add this

    viewport = {
            w: viewport['w'] * viewport['x'],
            h: viewport['h'] * viewport['x']
        };

    And now, it works. Maybe I’m missing some other workcase though…

    2- The sizes attribute of the img is not taken into account isn’t it ? If I have in my code something like
    sizes="(max-width: 1080px) 80vw, 1080px"
    The 80vw is ignored. It always behave as if it was
    sizes="(max-width: 1080px) 100vw, 1080px"
    I understand that this one is more tricky to work out though.

    Thanks for your help.

    https://www.ads-software.com/plugins/lazy-load-xt/

Viewing 1 replies (of 1 total)
  • Thread Starter Laurent OneChai

    (@lolobu)

    One more thought on the subject. When lazyloading responsive images, why don’t your actually just replace the src=”” with the data-src=”” as you normally do without responsive images and just rename the attribute data-srcset into srcset and let the browser do the job of picking up the right image ?
    The current solution has the added advantage to use responsive images even if the browser doesn’t support it, which is nice, but you’ve got to do all the maths. But that would be a lot more simple to handle.

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive image’ is closed to new replies.