Oversized images are one of the most common reasons a page feels slow. A browser can shrink a 4000px photo into a 600px layout slot, but it still has to download and decode the full image first.
Start by finding the images that cost the page the most, then fix dimensions, format, and compression in that order.
Find heavy image requests
Open DevTools, switch to Network, enable Disable cache, and reload the page. Filter by Img or sort by Size.
Look for files measured in megabytes, especially near the top of the page. Hero images, product galleries, background photos, and large PNG screenshots are common offenders.
Click an image request and compare the image’s natural dimensions with the size shown on the page. A file that is 4032x3024 but renders at 640x480 is doing extra work for no visible gain.
Resize before compression
Compression cannot fix a file that is far larger than the layout needs. Resize first.
Useful starting widths:
- Full-width hero:
1600pxto2000px - Article image:
1000pxto1400px - Sidebar or card image:
400pxto800px - Thumbnail:
300pxto600px
Do not upscale small originals. Upscaling increases file size and can make the image softer.
For batch exports, use Image Resizer to create the widths your layout actually serves.
Pick the right format
Format choice changes file size as much as quality settings do.
| Image type | Safer format | Reason |
|---|---|---|
| Photos and hero images | JPEG or WebP | Small files for natural detail and gradients |
| Logos, UI, diagrams, screenshots | PNG or SVG | Sharp edges and exact colors |
| Transparent raster graphics | PNG or WebP | Alpha channel support |
| Scalable icons and marks | SVG | Vector shapes instead of fixed pixels |
If a large photo is saved as PNG, convert it to JPEG or WebP. If a logo is saved as JPEG, switch to PNG or SVG so the edges stay sharp.
Use Image Converter when the fix is a format change, such as PNG to WebP, JPEG to WebP, or PNG to JPEG.
Compress with a visual check
After resizing and format choice, adjust quality.
For many website photos, JPEG quality around 75 to 85 keeps visible detail while removing a large amount of file weight. WebP belongs in a similar starting range, though the right value depends on the image.
Check flat areas, faces, text, and edges after compression. Artifacts tend to appear first in gradients, skin tones, and small lettering.
Use Image Compressor to compare the original and compressed result before downloading the output.
Serve smaller files to smaller screens
A phone does not need the same source file as a desktop monitor. Use srcset when your CMS or build system supports responsive images:
<img
src="article-800.jpg"
srcset="article-480.jpg 480w, article-800.jpg 800w, article-1400.jpg 1400w"
sizes="(max-width: 700px) 100vw, 700px"
alt="Desk with laptop and image editing panel">The browser chooses the smallest file that still fits the rendered size and screen density.
Lazy-load below-the-fold images
Images below the first screen should not compete with the main content. Add native lazy loading when the image is not needed immediately:
<img src="gallery-800.jpg" loading="lazy" alt="Product detail">Do not lazy-load the main hero image. That file helps define the first screen, so delaying it can make the page feel slower.
Fix the biggest image first
One large hero image can outweigh every other improvement. Start with the largest visible image, resize it to the real display range, convert it to the right format, compress it, then test the page again.
If the same page still feels slow after the image pass, check third-party scripts next. A light page can still feel delayed when JavaScript blocks interaction.
