How to Compress Images for the Web
Images often make up most of a page's weight. Photos straight from a phone or camera can be several megabytes each, far more than any web page needs. Compressing them is one of the quickest ways to speed up your site.
Step 1: Resize to the display size
First, scale the image to the size at which it will be displayed. If a photo appears 800 pixels wide on your page, there is little reason to upload one that is 4,000 pixels wide. For high-density screens, a version around twice the displayed width is usually enough. Do not go beyond what is needed.
Step 2: Choose the right format
- JPEG is good for photographs.
- PNG is good for graphics needing transparency, but files can be large.
- SVG is ideal for logos, icons, and simple illustrations, as it scales without losing sharpness and is often tiny.
- WebP typically gives smaller files than JPEG or PNG at similar quality, and is widely supported by modern browsers.
- AVIF can compress even more, though encoding is slower and support, while broad today, should be checked for your audience.
You can offer modern formats with a fallback using the picture element.
Step 3: Compress
There are two types of compression:
- Lossy discards some data to shrink files substantially. Quality settings in the range of roughly 70 to 85 percent often look good for photos, but test your own images.
- Lossless reduces size without changing the pixels, with smaller savings.
Free tools can do this in a browser or on your computer, and many website platforms offer plugins that compress automatically on upload.
Step 4: Serve responsive images
Using the srcset and sizes attributes lets browsers choose the best file for the screen. A phone then downloads a small image instead of a desktop one. See responsive web design basics.
Step 5: Load wisely
Load images below the fold only as needed, as explained in lazy loading. Specify width and height to prevent layout shifts, which affects Core Web Vitals.
Step 6: Name and describe
Use descriptive file names and alt text. See image SEO and alt text best practices.
How small is small enough?
There is no single target, but many ordinary content images can be well under 200 KB with good compression, and hero images often come in a little larger. Compare before and after to ensure quality still looks right.
Check your work
Use PageSpeed Insights or browser developer tools to identify heavy images. See how to test website speed.
Keep originals
Store the full-quality originals elsewhere in case you need to re-export later.
The bottom line
Resize first, pick a suitable format, compress, and serve the right size to each device. Your pages will load noticeably faster.