Back to glossary

Image Optimization

The practice of reducing the file size of images as much as possible without sacrificing quality to improve page load speed.

Categoryweb

Overview

Images often account for the majority of a web page's total weight. Image optimization is a critical performance technique that involves choosing the right formats, dimensions, and compression levels.

Key Techniques

  • Format Selection: Using modern formats like WebP or AVIF instead of JPEG or PNG.
  • Compression: Using lossy or lossless algorithms to remove unnecessary data.
  • Responsive Images: Serving different image sizes based on the user's screen resolution using srcset and <picture>.
  • Lazy Loading: Deferring the loading of off-screen images.

Tools

Common tools for image optimization include Sharp (Node.js), ImageMagick, and cloud services like Cloudinary or Imgix.

Related Terms

WebPAVIFWeb Performance Optimization