Lazysizes: Correct image size not shown when using ALT tag

[kay899]

Hi,

when I try to load some dynamical data into alt or title tag, then the image sizes is not shown correctly anymore and the "wrong" image is loading.

<img
    data-widths="[{{$module->imagesizes}}]"
    data-src="{{ url().'/images/'.$item->image->foldername.'/'}}{width}{{'/'.$item->image->filename}}"
    data-sizes="auto"
    class="lazyload"
    alt="{{ $item->image->title }}"
    title="{{ $item->image->title }}"  />

In my example the browser should find an image of 409px width, but the size in sourcecode is 142px instead of 409px and image in size of 209 width is loading instead if 409 width.

When I use alt="test" (without PHP) then it is working.

I use Laravel PHP framework and {{ }} opens and closes PHP.

Hope you could give me a hit, what I could do.

Thanks
kay899

[aFarkas]

The image width has to be computable before the image is loaded. I assume you have width: auto set. How should lazysizes detect the image width then?

An easy way is to set the following CSS: img[data-sizes="auto"] { display: block; width: 100%; }. The best way in case of responsive images is to define the aspect ratio:
https://github.com/aFarkas/lazysizes#specify-dimensions

If you only deal with landscape images and you want to align your image width with your parent element, you can use the following script to modify the calculation (but width: 100% would also do the trick here.).

$(document).on('lazybeforesizes', function(e){
    //use width of parent node instead of the image width itself
    e.detail.width = $(e.target).closest(':not(picture)').innerWidth() || e.detail.width;
});

Please close if this helps.

[kay899]

I think that I didn't explained very well what the problem is.

The Script is working very well to the time I use PHP within the images ALT attribute. When I load dynamic data into the alt attribute within my image tag, then the Script is not finding the correct image width.

Do you have any idea what can cause that problem?

Thanks
kay899

[aFarkas]

@kay899
To be honest. I don't understand the problem. At the end it's only HTML, CSS and JS (not PHP), that is processed by the browser. Can you create a showcase for me?

[catKate]

@aFarkas
Maybe this will help to understand the problem. Open it with Firefox:
http://jsbin.com/pudebavibu/1/edit?html,js,output

Maybe you can fix it?

[aFarkas]

@catKate
The issue in your jsbin is, that FF doesn't render the defined width. You need to additionally also set the display property to either display: inline-block; or display: block;.

This is a not a lazysizes issue, because if you do not set display property explicitly FF will use inline, which does not react to width.

[catKate]

@aFarkas
Thanks for the hint :)

But why is the same img rendered differently when the alt-attribute is empty or not (see jsbin)? Isn't it weird?

[conorhub]

@aFarkas I understand your explanation but I also echo the last question from @catKate . I have been using lazySizes for a long time now without issue (a huge thank you for creating it). One project that I've had running for weeks with lazySizes introduced alt tags to images today. Absolutely no other changes were made, and lazySizes started rendering images using the smallest source I gave it, as it was now describing the wrong sizes attribute.

If I remove the alt tag, everything functions correctly again. The addition of the alt tag in Firefox is causing the calculation of data-sizes: 'auto' to not perform the same as when the alt tag is omitted.

Your suggestion of adding a display property solves the issue as a workaround.

[aFarkas]

@conorhub
If the image has no computable size it often gets a width of 0 in case the same image gets an alt attribute it becomes at least as large to display the alt content.

lazysizes uses the parent width as soon as the width of the image is below the minSize threshold (default: 40).

Your suggestion of adding a display property solves the issue as a workaround.

No, the promise of data-sizes="auto" is and was always that lazysSizes detects the CSS computable image size and renders it for you. Therefore it is not a workaround to use CSS to style image dimensions, it was always a requirement. Please read the documentation it is pretty clear.