Guide · Updated October 2026

How Do I Optimise Images for My Website?

How to optimise website images: right size, best format, compression, lazy loading and file names, so your pages load fast without looking blurry.

How Do I Optimise Images for My Website?

Short answer: Resize images to the largest size they will actually be displayed, save them in a modern format like WebP or AVIF, compress them, and lazy-load anything below the first screen. Oversized photos are the single most common reason small business websites are slow.

Why images slow sites down

A photo straight from a modern phone can be several megabytes and thousands of pixels wide. Upload ten of those to a gallery and visitors on mobile data wait while every pixel downloads, even though the screen only shows them a fraction of that detail. Search engines notice slow pages too, through measures like Largest Contentful Paint, which is often an image.

Step 1: resize before you upload

Work out the largest size each image is displayed at, then allow roughly double for sharp high-resolution screens. As a rough guide:

  • Full-width hero images: around 1600 to 2400 pixels wide.
  • Content images within text: around 800 to 1200 pixels wide.
  • Thumbnails and team photos: around 300 to 600 pixels.

Uploading a 6000 pixel photo and letting the browser shrink it wastes bandwidth on every visit.

Step 2: choose the right format

WebP

Supported by all modern browsers and typically much smaller than JPEG at similar quality. A great default for photos and graphics.

AVIF

Often even smaller than WebP, with growing support. Worth using if your platform handles it.

JPEG

Still fine for photos if modern formats are not available. Use quality settings around 70 to 80, which most people cannot tell apart from 100.

PNG

Best for graphics needing transparency or crisp edges. Too heavy for photos.

SVG

Ideal for logos and icons. It is code rather than pixels, so it stays sharp at any size and is usually tiny.

Is your site dragging? Run our free speed test and see what is slowing it down.

SiteDrum builds fast, mobile-first websites from $99 setup and $15 a month, with hosting, security, Google setup and support included. Already have a site that is slow or broken? Try Website Rescue or run our free speed test.

Step 3: compress

Compression strips out data people cannot see. Free online compressors and desktop apps can shrink images significantly with no visible loss. Many CMS plugins and image CDNs do this automatically on upload. Check the result at full size and back off the compression if you see blotches or banding.

Step 4: deliver smartly

  • Lazy loading: add loading="lazy" to images further down the page so they only load as visitors scroll. Do not lazy-load your main hero image; it should load immediately.
  • Responsive images: the srcset attribute lets browsers pick a smaller file on phones and a larger one on desktops.
  • Set width and height: giving images dimensions stops the layout jumping around as they load, which improves user experience and Cumulative Layout Shift scores.
  • Use a CDN: serving images from servers near visitors speeds them up further.

Step 5: the SEO details

  1. File names: bathroom-tiling-leeds.webp beats IMG_4821.jpg.
  2. Alt text: describe what the image shows for screen reader users and search engines.
  3. Relevant placement: put images near the text they relate to.

A quick workflow for busy owners

Before uploading: resize to roughly 1600 pixels wide, export as WebP, run it through a compressor, rename it descriptively, then add alt text after upload. It takes a minute per photo and pays off on every visit. Check the difference with our free speed test before and after.

The bottom line

Optimised images keep your site fast and still looking sharp. Resize to the display size, use WebP or AVIF, compress, lazy-load below the fold and set dimensions. Fix your images and you often fix most of your speed problem.

Frequently asked questions

What is the best image format for websites?

WebP is a strong default for most images, AVIF can be even smaller, SVG suits logos and icons, and PNG is for graphics needing transparency.

What size should website images be?

Resize to the largest size they are shown, roughly doubled for sharp screens. Full-width images are often 1600 to 2400 pixels wide; inline images 800 to 1200.

Does compressing images reduce quality?

Sensible compression removes data people cannot see. Check results at full size and reduce compression if you notice blotches.

Should I lazy-load all my images?

Lazy-load images below the first screen, but not your main hero image, which should load straight away.

Want a website that brings you customers?

Tell us what you do on WhatsApp and we will send a fixed quote and a free mockup.

Get my free mockup

Related guides

What Is Alt Text and How Do I Write It for My Website?Read guide →What Is a Redirect? 301 vs 302 ExplainedRead guide →What Is Website Caching and How Does It Speed Up My Site?Read guide →Website or Social Media: Which Is Better for a Small Business?Read guide →

Our products

Starter website$99 setup, $15 a monthBusiness website$249 setup, $29 a monthPremium website$499 setup, $59 a monthWebsite RescueFix a slow, broken or hacked siteFree speed testCheck your site in secondsSample websitesSee designs for your industry

Website design near you

Website design in LondonWebsite design in New YorkWebsite design in TorontoWebsite design in LeedsWebsite design in Las VegasWebsite design in BelfastWebsite design in San FranciscoWebsite design in MumbaiWebsite design in BaselWebsite design in AucklandAll cities →

SiteDrum home · All guides · Sitemap · Contact us

All guides

Contact us

Tell us about your business

Send a message and we reply within one working day with a fixed quote. Prefer to chat? WhatsApp us or book a free 15-minute call.

We only use your details to reply to you. See our privacy policy.
Chat on WhatsAppBook a free call