Images are usually the biggest files on any web page. Upload them without thinking, and your site slows down, your Google rankings take a hit, and visitors leave before the page finishes loading. Get them right, and you claim one of the easiest performance wins available, all without needing a developer.
Why image optimisation matters more than you’d think
Page speed affects your Google rankings directly. Google measures something called Core Web Vitals, a set of real-world performance signals it uses to assess how fast and usable your site is. One of the most important is Largest Contentful Paint, or LCP, which measures how long it takes for the biggest visible element on the page to load. On most small business websites, that element is a hero image at the top of the page.
A single unoptimised photo can add two or three seconds to your load time. That’s enough to drop your rankings and lose a significant chunk of visitors before they’ve seen anything. Page speed is worth understanding in more detail if this is new territory.
The good news is that image optimisation is mostly a one-time habit. Once you know what to do, it takes an extra minute or two per image and makes a measurable difference.
Use the right file format
Not all image formats are equal. Using the wrong one means larger files than you need, which means slower pages.
JPEG is the traditional format for photos. It compresses well and is supported everywhere. It’s been the default for years, but it’s no longer the best option.
PNG is better for logos, icons, and graphics with transparent backgrounds. It preserves sharp edges well but produces larger files than JPEG for photos. Use it when you need transparency, not as a general-purpose format.
WebP is the format you should be using for most images now. It produces files that are typically 25 to 35 percent smaller than JPEG at the same visual quality, and it’s supported by every modern browser. If you’re uploading photos to your website, convert them to WebP first.
SVG is the right choice for logos and icons. It’s not a photo format. It’s a vector format, meaning it scales perfectly at any size with a tiny file size. If your logo exists as an SVG, use that rather than a PNG.
AVIF is a newer format, even smaller than WebP. Browser support is strong and growing, but it’s not universal yet. Worth knowing about, but WebP is the safer default for now.
How to convert images to WebP
If you manage your own website content, you have two practical options.
The first is to convert images manually before uploading. Squoosh is a free browser-based tool from Google that converts and compresses images with no software to install. Upload your photo, choose WebP, adjust the quality slider, and download. It takes about a minute and shows you the file size difference in real time.
The second is to let your CMS handle it automatically. If your site runs on WordPress, plugins like Imagify, ShortPixel, or Smush will convert uploaded images to WebP and compress them without you having to do anything manually. You install the plugin once, and it works in the background from then on. This is the better option if you upload images regularly and don’t want to think about it every time.
Resize images before uploading
This is the most common mistake on small business websites. A photo taken on a modern phone is typically 4000 pixels wide or more. If your website displays it at 800 pixels wide, the browser still downloads the full 4000 pixel file. The visitor pays the cost in load time, even though they never see the extra resolution.
Resize your images to match the dimensions they’ll actually be displayed at before uploading. If you’re not sure what size that is, check with your developer or look at your theme’s documentation. As a rough guide, most full-width banner images display at around 1400 to 1600 pixels wide. Most smaller content images are 600 to 900 pixels wide.
Responsive images take this a step further by serving different sizes to different devices, so a phone gets a smaller file than a desktop. Most modern CMS platforms and themes handle this automatically once you’ve uploaded a sensibly sized original.
Compress before you upload
Resizing reduces dimensions. Compression reduces file size without changing dimensions by removing data the eye can’t easily detect.
Lossy compression, used for JPEG and WebP, discards some image data permanently. At reasonable quality settings, the difference is invisible to most people. Lossless compression, used for PNG, reduces file size without discarding any data.
For most website images, a quality setting of around 80 percent hits the right balance between visual quality and file size. The Squoosh tool mentioned above lets you compare the original and compressed versions side by side, so you can see exactly what you’re trading.
A practical target: under 100kb for standard content images like blog thumbnails or inline photos. Hero images and full-width banners can run up to 300 to 400kb given their size. Anything beyond that is worth revisiting before it goes live.
Turn on lazy loading
Images below the fold, the part of the page a visitor doesn’t see until they scroll, don’t need to load immediately. Lazy loading tells the browser to wait until the visitor scrolls toward an image before downloading it. This speeds up initial page load, which is what Google measures and what visitors experience first.
Lazy loading is now built into browsers natively. Most modern CMS platforms and themes enable it automatically, but it’s worth checking. In WordPress, it’s been handled by default since version 5.5. If you’re on an older setup or a custom build, ask your developer to confirm it’s enabled.
Alt text and file names
Descriptive file names and alt text help Google understand what an image shows, and make your site accessible to visitors using screen readers.
For file names, rename images before uploading rather than leaving the camera default. “DCIM_0092.jpg” tells Google nothing. “hobart-kitchen-renovation-2024.webp” tells it exactly what the image shows and where you’re located. Keep it descriptive, use hyphens between words, and include a relevant keyword where it fits naturally.
Alt text follows the same principle. It’s the short description attached to an image in your CMS, invisible to most visitors but read aloud by screen readers and indexed by Google. Bad alt text: “image12” or leaving it blank. Good alt text: “Completed kitchen renovation in a Hobart home, featuring stone benchtops and custom cabinetry.” Describe what’s actually in the image, concisely and specifically.
The guide to on-page SEO covers both in more detail.
Image optimisation checklist
Before uploading any image to your website, run through these:
If you’re on WordPress and want to automate most of this, install an image optimisation plugin and let it handle conversion and compression in the background. That covers points one through three without any manual effort.
Not sure how your site’s images are affecting your load time? Run your URL through Google PageSpeed Insights for a free report, or we’re happy to take a look and tell you what’s worth fixing.
