One rule for optimizing images on the web

A good rule of thumb for optimizing images: Lazy load everything that is below the fold, eagerly load everything above the fold, with fetch priority set to high. Serve all images in webp/avif format.

Although native lazy loading is getting traction right now. I would not recommend using it, since it is only lazy-loading if the user's network is slow, which is unreliable and can hurt your website's bandwidth usage. Read more this new feature here https://addyosmani.com/blog/lazy-loading/

AVIF images are ~20% smaller than WebP ones, but they also take 20% longer to generate. AVIF is supported only by Chrome & Firefox. Use AVIF if you generate images in build time and WebP if in runtime.

WebP is well supported in all major browsers, except older versions of Safari, so remember to always have a fallback for JPEGs

There are at least two ways to serve optimized images in HTML:

• Picture element
• Img element

Both work very similarly, but the picture element allows to declare fallback whilst img element does not.

If you're using Next.js I highly recommend checking out next/image component. It has great defaults, adapts best practices, and works great in small & big scale projects. https://nextjs.org/docs/basic-features/image-optimization

Comments

[Alex Lohr]

A few things that can take image optimizations to the next level:

• JPEGs become often smaller if you blur insignificant details; the same is true for other lossy formats, but less significant
• hand-optimizing SVGs (reusing its own parts) is extremely powerful; use for resources that are reused often, e.g. logos
• SVG is often smaller by a magnitude for things like diagrams and mind-maps
• AVIF and WEBp have rather large headers, so smaller images might be even smaller as GIF or PNG
• An image can be different files superimposed over another.