To optimise images for the web, resize each one to the largest size it will actually display, save it in a modern format such as WebP or AVIF, and compress it until the file is as small as it can be without visible loss. For most small business sites, that means content photos under 150 KB and hero images under 300 KB. Below are the formats, pixel sizes and file sizes we work to.
Key takeaways
- Images are usually the heaviest part of a page: about 1 MB on a typical home page.
- Resizing does more than compressing. A phone photo is often several times wider than it needs to be.
- WebP is the safe default. AVIF is smaller again, if your hosting supports it.
- Use SVG for logos and icons, and JPEG only as a fallback.
- Fix images at upload, not after the site is slow.
Why do images slow a website down?
Because there are so many bytes in them. The HTTP Archive’s 2024 Web Almanac found the median desktop home page loads 1,054 KB of images, out of a total page weight of 2,652 KB. On mobile it’s 900 KB of images (HTTP Archive). Leaving video aside, images are the largest type of file on home pages.
On small business sites, the cause is nearly always the same. Someone uploads photos straight from a phone or a photographer’s folder. A 4,000-pixel image, several megabytes in size, then appears in a box 800 pixels wide. Visitors download all of it anyway, often on mobile data.
Images are only one part of speed. Our guide to speeding up a WordPress website ranks the other fixes, from caching to plugins.
WebP vs AVIF vs JPEG: which format should you use?
Use the format that gives the smallest file for the job. Here’s how they compare:
| Format | Best for | Notes |
|---|---|---|
| WebP | Photos and graphics, the everyday default | Lossy WebP is 25–34% smaller than JPEG at the same quality, and supports transparency |
| AVIF | Photos where every kilobyte counts | Can be up to 50% smaller than JPEG; slower to create |
| JPEG | A fallback for very old systems | Universally supported, but larger |
| PNG | Screenshots and graphics that must stay pixel-perfect | Lossless WebP is 26% smaller, so convert where you can |
| SVG | Logos, icons and simple illustrations | Drawn with code, so it stays sharp at any size and is often tiny |
The WebP figures come from Google’s WebP documentation. The AVIF figure comes from Make WordPress Core, which notes that AVIF works in all major browsers and that WordPress has accepted AVIF uploads since version 6.5.
There’s a catch with AVIF. WordPress can only create resized AVIF copies if your server’s image library supports the format. Check under Tools, Site Health, Info, Media Handling. If AVIF isn’t listed, ask your host, or stick with WebP. Good WordPress hosting in Australia should have current image libraries installed.
What size should images be for a website?
Size each image for the space it fills, then double the width so it stays sharp on high-resolution screens. These are the working targets we use on small business sites:
| Where it appears | Width in pixels | Target file size |
|---|---|---|
| Full-width hero or banner | 1920–2400 | Under 300 KB |
| Image inside page text | 1200–1600 | Under 150 KB |
| Half-width image beside text | 800–1000 | Under 100 KB |
| Cards, blog thumbnails, gallery tiles | 600–800 | Under 60 KB |
| Team headshots | 500–600 square | Under 50 KB |
| Logo and icons | SVG | Under 10 KB |
These aren’t rules from a standards body. They’re sensible ceilings that keep a typical page’s images well under the 1 MB median. A busy photo needs more bytes than a plain one, so treat the file sizes as limits, not goals.
WordPress helps a little. Since version 5.3 it scales down any upload wider or taller than 2,560 pixels (WordPress Developer Resources). It also creates smaller copies of each upload, so phones can load a smaller version. That still leaves a 2,560-pixel original in places where 800 would do, and it does nothing about compression.
How do you optimise images, step by step?
- Crop first. Cut away anything that doesn’t help the picture. A tighter crop means fewer pixels and a stronger image.
- Resize to the target width. Use the table above. Any photo editor can do this, including the one built into your computer.
- Export as WebP or AVIF. Start at a quality setting around 75 to 80, then lower it until you can see a difference at normal size. Google’s free Squoosh tool does this in your browser, and your images never leave your device.
- Name the file plainly. “brisbane-kitchen-renovation.webp” tells search engines more than “IMG_4821.webp”.
- Write useful alt text. Describe what’s in the picture for people who can’t see it. It’s part of website accessibility in Australia, and it helps image search too.
- Check the result. Open the page on your phone. If the image looks soft, go up one quality step.
Tip: On an existing site, an image optimisation plugin can convert and compress your whole media library at once. Take a backup first, and choose one plugin only. Two that both rewrite images will fight each other.
What about images on phones?
Phones need smaller files, not smaller-looking pictures. WordPress adds a list of sizes to each image so the phone’s browser can pick a suitable one. That only works if the theme sets sensible sizes and the original wasn’t uploaded at the wrong shape.
Watch for page builders that load the desktop hero on phones and simply hide it, or swap in a second hero. Visitors can download both. Our guide to a mobile friendly website covers this and other problems that only show on small screens.
Does image optimisation actually make a difference?
In our experience, often more than any other single fix on a small business site, because images make up so much of each page. Lighter images mean a faster first view, less data used on mobile and a better Largest Contentful Paint, the Core Web Vital that often measures the main image on the page.
Faster pages also give visitors less reason to leave before they read your offer. That makes images a natural first step if you want to improve website conversion without a redesign.
If your media library is already full of oversized photos, our website speed and improvement work includes converting, resizing and compressing the lot. After that, our website maintenance plans keep the site updated so the gains stick.
Frequently asked questions
Is WebP or AVIF better?
AVIF usually gives smaller files at the same quality, but it takes longer to create and needs server support for WordPress to make resized copies. WebP is supported everywhere that matters and is easier to work with. For most small business sites, WebP is the sensible default.
What is a good file size for a website image?
Aim for under 150 KB for images inside page text and under 300 KB for a full-width hero. Thumbnails and headshots should be well under 100 KB. A busy photo may need a little more, but anything over 500 KB is almost always too big.
Should I still use JPEG?
Only as a fallback. Lossy WebP files are 25 to 34% smaller than JPEGs at the same quality, according to Google. Many optimisation plugins keep a JPEG copy and serve WebP or AVIF to browsers that support them.
Will compressing images make them look blurry?
Not if you do it in moderation. Most photos can lose a large share of their file size with no difference you can see at normal viewing size. Compare before and after on a phone and a laptop, and step the quality up if edges or faces look soft.
Does WordPress optimise images automatically?
Partly. It scales down uploads larger than 2,560 pixels and creates smaller copies for different screens. It doesn’t convert JPEGs to WebP by default or compress heavily, so you still need to prepare images before upload or use an optimisation plugin.
Sources
- Page weight, Web Almanac 2024, HTTP Archive
- An image format for the web (WebP), Google for Developers
- WordPress 6.5 adds AVIF support, Make WordPress Core, 23 February 2024
- big_image_size_threshold, WordPress Developer Resources
- Squoosh, Google Chrome Labs