This page has two parts: what the pages sampled during this build actually do today (checked directly in their HTML, not assumed), and the recommended standard to apply going forward. No image was approved because the CSS technically fit, quality here is judged on source pixels versus rendered size, which is exactly what the current state below is missing.
Across the homepage, author-profile and best-listicle pages checked on all three sites, every <img> tag found is a small accreditation badge, logo, or icon (34-200px), served as plain PNG or SVG with no srcset, no sizes, and no AVIF/WebP variant. No hero photography or large editorial imagery was found on any of the pages sampled, illustration is instead done with hand-coded inline SVG infographics (see the Data component page). If pixelation is showing up anywhere on the live sites, it's most likely in imagery added since this snapshot, or in pages outside this sample, not in the core templates audited here.
| Image type | Target rendered size | Min source width | Preferred source (2x) | Aspect ratio | Format |
|---|---|---|---|---|---|
| Hero image | up to 1280px wide, ~40-56vh tall | 1280px | 2560px | 16:9 desktop, 4:5 crop for mobile | AVIF with WebP + JPG fallback |
| Full-width editorial image | up to 1024px (article max-width) | 1024px | 2048px | 3:2 | AVIF with WebP + JPG fallback |
| Article inline image | ~768px (article body width) | 768px | 1536px | 3:2 or 16:9 | AVIF with WebP + JPG fallback |
| Card thumbnail | 240-320px | 320px | 640px | 4:3 | WebP, AVIF optional |
| Profile / author photo | 64-120px | 120px | 240px | 1:1 | WebP |
| Background / band image | full viewport width | 1920px | 3840px | varies, avoid faces near crop edges | AVIF with WebP + JPG fallback |
| Logo / badge / icon | as used (current practice, confirmed correct) | 2x render size | 3x render size | native | SVG where possible, PNG otherwise |
Every raster image ships a real srcset covering at minimum the fleet's own three breakpoints (390 / 768 / 1440, matching every comparison page in this library), with a sizes attribute that matches the container it actually renders in (768px article width, 1280px wide container, per the Layout component page). object-fit: cover with an explicit aspect-ratio box prevents layout shift. Compress to the point a human can't tell the difference at 2x zoom, not to a fixed KB target. Mobile crops get chosen deliberately (a re-crop, not just a shrink) wherever a hero or band image carries a face or a focal subject near the edge.