Images usually account for a large share of a page's total weight. Optimizing them well makes pages faster, saves mobile data, and improves metrics like Core Web Vitals. This guide walks through the steps that actually matter in production, from choosing a format to compression, responsive delivery, and accessibility.
Related reading: SEO-Friendly News Software Guide · What Is Caching? · How to Optimize Audio Files
Why Image Optimization Matters
Oversized images slow a page down. On news sites in particular, the cover image above the fold is often the LCP (Largest Contentful Paint) element, so it largely decides when the page feels "loaded." Optimized images use less bandwidth, keep mobile visitors from waiting, and support the speed signals search engines care about.
News sites publish many pieces a day, and each one usually ships with at least one image. As publishing volume grows, the cost of unoptimized images adds up fast: both the data your visitors download and your own server and traffic bills climb. That is why image optimization is best handled as an automatic part of the publishing pipeline rather than file by file.
- Faster loads and a lower bounce rate.
- Less data usage for mobile visitors.
- Better Core Web Vitals (especially LCP and CLS).
- Lower server and CDN costs.
Choosing the Right Format
The first step in optimization is matching the format to the content. Photos, logos, and graphics with transparency each do best in a different format.
| Format | Best for | Note |
|---|---|---|
| JPEG | Photos, images with smooth color gradients | Widely supported; lossy compression |
| PNG | Transparency and sharp-edged graphics | Lossless; file size grows for photos |
| WebP | Photos and graphics (general purpose) | Usually smaller than JPEG/PNG |
| AVIF | Photos needing high compression | Often better compression than WebP; slower to encode |
| SVG | Logos, icons, vector art | Scales cleanly; text-based and tiny |
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Descriptive text" width="1200" height="800">
</picture>Resizing and Compression
Loading an image far larger than it will ever be displayed is the most common mistake. Placing a 4000-pixel-wide photo into an 800-pixel slot forces the user to download data they never see. Resize the image to the largest size it will actually be shown at, then compress it. Compression comes in two kinds: lossless compression shrinks the file without altering the pixel data, while lossy compression discards detail the eye can barely notice for a much bigger saving. Photos generally use lossy compression.
- Resize to the real display width before uploading.
- For photos, keep quality within a reasonable range and drop the excess the eye cannot tell apart.
- Strip metadata (EXIF) when you do not need it.
- Set up an automated conversion step so every upload comes out consistent.
# Convert to WebP (cwebp)
cwebp -q 80 photo.jpg -o photo.webp
# Convert to AVIF (avifenc)
avifenc photo.jpg photo.avifResponsive Images: srcset and sizes
Instead of serving one file to both desktop and phone, prepare versions at different resolutions and let the browser pick the right one for the device. Use the srcset and sizes attributes for this. It is a key part of mobile-friendliness; see our piece on mobile-friendliness for news sites for more.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Descriptive text"
width="800" height="533">Lazy Loading and Layout Shift
Images below the fold do not need to load immediately. The loading="lazy" attribute defers an image until it nears the viewport, lightening the initial load. Do not lazy-load the above-the-fold (LCP) image, however; it needs to load early.
Giving every image a width and height (or an aspect ratio in CSS) lets the browser reserve space and prevents content from jumping (CLS). This matters for both user experience and Core Web Vitals.
CDN, Caching, and Delivery
Images are typically static files; optimize them once and cache them for a long time. Serving them through a CDN delivers the file from a location geographically close to the user, cutting latency. You can read how caching works in detail in our caching guide.
- Use a long cache lifetime and content versioning (a hash in the filename) for static images.
- Distribute through a CDN to take load off your origin server.
- Where possible, use an image service that generates the format and size on demand.
Accessibility and SEO
Good image optimization is not only about size. Add descriptive alt text to every meaningful image: it provides accessibility for screen readers and helps search engines understand the image. Keep file names descriptive too, and make images discoverable through an image XML sitemap or your regular sitemap.
Image search is an extra source of visitors for news content. Alt text, the file name, and the surrounding context (headline, caption) together tell a search engine what the image depicts. Stuffing those fields with keywords does not help, though; writing natural, accurate descriptions that genuinely aid the reader also aligns with Google's "helpful content" guidance.
- Write short, accurate alt text for informative images; use empty alt (alt="") for decorative ones.
- Choose meaningful file names (example: blue-server-rack.webp).
- Do not keyword-stuff; keep alt text natural.
Quick Checklist
- Is the format right? (photo: JPEG/WebP/AVIF, logo: SVG, transparency: PNG/WebP)
- Is the image resized and compressed to its real display size?
- Are responsive versions served via srcset/sizes?
- Is lazy loading applied to below-the-fold images?
- Are width/height set to prevent layout shift (CLS)?
- Are a CDN and long-lived caching in place?
- Is there descriptive alt text and a meaningful file name?