Aspect-ratio support by width and height in source tags

[SoftboiledStudios]

Hi Guys,

I was wondering if there is an option to add width and height attributes to the source tags, this would greatly improve the plugin to prevent content-layout shift on lazy loaded images. With those attributes, the image tag will know with aspect ratio to follow before the image gets loaded in, so scrolltriggers and CLS won't be affected by it.

Greets!

[piotrpog]

@SoftboiledStudios Nice idea. There will be new version of plugin released soon and i will add this functionality as optional.

[CreateSean]

Awesome - @piotrpog could you bump this thread when it gets released. This way I can update my boilerplate to use this new option/code.

[SoftboiledStudios]

Awesome!

[SoftboiledStudios]

@piotrpog Do you have any idea when this new release would come? :) thanks in advance!

[piotrpog]

@SoftboiledStudios hey, i think it should be this week. i will release smaller update with just this functionality.

[SoftboiledStudios]

@piotrpog any news on this? :)

[piotrpog]

@SoftboiledStudios @CreateSean Hi, sorry for the delay - just released new version of plugin including this functionality. To enable it, you need to set useWidthHeightAttributes to true in plugin settings.

[SoftboiledStudios]

@piotrpog Awesome! I'll try it out tomorrow and will let you know!

[CreateSean]

@piotrpog works perfectly, thank you. Have update my boilerplate

Noticed that the docs don't reference this anywhere so you probably need to update that as well.

[piotrpog]

@SoftboiledStudios @CreateSean Little announcement, just realized that plugin does not take into account fit transform mode and also calculating width/height when one of these values is missing. Should be fied through weekend. Will update docs then too :)

[SoftboiledStudios]

@piotrpog hey man! Thanks already for this great update! I do have some small extra remarks:

• If i'm using only width in my transfroms (so height is auto), the width and height values are not set on my images, i need this for example in a masonry gallery.
• You should also consider adding a width and height to the image tag itself (you can just take the biggest width and height). Otherwise google pagespeed gives a penalty on this. The aspect-ratio and image attributes will be set by the source anyway, so it doesn't matter, there will be just one red flag less in page speed reports ;)

Already great job on this update! If you could fix the auto heights, that would be awesome!

Kind regards,

Geoffrey

[piotrpog]

@SoftboiledStudios Hey, sorry for the delay. Had lot of going on this month. Imag rtoolbox now adds width and height to image tag. It also adds width and height attrs only whne there is only width/height present in the transform. @CreateSean Docs updated ;)

[SoftboiledStudios]

@piotrpog Nice man! Big thanks for this support!

[piotrpog]

@SoftboiledStudios @CreateSean Small notification - i recently released big uodate to the plugin,w hich also fixes some bugs with this functionality, like errors when svg image is used.