Best export settings for web images: export at the exact display size (plus a 2× version only when needed), use AVIF or WebP for most photos, keep color in sRGB, strip unnecessary metadata, and apply light output sharpening after resizing. Then dial compression to the point where artifacts are barely noticeable at 100% view—because web “sharp” is mostly about correct sizing, not max quality.
Export settings for web: sharp, fast, high-quality images
1) Start with the only setting that truly guarantees sharpness: final pixel dimensions
Images look “soft” on the web most often because they’re being resized by the browser or the CMS after upload. Export the image to the exact pixel dimensions it will be displayed at. If your layout shows a 1200px-wide hero image, export 1200px wide—not 4000px. When the browser downsamples a huge file on the fly, you lose control over the resampling and sharpening.
If the same image appears in multiple places (thumbnail, card, hero), export multiple sizes instead of one “do-everything” file. Serving the correct size to each device is also the biggest speed win you can get without sacrificing quality. (web.dev)
2) Handle high-DPI (“Retina”) without doubling everything by default
High-DPI displays can benefit from a 2× image, but exporting every image at 2× wastes bandwidth on many screens and layouts. The practical approach:
- Export 1× at the intended CSS display size.
- Export 2× only for images that users focus on (product photos, portfolio work, key UI screenshots).
- Keep the 2× version exactly double the pixel dimensions of 1× (e.g., 800→1600).
This keeps textural detail crisp on high-density screens without making every page heavy. Modern responsive techniques exist specifically to let browsers pick the best size. (web.dev)
3) Choose the right format first; compression tweaks come second
Your format determines how well the file compresses and what kinds of artifacts you’ll see.
- Photos / complex images: prefer AVIF, then WebP, with JPEG as a fallback where needed. Modern formats usually deliver similar visual quality at smaller sizes. (web.dev)
- Graphics with transparency (logos, UI elements, simple shapes): SVG when it’s truly vector; otherwise WebP/AVIF (if supported in your workflow) or PNG when you must preserve clean edges. (developer.mozilla.org)
- Screenshots with text: test both lossless WebP/PNG and high-quality AVIF/WebP. Text can break quickly with aggressive lossy settings, so validate at 100% zoom.
A simple decision rule: if you can export AVIF/WebP reliably, do it; if not, use JPEG for photos and PNG/SVG for graphics. (web.dev)
4) Set your color correctly: export in sRGB
For the web, export in sRGB unless you have a very specific reason not to. Wide-gamut files can look different across browsers/devices, and color mismatches often get mistaken for “quality” problems. Converting to sRGB at export time standardizes how your image is displayed and avoids surprise shifts.
Also avoid “embed everything” habits: embedding extra profiles and metadata can increase file size without improving how the image looks to most users.
5) Use the right resampling method and the right order of operations
For sharp results, the order matters:
- Resize to final pixel dimensions (don’t rely on browser resizing).
- Apply output sharpening for screen (light to medium).
- Then compress to your target format/quality.
Sharpening before resizing can exaggerate halos or create a crunchy look. Sharpening after resizing helps restore edge definition that resizing naturally softens.
6) Output sharpening: light, targeted, and viewed at 100%
“Sharp” web images aren’t heavily sharpened; they’re correctly sized with subtle output sharpening. Common problems:
- Halos around edges (too much sharpening).
- Grainy textures in skin/sky (sharpening applied globally).
- Ringing around high-contrast lines (oversharpening plus heavy compression).
If your editor offers options like “Sharpen for Screen / Standard / High”, choose the lowest setting that restores crispness. If it offers radius/amount, keep radius small and amount modest. Always judge at 100% at the exported pixel size.
7) Quality settings that usually land in the right range (then adjust)
Exact numbers vary by encoder and image content, but these are practical starting points:
- JPEG (photos): quality around 70–85 for general web use; go higher for portfolios where artifacts matter.
- WebP (photos): often looks good around 60–80.
- AVIF: can reach small sizes at good quality, but some images show artifacts sooner—always compare visually.
The correct target is not “no artifacts ever.” It’s: artifacts aren’t noticeable at normal viewing size and distance. Zoom to 100%, check problem areas (faces, gradients, text edges), then adjust.
Modern formats are recommended largely because they can reduce size at similar quality. (web.dev)
8) Chroma subsampling: the hidden setting that affects “crisp” details
Many JPEG workflows use chroma subsampling (reducing color resolution). For typical photos it’s fine, but it can hurt:
- thin colored lines
- small colored text
- UI screenshots and diagrams
If your export tool lets you choose subsampling, use higher chroma quality (or disable subsampling) for images with sharp colored edges and text. If it doesn’t, consider exporting those assets as PNG/lossless WebP instead of JPEG.
9) Progressive vs baseline (and what “fast” really means)
For JPEG, progressive encoding can improve perceived loading: users see a rough preview sooner that refines as data arrives. It doesn’t always reduce bytes, but it can feel faster on slower connections. If your exporter offers it, progressive is usually a safe choice for large photos.
“Fast” is mostly about bytes transferred and correct sizing, not one magic checkbox. Serving a 300KB correctly-sized image will beat a 2MB image every time, regardless of encoding tricks. (web.dev)
10) Strip metadata unless you truly need it
Exporters often include EXIF data (camera info, GPS, thumbnails) by default. For most websites, this is dead weight. Turn on:
- Remove location data
- Remove camera metadata
- Remove embedded thumbnails
- Keep only what you need (copyright, if required)
This reduces size and avoids accidental privacy leaks.
11) Don’t waste pixels on invisible detail: crop with intent
Before you export, crop to what matters. If the subject occupies a small portion of the frame, you’ll either:
- export huge dimensions to preserve detail, or
- export smaller and lose clarity on the subject
A thoughtful crop lets you export fewer pixels while keeping the important parts sharp.
12) A practical “export preset” you can reuse
Use this as a baseline preset and adjust by asset type:
Photos (general content)
- Size: exact display width (plus optional 2×)
- Format: AVIF or WebP (JPEG fallback) (web.dev)
- Color: sRGB
- Sharpen: Screen / Low
- Metadata: stripped
- Quality: start midrange, then raise/lower after checking faces/gradients at 100%
UI / diagrams / screenshots
- Size: exact display size (2× if text must be razor sharp)
- Format: PNG or lossless WebP; test AVIF/WebP lossy only if text stays clean
- Sharpen: usually none (text sharpening can create halos)
- Metadata: stripped
13) The final check that prevents “looks fine in the editor, bad on the site”
Before shipping, verify three things with the exported file (not the original):
- View at 100%: check edges, gradients, faces, and text.
- Confirm the pixel dimensions match the intended display size(s).
- Compare file size: if it feels too big, resize first—then adjust quality.
This workflow keeps quality consistent and prevents endless re-exports based on guesswork.
Why does this matter
Correct export settings reduce load time without sacrificing clarity, which improves user experience on every device and prevents “soft” images that make a site look unprofessional.
Sources