iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
For faster web pages, first serve images close to the dimensions they are actually displayed at, then compare formats and compression settings at acceptable visual quality. Use responsive image markup when layouts need different sizes, and measure the result on the page. No single format or quality setting is best for every image.
What to change first for faster images
Start with the image’s rendered size, not its file extension. A large source image displayed as a small thumbnail still has to be downloaded unless the browser can choose a smaller candidate. Serving desktop-sized images to mobile devices can use 2–4 times more data than needed, according to web.dev; the page does not state a publication year. web.dev’s responsive image guide explains how to offer candidates for different display contexts.
Next, test whether another format or compression level can reduce bytes without making the image look worse. Finally, check that the browser receives an appropriate size and format, and assess the effect on real page performance. Smaller image resources can reduce download time and improve Largest Contentful Paint when an image is the page’s LCP element; the benefit depends on the page and delivery conditions.
Resize images and serve responsive candidates
Inventory important images and note both their role and their displayed dimensions: a hero image, article photo, thumbnail, icon, illustration, and animation have different requirements. Google recommends considering the image’s data type and resolution, including whether vector artwork or a CSS treatment is more suitable than a raster image. Google’s image optimization guidance discusses those choices.
#1 Best Overall
For raster images, create practical source dimensions for the places they appear. If a layout changes across screens, provide a small, reasonable set of size candidates using srcset and sizes. The browser can then choose a candidate appropriate to the available layout and device. For example:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Description of the image">In this example, the width descriptors identify the candidate file widths, while sizes describes the image’s expected rendered width at different viewport sizes. Adjust the values to match the actual layout; the example is not a universal recipe. Avoid generating excessive variants: they add storage and markup overhead without necessarily improving the result.
Choose a format for the image, not by habit
There is no universally best format. Compare candidates by their byte size at acceptable visual quality, the image content, transparency or animation needs, browser support for your audience, and the complexity of your conversion and delivery setup. Google reports that WebP lossless images are 26% smaller than PNGs, and WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality. Those figures are reported by Google for Developers; the page does not state a publication year, and actual results depend on image content and encoder settings. Google’s WebP overview provides the format details.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches| Format or approach | When to consider it | Trade-offs to check |
|---|---|---|
| JPEG | Photographic images where lossy compression is acceptable | Compare its output against suitable WebP or AVIF candidates rather than assuming it is smallest. |
| PNG | Images where lossless output or transparency is useful | Test whether WebP lossless can reduce bytes while retaining the required appearance. |
| WebP | Photos, graphics, transparency, or animation where its lossy or lossless modes fit | Check output quality, audience browser support, and conversion workflow. |
| AVIF | Images where its encoding and browser support are suitable for the audience | The cited web.dev guide describes it as newer and less widely supported than WebP. Verify current support before relying on AVIF without a fallback. |
| SVG | Suitable vector artwork | Use a vector format for vector imagery rather than rasterizing it without a reason. |
Google and web.dev recommend considering image type, format capabilities, quality, resolution, and responsiveness together. web.dev’s image-format guidance also recommends experimenting with compression and visually checking lossy output. In particular, inspect text, sharp edges, and flat, high-contrast graphics for visible artifacts.
Compress and convert JPG or PNG to WebP
Google documents the command-line utility cwebp for converting PNG or JPEG files to WebP. For example:
cwebp -q 80 image.png -o image.webpThe value 80 is an example from the documentation, not a recommended setting for every image. Compare the converted file’s byte size with the original and inspect it at the size and context where it will appear. If the image is photographic, try lossy compression and judge whether the artifacts are acceptable. If exact pixel reproduction matters, test a lossless option instead. Google’s cwebp documentation covers the utility and its options.
Keep the original asset until you have checked the converted result, its transparency or animation behavior where relevant, and the way your site serves it. Conversion alone does not guarantee a faster page: an oversized converted image can still waste bytes, and a smaller file may not improve the page’s key metrics if another resource or rendering step is the bottleneck.
Recommended Free Tools
Automate resizing and format delivery when useful
An image CDN can automate transformations such as resizing and format selection for the requesting client. That can reduce manual work across many images, but it adds a service dependency and cost. Google’s image guidance names Cloudinary as one example of an image CDN; this is an example, not an endorsement. web.dev’s image CDN guide describes this delivery approach.
Best Value
Whether transformations are manual or automated, serve size candidates intentionally and verify what the browser actually receives. Review the page’s image resource sizes and loading behavior alongside real performance measurements. If the image is the LCP element, image transfer and delivery can affect LCP; do not assume that a format conversion alone will fix a slow page.
Quick Recap
A practical image optimization workflow
- Inventory: Record each important image’s role, current file, displayed dimensions, and whether it needs transparency, animation, or exact pixel fidelity.
- Resize: Generate source dimensions suited to actual display contexts. For responsive layouts, create a limited set of candidates and describe them with
srcsetandsizes. - Compare formats: Test WebP for images that suit its lossy or lossless modes. Test AVIF only after checking browser coverage for your audience; retain an appropriate fallback if needed. Keep SVG for suitable vector artwork.
- Set compression: Try lossy compression for photographic content when visible quality remains acceptable; consider lossless compression where exact reproduction matters.
- Inspect output: Compare byte sizes and visually inspect the result, particularly text, crisp edges, flat graphics, transparency, and animation when those features matter.
- Deliver and measure: Configure the page or image CDN to serve appropriate candidates, then check actual image downloads and page performance. Keep operational cost and service dependency in view if you automate delivery.
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.
