Title: Image not lazyloading
Last modified: June 17, 2018

---

# Image not lazyloading

 *  Resolved [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/)
 * Hi Florian,
 * Thank you for the great plugin 🙂
 * I am trying to use responsive image with the picture element. I am able to get
   WP to generate srcset for my “source” as well as the img.
 * However, the code in the DOM of the one source I’ve added for art direction looks
   like this:
    <source media=”media query” src=”Desktop-1920-x-631.jpg” sizes=”100vw”
   class=”wp-image-3″ srcset=”Desktop-1920-x-631.jpg 1920w, Desktop-1920-x-631-300
   ×99.jpg 300w, Desktop-1920-x-631-768×252.jpg 768w, etc”>
 * When this media query is true, it loads the right image from source, but does
   not lazy load it.
    When this media query is false, lazysizes loads the right 
   image from the img section below the source.
 * According to lazysizes: The picture element is also supported. Simply add the
   lazyload class to the img and use **data-srcset on your source** and the img 
   element.
    The img element is fine with data-sizes and data-srcset, the “data”
   is not being added to the source.
 * Thanks for your help!

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/image-not-lazyloading/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/image-not-lazyloading/page/2/?output_format=md)

 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10411588)
 * Hey,
 * yes, the plugin does not support modifying markup of picture elements currently.
   I added it to my list for a future release, but cannot say when I will have time
   to implement it. I will let you know if it is ready for testing 🙂
 * Best,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10411843)
 * Thanks for the quick response Florian 🙂
 * Any suggestions of code solutions that might take care of this for me, that I
   can implement along with the plugin, perhaps something I can put into functions.
   php?
 * Or is it way more complicated than that / really needs to be integrated into 
   the overall plugin functionality php?
 * I tried to think of different solutions before opening this ticket, like using
   jquery to change attribute name to data-, but then when I looked at your plugin
   code, figured I’d follow up with you for better solutions…
 * Thanks again 🙂
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10411966)
 * Hi wprox,
 * I think it is not that difficult to get it working, maybe I can implement it 
   in the next few days.
 * If you would like to help, the following would be the way to go, I think: add
   a check for the `source` element like it is done for `img` ([https://github.com/florianbrinkmann/lazy-loading-responsive-images/blob/master/src/Plugin.php#L196](https://github.com/florianbrinkmann/lazy-loading-responsive-images/blob/master/src/Plugin.php#L196))
   and create a new method for modifying its markup, similar to `modify_img_markup`.
   There also needs to be a check for the `srcset` attribute, because the `source`
   element could also be part of `audio` or `video` elements.
 * Best,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10412229)
 * Thanks Florian. Unfortunately, I’m not advanced enough in php / js currently 
   to make those changes with a decent understanding of what I’m doing… Hope to 
   check out some tutorials at some point to have a better sense of what is happening
   in code like this…
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10413365)
 * Okay, no problem 🙂 I will try to implement it this week and will let you know
   when there is something to test, would be great if you could give it a try then
   before the release on WordPress.org 🙂
 * Best,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10416044)
 * Sounds great Florian, thank you!
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10416051)
 * Hi wprox,
 * would you give the beta from GitHub a try ([https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.1](https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.1)–
   the lazy-loading-responsive-images.zip)?
 * That would be cool.
 * Thanks in advance,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10420048)
 * Thank you Florian 🙂
 * The data- is appended nicely in source, but couple of questions:
 * 1. I am getting a <noscript> element PER SOURCE (I have 3 source elements) + 
   another with img. Is it supposed to be like that (4 <noscript> elements) OR just
   1 <noscript> element for the entire picture element? When I block js, the img
   <noscript> is the one that is highlighted in chrome dev tools, NOT the source
   <noscript> element with the matching media query.
 * 2. In the img element: in addition to my sizes attribute, it adds a matching 
   data-sizes attribute. I never use data-sizes=”auto”. According to lazysizes github:
   
   lazySizesConfig.sizesAttr (default: “data-sizes”): The attribute, which should
   be transformed to sizes. Makes almost **only makes sense with the value “auto”.
   Otherwise the sizes attribute should be used directly.** I also have a sizes 
   attribute in one of the sources, but the plugin does NOT add a data-sizes in 
   there.
 * Thanks again!
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10422106)
 * Hey [@wprox](https://wordpress.org/support/users/wprox/),
 * thanks for testing!
 * Mh, yes, wrapping the whole `picture` into a `noscript` seems to be the correct
   way, your are right. I will adjust this.
 * To your second point: Oh, did not read this in the docs, thanks for the hint!
   I will adjust this, so that the plugin checks if there is another value than `
   auto` in `sizes` and then skip the modification of the attribute to `data-sizes`.
   And also add this to the method for the `source` element. Maybe I will not be
   able to release a new version for testing with all that this week – the thing
   with wrapping the whole `picture` might be a little trickier 🙂
 * Thanks,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10422141)
 * Thank you Florian 🙂
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10447749)
 * Hey [@wprox](https://wordpress.org/support/users/wprox/),
 * could you give the second beta version a try ([https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.2](https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.2))?
 * Thanks in advance,
    Florian
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10449565)
 * Thanks Florian!
 * The data-sizes is gone, which is good.
 * The noscript wrapping around the entire picture element is causing 2 images from
   the picture element to get downloaded: the first source srcset and the img src.
   It would be nice if the picture element logic could still be used in noscript,
   but I’m not sure how to do that…
 * Take a look at any of the images on this page, they are using lazysizes:
    [https://images.guide/#jpeg-compression-modes](https://images.guide/#jpeg-compression-modes)
 * They just wrap the noscript tag around the img in the picture element…
 * Thanks!
 *  Plugin Author [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * (@florianbrinkmann)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10450138)
 * Oh yes, you are right, it downloads two images, thanks for noticing that!
 * But if I only wrap the `img` in a `noscript`, if JavaScript is disabled I just
   have the image from the `img` element as a fallback, not the ones defined in 
   the `source` elements (because of the `data-srcset` attributes)…
 * I will look into it and try to find a fix!
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10450814)
 * I do have srcset inside my img tag, but like you said, it does not include the
   images defined in the source elements above.
 * Not sure if this is helpful, but looks like he was trying to do something similar:
   
   [https://stackoverflow.com/questions/29145354/dry-lazy-loaded-images-with-noscript-fallback](https://stackoverflow.com/questions/29145354/dry-lazy-loaded-images-with-noscript-fallback)
 * Thanks!
 *  Thread Starter [wprox](https://wordpress.org/support/users/wprox/)
 * (@wprox)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/#post-10453139)
 * Hi Florian,
 * With the second beta version that I downloaded, I just noticed that WITH js enabled,
   it automatically downloads 2 images: Index first downloads the src file inside
   img (not the matching width srcset file inside img), and then lazysizes downloads
   the correct source image that it should actually download.
 * I’m assuming once you fix the code, it should fix this…

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/image-not-lazyloading/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/image-not-lazyloading/page/2/?output_format=md)

The topic ‘Image not lazyloading’ is closed to new replies.

 * ![](https://ps.w.org/lazy-loading-responsive-images/assets/icon-256x256.png?rev
   =1305473)
 * [Lazy Loader](https://wordpress.org/plugins/lazy-loading-responsive-images/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/lazy-loading-responsive-images/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/lazy-loading-responsive-images/)
 * [Active Topics](https://wordpress.org/support/plugin/lazy-loading-responsive-images/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/lazy-loading-responsive-images/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/lazy-loading-responsive-images/reviews/)

 * 18 replies
 * 2 participants
 * Last reply from: [Florian Brinkmann](https://wordpress.org/support/users/florianbrinkmann/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/image-not-lazyloading/page/2/#post-10466336)
 * Status: resolved