WordPress Image Optimisation

Images are at the heart of every WordPress website, helping to capture attention, tell stories, and showcase products or services. But while high quality visuals are important for engagement, they can also be one of the biggest culprits behind slow loading times and poor performance. That’s where image optimisation comes in. By reducing file sizes without sacrificing quality, you can speed up your site, improve user experience, and boost SEO rankings, all while keeping your images looking sharp and professional.

The size of an image, how it is delivered, and where it is loaded in the queue of assets all play a crucial role in website performance.

Smaller, properly optimised images load faster, reducing page weight and improving user experience.

Delivering images through a Content Delivery Network (CDN) can help serve from servers closer to the visitor, which speeds up download times and reduces latency.

Additionally, critical images (such as the Largest Contentful Paint (LCP) image) can be preloaded using browser hints, allowing the browser to fetch them early and display the main content more quickly.

Combining optimised image sizes, CDN delivery, and intelligent loading strategies significantly improves page speed and overall site performance.

When it comes to web performance, page size matters more than you might think. A typical modern web page averages between 1.5MB and 2.5MB, but leaner is almost always better.

Ideally, you should aim to keep your pages under 1MB wherever possible, as larger pages take longer to load, especially on slower connections or mobile devices. Every extra megabyte means more data for users to download, which can increase bounce rates and hurt SEO rankings.

By optimising images, reducing scripts, and limiting unnecessary assets, you can keep your page size efficient without sacrificing design or functionality.

It’s worth remembering that 1MB is really quite small in the context of modern media. A single high resolution photo straight from a smartphone can easily be 3–5MB on its own, and short video clips can be many times larger.

Even common web assets like background images, sliders, and large JavaScript libraries can quickly push a page well over the 1MB mark if left unoptimised.

Other things that are around 1MB:

• Less than 1 minute of MP3 of reasonable quality
• 200–250 typed Word document pages (words only)
• A few seconds of compressed video
• A stern email of complaint (about web page load times)

Web pages need to be as small as possible because large pages take longer to load, and can frustrate visitors. A site being large in size, means it will take linger to load, especially for visitors on slower internet connections may struggle to access it.

Search engines like Google also consider page speed when ranking websites, so smaller, faster-loading pages can improve visibility in search results.

By keeping web page sizes small they become faster, more efficient, and more user-friendly.

The size of an image you see on a web page is not always the same as the file size of the image itself.

On screen, an image may appear small or large depending on how it is displayed, resized, or scaled by the website, but the actual file size, measured in kilobytes (KB) or megabytes (MB)—depends on the image’s resolution, colour depth, and compression.

A photo might look tiny in your browser but still be several megabytes if it was taken with a high-resolution camera. Understanding this difference is important because large image files can slow down web pages, even if they appear small to the user.

Websites often use different images for mobile and desktop devices to improve performance and user experience.

Desktop screens are larger, so images can be higher resolution without looking blurry, while mobile screens are smaller and benefit from smaller, lighter images that load quickly and use less data.

Serving the right image for each device ensures pages load faster, look sharp, and don’t waste users’ bandwidth, which is especially important for visitors on mobile networks. This approach, called responsive images, helps websites work well on any device without slowing down performance.

The way a website theme or page builder handles images directly affects mobile and desktop image performance.

Many modern themes and page builders, like Kadence or Elementor, automatically generate responsive images, meaning they create multiple versions of each image at different sizes and serve the appropriate one depending on the visitor’s device.

If a theme or page builder doesn’t manage images efficiently, a large desktop image could be sent to a mobile device, slowing the page down and using extra data.

Using a theme or page builder that supports responsive images ensures that your website looks good on all devices while staying fast and lightweight.

Serving images in next generation formats, such as WebP or AVIF, helps websites load faster and use less data without reducing visual quality.

These formats are more efficient than traditional JPEG or PNG files, often producing files that are 20–50% smaller while looking just as sharp.

By using next-gen images, websites become quicker, more responsive, and mobile-friendly, which improves user experience and can also boost search engine rankings. Many modern themes and page builders support these formats automatically, making it easier to optimise images for speed.

Specifying accurate image sizes in HTML is important for website performance because it helps the browser allocate space for images before they load.

Without defined widths and heights, pages can shift unexpectedly as images appear, causing a poor user experience known as layout shift.

Accurate image sizes allow the page to load more smoothly, reduce unnecessary reflows, and improve metrics like Core Web Vitals, which measure speed and stability. This not only makes the site feel faster to visitors but also helps search engines rank the page higher.

Image optimisation is a key factor in keeping a WordPress website fast, efficient, and user-friendly.

There are two main approaches: optimising images before uploading or letting WordPress handle optimisation using plugins or built-in tools.

Preparing images in advance usually produces the smallest files, gives the most control, and has no resource overhead on your website. This approach does, however, require extra time and effort.

Relying on WordPress plugins to optimise images can save time and simplify workflow, but it may use more server side resources, which can have an impact on your website’s performance. This approach often gives less control over optimised images due to its automated nature.

With either method, as well as the image optimisation itself, it’s a good idea to preload LCP images (the main image that’s above the fold) to reduce page load times.

Some CDNs, like Cloudflare Images or Imgix (when using their default domains), serve images from a different domain than your website. In these cases, adding a preconnect hint in your HTML lets the browser establish a connection early, so the images start loading sooner and pages appear faster.

If the CDN uses a custom domain that matches your website, preconnect is usually not needed.

Using a CDN correctly, with preconnect when necessary, improves page speed and creates a smoother experience for visitors.

There are many image optimisation plugins available for WordPress, and they don’t all work the same way.

Some optimise images during upload, which can create a significant CPU load (especially on shared web hosting). Others operate on a push/pull basis, sending images to an external server for conversion and then returning them to your site, which avoids using your site’s CPU. Certain plugins also integrate an image CDN to deliver your site’s images more quickly. When these CDNs serve images from a different domain, a preconnect hint may be beneficial, as mentioned above, to speed up loading.

• Ideal for sites with a large number of existing .png or .jpg images.
• Can batch convert existing images to modern formats like WebP, reducing file sizes and improving page load times.
• Batch conversion creates a one-off CPU load, but can be scheduled at a convenient time.
• Can also convert images during upload, though this requires manual configuration and adds CPU load on upload.
• Once images are converted, the plugin can be uninstalled without losing images.
• Limitation: If the plugin is uninstalled, it no longer serves WebP versions automatically when JPGs are requested.

• Reduces image file sizes, improving site speed and Core Web Vitals.
• Batch conversion allows optimisation of existing images in one go.
• Flexible: can convert on upload or as a one-time batch.
• Converted images remain usable even if the plugin is removed.

Upload-time conversion adds CPU load which may affect performance on shared hosting.

Requires manual configuration for automatic conversion on upload.

Uninstalling the plugin stops automatic WebP delivery.

Batch conversions can be scheduled to avoid peak traffic times, reducing impact on site performance.

Upload-time conversions may strain CPU resources on shared hosting, especially if many images are uploaded at once.

Best suited for small-to-medium sites unless you schedule conversions carefully.

• Automatically converts images to appropriate sizes and WebP format.
• Generates missing image sizes, helping prevent layout shifts on your site.
• Image conversion is performed on QUIC.cloud’s external servers, keeping CPU usage on your own site very low.
• Optimised images are sent back to your site and served to visitors.
• Offers flexible options, including:
  • Keeping original images.
  • Choosing lossless or standard optimisation.
• Freemium model: QUIC.cloud provides a free image conversion quota; larger sites may need to purchase additional credits if the free quota isn’t sufficient.

• Offloads heavy processing to external servers → minimal CPU overhead.
• Prevents layout shifts by generating missing image sizes.
• Supports WebP format for improved performance.
• Flexible optimisation options.
• Integrates seamlessly with WordPress via LiteSpeed Cache plugin.

• Free quota may not be enough for larger sites → may require paid credits.
• Requires an external account (QUIC.cloud).
• Dependent on external servers for image conversion.

Minimal CPU load on your shared hosting account because image processing happens externally.

Suitable for sites with limited server resources.

Even with external processing, serving large numbers of images could impact bandwidth if the host has strict limits.

Freemium quotas may limit frequent large-batch uploads; planning bulk conversions during low traffic periods is recommended.

• Lossless and lossy compression: Reduce image file sizes while maintaining visual integrity.
• WebP and AVIF conversion: Serve images in next-gen formats for improved performance.
• Lazy loading: Defer offscreen images to enhance page load times.
• Bulk optimisation: Compress multiple images simultaneously.
• Automatic optimisation on upload: Automatically optimize images as they are uploaded to the media library.

However, it’s important to note that Smush performs image compression on your server, which can lead to increased CPU usage, especially during bulk optimisation or when handling large images. This can impact the performance of your website, particularly on shared hosting environments where server resources are limited.

• Comprehensive image optimisation: Compresses images without visible quality loss.
• Supports next-gen formats: Converts images to WebP and AVIF for faster loading.
• User-friendly interface: Easy to set up and use within the WordPress dashboard.
• Bulk optimisation: Allows for compressing multiple images at once, saving time.
• Automatic optimisation on upload: Ensures new images are optimised as they are added.

• High CPU usage: Image compression processes can be resource-intensive.
• Performance impact on shared hosting: Increased CPU usage can slow down your website on shared hosting platforms.
• Limited control over compression settings: Advanced users may find the customisation options insufficient.
• Potential conflicts with other plugins: Some users have reported issues when Smush is used alongside other optimisation plugins.

On shared hosting environments, server resources are distributed among multiple users, which can lead to performance issues when resource-intensive processes are running. The image compression tasks performed by Smush can consume significant CPU resources, potentially slowing down your website. This is particularly noticeable during bulk optimisation or when uploading large images.

To mitigate these issues:

• Schedule bulk optimisation during off-peak hours: Run large optimisation tasks when website traffic is low to reduce the impact on performance.
• Monitor server resource usage: Keep an eye on CPU and memory usage to identify any performance bottlenecks.
• Consider alternative optimisation methods: Explore other plugins or services that offload image optimisation tasks to external servers, reducing the load on your hosting environment.

• Lossy, Lossless, and Glossy Compression: Offers multiple compression levels to balance quality and file size.
• WebP and AVIF Conversion: Supports conversion of images to next-gen formats for improved performance.
• Bulk Optimisation: Allows for batch processing of existing images in the media library.
• Automatic Optimisation on Upload: Automatically optimises images as they are uploaded to the media library.
• Background Processing: Enables optimisation tasks to run in the background, reducing immediate server load.
• Global CDN Integration: Utilises ShortPixel’s Content Delivery Network to serve optimised images efficiently.

• Efficient Compression: Significantly reduces image file sizes, leading to faster page load times.
• Next-Gen Format Support: Converts images to WebP and AVIF formats, enhancing performance and SEO.
• Background Processing: Optimises images without affecting site performance during the process.
• Global CDN: Delivers optimised images quickly to users worldwide, improving user experience.
• Compatibility: Works well with various hosting environments, including shared hosting.

• API Credit Limitations: Free tier offers a limited number of image optimisations per month; additional credits require a paid plan.
• Potential Conflicts: May conflict with other optimisation plugins if not configured properly.
• Initial Optimisation Load: Bulk optimisation can be resource-intensive; scheduling during off-peak hours is recommended.

On shared hosting environments, server resources are limited and shared among multiple users. The image compression tasks performed by ShortPixel can consume significant CPU resources, especially during bulk optimisation or when uploading large images. This can impact the performance of your website, potentially leading to slower load times or timeouts.

To mitigate these issues:

• Schedule Bulk Optimisation During Off-Peak Hours: Run large optimisation tasks when website traffic is low to reduce the impact on performance.
• Monitor Server Resource Usage: Keep an eye on CPU and memory usage to identify any performance bottlenecks.
• Consider Upgrading Hosting Plan: If performance issues persist, consider upgrading to a hosting plan with more resources or utilising a VPS.

• Automatic Image Optimisation: Compresses images upon upload without manual intervention.
• Next-Gen Format Conversion: Supports WebP and AVIF formats for reduced file sizes.
• Global CDN Delivery: Delivers images via a Content Delivery Network with over 450 edge locations.
• Responsive Image Resizing: Adjusts image sizes based on the visitor’s device and screen size.
• Lazy Loading: Defers offscreen images to improve page load times.
• Cloud Media Library: Manages images across multiple sites without consuming server resources.
• Optimole’s cloud-based approach ensures that image processing does not burden your server, making it suitable for various hosting environments, including shared hosting.

• Cloud-Based Processing: Offloads image optimisation to the cloud, reducing server load.
• Automatic Optimisation: Optimises images upon upload without manual intervention.
• Next-Gen Format Support: Converts images to WebP and AVIF formats for improved performance.
• Global CDN Delivery: Serves images from over 450 edge locations worldwide.
• Responsive Resizing: Adjusts image sizes based on the visitor’s device and screen size.
• Lazy Loading: Defers offscreen images to improve page load times.
• Cloud Media Library: Manages images across multiple sites without consuming server resources.

• Free Plan Limitations: The free plan supports up to 1,000 monthly visits; higher tiers require a paid plan.
• Dependency on External Service: Relies on Optimole’s cloud service; any downtime could affect image delivery.
• Potential Conflicts with Other Plugins: Some users have reported issues when using Optimole alongside other optimisation plugins.

Optimole’s cloud-based processing ensures that image optimisation does not consume server resources, making it ideal for shared hosting environments. However, it’s essential to consider the following:

Free Plan Limitations: The free plan supports up to 1,000 monthly visits; higher tiers require a paid plan.

Dependency on External Service: Relies on Optimole’s cloud service; any downtime could affect image delivery.

By leveraging Optimole’s features, you can enhance your site’s performance without compromising server resources.

Image optimisation reduces file sizes without sacrificing quality, which improves page speed, user experience, and SEO rankings. Large images can slow down your website, especially on mobile devices or slower connections.

Smaller, properly optimised images load faster. Delivering images via a CDN helps serve them from servers closer to visitors, reducing latency. Preloading critical images like the Largest Contentful Paint (LCP) can make your pages appear to load faster.

Ideally, a web page should be under 1MB. Larger pages take longer to load and can frustrate visitors. Optimising images, reducing scripts, and limiting unnecessary assets keeps pages fast and user-friendly.

The displayed size of an image on a page doesn’t always match its file size. High-resolution images can look small but still be several megabytes in size, which can slow down your website if not optimised.

Desktop images can be higher resolution due to larger screens, while mobile images should be smaller to save bandwidth and improve loading times. Using responsive images ensures the correct size is served to each device.

Many modern themes and page builders generate responsive images automatically. If a theme doesn’t handle images efficiently, large desktop images may be served to mobile devices, slowing down the site.

Formats like WebP and AVIF are smaller than JPEG or PNG without losing quality. They reduce page weight, improve load times, and enhance SEO. Many WordPress themes and plugins support next-gen formats automatically.

Defining image width and height prevents layout shifts as the page loads. This improves Core Web Vitals metrics, providing a smoother, faster experience for visitors and better SEO.

You can either optimise images before upload using external tools or rely on WordPress plugins. Preloading LCP images further improves performance. Both methods have pros and cons in terms of control, CPU usage, and workflow efficiency.

Image CDNs serve images from servers close to your visitors, speeding up download times. When using a CDN on a different domain, preconnect hints in HTML can improve load speed.

Popular options include:

LiteSpeed Cache + QUIC.cloud: Converts images to WebP, generates missing sizes, and offloads processing externally.

Smush: Compresses images, supports WebP/AVIF, and offers lazy loading and bulk optimisation.

ShortPixel: Provides lossy/lossless compression, WebP/AVIF conversion, bulk optimisation, and a global CDN.

Converter for Media: Batch converts existing images to WebP for faster loading.

Yes. Plugins that process images on your server (like Smush) can use significant CPU resources, potentially slowing down your website. Offloading optimisation to external servers (like LiteSpeed Cache + QUIC.cloud or ShortPixel) reduces server load and improves performance.