How to optimise images on WordPress

If your WordPress website feels slow, there is a good chance the images are to blame. A single photo straight from a modern phone can be 4 to 8 megabytes, and a homepage with ten of them can take ages to load on mobile data in Kampala, let alone in towns with weaker coverage. Learning how to optimise images on WordPress is one of the quickest wins for speed, SEO and customer experience. This guide takes you through the whole process, from preparing photos before upload to automating compression and lazy loading.

Why image optimisation matters

• Speed: images often make up most of a page's total size. Smaller files mean faster pages.
• Data costs for visitors: many Ugandans browse on prepaid bundles. Heavy pages literally cost your visitors money.
• SEO: Google considers page experience and loading speed, and optimised images can also appear in Google Images.
• Hosting resources: large uploads fill your disk space and make backups bigger and slower.
• Conversions: visitors leave slow pages before seeing your products or contact details.

Step 1: Resize images before uploading

Most themes display images no wider than about 1200 to 2000 pixels, even on large screens. Uploading a 4000 pixel wide photo wastes bandwidth. Before uploading:

1. Decide the maximum display width. Full width banners might need around 1920 pixels; blog images often look great at 1200 pixels; product thumbnails can be smaller.
2. Resize using free tools such as Squoosh in the browser, GIMP, Photoshop or the built in Photos app on Windows or Mac.
3. Crop to the aspect ratio your theme uses so WordPress does not need to crop awkwardly.

WordPress automatically scales down very large uploads, but resizing yourself gives you more control and smaller original files.

Step 2: Choose the right file format

• JPEG: best for photographs, such as hotel rooms, food and people.
• PNG: best for graphics with transparency or sharp text, such as logos and screenshots. PNG photos are usually far too heavy.
• WebP: a modern format that is usually much smaller than JPEG or PNG at similar quality. WordPress supports WebP uploads, and most modern browsers display it.
• AVIF: an even newer format with excellent compression, supported in recent versions of WordPress and most modern browsers.
• SVG: ideal for logos and icons, but requires a plugin or careful handling for security reasons.

Step 3: Compress your images

Compression removes unnecessary data from an image file. Lossy compression reduces quality slightly but can shrink files dramatically; lossless compression keeps every pixel but saves less. For most websites, a well tuned lossy compression is invisible to the eye.

You can compress before upload with tools like TinyPNG or Squoosh, or let a plugin do it automatically.

Step 4: Use an image optimisation plugin

Plugins save time by compressing every image as you upload, and many can bulk optimise your existing media library. Well known options include:

• LiteSpeed Cache: if your host runs LiteSpeed servers, this free plugin includes image optimisation, WebP conversion and lazy loading alongside page caching.
• ShortPixel, Imagify, EWWW Image Optimizer and Smush: popular dedicated optimisation plugins with free and paid tiers.

Use one image optimisation tool only. Running two that both compress and convert images can cause conflicts and duplicate files.

Setting up LiteSpeed Cache image optimisation

1. Install and activate LiteSpeed Cache from Plugins then Add New.
2. Go to LiteSpeed Cache then General and request a free domain key, which connects your site to the QUIC.cloud optimisation service.
3. Open Image Optimization, then Image Optimization Settings. Enable auto request, optimise original images and create WebP versions.
4. Go to the summary tab and send an optimisation request. Images are processed in batches, so larger libraries take some time.
5. Under Page Optimization, enable lazy load for images.
6. Test your pages to confirm images display correctly.

Baasa Cloud hosting runs on LiteSpeed servers, so this plugin works particularly well on our plans.

Step 5: Enable lazy loading

Lazy loading delays loading images until the visitor scrolls near them. WordPress adds native lazy loading to most images automatically, and many plugins provide extra control. Do not lazy load the main image visible at the top of the page, often called the hero image, because it should load as early as possible. Good optimisation plugins and recent WordPress versions handle this sensibly.

Step 6: Serve responsive images

WordPress creates several sizes of every upload and uses the srcset attribute so phones download smaller versions than desktops. To get the most from this:

• Insert images through the block editor rather than pasting raw HTML with fixed sizes.
• Avoid uploading images and then shrinking them visually with CSS only.
• Regenerate thumbnails with a plugin if you change themes, so the right sizes exist.

Step 7: Clean up your media library

Over the years, sites collect unused images, duplicates and abandoned uploads. Review the media library, delete what you do not need and keep your backups lean. Always take a backup before bulk deleting anything.

Step 8: Add alt text and good file names

Optimisation is also about meaning. Rename files descriptively before upload, such as "kampala-boutique-hotel-room.jpg" instead of "IMG_3381.jpg", and write useful alt text. This helps visually impaired visitors and helps your images appear in search results.

How to measure the results

Test your site before and after with Google PageSpeed Insights or GTmetrix. Look at total page size, Largest Contentful Paint and the specific suggestions about images such as "properly size images" or "serve images in next gen formats". Also test on a real phone using mobile data, since that is how many of your Ugandan visitors browse.

Image optimisation checklist

• Resize to the actual display width before upload.
• Use JPEG or WebP for photos, PNG or SVG for logos.
• Compress automatically with one reliable plugin.
• Enable WebP and lazy loading, except for the hero image.
• Use descriptive file names and alt text.
• Remove unused media and keep backups.

Frequently asked questions

Will compressing images make them look blurry?

Not if the settings are sensible. Moderate lossy compression is usually invisible. Test a few images before bulk optimising.

Should I convert all my images to WebP?

Serving WebP versions is a good idea for speed. Most plugins keep your original JPEG or PNG as a fallback for older browsers.

How small should a website image be?

There is no single rule, but many well optimised photos for blog posts end up in the range of roughly 100 to 300 kilobytes, with thumbnails much smaller.

Can I optimise images that are already uploaded?

Yes. Most optimisation plugins offer a bulk optimisation feature for your existing media library.

Conclusion

Optimising images on WordPress is simple once you build the habit: resize, choose the right format, compress, lazy load and describe. Your site will load faster, rank better and cost visitors less data. Combine these steps with fast LiteSpeed hosting and caching, and your WordPress site will feel quick even on modest mobile connections.