The math: device pixel ratio, retina, and srcset
When you set an image to 400 pixels wide in CSS, that's 400 CSS pixels — not 400 physical pixels. A modern phone or laptop usually has a device pixel ratio (DPR) of 2 or 3, meaning every CSS pixel is rendered with 4 or 9 physical pixels. If you serve a 400-pixel-wide source image, it will be upscaled by the browser on a DPR=2 screen and look noticeably soft.
The correct rule, then, is: figure out the largest displayed CSS width across all your layouts, and serve an image at 2x that for retina. A 400-pixel-wide thumbnail wants an 800-pixel-wide source.
Srcset lets you do this without sending the biggest version to every device. You provide several widths — 400w, 800w, 1200w, 2400w — and the browser picks the smallest one that satisfies its rendering need. The result is mobile phones download small images, desktop retina screens download large ones.
Recommended dimensions by surface
- Hero image (full-width on desktop): 2400 x 1350 (16:9) or 2400 x 1600 (3:2). Export a srcset down to 800w for phones.
- Inline blog image (content-width): 1600 x 1067 (3:2) or 1600 x 900 (16:9). Srcset down to 600w.
- Thumbnail (card image, related-posts grid): 800 x 533 (3:2). Srcset 400w / 800w.
- Avatar (round profile picture): 240 x 240 minimum, 480 x 480 for retina.
- Social card / OG image: 1200 x 630 (the Facebook / Twitter standard). Do not deviate.
- Favicon: ship multiple — 32 x 32, 192 x 192, 512 x 512, plus a 256 x 256 ICO.
- App icon (iOS / Android store): follow the platform spec — iOS wants a 1024 x 1024 PNG.
- Email header image: 600 x 200 maximum width — many email clients clip beyond 600px.
Resize vs resample — they're not the same thing
Resizing changes the dimensions of the image. Resampling is the algorithm used to invent or discard pixels to make that happen. Nearest-neighbor copies the closest existing pixel; bilinear averages four neighbors; bicubic uses a 4x4 region with a smooth weighting; Lanczos uses an even wider region with a sinc-based weight that preserves sharp edges better.
For downsampling — going from a big image to a small one — bicubic is the standard, balanced choice; Lanczos retains more sharpness on detailed images at the cost of occasional ringing on hard edges. For upsampling — going from small to big, which you should avoid when possible — Lanczos and modern ML upscalers do meaningfully better than bicubic.
The biggest mistake people make: downsampling with nearest-neighbor by accident. The result looks pixelated and jagged. SnapToolz Resize Image defaults to bicubic for downsampling and Lanczos for upsampling.
Aspect-ratio conversion for social platforms
- Instagram feed (square): 1:1 — 1080 x 1080.
- Instagram portrait: 4:5 — 1080 x 1350.
- Reels / TikTok / Stories: 9:16 — 1080 x 1920.
- YouTube thumbnail / Facebook landscape: 16:9 — 1920 x 1080 recommended.
- LinkedIn post image: 1.91:1 — 1200 x 627.
- Pinterest pin: 2:3 — 1000 x 1500.
When converting between aspect ratios you face a choice: crop (lose content) or letterbox (add bars). Cropping is almost always the right call for social platforms — letterboxes look amateur and the platform may crop them anyway. SnapToolz Resize Image previews the crop area before applying.
Common mistakes
- Uploading a 4000-pixel-wide phone photo as a 200-pixel avatar. The site might downsize it server-side but you'll pay for the upload and waste battery on the encode. Resize first.
- Setting CSS width and height but serving a single source. Without srcset you either serve a too-big image to phones or a too-small image to retina desktops.
- Re-encoding a JPEG to a JPEG over and over. Each round adds visible artifacts. Resize from the original source whenever you can.
- Stripping aspect ratio info during resize. SnapToolz Resize Image locks aspect by default.
Tools used in this guide
Run it as a workflow
FAQ
- Does resizing an image lose quality?
- Downsizing throws information away — that's lossy by definition, but the loss is generally invisible if the resample algorithm is decent and the new size is reasonable. Upsizing invents information that wasn't there and almost always looks worse than the source.
- What's the right size for an OG (Open Graph) image?
- 1200 x 630 pixels, exact. Facebook, LinkedIn, Twitter/X, Discord, Slack, and Telegram all assume this. Going larger wastes bytes; going smaller can result in blurry previews. Keep important content within the safe central area in case some platform does a different aspect crop.
- How do I keep the EXIF metadata when I resize?
- SnapToolz Resize Image preserves EXIF by default for JPEG and HEIC inputs. You can also choose to strip it on export — useful for privacy (location, camera serial, capture timestamp).
- What does 'fit to size' versus 'fill to size' mean?
- Fit: scale the image so it fits inside the target dimensions, preserving aspect ratio; you may end up with whitespace. Fill: scale so it completely covers the target dimensions, then crop the overflow. Fill is what you want for thumbnails and social cards; fit is what you want when you can't afford to lose any content.