How to Reduce Image Size for a Faster Website
Images usually make up most of a web page's download size. Optimizing them improves load time, reduces data use on mobile and supports better Core Web Vitals scores.
Step 1: Resize to the size you display
A 4000 px photo shown in an 800 px column wastes most of its bytes. Resize to roughly twice the display width at most (for sharp high-density screens).
Step 2: Pick the right format
- JPG: photographs.
- PNG: logos, screenshots and graphics needing transparency.
- WebP: usually smaller than JPG or PNG at similar quality and widely supported.
Step 3: Compress
For photos, quality between 70 and 85% is usually the sweet spot. Use our image compressor to adjust the slider and see the new size before you download. It runs in your browser, so your images are not uploaded.
Step 4: Serve responsive images
<picture>
<source type="image/webp"
srcset="hero-480.webp 480w, hero-960.webp 960w"
sizes="(max-width: 600px) 480px, 960px">
<img src="hero-960.jpg" width="960" height="540"
alt="Describe the image" loading="lazy">
</picture>
Always set width and height to prevent layout shift. For the main image at the top of the page, skip loading="lazy" so it loads first.
Checklist
- Resized to display size
- Compressed at 70 to 85% quality
- Descriptive alt text added
- Lazy loading on images below the fold
Frequently asked questions
What is a good file size for website images?
Aim for under 200 KB for large photos such as a hero image, and under 100 KB for photos inside an article. Thumbnails and icons should be a few KB to 30 KB. If a page has many images, keep the total for the whole page under about 1 to 2 MB so it loads quickly on mobile data.
What width should I resize images to?
Resize to the largest size the image is actually shown at, times two for sharp phone screens. For a blog column about 800 pixels wide, a 1600-pixel image is plenty. A full-width banner rarely needs more than 2000 to 2400 pixels.
Does image size affect Google ranking?
Indirectly, yes. Google measures how fast your page loads and how soon the main picture appears (Largest Contentful Paint). Heavy images are the most common reason that number is poor. Smaller images make pages faster, which helps both visitors and search results.
Should I use WebP for my website?
Yes, for most photos. All current browsers support WebP, and it is usually 25 to 35% smaller than JPG at similar quality. Keep a JPG copy only if you also send images by email or to older apps that do not open WebP.
Will compressing images make them look worse?
At quality 70 to 85, most people cannot see a difference on screen, while the file is often 60 to 80% smaller. Problems start below about 50, or when a huge image is forced into a tiny file. Resize first, then compress, and compare before and after.
Open the free Image Compressor and Resizer and try it on your largest photo.