Image Optimization for Marketing Pages
Images Are the Largest Payload on Most Marketing Pages
On a typical marketing or landing page, images account for 50-70% of total page weight — far more than JavaScript or CSS. Hero shots, product photography, testimonial headshots, and background textures are usually uploaded at whatever resolution the designer exported from Figma, then served untouched at a fraction of that size on the page. This single gap — serving a 4000px image into a 1200px container — is responsible for more Core Web Vitals failures on marketing sites than any JavaScript issue.
Format Selection: AVIF, WebP, and the JPEG/PNG Fallback
Modern formats compress dramatically better than legacy JPEG/PNG at equivalent visual quality:
- AVIF: best compression (often 50% smaller than JPEG at the same quality), but encoding is slower and support, while now broad across Chrome/Firefox/Safari 16+, still warrants a fallback.
- WebP: near-universal support, ~25-35% smaller than JPEG, a safe default.
- JPEG/PNG: fallback only. PNG should be reserved for images needing true transparency or hard-edged graphics (logos, icons); it's a poor choice for photography.
Serve these via the <picture> element with multiple <source> entries so the browser picks the best format it supports, falling back gracefully.
// Next.js <Image> already handles responsive srcset + modern formats,
// but for CMS-driven marketing pages without next/image, hand-roll it:
export function ResponsiveHero({ src, alt }: { src: string; alt: string }) {
const base = src.replace(/\.(jpg|png)$/, "");
return (
<picture>
<source
type="image/avif"
srcSet={`${base}-640.avif 640w, ${base}-1280.avif 1280w, ${base}-1920.avif 1920w`}
sizes="100vw"
/>
<source
type="image/webp"
srcSet={`${base}-640.webp 640w, ${base}-1280.webp 1280w, ${base}-1920.webp 1920w`}
sizes="100vw"
/>
<img
src={`${base}-1280.jpg`}
alt={alt}
width={1920}
height={1080}
loading="eager"
fetchPriority="high"
decoding="async"
/>
</picture>
);
}The LCP Image Needs the Opposite Treatment of Every Other Image
fetchPriority="high" and never lazy-loaded. Every image below the fold should be the opposite: loading="lazy". Marketing teams frequently lazy-load everything uniformly for 'performance,' which actually delays the one image Google is scoring you on.CDN Image Transformation Services
Rather than pre-exporting every size and format by hand, use an image CDN that transforms on the fly from a single source asset: Cloudinary, imgix, Cloudflare Images, or Vercel's built-in Image Optimization API (for Next.js sites). These accept query parameters (width, format, quality) and cache the derived output at the edge. This decouples what the CMS stores from what gets served, which matters enormously for marketing teams where content editors upload whatever file size they have on hand with no technical oversight.
Responsive sizing with srcset and sizes
The srcset + sizes pair tells the browser which image variant to download based on viewport width and pixel density — critical because a phone shouldn't download the same 1920px desktop hero. A common mistake: setting srcset correctly but leaving sizes as the default (100vw), which forces the browser to assume the image always fills the viewport even inside a narrow grid column, causing it to over-fetch. Always set sizes to match the actual rendered width at each breakpoint, not a blanket 100vw.
Compression Quality Settings and Perceptual Thresholds
Most teams either over-compress (visible artifacts, especially on skin tones and gradients) or under-compress (needlessly large files) because they pick a single quality setting for everything. A better approach: use SSIM/perceptual-quality-aware encoders (like squoosh or sharp with mozjpeg) that target a visual similarity threshold rather than a fixed quality number, and test on the actual devices your analytics say your audience uses most.
CMS Auto-Optimization Isn't Always Enough
What's Next?
Images solved, the next major lever on perceived speed is controlling exactly when below-the-fold content — including those now-optimized images — gets requested at all.
I build these systems professionally.
Whether it's a RAG pipeline, analytics migration, or AI workflow — let's talk.