How to optimize images for website performance (2026)
Quick Answer
To optimise images for website performance, serve images at the size they will actually display, compress them appropriately, and use modern formats where supported. Then deliver them efficiently with responsive image markup, lazy loading for below-the-fold content, and caching or a CDN, while checking the result with real performance tools.
Overview
Image optimisation is one of the highest-impact ways to speed up a website because images are often among the largest files a page downloads. Good optimisation is not just about making files smaller: it is about choosing the right format, matching dimensions to the layout, preserving enough visual quality, and loading each image only when and where it is needed. The best process starts with an audit, then fixes the biggest files first, updates how images are exported or generated, and finally improves delivery in the browser. For most sites, the practical approach is to avoid uploading oversized originals, create multiple sizes for different screens, and use responsive image markup so browsers can pick the most suitable version. Decorative and off-screen images should not compete with essential content, while important page images such as logos, product photos and hero images need careful treatment so they stay sharp without becoming unnecessarily heavy. After changes, test with recognised tools and watch real user performance where possible. This guide focuses on the parts you can control on a typical website or CMS without guessing technical values that depend on your design, hosting, image style and platform.
Who this is for
Website owners, content editors, developers, SEO teams and anyone maintaining a CMS, ecommerce site or web app who wants faster page loads without visibly poor image quality.
What you’ll need
- Access to your website, CMS or codebase
- Original image files where possible
- An image editor or export tool
- A performance testing tool such as PageSpeed Insights or Lighthouse
- Access to hosting, CDN or image optimisation plugin settings if used
Before you start
Check which images are actually slowing the site before changing everything. Identify the most important pages, note where images appear above the fold, and back up originals so you can re-export if quality suffers. Also confirm whether your CMS, framework, CDN or host already performs resizing, format conversion or lazy loading to avoid duplicating work.
Step-by-step
- 1
Audit the current images
Test key pages with a recognised performance tool and inspect which image files are largest or loaded unnecessarily. Review file dimensions, formats, duplicate images, decorative assets and whether large images are being downloaded on small screens.
Why: This shows where the real waste is. Optimising the wrong images first can save little time while creating unnecessary work.
- 2
Use the right image dimensions
Resize each image to suit its actual display area before upload or export. If an image appears in several layout sizes, generate multiple versions rather than serving one oversized original everywhere. Keep source files separately so you can create new sizes later.
Why: Sending a much larger image than the browser will display wastes bandwidth and slows rendering even if the on-screen result looks the same.
- 3
Choose an appropriate file format
Use formats based on the type of image. Photographic images often suit modern compressed formats, while simple graphics, logos, illustrations or transparency may need a different format. Keep SVG for simple vector artwork when safe and appropriate. If your platform supports modern formats automatically, verify the output rather than assuming it is working.
Why: Different formats are better at different kinds of visual content. A good format choice can reduce file size significantly without a visible loss in quality.
- 4
Compress images and check visual quality
Export or process images with sensible compression settings, then compare the result on desktop and mobile screens. Start with important page images, especially hero banners and product images, and keep reducing file size until visible artefacts become unacceptable. If available, use automated optimisation in your build process, CMS plugin or CDN.
Why: Compression is where most of the file-size savings happen, but over-compression creates blur, banding or blockiness that harms trust and usability.
- 5
Implement responsive image delivery
Use responsive image techniques so the browser can choose the best file for the user’s screen and layout. In code, that usually means proper image markup with multiple candidate sizes, and in a CMS it may mean using the platform’s built-in responsive image features rather than inserting full-size files manually.
Why: Responsive delivery stops small devices downloading unnecessarily large assets and improves performance across a wide range of screens.
- 6
Prioritise important images and defer the rest
Load above-the-fold and content-critical images promptly, but lazy-load images lower down the page. Avoid lazy-loading the main image that users need immediately. Make sure width and height or equivalent layout information is set so space is reserved before the image loads.
Why: This improves initial page speed while preventing layout shifts that can make the page feel unstable.
- 7
Improve delivery with caching or a CDN
Serve optimised images through effective browser caching and, if your audience is geographically spread out, a CDN or image delivery service. If your platform offers automatic image resizing, format negotiation or edge optimisation, test how it behaves in practice.
Why: Even well-compressed images load faster when they are cached and delivered from a nearby location or optimised at the edge.
- 8
Retest and maintain the workflow
Re-run performance tests after changes and check real pages on multiple devices. Then put rules in place for future uploads: editorial guidance, media library size limits, automated conversion, and regular checks for oversized images reappearing.
Why: Image performance often degrades again over time unless the upload and publishing process is controlled.
Why this works
Website performance improves when the browser downloads fewer bytes, makes fewer unnecessary requests, and can render visible content sooner. Image optimisation directly reduces transfer size and can also improve layout stability and loading priority when implemented properly.
Common mistakes to avoid
- Uploading camera-original or designer-exported images straight to the CMS
- Serving one large image to every device instead of using responsive sizes
- Converting everything to one format without considering transparency, graphics or browser support
- Over-compressing important images until they look untrustworthy or blurry
- Lazy-loading the main hero or product image that should appear immediately
- Forgetting to define image dimensions, causing layout shifts
- Relying on a plugin or CDN without testing the actual output
Troubleshooting
Images still score poorly in performance tests after compression
Check whether the browser is still receiving oversized dimensions, the wrong variant, or duplicate images through CSS, sliders or hidden elements. Also check caching headers and whether a modern format is actually being served.
Images look soft on some screens
Review the source dimensions and responsive variants. You may be serving an image that is too small for high-density displays or stretching a small asset with CSS.
Page layout jumps as images load
Set width and height attributes or otherwise reserve space in the layout so the browser can calculate the aspect ratio before the file arrives.
A plugin claims optimisation is enabled but files remain large
Inspect the delivered image URLs in the browser and verify the actual file type, dimensions and transfer size. The plugin may not be processing existing media, background images or externally hosted images.
The main banner loads too late
Do not lazy-load the critical hero image. Make sure it is prioritised appropriately and that the browser is not blocked by a heavy slider script or oversized source file.
Compare your options
Manual optimisation in an image editor
Best for: Small sites or pages where visual control matters most
Pros: Precise quality control, good for key brand and product images, no extra runtime dependency
Cons: Time-consuming, easy to apply inconsistently, does not scale well
CMS plugin or built-in media optimisation
Best for: Content-heavy sites managed by editors
Pros: Automates resizing and compression, easier to standardise, usually simple to maintain
Cons: May miss some images, quality settings can be blunt, output must be verified
CDN or dedicated image delivery service
Best for: Larger sites, global audiences, dynamic resizing needs
Pros: Can automate format conversion, caching and edge delivery, scalable for many assets
Cons: Adds service complexity, may require URL or template changes, costs depend on usage
| Option | Best for | Pros | Cons |
|---|---|---|---|
| Manual optimisation in an image editor | Small sites or pages where visual control matters most | Precise quality control, good for key brand and product images, no extra runtime dependency | Time-consuming, easy to apply inconsistently, does not scale well |
| CMS plugin or built-in media optimisation | Content-heavy sites managed by editors | Automates resizing and compression, easier to standardise, usually simple to maintain | May miss some images, quality settings can be blunt, output must be verified |
| CDN or dedicated image delivery service | Larger sites, global audiences, dynamic resizing needs | Can automate format conversion, caching and edge delivery, scalable for many assets | Adds service complexity, may require URL or template changes, costs depend on usage |
Alternatives
- Replace decorative raster images with CSS effects where appropriate
- Use SVG for simple icons and logos instead of bitmap images
- Reduce the number of images on low-value pages rather than only compressing them
- Use an image component from your framework that handles responsive delivery automatically
Pro tips
- Optimise the pages with the most traffic and the largest images first
- Keep original source files outside the CMS so you can re-export cleanly
- Create a simple editorial rule: never upload images larger than needed for the design
- Test on real mobile connections as well as desktop tools
- Check background images in CSS, as they are often missed in audits
- Review third-party themes and sliders, which frequently load oversized images by default
Safety notes
- Back up original images before bulk compression or format conversion
- Test changes on a staging site if your pages depend on exact image dimensions or URLs
- Check accessibility after replacing images, including meaningful alt text where needed
- Be careful with SVG uploads from untrusted sources because they can contain active content
Legal & regulatory notes
Make sure you have the right to edit, compress, convert or redistribute the images you use. If images contain personal data or sensitive content, follow your organisation’s privacy and retention rules. Also preserve any legally required brand assets or disclosures so optimisation does not remove necessary information.
What this guide does not cover: This guide covers general website image optimisation workflow and delivery practices. It does not provide platform-specific instructions for every CMS, framework or CDN, and it does not cover advanced image editing, DAM systems or detailed accessibility policy.
Cost considerations
Image optimisation can reduce bandwidth and hosting strain, but advanced CDN or image-processing services may add ongoing costs. In many cases, the cheapest gains come from better export habits, responsive image markup and using built-in platform features before paying for extra tooling.
Frequently asked questions
Should I convert every image on my site to one modern format?+
Not automatically. Modern formats can be excellent, but the best choice still depends on the image type, transparency needs, compatibility requirements and your delivery setup.
Is lazy loading always a good idea?+
No. It is useful for images below the fold, but important above-the-fold images should usually load normally so users see the main content quickly.
Do I still need to resize images if my browser scales them down?+
Yes. Browser scaling changes display size, not download size. If the original file is much larger than needed, users still pay the performance cost.
What is more important: compression or responsive images?+
Both matter. Compression reduces file weight, while responsive images stop devices downloading unnecessarily large files in the first place.
Can a plugin fix everything for me?+
Usually not. Plugins help a lot, but they often miss background images, third-party assets, poor markup or badly chosen source files.
Sources & references
Guidance on this page is traced to documented sources. Last checked 24 September 2026.
- MDN Web Docs - Responsive images · industry
Supports the use of responsive image markup so browsers can select suitable image resources for different viewport and resolution conditions.
- web.dev - Browser-level image lazy loading for the web · industry
Supports using native lazy loading for off-screen images and avoiding misuse on critical above-the-fold images.
- web.dev - Optimize Largest Contentful Paint · industry
Supports prioritising important above-the-fold images because they can affect perceived load speed and Core Web Vitals.
- Google PageSpeed Insights · industry
Supports auditing pages to identify oversized images and other performance issues before and after optimisation.
The core principles stay stable, but browser support, preferred formats, tooling and framework defaults change over time.