How to Optimise Website Images for SEO

To optimise website images for SEO, use WebP or AVIF where you can, resize images before uploading, and compress them so JPEGs sit under 100KB and PNGs under 200KB. Give each file a descriptive name, write helpful alt text and let images load smartly. Smaller, well-labelled images keep your site fast and help search engines understand your content.

Why Image SEO Matters

If you own a website, you're likely already thinking about search engine optimisation (SEO) to improve visibility. But did you know that optimising images is just as important?

People search with images more than ever (Google reported nearly 20 billion Google Lens searches a month in late 2024), and properly optimised images help search engines understand your content, improve page speed, and give visitors a better experience. On a service business website, where your photos of you, your team and your space do a lot of the trust-building, fast-loading images keep visitors engaged long enough to enquire.

Follow these simple steps to make sure your website images are SEO-friendly.

1. Choose the Right File Format

Using the right file format helps keep images clear while making sure your website loads quickly. A smaller file size means faster loading times, which improves user experience and supports your SEO.

• JPEG: Good for photos. Keeps file size small while maintaining quality.
• PNG: Ideal for images with transparent backgrounds.
• WEBP: Good quality with smaller file sizes, supported by every modern browser. Webflow can convert your images to WebP for you.
• AVIF: Even smaller file sizes with high quality. Supported in all major browsers since early 2024, and Webflow can convert to AVIF too.

💡 Best practice: Upload a good-quality JPEG or PNG, then convert it to WEBP or AVIF for faster loading times.

2. Resize Images for Web Use

Large images can slow down your website, leading to longer load times and frustrated visitors. Resizing images before uploading keeps your site fast and responsive.

Recommended Image Sizes

• Hero images (large banners): 1920px wide (prevents excessive loading time while maintaining quality)
• Full-width images: 1600px wide (suitable for content sections without slowing site speed)
• Blog post images: 1200px wide (ensures quick display on desktop and mobile)
• Team photos and headshots: 800px wide (gives clear detail while keeping file size manageable)
• Thumbnails and icons: 150 to 300px wide (reduces unnecessary data load for smaller images)

🛠 Tools to use: Canva, Adobe Photoshop, or Squoosh.

3. Reduce File Size with Compression

If your images are too large, your site will take longer to load, which can drive visitors away and hurt your SEO. Compressing images reduces file size while maintaining good visual quality.

Best File Sizes for Web

• JPEG: Under 100KB (ideal for fast loading without visible quality loss)
• PNG: Under 200KB (useful for images needing transparency while keeping loading times reasonable)
• WEBP: Usually noticeably smaller than the same JPEG (recommended for better speed and quality balance)

🔧 Best compression tools: TinyPNG, TinyJPG, or ShortPixel.

4. Optimise Image File Names

Descriptive file names help search engines understand the content of your images, making it easier for them to appear in search results.

✅ Best practice: Use short, descriptive names with hyphens, e.g., cairns-physiotherapy-clinic-reception.jpg. Adding your location where it's genuinely relevant supports your local SEO.

❌ Avoid: Default file names like IMG1234.jpg or keyword stuffing, as this can appear spammy.

5. Add Descriptive Alt Text

Alt text (alternative text) helps search engines and visually impaired users understand your images. Adding clear, natural alt text improves accessibility and SEO.

How to Write Good Alt Text

✅ Be clear and descriptive: "A smiling woman wearing a blue jumper, working on her laptop."

✅ Include keywords naturally: "Brisbane financial adviser talking through a plan with a client."

❌ Avoid keyword stuffing: "financial adviser Brisbane best financial planner Brisbane advice."

🔧 Where to add alt text: In your website's content management system (CMS), such as Webflow, WordPress or Squarespace. In Webflow, you can set it once in the Assets panel or on each image's settings.

6. Let Your Images Load Smartly

A few settings make a big difference to how fast your pages feel, and on Webflow most of them are already done for you.

• Lazy loading: Images further down the page only load when someone scrolls to them. Keep your hero image set to load straight away (Eager in Webflow) so the top of the page appears quickly.
• Responsive images: Webflow creates smaller versions of your images automatically, so phones don't download the giant desktop file.
• Width and height: Giving images set dimensions stops the page jumping around as they load. Google measures this as layout shift (CLS) in Core Web Vitals.

What about geo-tagging? Google has said it doesn't use image location data for rankings, and many platforms strip it out anyway. Spend that time on your Google Business Profile instead.

The Bottom Line

Optimising website images for SEO helps your site load faster, rank better, and provide a better user experience. Faster websites attract and retain more visitors, leading to more engagement and enquiries.

Quick Recap:

✅ Choose the right file format (WEBP or AVIF where you can, PNG for transparency) to balance quality and speed.

✅ Resize images to recommended dimensions to avoid slow loading times.

✅ Compress images to reduce file size and improve site speed.

✅ Name images descriptively so search engines can understand them.

✅ Add alt text to improve accessibility and support your SEO.

✅ Use lazy loading, responsive images and set dimensions so pages load smoothly.

By following these steps, your website will look great, load quickly, and give you a better shot in search results.