In order to help significantly speed up webpages and with responsive designs it would be of huge benefit to add [blue]srcset[/blue] to the img attributes. This will then automatically allow the most efficient image to be served to the client depending on whatever screen size they are using but will always fallback to the original src if required. Another advantage is that new image formats like [red]webp[/red] can easily be added .

For example : <img id="test" src="images/test-2000_giant.jpg" [blue]srcset="
images/test-1000_large.jpg 1000w,
images/test-500_medium.jpg 500w,
images/test-250_small.jpg 250w"
[/blue]>

This can then easily be controlled by CSS so that smaller images are used for different screen sizes... for example: @media screen and (max-width: 700px) { img#test { max-width: 75vw; width: 75vw; }}

John

quote:

---

significantly speed up webpages

---

John, just how "significant" would the pageload speed improvement be here, in actual fact?

Different web designers use different breakpoints, and different div container widths for prodimages, and plugins like Magic Slideshow which make it possible to add Title and Caption code to the image presentation.

I can foresee various potential issues arising in modifying the existing ECT Image Manager code, which currently works flawlessly, in order to implement your suggestion for an undefined pageload speed improvement.

Gary

Gary,

It is purely data driven for each user depending on their actual images, the number of images sizes to use and the choice of sizes to use in the break points. The significance will be far greater for mobile users compared to desktop users... A quicklook using speedtest from google saw up to a 4 times improvement on some of our webpages...

It seems very bizarre to ask for facts then argue do nothing based on your own hypothetical foreseen potential issues. WTF

John

On the CSS-TRICKS website there is an extremely detailed article discussing the "srcset" attribute titled: A Guide to the Responsive Images Syntax in HTML >>

This addresses my original question: What performance gain in pageload speed will be achieved if all this additional HTML code was actually implemented?

And furthermore, actually how might the suggestion be implemented; how might all this more complex code be automated ?

> CDN Content Delivery Networks already offer this: Watch video >>
> There is a Lazy Loader for Images script on GitHub, but that appears to have numerous "Issues". (The WTF concern I mentioned above.)
> There are other resources listed in the article.

The Reader Comments at the bottom of the css-tricks article are also interesting, especially from the Author, Chris Coyier:

quote:

---

I try to make the point many times in the article that automation is vitally important here. I would never advocate that you author this by hand every time. Personally, I hardly ever do that. I’m always looking for ways to abstract and automate it.

---

Right-click any image in the the article and "Inspect" the source code to discover that the "srcset" attribute is used, apparently implemented using some WordPress plugin (?)

I am not criticizing your suggestion John. It is interesting and has potential. But the "how" looks not so simple. Maybe an image CDN is the ultimate solution for those who want image size and format optimization?

Gary