Images are typically the largest contributor to page weight and load time. This guide covers optimizing them at the server/build level for meaningfully faster page loads.
Why Image Optimization Matters
Unoptimized images can be many times larger than necessary without any visible quality difference — directly translating to slower page loads, especially on mobile connections.
Choosing the Right Format
| Format | Best For |
|---|---|
| WebP | General purpose, excellent compression, wide browser support |
| AVIF | Even better compression than WebP, growing but not universal support |
| JPEG | Photos, fallback for older browsers |
| PNG | Images requiring transparency, screenshots with text/UI |
| SVG | Icons, logos, and other vector graphics |
Converting Images to WebP (Command Line)
sudo apt install webp -y
cwebp -q 80 input.jpg -o output.webpBatch Converting a Directory
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; doneConverting to AVIF
sudo apt install libavif-bin -y
avifenc --min 20 --max 40 input.jpg output.avifServing Modern Formats with Fallback (Nginx + HTML)
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>The browser automatically selects the first supported format, falling back to JPEG for older browsers — see How to Serve WebP/AVIF Images with Fallbacks in Nginx for a server-side automatic approach.
Resizing Images to Appropriate Dimensions
Never serve a 4000px-wide image when it displays at 400px — resize to the actual maximum display size:
sudo apt install imagemagick -y
convert input.jpg -resize 800x800\> output.jpg\> only resizes if the image is larger than the target, never upscales.
Generating Responsive Image Sets
for size in 400 800 1200 1600; do
convert input.jpg -resize ${size}x output-${size}w.jpg
done<img
srcset="output-400w.jpg 400w, output-800w.jpg 800w, output-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="output-800w.jpg"
alt="Description"
>Lets the browser choose the most appropriately sized image for the visitor's actual screen/viewport.
Lazy Loading Below-the-Fold Images
<img src="image.jpg" loading="lazy" alt="Description">Built into modern browsers — defers loading images not yet visible in the viewport, improving initial page load time.
Automating Optimization in a Build Pipeline
Integrate image optimization into your CI/CD build step (via a build-tool plugin or a dedicated image processing library) so every deployment automatically produces optimized images, rather than relying on manual conversion for every new asset.
Compressing Without Perceptible Quality Loss
Quality settings around 75-85 for WebP/JPEG typically produce minimal visible difference while significantly reducing file size — test specific images at different quality levels to find the right balance for your content.
Common Errors
Images look blurry after optimization — quality setting was too aggressive; increase it, or verify you're not resizing below the actual required display dimensions.
Best Practices
- Always resize to actual display dimensions, never rely on CSS to shrink an oversized image
- Serve modern formats (WebP/AVIF) with appropriate fallbacks
- Lazy-load images below the fold
Continue Reading
- How to Serve WebP/AVIF Images with Fallbacks in Nginx
- How to Perform a Complete Website Speed Audit
- How to Set Up a CDN in Front of Your VPS
Browse more articles in Static Site Hosting & Frontend Deployment.
