Use this page as a pillar article for caching, format policy, responsive image delivery, and practical implementation choices that actually improve page speed.
Use the right format
For most sites, standardize on WebP for photos and SVG for logos, then keep JPEG or PNG fallbacks only where you need them.
Control cache behavior
Set long-lived cache-control headers for versioned assets so repeat visits feel instant and your origin stays quiet.
Match image width to layout
Do not ship 2000-pixel images into a 400-pixel slot. Responsive variants are often the easiest win on the page.
Why best practices matter
A CDN can only deliver what you hand it. If your source image is oversized, uncompressed, unversioned, or missing width hints, the CDN still has to move unnecessary bytes. The best-performing sites combine clean asset preparation with disciplined delivery rules.
1) Choose a default format policy
Keeping a format policy reduces guesswork for every future upload.
- Photos: WebP first, JPEG fallback where needed.
- Logos and icons: SVG whenever possible.
- Screenshots and diagrams: PNG or WebP lossless.
- Animation: video for large motion, not GIF.
2) Serve width-optimized variants
Create a few practical sizes and let the browser choose the closest one. That usually beats shipping one oversized master file to everyone.
<img
src="https://124southmain.com/example/hero-960.webp"
srcset="https://124southmain.com/example/hero-640.webp 640w,
https://124southmain.com/example/hero-960.webp 960w,
https://124southmain.com/example/hero-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 960px"
width="960"
height="540"
alt="Example hero image">3) Use lazy loading carefully
Lazy loading is excellent for below-the-fold content. It is usually the wrong choice for the hero image, logo, or anything central to Largest Contentful Paint.
4) Version URLs so you can cache aggressively
Long cache lifetimes work best when the URL changes every time the asset changes. A versioned file name or versioned path keeps deployment simple and cache-safe.
| Pattern | Good for | Example |
|---|---|---|
| Filename versioning | Static sites | hero.v3.webp |
| Path versioning | Grouped releases | /v3/home/hero.webp |
| Hash versioning | Build systems | hero.8f3c2a.webp |
5) Declare width and height
Always include dimensions or an aspect ratio box. This is one of the simplest ways to reduce layout shift and keep the page from jumping as images arrive.
6) Strip what you do not need
Metadata, embedded thumbnails, and oversized color profiles can add unnecessary weight. Keep the pixels, remove the baggage.
7) Keep origin requests off your hot path
Cache images for as long as practical, use immutable versioned assets, and make sure repeated visits do not have to reach your origin. That protects the server and gives users a much more stable experience.
Serve your images faster with a simple, high-performance CDN.
Learn how 124 South Main works →
Related Guides: