Mastering Web Image Optimization: Formats, Compression, and Responsive Techniques

Image optimization is a crucial part of front‑end performance, complementing progressive enhancement and graceful degradation.

Understanding the basics, images are either vector graphics (defined by lines, points, polygons) or raster graphics (bitmap pixels). Vector formats are ideal for simple shapes and scale without loss, while photographs require raster formats such as GIF, PNG, JPEG, JPEG‑XR, WebP, BPG.

WebP is widely supported on Android 4+, Chrome 10+, Opera 11+, offering up to 65 % size reduction compared with JPEG, though encoding/decoding is slower. For broader compatibility, JPEG and PNG remain common choices, typically compressed with tools like TinyPNG, ImageOptim, or server‑side Gzip.

Compression can be lossless (retaining all pixel data) or lossy (discarding some data to reduce size).

Optimization Strategies

Embed small images (<2 KB) as Base64‑encoded Data URIs to eliminate HTTP requests.

Combine multiple images into a CSS sprite.

Replace simple graphics with CSS, SVG, Canvas, or icon fonts.

Apply lazy loading.

Serve images through a CDN.

Responsive Images

Use srcset and sizes to let the browser choose the appropriate image based on viewport width and device pixel ratio.

<img srcset="360.jpg 360w, 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w"
     sizes="(max-width: 360px) 100vw,
            (max-width: 768px) 90vw,
            (max-width: 1980px) 80vw"
     src="360.jpg" alt="">

When the viewport is ≤360 px the image occupies 100 vw; >768 px it uses 90 vw, etc. The src attribute acts as a fallback for browsers that do not support srcset / sizes.

For finer control, the <picture> element can specify different sources for specific media queries:

<picture>
  <source media="(min-width: 960px)" srcset="960.jpg">
  <source media="(min-width: 768px)" srcset="768.jpg">
  <img src="360.jpg" alt="">
</picture>

Loading and Display Strategies

Combine lazy loading with progressive JPEGs or placeholder techniques: create a low‑resolution blurred thumbnail, reserve space with a padding‑bottom trick to avoid layout shift, then replace it with the high‑quality image once it enters the viewport.

Complex implementations (e.g., Medium) draw the thumbnail onto a canvas, apply a blur filter, then load the full‑resolution image and hide the canvas after loading.

References include articles on image optimization, WebP, progressive JPEG, and responsive image techniques.