Read on Twitter
How to load images the right way:
A mini-thread
A mini-thread
Always set width and height on the img tag.
Why?
You might have noticed jumps in pages when loading. It is because the height of the image is not set explicitly and it affects UX / SEO.
Google has also started measuring these shifts in a metric named Cumulative Layout Shift.
Why?
You might have noticed jumps in pages when loading. It is because the height of the image is not set explicitly and it affects UX / SEO.
Google has also started measuring these shifts in a metric named Cumulative Layout Shift.
How to fit the image in a container?
We can use the max-width : 100% and height : auto to solve this. Easy right.
But height : auto takes precedence over the height attribute set in HTML and again leads to CLS.
How to solve this?
We can use the max-width : 100% and height : auto to solve this. Easy right.
But height : auto takes precedence over the height attribute set in HTML and again leads to CLS.
How to solve this?
The Padding bottom hack:
And responsive images?
No worries we can use the srcset attribute to let the browser do the math and get the right image according to the viewport width.
No worries we can use the srcset attribute to let the browser do the math and get the right image according to the viewport width.
And art direction?
When we want to show a wide image on desktop and a cropped square version on mobile.
Picture element has got you covered for art direction.
When we want to show a wide image on desktop and a cropped square version on mobile.
Picture element has got you covered for art direction.
I'd like to know how do you load images?
