Updated: June 30, 2026
The best image compression settings for web publishing are: resize images to the maximum displayed width, use AVIF or WebP for modern browsers, keep JPEG quality around 75–85 for photos, WebP quality around 70–82, and AVIF quality around 45–60. For sharp graphics and images that need transparency, preserve PNG or use SVG for vector art. Verify the final page with PageSpeed Insights or Lighthouse. Treat all quality numbers as starting points, not universal constants—because quality scales differ across encoders and tools, a WebP 80 in one tool may not match WebP 80 in another. Always compare the compressed output visually at its real display size. For most blogs and marketing sites, the goal is the smallest image that still looks sharp in context, loads quickly, and remains useful for readers and search engines.
Key Takeaways
- Use AVIF or WebP for most published images, with JPEG or PNG fallbacks when your stack requires them.
- Resize before compressing: a correctly sized image usually saves more bytes than changing the quality slider alone.
- Start with JPEG 75–85, WebP 70–82, and AVIF 45–60, then compare against the original at the actual display size.
- Quality numbers vary by encoder and tool—treat them as starting points, verify visually.
- Use
srcset,sizes, width, and height attributes so browsers can choose the right image and avoid layout shifts. - Check both visual quality and real-page performance; the best setting is the one that passes actual testing, not the one that produces the smallest file in isolation.
Why Quality Numbers Are Starting Points, Not Universal Standards
Quality scales differ across encoders, libraries, and tools. A quality setting of 80 in one WebP encoder may produce a visually different result—or a different file size—than quality 80 in another. The same is true for JPEG and AVIF. This means the ranges in this guide are calibrated starting points based on common tools and practical testing, not universal constants you can apply once and forget.
| Format | Starting quality range | What to verify |
|---|---|---|
| JPEG | 75–85 | Skin tones, gradients, product edges, text in screenshots |
| WebP (lossy) | 70–82 | Color accuracy, fine texture, transparency edges |
| AVIF | 45–60 | Softness, color banding, fine detail in shadows |
| PNG | Lossless optimization | Sharp edges, text legibility, transparency |
For every image type you publish regularly, run a visual comparison against the original at the real display size. File size alone is not enough.
Best Starting Settings for Web Image Compression
Start here, then test. Different images compress differently: a clean product photo, a busy travel photo, and a text-heavy screenshot can all need different settings.
| Image type | Best format | Starting quality | Target use | Notes |
|---|---|---|---|---|
| Blog photos | WebP or AVIF | WebP 72–82 / AVIF 45–58 | Articles, guides, editorial images | Keep faces, texture, and important details natural. |
| Hero images | AVIF, WebP, or JPEG | WebP 75–85 / AVIF 50–62 / JPEG 78–85 | Above-the-fold banners | Prioritize LCP: resize carefully and preload only when appropriate. |
| Product images | WebP or AVIF | WebP 80–90 / AVIF 55–70 | Ecommerce, SaaS screenshots, catalogs | Use higher quality when detail affects trust or purchase decisions. |
| Screenshots | WebP, PNG, or AVIF | WebP 80–90 / PNG lossless | UI tutorials, software docs | Watch for blurred text and color banding. |
| Logos and icons | SVG first, then PNG/WebP | Lossless or near-lossless | Brand assets, UI | Prefer SVG for simple vector artwork. |
| Transparent graphics | SVG, PNG, or WebP | Lossless or WebP 80–90 | Overlays, diagrams, UI graphics | WebP supports transparency; PNG is still useful for exact edges. |
| Animated images | Video, WebP, or AVIF | Depends on duration | Short loops, demos | Avoid large GIFs when MP4/WebM/WebP can do the job smaller. |
| Social sharing images | JPEG, WebP, or PNG | JPEG 80–90 / WebP 80–90 | Open Graph and previews | Keep text legible after platform recompression. |
Resize First: The Rule That Saves the Most Bytes
Image compression fails when the source image is much larger than the page needs. If a blog content column displays images at 760 CSS pixels wide, uploading a 5000-pixel camera image wastes bandwidth even if you lower JPEG quality significantly.
A practical sizing formula: export width = rendered CSS width × target device pixel ratio, capped by what your layout actually uses.
A practical sizing workflow:
- Identify the largest rendered width on the page.
- Multiply by the highest device pixel ratio you want to support (usually 1.5× to 2×).
- Export a few responsive sizes instead of one giant image.
- Compress each derivative separately.
- Let the browser pick the right one with
srcsetandsizes.
For example, if a blog image displays at 800 CSS pixels wide, useful derivatives might be 800, 1200, and 1600 pixels wide. A 2400-pixel version may be useful for a full-width hero, but is usually unnecessary inside a narrow article column.
According to Google's web.dev image performance guidance, images are often among the heaviest resources on a page. Serving properly sized images directly reduces bytes sent to users. Google's web.dev documentation on responsive images recommends srcset and sizes attributes so browsers can select the most appropriate file for the device and layout.
JPEG Settings: Best for Compatibility and Standard Photos
JPEG is still useful for web publishing because it is universally supported and works well for photographic images, as documented in the MDN image format guide. It is not ideal for transparency, crisp line art, icons, or screenshots with small text.
Recommended JPEG settings:
| Scenario | JPEG quality | Extra settings |
|---|---|---|
| Standard blog photo | 75–82 | Strip metadata; use progressive JPEG if supported. |
| Hero image | 78–85 | Resize precisely; avoid visible banding in gradients. |
| Product or portfolio photo | 82–90 | Keep detail if image quality affects conversion. |
| Background image | 65–78 | Can often tolerate more compression. |
| Thumbnail | 70–80 | Test at actual thumbnail size. |
A good default is JPEG quality 80. If the image still looks excellent, try 75. If skin tones, product edges, gradients, or text degrade, move upward.
Do not use JPEG for screenshots with fine UI text unless you have tested carefully. JPEG artifacts around letters can make documentation look cheap and hard to read.
WebP Settings: The Best Default for Most Websites
WebP is a strong default for web images because it supports lossy compression, lossless compression, transparency, and animation, with broad modern browser support. According to Google's WebP documentation, lossy WebP can produce substantially smaller files than comparable JPEG images, while lossless WebP can also reduce file size compared to PNG in many cases. Results depend on image content, encoder settings, and the specific comparison.
Recommended WebP settings:
| Scenario | WebP quality | Recommendation |
|---|---|---|
| Blog photos | 72–82 | Start at 78 and adjust visually. |
| Hero images | 75–85 | Use higher quality for above-the-fold images. |
| Product images | 80–90 | Preserve detail and color accuracy. |
| Screenshots | 80–90 or lossless | Check text clarity at 100% zoom. |
| Transparent graphics | 80–90 or lossless | Test edges against real backgrounds. |
If you want one simple default for a blog CMS, use WebP quality 78–82 after resizing. Before uploading images to a post, compare the compressed result visually and by file size. A tool such as LessMB can fit into this manual check step as part of your pre-upload workflow.
AVIF Settings: Best for Maximum Compression When Supported
AVIF often produces smaller files than JPEG and WebP at similar visual quality, especially for photographic images—though results vary by encoder, image content, and encoding effort settings. The MDN image format guide describes AVIF as a good choice for images because of its high compression efficiency, transparency support, higher color depth, and broad modern browser support.
Recommended AVIF settings:
| Scenario | AVIF quality | Recommendation |
|---|---|---|
| Blog photos | 45–58 | Start around 52. |
| Hero images | 50–62 | Avoid over-compressing the LCP image. |
| Product images | 55–70 | Check fine texture, edges, and color. |
| Background images | 40–52 | Often safe if details are not critical. |
| Screenshots | 55–75 | Test text and flat UI colors carefully. |
AVIF is excellent when your publishing system can generate multiple formats automatically. One tradeoff is that AVIF encoding can be slower than WebP or JPEG, which may matter in automated build pipelines. Some workflows still need WebP or JPEG fallbacks.
A practical fallback order is AVIF first, WebP second, then JPEG or PNG fallback. In HTML, that typically means using the picture element with an img fallback. Google Search Central's image best practices recommend always including a fallback URL in the src attribute when using responsive images or picture.
PNG Settings: Use Lossless Compression for the Right Images
PNG should not be your default for large photos. According to the MDN image format guide, PNG is better suited for:
- Logos that are not available as SVG
- UI screenshots where lossy compression blurs text
- Graphics with transparency
- Diagrams with flat colors
- Images where exact reproduction matters
For PNG, the best approach is lossless optimization, palette reduction when appropriate, metadata stripping, and correct dimensions rather than a quality slider. If a PNG screenshot remains too large, test WebP lossless or high-quality WebP. For simple icons and logos, use SVG when possible.
Responsive Image Settings
Compression quality is only one part of image optimization. A 90 KB image can still be wrong if it is loaded when hidden, displayed at the wrong size, or missing dimensions.
Use this checklist before publishing:
| Setting | Why it matters | Recommended action |
|---|---|---|
| Width and height attributes | Prevents layout shift (CLS) | Add intrinsic dimensions to img tags. |
srcset | Lets browsers choose the best file | Provide multiple widths such as 480w, 800w, 1200w, 1600w. |
sizes | Tells browser the rendered layout size | Match your CSS layout, not the source image size. |
| Lazy loading | Reduces initial page weight | Use for below-the-fold images. |
| Eager loading for LCP image | Improves perceived speed | Do not lazy-load the main above-the-fold image. |
| Descriptive alt text | Improves accessibility and image SEO | Describe the image when it adds meaning. |
| Clean filenames | Helps organization and search context | Use readable filenames like webp-compression-settings-example.webp. |
| Metadata stripping | Removes unnecessary file weight | Keep original files separately; strip delivery copies. |
Google's image SEO documentation recommends standard HTML image elements, supported formats, responsive images, descriptive filenames, and useful alt text for both speed and discoverability. Google can find images in the src attribute of img elements, including when used inside picture, but does not index CSS background images in the same way.
Best Settings by Use Case
For a Standard Blog Post
- Content images: WebP quality 76–82 or AVIF quality 48–58
- Maximum width: 1200–1600 px for most inline images
- Hero image: 1600–2400 px wide depending on layout
- Fallback: JPEG quality 78–85 if needed
- Lazy loading: yes for below-the-fold images
- Alt text: descriptive when the image supports the content
Do not upload 4000–6000 px camera originals directly unless your CMS or CDN reliably creates responsive derivatives.
For a SaaS or App Screenshot
- Format: WebP high quality, PNG lossless optimized, or AVIF if text remains sharp
- Quality: WebP 82–90 or PNG lossless
- Resize: export at the display width or 1.5×–2× for retina clarity
- Avoid: low-quality JPEG for UI text
The key test is text readability. If labels, buttons, or code samples look fuzzy, compression is too aggressive.
For Ecommerce and Product Pages
- Product photos: WebP 82–90 or AVIF 55–70
- Thumbnails: WebP 72–82
- Zoom images: larger dimensions, but delivered only when needed
- Background lifestyle images: WebP 70–80 or AVIF 45–55
Product images need more quality than decorative blog images because the image can affect trust, perceived value, and conversion.
For Open Graph and Social Preview Images
- Use JPEG or PNG when platform compatibility matters
- JPEG quality 80–90 for photos
- PNG for text-heavy graphics
- Keep text large enough to survive platform recompression
- Test preview rendering before publishing
Social platforms may recompress images, so an ultra-compressed source can become visibly degraded after upload.
How to Test Whether Compression Went Too Far
Use a simple three-pass review:
- Actual-size review: View the compressed image at the size readers will see it.
- Critical-detail review: Zoom into faces, product edges, UI text, gradients, and brand colors.
- Page-level review: Test the final page, not just the image file.
Watch for:
- Blocky artifacts around edges
- Smudged skin texture
- Blurry UI text
- Banding in gradients
- Washed-out brand colors
- Jagged transparent edges
- File savings too small to justify visible quality loss
A good compression result is boring: readers should not notice it. They should only experience a faster page.
A Simple Web Publishing Workflow
Use this repeatable workflow before publishing images:
-
Choose the right format.
- Photos: AVIF, WebP, or JPEG.
- Screenshots: WebP, PNG, or AVIF after testing.
- Logos/icons: SVG first.
- Transparent graphics: SVG, PNG, or WebP.
-
Resize to real layout needs.
- Inline blog images: usually 1200–1600 px wide.
- Full-width heroes: often 1600–2400 px wide.
- Thumbnails: create separate small files.
-
Compress from a sensible default.
- JPEG: 75–85.
- WebP: 70–82.
- AVIF: 45–60.
- PNG: lossless optimization.
-
Create responsive variants.
- Common widths: 480, 768, 1024, 1280, 1600.
- Do not generate sizes your layout never uses.
-
Publish with correct HTML.
- Include width and height.
- Use
srcsetandsizes. - Keep a fallback
src. - Add helpful alt text.
-
Verify performance.
- Run Lighthouse or PageSpeed Insights.
- Check Largest Contentful Paint if the image is above the fold.
- Confirm no "properly size images" or "serve images in next-gen formats" warnings apply to important pages.
Quick Decision Guide
| If your priority is… | Use this setting strategy |
|---|---|
| Fastest safe default | WebP quality 78, resized to display width |
| Smallest files | AVIF quality 45–58 with WebP fallback |
| Maximum compatibility | JPEG quality 80–85 |
| Sharp screenshots | PNG lossless optimized or WebP 85–90 |
| Transparent UI graphics | SVG, PNG, or WebP with alpha |
| Product detail | WebP 82–90 or AVIF 55–70 |
| Decorative backgrounds | WebP 70–78 or AVIF 40–52 |
Common Compression Mistakes to Avoid
Compressing Original Files Without Resizing
A 5000 px wide image at low quality can still be heavier than a properly resized 1400 px image at higher quality. Dimensions first, quality second.
Using One Quality Setting for Every Image
A portrait, a screenshot, a product photo, and a flat illustration do not need the same compression settings. Use defaults as starting points, then test.
Assuming Quality Numbers Transfer Between Tools
Quality 80 in one JPEG encoder is not the same as quality 80 in another. Always compare output visually rather than relying on the number alone.
Lazy-Loading the Largest Above-the-Fold Image
If your hero image is the Largest Contentful Paint element, lazy-loading it can delay rendering significantly. According to web.dev's LCP optimization guidance, the LCP image should load eagerly. Lazy-load lower-page images instead.
Removing Too Much Detail From Product Images
For ecommerce, marketplaces, portfolios, and comparison pages, image clarity affects user trust. Do not chase small file sizes at the cost of visible detail.
Forgetting About Image SEO
Compression should not remove discoverability. Use meaningful filenames, relevant surrounding text, accessible alt text, and standard HTML image elements. According to Google Search Central, Google can find images in the src attribute of img elements, including inside picture, but does not index CSS background images in the same way.
Practical Next Steps
If you need a reliable starting point today:
- Export your blog images at 1600 px wide or smaller unless the layout needs more.
- Convert photos to WebP at quality 78.
- Test AVIF at quality 52 if your stack supports it.
- Keep PNG only for screenshots, transparency, or graphics that need lossless edges.
- Run the final URL through PageSpeed Insights.
- Compare the compressed image against the original at the actual page size before publishing—a tool such as LessMB can help with this manual comparison step.
- Revisit your defaults whenever you change your publishing CMS or image pipeline, since quality scales differ by tool.
The best image compression setting is not universal. It is the smallest version that remains visually clear, semantically useful, and correctly delivered for the device viewing the page.
FAQ
What is the best JPEG quality setting for web publishing?
For most web photos, start with JPEG quality 75–85. Use 75–80 for standard blog images and 82–90 for product photos, portfolios, or images where fine detail matters. Always check the compressed version at the size it appears on the page.
What is the best WebP quality setting?
A good WebP default is 76–82 for blog and marketing images. Use 82–90 for product images and screenshots where clarity matters. Use lower settings, around 70–76, for decorative images where small artifacts are less noticeable.
What is the best AVIF quality setting?
Start around AVIF quality 50–55 for general web photos. Use 45–50 for decorative or background images, and 55–70 for product images or images with important detail. AVIF can compress efficiently, but over-compression may create softness or color issues.
Are image quality settings the same in every compression tool?
No. Quality scales vary by encoder and tool. A WebP quality 80 in one library may not produce the same file size or visual result as WebP 80 in another tool. The same applies to JPEG and AVIF. Always compare the compressed output visually and by file size rather than relying on the quality number alone.
Should I use AVIF, WebP, or JPEG?
Use AVIF when your publishing system supports modern responsive delivery with fallbacks. Use WebP as the best practical default for most websites. Use JPEG when you need maximum compatibility or a simple fallback. For many sites, the best setup is AVIF first, WebP second, and JPEG fallback.
What image width should I use for blog posts?
Resize images to the largest width they will actually be displayed at. For most inline blog content, 1200–1600 pixels wide is sufficient. For full-width hero images, 1600–2400 pixels may be appropriate. Avoid uploading original camera files unless your CMS or image CDN reliably creates responsive derivatives automatically.
How small should a web image file be?
There is no single universal target. The practical goal is the smallest file that looks sharp at the actual display size and does not delay page loading. The real test is page performance: whether the image delays Largest Contentful Paint, wastes bandwidth, or looks poor to users.
Is PNG bad for web performance?
PNG is not bad, but it is often misused. It is excellent for transparency, logos, UI graphics, diagrams, and screenshots that need sharp edges. For large photos, AVIF, WebP, or JPEG usually produce much smaller files.
Does image compression affect Google rankings?
Image compression affects rankings indirectly through page experience, speed, and user satisfaction. Google recommends optimizing images for speed and quality, using supported formats, responsive images, descriptive filenames, and useful alt text. Poorly compressed images can hurt both performance and perceived quality.
Should I strip image metadata?
For published web images, yes in most cases. Metadata from cameras and editing tools can add unnecessary bytes. Keep the original source file privately if you need EXIF, licensing, or editing data, but strip unnecessary metadata from delivery copies.