Gary I saw your post on Lazy Loading images. Really with scrolling the large images in RSD that would be a must use add on especially with the large screen images they can get heavy.
First I agree with you on not being able to even add a class to an image in the picture element, you'd think that simple basic would be in RSD?

I looked at https://github.com/aFarkas/lazysizes and was wondering if you tried the lazySizesConfig.lazyClass to maybe hack it for RSD with the addClass to the picture element img?

Anyway I was poking around and found this one which may work better with how RSD is set up now? https://github.com/ivopetkov/responsively-lazy Haven't tried it as yet but it may be an option.

Alter Eagle,
When using lazyload, most techniques start with transparent 1x1 image in the src which is loaded on page load. Once the image is scrolled to just below the fold (300 to 500 px) known as the threshold, the src is switched out with the actual url stored in an attribute usually data-src. The download of the actual image happens then.

If one wants to have indexing of images it is going to defeat some of the payoff of delaying the load as a image will have to be put in the src to begin with. Some lazyloads say to have a small version of low quality if using this method. This may not be an issue though as I believe in some of my previous testing my images were indexed after the were loaded into the src by javascript. I think the spiders do index the such ?

The problem that occurs with the picture tag with lazyload is that there could be multiple sources in the srcset. Each of those sources would have to be changed...the src, and all sources in the srcset group to transparent images, and then also each would have to have their own data-src attribute. This would require heavy editing the html after export in RSD. I am trying to stay away from that.

The really neat thing with the temp image in RSD is that you can add classes and attributes to the img tag of it. This allows you to add the class lazyload and the attribute data-scr where the url link of the image is. I found a bug though with the Temp Image as it seems to be designed for .svg vector images. I have to replace the .svg 1x1 used with a transparent 1x1 gif onload or the possibility of the gray background will show if the lazyload is overtaxed. I do not understand why the background color selector does not function. It does function in the previous Responsive Layout Maker Pro version. I would like to hear more about its intended use as if no users utilize this feature we may ask that it be changed to a simple img element we can use.

Basically the direction I think I am headed with the img is to use the data-src attribute as doing responsive images by breakpoints is somewhat lacking in the features one gains by utilizing the w width descriptors. The w width descriptors do not rely on screen width but by what the actual width of the image being displayed. Bring in the sizes attribute and one can also allow the browser to determine if a larger image should be put in a smaller size to get the retina or hd enhancement. This is a long journey.......and still learning.

In foundation you can't add a class to the temp img, must just be in bootstrap.

The reason I mentioned Responsively Lazy is you add the class like usual in RSD foundation which goes in the responsive-picture div and if you make your first breakpoint image optimized 640px width then go to say a 1200px wide for the mid and above it'll use the srcset to lazy load the smaller image and swap it out on the scroll... at least it looks that way.

I should actually check that out though. It looks like it should work, at least if you use a scroll you should be doing that anyway even without the lazy load. With those large scroll images I've seen the beginners here using multiple ones un-optimized with a larger KB download for each than I use for my entire sites with all the images scripts css and html included.

For the gallery 2 I wrote that one that loads the thumbs so that is the way to handle multiple images or for the modals with the overlay use colorbox or some other lightbox type add in, but the scrolls are a different animal.

I can add a class to the Temp Image Element in Foundation Build 486.

Yes thats right about the smaller image. Mobile up design does allow us to put our first image as the src which will be most likely be below the first breakpoint (640 Foundation). This is the image that will be indexed. I actually think going with another smaller breakpoint of 320 and then using a 640 image below that so that it shows double the size for Retina and HD also. And it still allow for the spiders to index a fairly good quality image. They like 640's....

But you are incorrect on the swap. Onload the html will be searched for all img url and if found it will load the correct size for that media query. Most Browsers are smart enough now to ignore the double download - but no lazy loading is occuring.....as that has to be a switchout triggered.

My workflow is to first use a program to preview and mark good photos (say out of 50). Then I rename with a auto file renamer program. Next I do my sizes with another program. Then I upload to optimizilla and download the zip when complete. Add to RSD resources, export and upload. Then go back and link the url's.

You maybe mean 386 I'm still on 362 didn't do the newest yet, after the last round I wanted to wait a bit in case.

You are probably right on the swap for most lazy loads but as far as I see so far Responsively Lazy works a little different where the srcset is the trigger. I have to check that with veiwing the generated source later today but by the looks of the code Ivo wrote it should, in RSD, use the smallest image (rather than a blank). This one doesn't mess with the src by replacing the value of the src attribute with the value of the data-src attribute so it's also seo friendly. A blank would be more efficient but at least the smallest image switch on the DOM in RSD by the script would be better than the full size for initial loads.

My thinking on the lower 320 breakpoint is I believe iphone and most mobiles now start around 498 and the 640 foundation uses would be okay for landscape so I don't mess with that change. Retina is another hassle thrown into the mix for most sites I don't think the download is worth it since it's a hard enough call on how far to optimize an image now and really the mobile end is more about the download size. I suppose you could use a 320 print px instead of 96 for display on those but I have enough problems dealing with images now LOL?

I go about the image optimizing in a similar way but I do it in my photo/art app. I prefer to use quality progressive and typically go between 50 and 75 but weigh the image to the download size on each image individually. Rarely do I go above 60kb but I also look at the page size and how many images go into that too. A little trick there when you get the larger 1200's sometimes you can get away with using your blur pen on the background detail and focus on the main content that can reduce those sizes drastically without too much being lost. Like you say though the main thing is when using a lot of images on a page is to go to a link from a thumb, it's those nasty full page scrollers and large image sliders that are a bear.

Yeah, I dont understand the difference in the builds...we have way different numbers. I currently have 2379 for RSD and for just Foundation Framer only I have 486 ?

The issue with Ivopetkov is that you cannot add the data-src directly to the img tag. I suppose you could mod his code to search instead for the data-src on the responsive-picture tag. You would also have to make your transparent image for the srcset above the next breakpoint as there is no other way to insert that on the img tag either. Combined with his limitation on adjusting the threshold value, his code waits until the image enters the fold, I gave up.

Lazy sizes claims to do quite a bit of stuff such as working on sliders. I am just in the initial phases of this so in a month or so I should know more. I have not even added in my demo the lower width descriptors like 320w, 640w, 1080w and then the sizes which seems like rocket science and still trying to get a grasp on.

https://css-tricks.com/video-screencast … ve-images/

I was asking myself this morning if the images do index once copied to the src from the data-srcset, why would one not want to lazyload every image below the fold ?

I like the blur suggestion !

I was able to combine Lazysizes and the Ivopetkov method of adding a transparent image to the scrset to block (onload) the download of the scr image that is indexed. Once the scroll reaches the adjustable threshold below the fold Lazysizes inserts on the img the new srcset information held in the data-src on the img tag (which has been copied from the data-seo attribute on the responsive image container). I am using width descriptors in my source set group as my thinking is .....I dont have to think about media queries and different sizes of pictures. I just let the browser decide based on the image size being displayed. I added the option of the data-optimumx plugin also which limits the browser from choosing a larger image if the display resolution calls for hd or retina.

Still have to do a hard edit after export to add the transparent image to a scrset tag as that has to happen before jquery trips or else you will start to download the img src(s) and then have cancels. But for what it does....the replace and add edit is simple enough.

http://gluexp.coffeecup.com/bootstrap/p … cture.html

Twinstream...any way you could give a step-by-step on how you do that? Pretend I know nothing.

Thanks,
MJ

That seems to load pretty good too Gary.
I wonder if you could do a js onload in the head to fire to change the dom before the jquery to get around the hard edit? I think I remember reading something on Stack Overflow on getting around that, but it was a few years ago.

Hello Mark,

I am still in the initial testing of this plugin. I will be happy to share more as things progress.

Here is a demo of lazy loading a container div>'s with background images using Lazy Sizes.

http://gluexp.coffeecup.com/bootstrap/p … yback.html

My goal is to find a way to serve lots of images on a web page to mobile users without having to wait a long time for the page to load. I currently am impressed by the plugin Lazy Sizes but have some reservations still about its responsiveness. It also has to work within the framework Coffeecup provides without too much struggle.