Are placeholder really recommended?

[gerdneuman]

Using WordPress and it's plugins I came across lazysizes and LazyLoad. LazyLoad makes a strong point about not using GIF placeholders: https://github.com/verlok/lazyload#do-not-use-placeholder-images

I had a longer chat about this on verlok/vanilla-lazyload#212 with the LazyLoad author. In the end I used a wordpress plugin based on it.

Anyway, this is just a heads up that I think the recommendations at https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps and other places in the README of lazysizes about placeholders might not be correct. I also think that perceived performance is better without using src and srcset althogether at load time.

[aFarkas]

This is a complex question.

What I talk about specifying image dimensions to minimize reflow and avoiding speed jumps has nothing to do with it. And I don't see anything wrong here. I would assume that @verlok thinks the same here. Actually this also needed by

About your question:

First let me be here absolutely clear. lazysizes let's you write the markup you want and transforms it for you. If you want progressive image loading (and your images are saved as progressive) then you can do this with lazysizes.

Here are some simple answers:

1. Using src attribute is mandatory, if you want to have valid HTML.
2. There is a Chrome bug in case you use the picture element, if you avoid src, srcset, alt (or have an empty alt attribute).

About the cons of progressive image loading:

One of the makers of webpagetest (who have worked on the speedindex algo) stated he really likes progressive image loading because the user sees a less good quality of the image some time earlier. But he made clear that this comes at a cost: Especially on mobile because each progressive layer has to be decoded and then rendered separately it takes a lot of time away from the normal page rendering as also in case of lazyload while the user scrolls resulting in possible more jank.

The other more important thing was, that a psycho study showed, that progressive images might not seen by a human as "oh nice I already see a little bit something", but more a "what irritating image switch was this". So while a computer might say the initial render is more complete a human eye doesn't see it this way.

At the end it is really hard to say what should be done. I think the best way is to create a low quality image placeholder and create a smooth transition between this and the other image. This way you have a fast initial, but incomplete rendering of something (like with old school progressive image) and a smooth, not irritating transition to the hight quality image.