Guides8 min read
Image Resizing Best Practices: Which Pixel Size to Use
What pixel size to resize to for websites, email, and online stores, why to resize before compressing, and how to avoid upscaling and blur.
Read Article
Loading posts...
Insights and expert guides on image compression, optimization, and web performance.
What pixel size to resize to for websites, email, and online stores, why to resize before compressing, and how to avoid upscaling and blur.
Fix image-driven LCP and CLS: fetchpriority, preload, srcset and sizes, width and height, AVIF and WebP, and next/image changes in Next.js 16.
Gmail, Outlook, Yahoo, and iCloud attachment limits from their help pages, why Base64 shrinks them, and how to resize and compress a photo to fit.
Instagram sizes: 1080 × 1350 (4:5), 1080 × 1440 (3:4), 1080 × 1080 (1:1), 1080 × 566 (1.91:1), and 1080 × 1920 (9:16) for Stories and Reels.
No universal organic safe zone exists. Meta's Story and Reels ad margins (14% top, 35% bottom, 6% sides) in pixels, and how to crop around your subject.
When to keep iPhone HEIC photos and when to convert to JPEG: what HEIC is, Windows, Android and browser support, and how to convert without uploading.
When to use JPEG, PNG, WebP, or AVIF: browser support from caniuse, a picture element fallback example, and a decision table for web and sharing.
SnapCompress (disclosed: mine), Squoosh, TinyPNG, ImageOptim, sharp, cwebp, pngquant: where each processes files, and reproducible size measurements.
Compress a photo or screenshot step by step: resize first, pick the right format, then lower quality until you see a difference. Free, in your browser.