Images are usually the heaviest part of a web page, so they are the first place to look when a page feels slow. The good news is that most photos can be made much smaller with no visible loss, if you do three things in the right order: resize, choose the right format, then set the quality. This guide explains each step and how to do it in your browser without uploading your pictures anywhere.
Why image size matters
Large images slow down loading, use up mobile data and can hurt how a page performs in search. Google measures loading with Core Web Vitals, and one of them, Largest Contentful Paint (LCP), records how long the biggest visible element takes to appear. Google considers an LCP of 2.5 seconds or less to be good, and on many pages that biggest element is an image. Smaller files also cost less to host and are kinder to visitors on slow connections.
Step 1: Resize to the size you actually need
A phone photo of 4000 × 3000 pixels holds 12,000,000 pixels. Stored without compression, each pixel takes 3 bytes, so the picture would be about 36 MB. If your page shows it 1200 pixels wide, most of that detail is never seen. Resizing it to 1600 × 1200 keeps it sharp on high-resolution screens and cuts the pixel count by 84% (to 1,920,000). That is the single biggest saving you can make, and it comes before any compression. Use the image resizer and keep the proportions on so the picture is not stretched.
| Where the image is used | Sensible width |
|---|---|
| Full-width banner or hero | 1920 to 2560 px |
| Picture inside an article | 1200 to 1600 px |
| Thumbnail or product grid | 400 to 800 px |
| Profile picture | 256 to 512 px |
| Link preview (Open Graph) | 1200 × 630 px |
Widths that stay sharp on high-density screens without wasting bytes.
Step 2: Choose the right format
| Format | Best for | Transparency | Compression |
|---|---|---|---|
| JPEG (JPG) | Photographs | No | Lossy |
| PNG | Logos, screenshots, sharp graphics | Yes | Lossless |
| WebP | Photos and graphics on the web | Yes | Lossy or lossless |
JPEG works everywhere, and WebP is supported by all current major browsers.
Photos belong in JPEG or WebP. PNG keeps every pixel exact, so a photo saved as PNG can be many times larger than the same photo as JPEG, and compressing a PNG with a quality slider does nothing. If you have a large PNG photo, converting it with the image converter is usually the biggest single win. Keep PNG for logos, icons and screenshots with sharp text, and when you need transparency.
Step 3: Set the quality
For JPEG and WebP the quality setting trades detail for size. Values around 70 to 80% are a common starting point for photos on the web, and the file shrinks quickly as you go down from 100%. Lower values start to show blocky patches and smudged edges, especially in skies and skin. Compress from the original each time, because every lossy save loses a little more. The image compressor shows the before and after size of each file so you can compare settings.
A privacy bonus
Photos taken on phones often contain hidden metadata (called EXIF) that can include the date, the camera model and the GPS location where the picture was taken. When our tools re-encode a picture in your browser, that metadata is not copied to the new file, so images you post no longer carry it. The tools also run entirely on your device, so your pictures are never uploaded.
Step 4: Help the browser on the page
- Give every image
widthandheightattributes, so the page does not jump while images load. Google’s Cumulative Layout Shift (CLS) score should stay at 0.1 or below. - Use
loading="lazy"for images below the first screen, but not for the main image at the top, which should load as early as possible. - Offer more than one size with
srcsetso phones download a smaller file than desktops. - Use a descriptive file name, such as
blue-running-shoes.jpg, and write meaningful alt text. This helps accessibility and helps search engines understand the picture.
A simple workflow
- Keep the original photo somewhere safe.
- Resize a copy to the width you need.
- Save it as JPEG or WebP at 70 to 80% quality (PNG only for graphics).
- Compare it with the original at the size it will be shown. If it looks the same, you are done.
The savings depend on the picture, so try a few settings and use the size shown for each file rather than trusting a rule of thumb.
Sources and further reading
- Google Search Central: Image SEO best practices
- web.dev: Web Vitals
- JPEG (Wikipedia)
- WebP (Wikipedia)
- Portable Network Graphics (Wikipedia)
Numbers in worked examples are calculated by code and checked by automated tests. How we test.