Choose the right strategy for uploading images

Images play a significant role on the web, and they can be used in various ways to enhance content, improve user experience, and boost SEO.

So how to add it on your site ?

<img src="photo.jpeg" alt="my photo" />        

And everyone used it in general. Who cares ? But we have Largest Contentful Paint (LCP Metric), which recommends using different formats/smaller sizes etc

Problem: What if we want to add responsive images?

Solution: use srcset attribute for responsive images

<img src="photo.jpg" srcset="photo-400w.jpg 400w, photo-800w.jpg 800w" sizes="(max-width: 600px) 400px, 800px" alt="Responsive photo">        

How to do? For example

https://www.responsivebreakpoints.com/

Problem: what if we want to add optimized images for different browsers?

Solution: using <picture> tag with srcset attribute

How to do:

Here we have a lot of tools that allow you to compress images for example

https://squoosh.app/

https://squish.addy.ie/

Problem: Largest Contentful Paint metric

Here is two examples from web.dev and you can see the problem. Image shifts other content and LCP is triggered when it fully loads

Solution: Use Progressive JPEG for hero images

I would recommend use Progressive JPEG for "Hero" images otherwise avif with a graceful degradation to jpeg/png etc

What is progressive JPEG?

Progressive AVIF?

You also can emulate now progressive AVIF to load superlow AVIF image and load good one and replace when it ends. @JakeArchibald propose it few years ago

Note: If you want to avoid unnecessary Cumulative Layout Shift use aspect-ratio in your CSS. It helps browser reserve a place for your image/video etc

img {
    aspect-ratio:  16 / 9;
}        

Here is a calculator for aspect ratio

Last but not least is a lazy loading strategies

Do not add loading=lazy attribute to frist-screen images. It can affect LCP due to network bandwidth issues

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">        

It also works with a <picture> tag but you have to add it to <img> tag

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="test image" loading="lazy">
</picture>        

Conclusion

Utilize a progressive JPEG for the hero image. Implement the AVIF format to reduce unnecessary network activity, employ graceful degradation for older browsers, and remember to consider lazy loading

I cover some based topics but there are a lot of new techniques such as use Vary, Client Hint headers, Save-data header, lambda functions like CloudFront Image Optimizer etc which i can cover if you are interested. Let me know!