How to Reduce Image Size for a Website and Improve Page Speed?
Images are an essential part of modern websites, but large image files can also become one of the biggest reasons a website loads slowly.
A high-resolution image uploaded directly from a camera or design tool may be several megabytes in size. If a page contains multiple large images, visitors may need to download a significant amount of unnecessary data before the page becomes fully usable.
The solution isn't to remove images from your website. Instead, you should reduce image file size, choose the right image format, serve appropriate dimensions, and load images efficiently.
Image optimization can reduce bandwidth usage, improve loading performance, provide a better experience for mobile visitors, and help important page elements load sooner. MDN specifically recommends compressing images, using appropriate formats and sizes, lazy-loading images that are not immediately needed, and specifying image dimensions.
In this guide, you'll learn how to reduce image size for a website and improve page speed without unnecessarily sacrificing image quality.
Why Do Large Images Slow Down a Website?
When someone visits a webpage, the browser needs to download the resources required to display it.
Large images require more data to download than optimized images.
For example:
- Image A: 3 MB
- Image B: 250 KB
If both images look almost identical on the screen, sending the 3 MB version to every visitor is unnecessary.
Now imagine a page containing:
- 5 images × 3 MB = 15 MB
- 5 optimized images × 250 KB = 1.25 MB
The difference can become substantial, especially for visitors using mobile networks or slower connections.
Large images can also compete with other important resources for network bandwidth. Optimizing below-the-fold images can reduce that competition and help important content load sooner.
What Is Image Optimization?
Image optimization is the process of reducing image file size while maintaining an appropriate level of visual quality and delivering the image in a way that suits the user's device and the page layout.
Website image optimization usually involves several techniques:
- Compressing images
- Choosing the correct image format
- Resizing oversized images
- Using WebP or AVIF where appropriate
- Serving responsive image sizes
- Lazy-loading images below the fold
- Specifying image dimensions
- Removing unnecessary metadata
- Optimizing important images separately
The biggest mistake is thinking that image optimization means simply reducing JPEG quality.
It is actually a combination of compression, dimensions, format, and delivery.
1. Resize Images Before Uploading Them
One of the simplest ways to reduce image size is to make sure the image isn't unnecessarily large.
Suppose your website displays a blog image at approximately 800 pixels wide.
Uploading a:
4000 × 2500 pixel image
doesn't necessarily provide any benefit to the visitor.
The browser may display the image at a much smaller size, but the user could still have to download the much larger source file.
Instead, resize the image to a reasonable dimension before uploading it.
Example
If your content area is approximately 800 pixels wide, an image around:
800–1200 pixels wide
may be more appropriate than a 4000-pixel image, depending on the layout and display requirements.
The exact dimensions depend on your website.
The important principle is:
Don't send a much larger image than the visitor actually needs.
Responsive images can take this further by allowing browsers to select an image size that matches the device and layout. MDN's responsive image guidance explains how srcset and sizes allow browsers to choose an appropriate image from multiple available sizes.
2. Compress Images Before Using Them
Image compression reduces the amount of data required to store and deliver an image.
There are two major approaches:
Lossy Compression
Lossy compression removes some image information to achieve a smaller file size.
It can provide significant size reductions while maintaining good visual quality when used correctly.
It's commonly useful for:
- Photos
- Blog images
- Product photography
- Background images
- Social media images
Lossless Compression
Lossless compression reduces file size without permanently removing image information.
It can be useful when preserving exact image data matters.
For example:
- Graphics
- Screenshots
- Certain PNG images
- Images requiring repeated editing
The best compression method depends on the image type and how it will be used.
For most websites, the goal isn't the smallest possible file.
The goal is the smallest practical file that still looks good.
3. Choose the Right Image Format
Image format has a major impact on file size.
Common formats include:
- JPG/JPEG
- PNG
- WebP
- AVIF
- SVG
JPG
JPG is commonly suitable for photographs and images containing many colors.
It uses lossy compression and can produce relatively small files.
PNG
PNG is useful when you need lossless compression or transparency.
It's often suitable for:
- Screenshots
- Interface graphics
- Logos
- Images requiring transparency
However, PNG can produce much larger files than modern alternatives for some use cases.
WebP
WebP supports both lossy and lossless compression and can be a strong choice for many website images.
It can provide smaller files while maintaining good visual quality.
AVIF
AVIF is another modern image format that can provide strong compression and image quality.
Modern browsers support AVIF, although you should still consider browser compatibility and your site's image-delivery setup.
For a detailed comparison, see our guide on WebP vs JPG vs PNG.
The key point is simple:
Don't automatically use the same image format for every image.
Choose the format based on the type of image and what it needs to support.
4. Use WebP or AVIF for Suitable Images
If your website still serves large JPG or PNG files everywhere, consider testing modern formats such as WebP and AVIF.
Modern formats can reduce the amount of data visitors need to download.
For example, instead of serving:
large-image.png
you may be able to serve:
optimized-image.webp
or:
optimized-image.avif
The actual savings depend on the original image, dimensions, compression settings, and content.
Don't convert an image simply because a newer format exists.
Always compare:
quality + file size + browser support + website requirements.
5. Use Responsive Images
A desktop monitor and a smartphone don't necessarily need the same image dimensions.
A desktop might display an image at 1200 pixels wide while a mobile device might display it at only 400 pixels wide.
Sending the 1200-pixel image to the phone wastes bandwidth.
HTML provides srcset and sizes so browsers can select an appropriate image from multiple versions. MDN notes that the browser can use viewport size, pixel density, layout information, and the available image candidates to choose an appropriate resource.
Example:
<img
src="image-1200.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 400px, 800px"
alt="Example image"
>
This allows the browser to choose an image more appropriate for the user's display.
Responsive images are especially useful for websites with:
- Large hero images
- Blog images
- Product images
- News websites
- Image-heavy pages
- Responsive layouts
6. Lazy Load Images Below the Fold
Not every image needs to load immediately.
If an image is far below the visible part of the page, loading it before the visitor reaches it can waste bandwidth.
You can use native browser lazy loading:
<img src="image.webp" loading="lazy" alt="Example image" >
With loading="lazy", browsers can delay loading images that are outside the current viewport until they are closer to being needed. This can reduce initial network usage and help the browser prioritize more important content.
Important:
Don't blindly lazy-load every image.
Your most important above-the-fold image may need to load immediately because it can contribute to the page's Largest Contentful Paint (LCP).
Images below the fold are generally better candidates for lazy loading.
7. Don't Lazy Load Your Main Hero Image
A common optimization mistake is applying loading="lazy" to the main image that visitors see immediately.
For example, if your hero section contains a large featured image that becomes the page's main content element, delaying it can work against your performance goals.
Instead:
Above-the-fold important image → prioritize appropriately
Below-the-fold image → consider lazy loading
The goal isn't to delay everything.
The goal is to prioritize the resources that matter most.
8. Specify Image Width and Height
Image optimization isn't only about file size.
You should also tell the browser how much space an image requires.
For example:
<img src="image.webp" width="800" height="500" alt="Website image" >
The browser can use these dimensions to calculate the image's aspect ratio before the image finishes downloading and reserve the required space.
This can reduce layout shifts as images load. MDN recommends specifying image dimensions because doing so allows the browser to reserve space and can reduce layout instability.
This is particularly important for:
- Blog images
- Product images
- Cards
- Thumbnails
- Hero images
- Lazy-loaded images
9. Remove Unnecessary Image Metadata
Some images contain metadata that isn't required for displaying them on a website.
Depending on how the image was created, metadata may include information such as:
- Camera information
- Software information
- Location data
- Editing information
Removing unnecessary metadata can sometimes reduce file size.
However, the amount saved varies significantly between images, so metadata removal should be treated as an additional optimization rather than your primary strategy.
Your biggest gains usually come from:
Correct dimensions + compression + appropriate format.
10. Don't Upload Camera-Resolution Images Directly
Modern smartphones and cameras can produce extremely large images.
A photo might be:
6000 × 4000 pixels
and several megabytes in size.
There is rarely a reason to serve the original camera file directly to a normal website visitor.
Before uploading it:
- Resize it.
- Choose an appropriate format.
- Compress it.
- Remove unnecessary metadata if useful.
- Upload the optimized version.
This can dramatically reduce the amount of data your website sends.
11. Optimize WordPress Images
If your website uses WordPress, image optimization can be handled through several approaches.
You can:
- Resize images before uploading
- Use WebP/AVIF conversion
- Enable automatic image optimization
- Generate responsive image sizes
- Lazy-load suitable images
- Remove unnecessary image sizes
- Use an image optimization plugin or service
However, don't install multiple image optimization plugins that perform the same task.
Two systems processing the same images can create unnecessary complexity and sometimes duplicate optimization work.
Choose one reliable image optimization workflow and monitor the results.
12. Optimize Images in Custom Websites
If you're developing a custom website, image optimization should be part of your image-upload workflow rather than something you do manually every time.
For example, an image upload system can automatically:
Upload → Validate → Resize → Compress → Convert → Store → Serve
You can generate multiple versions:
- Thumbnail
- Small
- Medium
- Large
- Original
Then serve the appropriate version based on where the image appears.
For a blog system, for example, you might store:
image-400.webp
image-800.webp
image-1200.webp
Then use responsive image techniques to let the browser select the appropriate version.
This is much more scalable than manually optimizing every image.
13. Use a CDN for Image Delivery
A Content Delivery Network (CDN) can help deliver images from servers closer to visitors.
This can be especially useful if your website has visitors from multiple countries.
Some image delivery platforms can also automatically:
- Resize images
- Convert formats
- Compress images
- Cache images
- Deliver different versions to different devices
A CDN doesn't replace image optimization.
If you upload a 5 MB image and simply put it behind a CDN, you're still starting with a large asset.
The best approach is:
Optimize the image + deliver it efficiently.
14. Use an Image Optimization Tool
Manually resizing and compressing every image isn't practical for a website that publishes content regularly.
An image optimization tool can help you:
- Compress JPG files
- Compress PNG files
- Convert images to WebP
- Convert images to AVIF
- Resize images
- Reduce file size
- Optimize images in batches
For example, if you publish ten blog posts and each post contains five large images, manually optimizing every file can quickly become repetitive.
Automating the process can make image optimization part of your normal publishing workflow.
15. Don't Over-Compress Images
Reducing file size is good.
Destroying image quality isn't.
If you compress an image too aggressively, you may see:
- Blurry details
- Blocky artifacts
- Color banding
- Visible compression noise
- Poor product images
- Unprofessional visuals
Instead of asking:
"How small can I make this image?"
ask:
"How small can I make this image while keeping acceptable quality?"
This produces a much better balance between performance and visual quality.
16. Optimize Different Images Differently
Not every image needs the same settings.
For example:
Blog Photograph
Use:
JPG / WebP / AVIF
with appropriate lossy compression.
Logo
Use:
SVG
when appropriate.
Screenshot
Consider:
PNG / WebP
depending on the image.
Transparent Graphic
Use a format that supports transparency, such as:
PNG / WebP / AVIF
depending on your browser and delivery requirements.
Large Photographic Hero Image
Use:
WebP / AVIF / optimized JPG
with carefully selected dimensions and compression.
The best image optimization strategy depends on the content.
17. Optimize the Largest Images First
If you have hundreds of images, don't necessarily start optimizing every tiny icon.
Look for the largest resources first.
A performance audit can help identify which images are consuming the most bandwidth.
Common problem images include:
- Hero banners
- Large background images
- High-resolution blog images
- Product images
- Sliders
- Gallery images
Reducing one 4 MB image can be more valuable than optimizing twenty 20 KB icons.
18. Check Your Website With PageSpeed Tools
After optimizing images, test your website.
You can use tools such as:
- Google PageSpeed Insights
- Chrome DevTools
- Lighthouse
- WebPageTest
Look for issues related to:
- Image size
- Image format
- Image loading
- Largest Contentful Paint
- Layout shifts
- Network requests
- Unused resources
Don't optimize based solely on a score.
A performance tool is useful because it helps you identify what is actually slowing the page down.
How Much Can Image Optimization Improve Page Speed?
There isn't a single percentage that applies to every website.
The improvement depends on:
- Original image sizes
- Number of images
- Compression level
- Image formats
- Visitor connection
- Device performance
- CDN configuration
- Page structure
- Other website resources
For an image-heavy website, however, image optimization can make a noticeable difference because images can represent a significant portion of the data transferred by a webpage. MDN specifically identifies images as a major bandwidth consumer and recommends optimizing their format, compression, dimensions, and loading strategy.
Best Image Size for a Website
There is no universal "perfect" image file size.
Instead of following a rule such as:
Every website image must be under 100 KB
consider the actual purpose and display dimensions.
A small thumbnail may only need tens of kilobytes.
A large photographic hero image may reasonably be larger.
What matters is that you're not sending unnecessary data.
Think about:
Display size → image dimensions → format → compression → delivery method
rather than focusing on one fixed KB number.
Image Optimization Checklist
Before uploading an image to your website, ask:
Dimensions
- Is the image larger than the space where it will be displayed?
- Can I resize it?
Format
- Is JPG appropriate?
- Would WebP be better?
- Would AVIF be appropriate?
- Should this be SVG?
Compression
- Has the image been compressed?
- Is the quality still acceptable?
Delivery
- Should this image use responsive images?
- Should it be lazy-loaded?
- Is it an important above-the-fold image?
Layout
- Are width and height defined?
- Could the image cause layout shifts?
Performance
- Is this one of the largest resources on the page?
- Have I tested the page after optimization?
A Simple Website Image Optimization Workflow
If you want a practical process you can use every time, follow this workflow:
Step 1: Resize the image to the required dimensions.
Step 2: Choose an appropriate image format.
Step 3: Compress the image.
Step 4: Convert to WebP or AVIF when appropriate.
Step 5: Generate responsive image sizes for important images.
Step 6: Add width and height attributes.
Step 7: Lazy-load images that are below the fold.
Step 8: Prioritize important above-the-fold images.
Step 9: Serve images efficiently through your hosting or CDN.
Step 10: Test the page with a performance tool.
This workflow can become part of your normal website publishing process.
Final Thoughts
Reducing image size is one of the simplest ways to improve website performance, but effective image optimization involves more than compressing a few JPG files.
For the best results, combine:
Image resizing + compression + modern formats + responsive images + lazy loading + correct dimensions + efficient delivery.
Don't sacrifice image quality unnecessarily. Instead, find the right balance between visual quality and file size.
If your website contains large images, start with your biggest files first. Resize them, compress them, choose a suitable format, and test the page again.
A faster website doesn't require removing images.
It requires sending the right image, at the right size, in the right format, at the right time.
Frequently Asked Questions
How do I reduce image size without losing quality?
Resize the image to the dimensions actually required by your website, then use appropriate compression and a modern format such as WebP when suitable. The goal is to reduce unnecessary data while maintaining acceptable visual quality.
What is the best image format for website speed?
There isn't one format that is best for every image. WebP and AVIF are strong modern options for many web images, while JPG, PNG, and SVG remain useful for specific situations.
Should I convert all website images to WebP?
Not necessarily. WebP is useful for many images, but format selection should depend on image content, transparency requirements, browser support, and your delivery setup.
Does image compression improve SEO?
Image optimization can contribute to better website performance and user experience, which are important aspects of technical SEO. It can also reduce bandwidth and help pages load more efficiently.
Should website images be lazy-loaded?
Images below the fold are generally good candidates for lazy loading. Important above-the-fold images should not automatically be lazy-loaded because delaying a key image can hurt loading performance.
What image size is best for a website?
There is no universal file-size limit. The ideal image should be large enough for its intended display but not significantly larger than necessary. Responsive images can help deliver different sizes to different devices.
Why are my website images still slow after compression?
Compression isn't the only factor. Large dimensions, inappropriate formats, too many images, missing lazy loading, inefficient delivery, slow hosting, and lack of responsive images can all contribute to image-related performance problems.