Updated: August 1, 2026
Quick answer: Export from the clean master at the largest useful display size, use JPEG/WebP/AVIF for photos and PNG/WebP/SVG for graphics, start with moderate quality, create responsive variants, and verify the selected file and page metrics.
The best web image setting is a combination of pixels, format, quality, and delivery. A quality value copied from a tutorial is not enough because encoders map settings differently and an image can be slow even when its local file is small.
A Starting Matrix, Not a Universal Preset
| Asset | Format candidates | Starting quality experiment | Main inspection |
|---|---|---|---|
| Photo | WebP, AVIF, JPEG | moderate; often 75–85 for JPEG/WebP tests | faces, texture, gradients |
| Product image | WebP, AVIF, JPEG | moderate to high if zoom/detail matters | labels, edges, material texture |
| Screenshot | PNG, lossless WebP | lossless first; careful lossy test | small text and one-pixel lines |
| Transparent graphic | PNG, WebP, SVG | lossless first; alpha-safe test | edge fringe on real backgrounds |
| Vector logo/icon | SVG | structural cleanup, not quality slider | viewBox, IDs, stroke weight |
| Animation | animated WebP, GIF, video | compare total frames and decode | motion, color, file weight |
The numbers are starting experiments. web.dev’s JPEG guide explains why JPEG quality is content-dependent; the same caution applies across modern codecs.
1. Set Dimensions Before Quality
Find the largest rendered width, high-density requirement, and zoom behavior. A 4000px source displayed at 900px may waste more bytes than a quality setting can recover. Resize from the clean master to a useful delivery width, then create several candidates for responsive layouts.
Use srcset and sizes:
<img
src="article-1200.webp"
srcset="article-480.webp 480w, article-800.webp 800w, article-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 800px"
width="1200"
height="800"
alt="A notebook beside a cup of tea"
/>
Google’s image SEO documentation and web.dev’s responsive image guide explain why dimensions and responsive selection are part of optimization.
2. Choose the Format From the Content
Use photo-oriented formats for photographic texture, alpha-capable formats for transparent assets, and SVG for vector artwork. Keep a JPG or PNG fallback when the destination requires it. The MDN format guide is a useful capability reference.
Do not convert every PNG to WebP without checking screenshots, gradients, alpha edges, and the clients that receive the file. Do not convert every JPG to AVIF without measuring encoding cost and fallback behavior.
3. Tune Quality With Representative Files
Create conservative, moderate, and smaller candidates from the same source and dimensions. Record:
- format and encoder;
- pixel dimensions;
- quality and effort settings;
- exact output bytes;
- visual verdict at 100% and real display size;
- response bytes and selected candidate in production.
Choose the smallest file that passes the details that matter. A quality number is useful as a reproducible input, not as a ranking signal or a universal promise.
4. Treat Metadata Deliberately
Remove GPS, camera details, thumbnails, and editing history from public delivery copies when they are not needed. Preserve color profiles, copyright, or catalog records when the workflow depends on them. Keep the master.
5. Match Loading Behavior to Position
Use normal <img> markup for content images. Lazy-load images below the fold; do not lazy-load the image likely to be LCP by default. If a known hero image is the LCP candidate, test fetchpriority="high" or a carefully scoped preload. MDN’s fetchpriority reference describes it as a hint, not a guarantee.
6. Reserve Layout Space
Set width and height or an aspect ratio. web.dev’s CLS guidance explains why the browser should know the image’s box before bytes arrive.
Settings by Page Role
Blog and editorial images
Use a width that matches the article column, provide descriptive alt text, and prioritize readability over chasing the lowest bytes. Keep the hero candidate separate from below-the-fold images.
Ecommerce product images
Preserve labels, edges, and texture. Generate a card copy and a zoom copy; do not use the largest zoom source in every grid tile.
Landing-page hero
Benchmark the LCP image at mobile and desktop sizes. Use responsive art direction if the crop differs, and make its discovery path visible in HTML when possible.
Screenshots and UI graphics
Use PNG or lossless WebP as the baseline. Inspect small type at 100%; if the file is too large, crop empty space or split the image before lowering quality.
What to Measure Before and After
Run a throttled mobile test and record:
- image request start and end;
- transfer bytes and decoded dimensions;
- LCP element and its resource URL;
- layout shifts;
- cache hit/miss behavior;
- field data where available.
A smaller image can fail to improve LCP if it is discovered late or served by a slow transformation. Fix the biggest bottleneck shown by the trace.
Common Setting Mistakes
- copying a JPEG quality value into WebP or AVIF;
- preserving huge dimensions while lowering quality;
- lazy-loading the LCP image;
- preloading every image;
- removing metadata that color management needs;
- choosing lossy output for text-heavy screenshots;
- using CSS backgrounds for meaningful images that should be discoverable;
- measuring a local file instead of the delivered response.
Final Checklist
- largest useful display width documented;
- format chosen by content and compatibility;
- candidates generated from a clean master;
- quality tested visually and by bytes;
- responsive
srcset/sizesverified; - LCP image discovery and priority measured;
- below-fold loading behavior appropriate;
- dimensions/aspect ratio reserved;
- field or throttled lab results compared.