Use webp over png and lazy load images #314
Conversation
| ]; | ||
|
|
||
| const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />; | ||
| const NavLogo = () => <img className='h-8 w-8' src={logo} decoding='async' alt='Your SaaS App' />; |
There was a problem hiding this comment.
Interesting, article here claims there isn't much improvement normally https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding , which suggests one should normally not bother with setting this value.
How have you decided it is worth setting it?
There was a problem hiding this comment.
Yeah, you're right, after reading up on it it seems like it's more likely designed for swapping out a thumbnail with a large image once it's done loading, something we're not doing here.
| <figcaption className='mt-6 text-base text-white'> | ||
| <a href={testimonial.socialUrl} className='flex items-center gap-x-2'> | ||
| <img src={testimonial.avatarSrc} className='h-12 w-12 rounded-full' /> | ||
| <img src={testimonial.avatarSrc} loading='lazy' decoding='async' className='h-12 w-12 rounded-full' /> |
There was a problem hiding this comment.
I did a quick read about loading here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading .
It says that in Firefox it has to go before src to take effect. Silly requirement, but maybe let's make sure that happens? Maybe React does it for us, but likely it doesn't, and better not to rely on it.
Also, I am guessing we shouldn't be setting loading='lazy' for every image we have? Or should we? What is the strategy about it, how do we make decision what is loaded lazily and what eagerly? I read that one con of lazy loading is that things around image might need to move around if height and width are not known upfront.
There was a problem hiding this comment.
I thought that for everything below the main fold, lazy should be fine. I also tested it on the main hero image, which is kind of below the fold, and I don't see any noticeable difference.
Concerning the other properties, that sounds good and I will move the loading and decoding properties to the start.
2 participants
Description
Some minor image performance boosts
Contributor Checklist