If you are looking for the fastest way to improve your website’s performance, look no further than your images. High-quality visuals are essential for engaging your audience, but they are also the number one culprit behind slow-loading web pages.
Learning how to optimise images for your website is no longer an optional task; it is a critical component of technical SEO, user experience (UX), and conversion rate optimisation. With search engines like Google heavily prioritising page speed through their Core Web Vitals metrics, unoptimised images can actively harm your search rankings.
In this comprehensive guide, we will walk you through everything you need to know about image optimisation—from choosing the right file formats and compression techniques to writing the perfect alt text for SEO.
What is Image Optimisation?
Image optimisation is the process of reducing the file size of your images as much as possible without sacrificing visual quality. It also encompasses the practices of properly formatting, naming, sizing, and delivering images to ensure they are easily understood by search engine crawlers and accessible to all users.
When done correctly, image optimisation delivers three massive benefits:
- Lightning-fast load times: Smaller image files mean less data for the browser to download.
- Improved SEO rankings: Faster websites rank higher, and optimised image tags help you appear in Google Images.
- Better user experience: Visitors will not abandon your site due to frustratingly slow load times.
Step 1: Choose the Right Image Format
Before you even think about compressing or resizing, you need to ensure you are saving your image in the correct format. The format you choose dictates the baseline file size and quality.
Here are the most common web image formats and when to use them:
- JPEG (.jpg): The standard format for photographs and images with lots of colours and complex shading. JPEGs use “lossy” compression, meaning they discard some data to keep file sizes small.
- PNG (.png): Best for graphics, screenshots, logos, and images requiring a transparent background. PNGs use “lossless” compression, meaning they retain all image data, resulting in higher quality but larger file sizes than JPEGs.
- WebP (.webp): A modern, next-generation image format developed by Google. WebP provides superior lossless and lossy compression. WebP images are typically 25% to 35% smaller than comparable JPEGs and PNGs without a noticeable drop in quality.
- SVG (.svg): Scalable Vector Graphics are mathematically drawn images. They are perfect for logos, icons, and simple illustrations. Because they are vectors, they can be scaled to any size without losing quality and usually have incredibly small file sizes.
Pro-Tip: Whenever possible, serve your images in Next-Gen formats like WebP or AVIF. Most modern content management systems (CMS) like WordPress have plugins that automatically convert your standard JPEGs and PNGs into WebP.
Step 2: Resize Images to Proper Dimensions
One of the most common mistakes website owners make is uploading a massive, high-resolution image (e.g., 4000 x 3000 pixels) directly from a camera or stock photo site, and then relying on CSS to shrink it down to fit a 400-pixel wide box on the screen.
Even though the image looks small on the website, the user’s browser still has to download the massive original file.
- Identify the maximum display size: Determine the maximum width the image will be displayed at on your website. For example, if your blog content area is 800 pixels wide, there is no need to upload an image wider than 800 to 1600 pixels (accounting for high-density Retina displays).
- Resize before uploading: Use photo editing software like Photoshop, Canva, or even native OS tools (like Mac Preview or Windows Paint) to crop and resize the dimensions before you upload the file to your server.
Step 3: Compress Your Images
Once your image is the correct physical dimension and format, it is time to compress it. Compression strips out unnecessary metadata and invisible colour profiles to drastically reduce the file byte size.
There are two main types of compression:
- Lossy Compression: Eliminates some pixel data to reduce file size significantly. Best for JPEGs and photographs.
- Lossless Compression: Compresses the data without losing any image quality. Best for PNGs and graphics containing text.
Top Image Compression Tools:
- Web-based tools: TinyPNG, Compressor.io, and Squoosh.app are excellent, free drag-and-drop tools for quick compressions.
- Desktop software: ImageOptim (Mac) and FileOptimizer (Windows).
- WordPress Plugins: If you use WordPress, plugins like Smush, ShortPixel, or Imagify can automatically compress images the moment you upload them to your media library.
Aim to keep standard blog images under 100KB, and large hero/banner images under 300KB.
Step 4: Optimise File Names for SEO
Search engines cannot “see” images the way humans do. They rely on text-based clues to understand what an image depicts. The first clue is the file name.
Never upload an image with a default camera name like IMG_84739.jpg or Screenshot-2023-10-14.png. Instead, rename the file using descriptive, keyword-rich language separated by hyphens.
Bad Example: DC10394.jpg
Good Example: red-leather-running-shoes.jpg
Keep it concise, descriptive, and relevant to the content of the page.
Step 5: Write Descriptive Alt Text
Alternative text (Alt text) is arguably the most critical aspect of image SEO and web accessibility. Alt text is an HTML attribute applied to image tags to provide a text description of the image.
It serves three crucial purposes:
- Accessibility: Screen readers used by visually impaired users read the alt text aloud, explaining what the image shows.
- SEO: Search engines use alt text to understand the image context, helping it rank in Google Image Search and boosting the overall page’s SEO relevance.
- Failsafe: If the image fails to load due to a poor connection, the alt text will be displayed in its place.
How to write great alt text:
- Describe the image as specifically as possible.
- Keep it relatively short (under 125 characters).
- Include your target keyword only if it naturally fits the description. Do not keyword stuff.
- Do not start with “Image of…” or “Picture of…” (search engines and screen readers already know it’s an image).
HTML Example:
<img src="red-leather-running-shoes.jpg" alt="Person running on a forest trail wearing red leather running shoes">Step 6: Implement Lazy Loading
If you have a long blog post featuring 15 images, loading all of them the second a visitor lands on the page will drastically slow down the initial load time.
Lazy loading solves this by deferring the loading of off-screen images. The browser only downloads the images that are visible in the user’s viewport. As the user scrolls down the page, the subsequent images load just before they come into view.
Thankfully, lazy loading is now natively supported by most modern web browsers. You can implement it simply by adding loading="lazy" to your image tags:
<img src="optimised-image.jpg" alt="A well optimised website image" loading="lazy">(Note: WordPress automatically adds lazy loading to images by default).
Step 7: Serve Images via a CDN
A Content Delivery Network (CDN) is a network of servers distributed globally. When you use a CDN, copies of your website’s images are stored on these servers worldwide.
When a user visits your website, the CDN delivers the images from the server geographically closest to them. For example, if your main server is in London, but a user visits from Sydney, the CDN will serve the images from an Australian node. This drastically cuts down data travel time (latency), resulting in near-instant image loading.
Popular CDNs that excel at image delivery include Cloudflare, BunnyCDN, and KeyCDN.
Final Thoughts
Learning how to optimise images for your website is one of the highest-ROI tasks you can perform for your site’s health. By creating a habit of properly formatting, sizing, compressing, and labelling your images, you will provide a seamless, lightning-fast experience for your users while simultaneously sending all the right ranking signals to search engines.
Start treating your images with as much care as your written content, and watch your website’s performance soar.
