Using transparent 1x1 pixel src placeholder

[gerdneuman]

I did not find any docs on adding a transparent 1x1 pixel placeholder which I found strange. Wouldn't make sense to have the src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" at the beginning?

Like proposed here: https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps

Also lazy-load-rocket which is based on lazyload js plugin does this (though they still use a white instead of a transparent pixel):
wp-media/rocket-lazy-load#56

I think the README should mention this or give best practices. A transparent GIF pixel placeholder would play nicely with Progressive JPEG in my opinion and I think something like https://github.com/verlok/lazyload#show-the-images-while-they-load would not be needed. Because first transparent GIF would be shown which is then replaced by progressive jpeg or am I wrong?

[verlok]

Hi @gerdneuman,
thank you for opening this issue, I see you are very prepared on this matter.

The reason I’m not advising to use a transparent pixel as a placeholder in the readme is that, if you do that, the browser only shows the lazily loaded image to the users when they are COMPLETELY loaded; and if you care about performance, including perceived performance - which is measured by google through the SpeedIndex - you want the images to be shown as soon as they start loading, especially if they are in the Progressive JPEG format, but also in their baseline version.

Is that clearer now?

[gerdneuman]

@verlok thanks for answereing :)

I totally agree with you that for perceived performance, which is important, images should be shown asap.

The reason I’m not advising to use a transparent pixel as a placeholder in the readme is that, if you do that, the browser only shows the lazily loaded image to the users when they are COMPLETELY loaded

How is this is the case? I thought that LazyLoad would replace the src (being the transparent gif) with the real src (within the threshold). And then the browser would do all the rest, that is, start fetching the jpeg. Hence, I thought that progressive jpeg would be shown as soon as the browser starts fetching and not when loading has finished.

What you say sounds like: browser fetches image and only then (after fetch is completed) the src is replaced by LazyLoad.

So I am confused :)

Other than that, might it be a solution using something like to show the real image immediatly as soon as loading begins:

/* transparent gif placeholder */
img[data-lazy-src] {
  opacity: 0;
}

/* real image */
img.lazyloading,
img.lazyloaded {
  opacity: 1;
}

[gerdneuman]

Hey @verlok

still confused on how it works, but maybe you could then add a recommendation to https://github.com/verlok/lazyload#show-the-images-while-they-load that transparent placeholder GIFs should not be used. Well, that LazyLoad does not recommend this because of xyz.

Maybe I am looking at it from the wrong side because rocket-lazyload (based on your LazyLoad) recommends using a placeholder GIF. And so does the other lazyloading js library.

If there was a guidline for this by LazyLoad then at least rocket-lazyload (which I use in the end) could be updated. Right now I feel like optimizing something (using placeholder gif) which might (still not understanding) have the inverse effect :)

[verlok]

Hey,
yes, I'm sure of what I told you. I tested it a while ago, but it's like I told you. To recap:

• If you don't put anything in the src, when LazyLoad copies the data-src in the src, the image is shown while loading by the browser
• If you put something in the src, when LazyLoad copies the data-src in the src, the browser waits until the new image is loaded, then replaces the image

Is that any clearer now?

[verlok]

Hi again @gerdneuman, about:

If there was a guidline for this by LazyLoad then at least rocket-lazyload (which I use in the end) could be updated.

this is a social coding community, why don't you fork my repo, do the change you would like to see in the README.md file, then open a pull request to integrate the change in this repo?

[gerdneuman]

@verlok Much clearer now, thanks so much :)

I added #214. Hope what I wrote in there is correct. These were my concern and I think that I was wrong and it would be helpful to other users as well.

[verlok]

As a proof of what I stated in my previous comment, I've created this code on CodePen: LazyLoad, progressive JPG and placeholder images. You can view the difference setting a slower connection speed (I used "fast 3G") and disabling the cache.

I also recorded a video of the result, which I published on Youtube as LazyLoad and placeholder gif loading time - a comparison.

[gerdneuman]

Thanks so much on clarifying this. Today I learnt something :) FWIW, as a Firefox user I tested using the Firefox network throttle feature and for slower connection speeds like "Regular 2G" the perceived performance is way better without a placeholder. :)