Free tools Windows power users keep installed
One-click scans. No signup required.
To compress images for the web, first resize each image to the largest dimensions it will actually be displayed at, then compare suitable formats and compression levels at the rendered size. Use lossy compression for most photographs; use lossless compression when preserving exact pixels, crisp edges, or text-like detail matters. Serve responsive sizes with srcset and sizes, and retain a fallback when offering newer formats.
Start by resizing the image to its real display size
Compression cannot make an unnecessarily large source image the right size for a page. If a page displays a photo in a 900-pixel-wide column, supplying a much larger file may waste download bytes, particularly on a phone. Create an appropriately sized master image no larger than the biggest rendered slot that needs it, then generate a small set of widths for common display needs.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Image Optimization | $9.99 | Buy on Amazon |
| 2 |
|
Local Image SEO | $19.95 | Buy on Amazon |
| 3 |
|
Optimization Over Integers | $103.12 | Buy on Amazon |
| 4 |
|
Diagnostic Sonography Mastery Workbook: A Case-Based Guide to Ultrasound Physics, Image... | $25.99 | Buy on Amazon |
| 5 |
|
Machine Learning: A Bayesian and Optimization Perspective | $103.98 | Buy on Amazon |
For responsive delivery, let the browser select among those widths. The following example offers three versions of a photo; replace the filenames and dimensions with the actual files you generate. The sizes value describes the layout’s approximate rendered width, so adjust it to match your CSS.
<img
src="photo-900.jpg"
srcset="photo-480.jpg 480w, photo-900.jpg 900w, photo-1400.jpg 1400w"
sizes="(max-width: 600px) 100vw, (max-width: 1100px) 80vw, 900px"
alt="A description of the photograph"
>The width descriptors identify each file’s intrinsic width; they do not resize the image themselves. If the layout’s actual slot is narrower than the selected file, the browser may still download more data than necessary. Conversely, do not omit a sufficiently large version for a genuinely large display slot.
#1 Best Overall
Choose lossy or lossless compression based on the image
Photographs: start with lossy
Lossy encoding discards some image information to reduce file size. It is usually the practical starting point for photographs, where a carefully chosen level can substantially reduce bytes without an obvious difference at the size visitors see. There is no universal quality setting suitable for all images: a portrait, a detailed landscape and a softly shaded image can show compression defects differently.
Logos, diagrams and text-like graphics: protect the edges
Lossless compression preserves the image data, making it appropriate when exact pixels matter or when lossy artifacts around sharp lines, small lettering or transparency are unacceptable. Lossless files can be larger than lossy alternatives. For graphics, compare PNG with lossless WebP or AVIF if your workflow supports them, and inspect thin lines, small text, transparent areas and gradients.
Some images are mixed cases: a graphic may contain both a photograph and small text, for example. Choose based on the part of the image where artifacts would be most damaging rather than applying a single rule to every asset.
Rank #2
Compare formats using the same visual target
| Format | Useful starting cases | What to check |
|---|---|---|
| JPEG | Photographs and a broadly compatible fallback. | Compare its lossy result with WebP and AVIF at a similar perceived quality; inspect blockiness, detail and gradients. |
| WebP | Photographs or graphics; supports transparency and can be encoded lossily or losslessly. | Compare actual bytes and appearance for the image and encoder settings you use. Do not assume it will be the smallest for every asset. |
| AVIF | Photographs or graphics where modern-format delivery fits your audience and workflow. | It can produce smaller files, but do not assume it always will. Check compatibility, visual quality and the cost or complexity of encoding and fallback delivery. |
| PNG | Graphics where exact edges or transparency matter, and as a fallback where appropriate. | Check whether its file size is reasonable for the dimensions and content; compare lossless WebP or AVIF if available and suitable. |
Make comparisons at an equivalent visual quality, not by choosing the same numeric quality value across different encoders. The numbers are not interchangeable measures. Export a few candidates, compare their byte sizes, then inspect them at the page’s rendered size. If the smaller version visibly damages a face, lettering, edge or gradient that matters, select a larger file or a different encoding.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Offer modern formats with a fallback
A <picture> element lets the browser use the first declared format it can render, while keeping a conventional image fallback. Provide matching responsive widths for each format in a production setup.
<picture>
<source
type="image/avif"
srcset="photo-480.avif 480w, photo-900.avif 900w, photo-1400.avif 1400w"
sizes="(max-width: 600px) 100vw, (max-width: 1100px) 80vw, 900px"
>
<source
type="image/webp"
srcset="photo-480.webp 480w, photo-900.webp 900w, photo-1400.webp 1400w"
sizes="(max-width: 600px) 100vw, (max-width: 1100px) 80vw, 900px"
>
<img
src="photo-900.jpg"
srcset="photo-480.jpg 480w, photo-900.jpg 900w, photo-1400.jpg 1400w"
sizes="(max-width: 600px) 100vw, (max-width: 1100px) 80vw, 900px"
alt="A description of the photograph"
>
</picture>Keep the fallback and all the referenced variants available at the paths used by the page. If a server instead selects an image format by inspecting the request’s Accept header, it should send an appropriate Vary response header so caches distinguish responses that differ by that header.
Rank #3
Use a visual test loop, not a magic quality number
- Prepare the dimensions. Export a source at the largest required display width and the responsive widths your layout needs.
- Make candidate encodings. For a photograph, compare JPEG, lossy WebP and AVIF if your tools support them. For an edge-sensitive graphic, compare PNG with suitable lossless alternatives.
- Inspect at display size. Look closely at faces, small text, hard edges, gradients and transparency. Also inspect at higher magnification when checking for defects that may become visible on high-density screens.
- Compare bytes and appearance together. Record the candidate’s dimensions, format, settings and file size. Choose the smallest candidate that still meets the visual requirement; do not compare quality numbers across different formats as if they were equivalent.
- Check the page in its real layout. Confirm that the intended responsive candidate is offered and that the page uses the correct image for its slot. Images can be candidates for Largest Contentful Paint, so an oversized or inefficient hero image may affect perceived loading.
Squoosh is one option for converting images to AVIF and comparing image exports. MDN also names it, while web.dev discusses image optimization approaches including tools and services. Check a tool’s current capabilities, privacy terms and commercial terms before adopting it. For a site with many images and variants, an image CDN or automated image optimization service can handle format and size selection as part of delivery; assess its behavior against your actual assets and cache setup.
Or skip the browser setup
ScreenshotNeo is a website screenshot API, not an image-compression encoder; use it when your task is capturing a page rather than optimizing an existing image. One GET request returns a screenshot, and you can save the result as a PNG, JPEG or WebP. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpIts clean-shot workflow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server offers take_screenshot, get_page_info and capture_pdf tools for AI agents and other MCP clients.
Free includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan. Visit ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common image-compression problems
The image still downloads too many bytes
Check dimensions before changing quality settings. A file with far more pixels than its display slot needs may remain wasteful even after encoding. Then inspect which srcset candidate the browser selects and whether sizes reflects the rendered layout.
The compressed image looks visibly damaged
Raise the quality or use a less aggressive setting, compare another format, or use lossless compression for areas where exact edges and detail matter. Recheck the output at its displayed size; do not assume a setting that worked for another image will work here.
Transparency, lettering or line art looks wrong
Confirm the chosen format and encoding mode preserve the required transparency and detail. Test a lossless option and inspect the file on the page’s actual background, since artifacts or transparency problems can be more apparent there.
A modern image does not appear for some visitors
Check that the <picture> source has the correct MIME type, that the file path works, and that a valid fallback remains in the nested <img>. If format selection is done at the server, verify that caches vary by Accept when responses depend on it.
The smaller file does not make the page feel faster
Confirm that the browser actually downloads the optimized file and that it is not receiving an oversized variant. Measure the page in context: image encoding is one part of loading, and an image’s contribution depends on its role and when it is discovered and displayed.
What to optimize first
- Resize images to the largest real slot, then provide responsive candidates.
- Use lossy encoding for photographs when the visual result remains acceptable; choose lossless where exact detail matters.
- Compare JPEG, WebP, AVIF and PNG according to content, quality, size and compatibility—not format reputation alone.
- Inspect every meaningful candidate at the rendered size and test delivery in the actual page.
Frequently Asked Questions
Is WebP or AVIF always smaller than JPEG?
No. The result depends on the image and encoding settings. Compare the actual output bytes at a similar visual quality and keep a fallback if compatibility requires one.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can image compression improve Largest Contentful Paint?
It can help when an image is an LCP candidate and its dimensions or encoding make it unnecessarily heavy. The effect depends on the page and how the image is delivered.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
