Placeholder options

[stuartcusackie]

Hi,

Sometimes I don't want to use the blurred placeholder, because it can produce quite ugly temporary images, especially for transparent images. So in these cases I set placeholder => false.

However, for lazy loading functionality to work we need a placeholder, so at the moment I'm setting my placeholderSvg template to use a transparent pixel:
<image width="{{ $width }}" height="{{ $height }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

So I can set up my templates to use one or the other but it would be nice to be able to choose the placeholder type per image, e.g. 'placeholder' => 'transparent'.

Thanks!

[ncla]

I ran into this issue of placeholder looking ugly as well with transparent image assets.

However I just want to point out, and I was also under this false impression, that this addon does not provide lazyloading functionality. The placeholder is there for when the sizes attribute has not been calculated yet and the new correctly sized image has not loaded in. It is not for when image is being lazy loaded. If you want lazy loading, you have to add it.

Just wanted to clarify this.

[stuartcusackie]

Just coming back to this problem. My transparent pixel solution is fine but it can cause big Content Layout Shifts, because my transparent pixel is perfectly square and not based on the original image size.

I don't there's any way to generate transparent placeholders with the correct dimensions using a custom solution. So it would be nice if transparent placeholders were built in and you could mix and match the placeholder type per image.

Perhaps the new CSS CLS ratio solution will solve this for custom placeholders.