Quick answer: To optimise images in WordPress, choose the right format (JPEG for photos, PNG for graphics with sharp edges or transparency, SVG for logos and icons), resize images to the largest size they will actually display, and compress them with a plugin such as EWWW Image Optimizer, WP Smush, ShortPixel, Imagify or Kraken. Use lossy compression for most photos, since the savings are large and the quality loss is rarely visible. Make sure your theme uses the responsive images built into WordPress, consider lazy loading for long pages, and compress your existing library, not just new uploads.
On most WordPress sites, images make up the largest share of what each page downloads. A single unoptimised photo from a modern camera can outweigh all the site’s code put together. Optimising images is often the single quickest way to make a site faster, and it costs little or nothing.
Why image weight matters
- Speed: heavier pages load more slowly, especially on mobile connections, and slow pages lose visitors.
- Data costs: visitors on mobile data plans pay for every megabyte.
- Hosting: large files use more storage and bandwidth, and slow down backups.
- Search: page speed is one of the many signals search engines consider.
Our broader guide to WordPress speed optimisation covers other factors, but images are usually the place to start.
Step 1: Choose the right format
JPEG
Best for photographs and images with many colours and gradients. JPEG uses lossy compression, which can reduce file size dramatically with little visible change.
PNG
Best for graphics with sharp edges, text, screenshots and anything needing a transparent background. PNG is lossless, so photos saved as PNG are often several times larger than the same photo as a JPEG. A common mistake is uploading photos as PNG files.
GIF
Only for simple animations, and even then a short video is often smaller. For still images, PNG is better.
SVG
Best for logos, icons and simple illustrations. SVG files are code rather than pixels, so they are tiny and sharp at any size. WordPress does not allow SVG uploads by default for security reasons, so you need a plugin or theme support, and you should only upload SVGs from trusted sources.
What about WebP?
WebP is a newer format from Google that produces smaller files than JPEG and PNG. Chrome supports it, but Safari, Firefox and Internet Explorer do not, so it can only be used with fallbacks. For most sites, well compressed JPEG and PNG remain the practical choice for now.
Step 2: Resize before or on upload
Uploading a 4,000 pixel wide photo for a space 800 pixels wide wastes bandwidth. WordPress creates smaller copies automatically, but the original is still stored and sometimes used, for example when someone chooses “Full size” in the editor or a theme links to the original.
- Decide on a maximum width for your site, usually the widest your content area or full width banners ever display, allowing extra for high resolution screens.
- Resize images to that width before uploading, or use a plugin that resizes oversized uploads automatically. Imsanity and several optimisation plugins offer this.
- Review the image sizes your theme registers. Our article on WordPress image sizes explains how to keep them sensible.
Step 3: Compress
Compression removes unnecessary data from image files.
Lossless compression
Removes metadata (camera details, colour profiles that are not needed) and optimises how data is stored, with no change to the image. Savings are modest.
Lossy compression
Reduces quality slightly in ways the eye rarely notices. Savings are much larger, often more than half the file size for photos. For most websites, lossy compression at a sensible level is the right choice. Check a few results at full size to make sure you are happy with quality, especially for product photos where detail matters.
Plugins that do the work
- EWWW Image Optimizer: can compress on your own server using installed tools, or through its paid cloud service for better lossy results.
- WP Smush: a popular free plugin with lossless compression; the paid Pro version adds lossy compression and larger files.
- ShortPixel: cloud based, with lossy and lossless options and a free monthly allowance.
- Imagify: cloud based, with normal, aggressive and ultra compression levels.
- Kraken and TinyPNG: well known compression services with WordPress plugins.
Cloud services do the heavy work on their servers, which avoids slowing your hosting, but they have usage limits or costs. Most can keep a backup of originals, which is worth enabling in case you change your mind about quality.
Do not forget existing images
New uploads get optimised automatically, but your existing library does not. Run the plugin’s bulk optimisation on older images. On large libraries this takes time and may use up free allowances, so plan for it.
Step 4: Use responsive images
Since WordPress 4.4, images inserted into content include srcset and sizes attributes. These list the available sizes of each image, letting browsers download the smallest one that fits the screen. A phone gets a small file; a large desktop display gets a larger one.
This works automatically for images in posts, but some themes and page builders output images in ways that bypass it. Check your page source: if images are missing srcset, ask your developer to use WordPress’s image functions in templates.
Step 5: Lazy load long pages
Lazy loading delays images below the visible part of the page until the visitor scrolls towards them. On long pages with many images, such as galleries, shop categories and long articles, it can cut initial page weight considerably.
WordPress does not lazy load images itself, so you need a plugin such as Lazy Load or BJ Lazy Load, or a feature in your optimisation or caching plugin. Test carefully: lazy loading can interfere with sliders, and images should still appear for visitors without JavaScript and for search engines.
Step 6: Serve images efficiently
- Browser caching: set long cache expiry headers for images so returning visitors do not download them again.
- CDN: a content delivery network serves images from servers close to your visitors. Cloudflare’s free plan is one option.
- HTTP/2: if your host supports it, many images can load in parallel more efficiently.
A simple routine for editors
- Choose the right format.
- Resize to the maximum display width.
- Upload; let the plugin compress automatically.
- Add a descriptive filename and alt text.
Pair this with a tidy media library and your site stays lean as it grows.
Measure the result
Test key pages before and after with a speed testing tool such as Google PageSpeed Insights, GTmetrix or WebPageTest. Look at total page weight and the size of the largest images. The improvement is often large enough to see without any tools.
FAQ
Will compressing images make them look worse?
Lossless compression changes nothing visible. Lossy compression at moderate settings is rarely noticeable, but check product images carefully.
Which image optimisation plugin is best?
They all work well. Choose based on whether you want compression on your server or in the cloud, the free allowance, and whether it keeps backups.
Should I compress images before uploading as well?
Resizing before upload is the most important step. A plugin can handle compression after that.
Faster pages, same great images
Image optimisation is one of the easiest speed wins for any WordPress site. We tune images, caching and hosting together so pages load quickly. See how we help businesses turn visitors into customers.
