
Lazy load responsive images - ivopetkov
https://github.com/ivopetkov/responsively-lazy
======
cyberpanther
Lazy loading is a waste of time in my opinion. Yes it can save bandwidth but
it actually creates an awful user experience.

If you have a bunch of images you don't want to wait to load them until in
view especially on a slow connection. If you lazy load the images then that
means every time the user scrolls they have to wait for an image. No one is
going to wait for your image to load, so they will scroll on. You then cause a
bottleneck in your javascript because the user is scrolling and you are using
JS to download images which is not optimal.

The experience you want is to load the first image and then load then next
image before the user gets to it so that it is ready when the user scrolls.
Our browsers do a great job of this already. Don't reinvent the wheel. Our
browsers have been optimized to download images the right way. And if you want
to save bandwidth then use responsive images and let the browser determine the
best size to download.

I've implemented lazy load on mobile and learned this first hand. I thought I
needed lazy load, but to my surprise, the browser actually knows how to load
images the right way. My app actually had less jank and loaded images faster
when I left the images up to the browser.

Stop over engineering image loading please :-)

~~~
andy_ppp
This is not what the article or the implementation does at all. This
article/repo is arguably misnamed so I understand your confusion.

The technique here is an excellent way to load only the right size images for
different devices.

It works in about 65% of browsers and has excellent fallback characteristics
in others.

Read the bottom of the blogpost here for details:

[http://ivopetkov.com/b/lazy-load-responsive-
images/](http://ivopetkov.com/b/lazy-load-responsive-images/)

P.S. I'm totally with you on pointless lazy-loading - the browser should
figure out what is sensible to load based on available bandwidth and where I
have scrolled to...

~~~
voyou
From that link: "Lazy loading is a technique that defers image loading until
it becomes visible on the screen."

Isn't this exactly the "pointless lazy-loading" that you and the OP are
complaining about? If what you want is to "load only the right size images for
different devices," and you're targeting browsers that support srcset, you can
just use srcset.

~~~
andy_ppp
Well I think this looks pretty good, the only issue is modern browsers without
Javascript. It provides a lot of fallbacks that srcset does not on it's own.

No, it's not pointless; I think it's actually quite useful if you rely on
Javascript, which some say is the worst thing in the world... but after using
React I've been persuaded for complex interfaces it can provide clear
advantages over progressive enhancement.

~~~
ad-hominem
> modern browsers without Javascript

Sorry, what browsers? There is no such thing. Even virtually everyone's phone
runs javascript.

The only way you are running a modern browser without JS is if you've (as a
power-user) turned it off. In which case you need to turn it back on when you
encounter weirdness on a website that expects that your browser behaves like a
normal modern browser. If you run your browser without JS (like I do), then
you encounter this situation frequently and it's part of the tradeoff of
controlling exactly what code runs during your web experience.

------
toddmorey
This is the clever bit:

\- The data:image in the srcset attribute shows transparent image and prevents
loading the image in the src attribute in modern browsers

\- The image in the src is attribute is used if the browser does not support
the srcset attribute or when the page is scanned by social networks and read-
it-later tools.

~~~
ivopetkov
Thank you.

------
callahad
If you primarily care more about responsive images than about lazy loading,
the Picturefill polyfill
([https://github.com/scottjehl/picturefill](https://github.com/scottjehl/picturefill))
is a great option.

It's a strict polyfill of the picture / srcset standards, which already have
broad, native browser support:
[http://caniuse.com/#search=picture|srcset](http://caniuse.com/#search=picture|srcset)

------
joshribakoff
> This is the source of the best lazy loading implementation available.

How can this claim to be the "best" when it's browser support is barely over
50%? Here's the one that I feel is "best" after trying many, it supports IE7,
which is effectively 100% browser support as far as I'm concerned.

[https://github.com/dinbror/blazy](https://github.com/dinbror/blazy)

~~~
ivopetkov
The browser support is currently 62% and rising, and a high-quality image can
be shown on "not modern" browsers. So in terms of showing quality images the
best possible way the support is almost 100% (we already discussed the case
with the disabled JavaScript).

------
hakanito
Why do you have to specify the padding-bottom? Is it the image ratio (as 16:9
= 56.25%)? In that case, it would practically render the plugin useless for
sites with many images with unknown size.

~~~
ivopetkov
You can read about the padding-bottom technique at
[http://alistapart.com/article/creating-intrinsic-ratios-
for-...](http://alistapart.com/article/creating-intrinsic-ratios-for-video) It
helps you preserve space for the image and prevents reflowing. If you have
many images with unknown sizes there will be massive reflowing and the library
can be tweaked to support that too if you really want it.

~~~
pqdbr
This would be awesome.

At the same time, one could use something like ImageMagick to find out the
dimensions of the picture and set this ratio programatically
([http://stackoverflow.com/questions/16266933/rmagick-how-
do-i...](http://stackoverflow.com/questions/16266933/rmagick-how-do-i-find-
out-the-pixel-dimension-of-an-image))

~~~
ivopetkov
Yes, server languages can do this job easily.

------
exodust
I've just noticed this demo exposes a Firefox bug with image scaling that I'm
quite surprised to see. Not related to lazy loading, but may be of interest.

Bug: When the same image is found elsewhere on the page, Firefox doesn't
bother using smooth interpolation when downscaling.

[Edit - workaround is to avoid cache, as in cat.jpg?01 ; cat.jpg?02 ]

Look at the cat's whiskers, they look rough in the smallest image. They should
look smooth. So using Firebug I removed all other images on the page except
the first smallest version. Hey presto, the whiskers are suddenly smooth.

[http://ivopetkov.github.io/responsivelyLazy/](http://ivopetkov.github.io/responsivelyLazy/)

Of course, IE is a lot worse - its scaling is rough all the time regardless.

------
jp_sc
A polyfill for srcset aleady exist:
[http://scottjehl.github.io/picturefill/](http://scottjehl.github.io/picturefill/)

------
gondo
it would be worth to mention in the README that this is only for browsers what
support srcset attribute

~~~
ivopetkov
Thanks.

------
rattler
Another alternative:
[https://github.com/Kyoushu/Pufferfish.js](https://github.com/Kyoushu/Pufferfish.js)

~~~
ivopetkov
A big drawback of Pufferfish.js is that images are not indexable by Google.
That's not the case with ResponsivelyLazy.js. It works great in search
engines, social networks and read-it-later tools.

------
Tepix
What's disappointing is that with JavaScript disabled, it doesn't load images
at all.

~~~
callum85
Are you sure about this? Doesn't look likely from the code sample.

~~~
ivopetkov
If the browser is "modern" the blank image in the srcset will be loaded, not
the image. And then nobody will load the correct image version. This is the
problem i think.

------
codedokode
I think the problem of lazy loading should be solved by browser vendors (maybe
adding some new attribute on img). And it's sad that it doesn't work without
JS. Cannot we fix this by using noscript tag?

~~~
ivopetkov
It will be great if browsers do this. And yes, the noscript tag is a valid
solution.

------
hussong
I just tried this on an iPhone, using Safari and Chrome, and it's always
loading the 2500px images. Am I missing something?

~~~
ivopetkov
Just tested it on latest iOS and worked like a charm. What device and iOS
version you got?

~~~
hussong
iOS 7.something, I've come to realize that browsers there don't support srcset
yet.

------
edpichler
I changed the window size and it's always the same image (same px). Is it
right?

~~~
ivopetkov
If you are using a browser that does not support the srcset attribute, the
default image will be loaded, and no magic will happen. Can you please tell me
what your device, browser and window width are.

~~~
edpichler
Chrome in a large screen.

------
Moter8
[https://imgrush.com/LDCji9m6iqcm.mp4](https://imgrush.com/LDCji9m6iqcm.mp4)
\-- Demo page loading for me. Not good at all, nothing happens until it's
completely loaded.

~~~
ivopetkov
This is the code for the library: <script async
src="responsivelyLazy.min.js"></script> No images are visible until the
library file loads. If you want you can inline the js code.

------
peterchon
You should really include a non-zipped js as well.

~~~
ivopetkov
Maybe you mean non-minified. You can find it at
[https://github.com/ivopetkov/responsively-
lazy/](https://github.com/ivopetkov/responsively-lazy/)

------
petulla
Needs to support multiple image types (webp) to really be a better library.

~~~
ivopetkov
There is a WebP support now. Thank you.

------
amelius
No description of how it works?

~~~
beyti
It is specified, read carefully maybe? link: [http://ivopetkov.com/b/lazy-
load-responsive-images/](http://ivopetkov.com/b/lazy-load-responsive-images/)

