In this guide · 8 sections
- 01Why image size matters for your website
- 02What image size for a website: practical widths
- 03WebP vs JPEG vs AVIF vs PNG: which format to use
- 04How to compress images for your website, step by step
- 05Lazy loading and the LCP hero image
- 06What your CMS already does, and what it does not
- 07Do it yourself or get help?
- 08Frequently asked questions
Short answer
Resize each photo to roughly the largest width it is shown at (about 1,600 to 2,000 px for full-width heroes, 1,200 px for content images), save it as WebP or AVIF with a JPEG fallback if needed, and aim for most images under about 200 KB. Lazy-load images below the fold, but never the hero image.
Why image size matters for your website
Images are usually the heaviest part of a small business page. Google's Core Web Vitals use Largest Contentful Paint (LCP) to measure how quickly the main content appears, and web.dev says a good LCP value is 2.5 seconds or less. On many home pages, the largest element is a hero photo, so its file size directly affects that score.
Mobile visitors on a patchy 4G connection feel the difference first. A gallery of uncompressed phone photos can add several megabytes to a page that should weigh well under one.
There are two separate jobs: resizing (reducing the pixel dimensions) and compressing (reducing the bytes for those pixels). Do both, in that order.
What image size for a website: practical widths
There is no single correct number, because it depends on your layout. A practical rule is to export each image at about the largest width it is ever displayed, then let your site serve smaller versions to phones. High-resolution screens need extra pixels: web.dev's image format article notes a 2x screen needs four times the pixels of a 1x screen for the same space.
| Where the image appears | Suggested export width | Rough file size goal |
|---|---|---|
| Full-width hero or banner | 1,600 to 2,000 px | 150 to 300 KB |
| Image inside page content | 1,200 px | 80 to 200 KB |
| Half-width or two-column image | 800 to 1,000 px | 60 to 150 KB |
| Product or gallery thumbnail | 400 to 600 px | 20 to 60 KB |
| Logo and icons | SVG (vector) | Usually a few KB |
If you only remember one thing: a photo straight from a phone is often 4,000 px wide or more. Shrinking it to 1,200 to 2,000 px removes most of the weight before any compression.
WebP vs JPEG vs AVIF vs PNG: which format to use
web.dev states that WebP and AVIF generally provide better compression than older formats and should be used where possible, with JPEG or PNG as a fallback. Both newer formats support transparency and animation, and both work in all modern browsers.
WebP
Safe default- Smaller than JPEG at similar quality
- Supports transparency
- Works in all modern browsers
- Most CMSs and tools export it
Best for: Most photos and graphics on a business site.
AVIF
- Often smaller than WebP
- Slower to encode
- WordPress supports it since 6.5 if the server does
- Check your tools handle it
Best for: Large hero images where every KB counts.
JPEG / PNG / SVG
- JPEG works everywhere for photos
- PNG for screenshots and sharp edges
- SVG for logos and icons
- Larger files than WebP for photos
Best for: Fallbacks, screenshots and vector artwork.
WordPress added AVIF uploads in version 6.5, provided the hosting server's image library supports it. Shopify's help centre says it automatically detects which formats a visitor's browser supports and serves an appropriate one, so on Shopify you mostly need to upload sensible sizes.
How to compress images for your website, step by step
This routine works for any site, whether you upload through WordPress, Wix, Shopify or a custom build.
Pick the right source
Start from the original photo, not a screenshot of it or a WhatsApp-compressed copy, which are already degraded.
Crop to the shape you need
Crop to the aspect ratio of the slot (for example 16:9 for a hero) so you are not sending pixels the theme hides.
Resize to the export width
Use the widths above. On a Mac, Preview's Adjust Size works; on Windows, Photos or Paint can resize.
Compress and convert
Use a tool such as Squoosh (free, runs in the browser) to save as WebP or AVIF. Compare quality side by side and lower it until you just notice a difference, then step back up.
Name files clearly
Use descriptive names such as aircon-servicing-hdb.webp rather than IMG_4471.webp. It helps you, and image search.
Upload and add alt text
Describe what the image shows for screen-reader users. Alt text is also part of good on-page SEO.
For a large back catalogue of images, a WordPress optimisation plugin or an image CDN can convert and resize existing uploads in bulk. Test on a staging copy first, and keep the originals.
Lazy loading and the LCP hero image
Lazy loading tells the browser to wait before downloading images further down the page until the visitor scrolls near them. Modern browsers support it with a simple loading="lazy" attribute on the image tag, as described in web.dev's lazy loading article.
The opposite setting, fetchpriority="high", asks the browser to download one image ahead of others. web.dev's fetch priority article recommends it for the LCP image. WordPress has added this attribute to a likely LCP image automatically since version 6.3, and it lazy-loads images further down by default.
Also set the width and height on images (most CMSs do this for you). It reserves space before the image arrives, so text does not jump around while the page loads.
What your CMS already does, and what it does not
- WordPress: creates several smaller copies of each upload and serves them responsively. Since version 5.3 it scales down uploads above 2,560 px on the long edge. It does not convert JPEGs to WebP on its own without a plugin or host feature.
- Shopify: serves resized images and modern formats through its image CDN when themes use its image tags. Large uploads still slow your admin and some apps, so resize first.
- Wix and Squarespace: handle resizing and format conversion on their CDNs. Your job is mainly to avoid huge originals and too many images per page.
- Custom sites: frameworks such as Next.js have image components that resize and convert, but only if the developer used them.
Background images set in CSS, sliders and gallery plugins often bypass these features. Run the page through Google's PageSpeed Insights and look for 'Improve image delivery' or similar opportunities that list the exact files. Our Core Web Vitals fix guide explains the report.
Do it yourself or get help?
A small site with 20 to 30 images is a comfortable afternoon's work with the steps above. Make sure you own or have licensed every image before you optimise it; our guide to website images, copyright and stock photos covers that. Portfolio-heavy sites need more planning; see our guide to an interior design firm portfolio website for gallery layouts.
Image checklist
If the site is still slow after that, the cause is often scripts, fonts or hosting rather than images. Our Speed & SEO Fix (S$390) covers images, caching, scripts and on-page SEO together.
Frequently asked questions
There is no single size. Export each image at about the largest width it is displayed: roughly 1,600 to 2,000 pixels for full-width heroes, about 1,200 pixels for images inside content, and 400 to 600 pixels for thumbnails. Then compress it. Most images on a small business page can sit well under 200 KB.
Usually, yes. Google's web.dev guidance says WebP and AVIF generally compress better than JPEG and PNG, and both work in all modern browsers. For the same visual quality, a WebP file is normally smaller. Keep JPEG as a fallback only if your platform or an older system needs it.
Lossy compression removes some detail, but at sensible settings most visitors cannot see the difference on a web page. Compare the original and compressed versions side by side at actual display size, lower the quality until you notice a change, then step back up slightly. Resizing to the right width causes no visible loss at all.
No. Lazy-load images further down the page, but not the ones visible when the page first opens, especially the main hero image. Google's web.dev guidance warns that lazy-loading the largest visible image can slow your Largest Contentful Paint score. Give that image high fetch priority instead.
Squoosh is a free browser-based tool that resizes and converts to WebP or AVIF and lets you compare quality side by side. Built-in apps such as Preview on Mac and Photos on Windows can resize. For many existing images, WordPress optimisation plugins or an image CDN can process them in bulk.