On most websites, images are the majority of the page weight. Not the code, not the fonts, not the scripts — the pictures.
Which makes image optimisation the highest-value performance work available to most businesses, and one of the easiest to get wrong, because an unoptimised image looks exactly the same as an optimised one until you check the network tab.
Why it matters commercially
Three reasons, in ascending order of importance.
Rankings. Google measures real-world loading performance through Core Web Vitals, and Largest Contentful Paint — usually your hero image — is one of the three. Slow pages rank worse, all else being equal.
Conversion. The research on this has been consistent for years: as pages get slower, people leave. The drop is steepest in the first few seconds.
Mobile data. A four-megabyte page is invisible on office wifi and genuinely expensive on a phone with a patchy signal. Your visitors do not tell you they left because the page was slow; they just leave.
The five things that actually matter
1. Size the image to how it is displayed
The most common mistake by a distance: a 4000px photo straight from a camera dropped into a slot that displays at 600px.
Export at roughly twice the display width to cover high-density screens, and no more. A hero that displays at 1200px needs a 2400px file, not a 6000px one.
2. Use modern formats
WebP is typically 25–35% smaller than JPEG at the same visual quality and is supported everywhere that matters. AVIF is smaller still.
Use SVG for logos, icons and simple illustrations — it is tiny, sharp at every size, and can be styled with CSS. Keep PNG only for images that genuinely need transparency and cannot be SVG.
3. Compress properly
Most photographs are indistinguishable from the original at 80% quality and roughly half the size. Squoosh is free and shows you a side-by-side comparison so you can find the point where quality starts to suffer.
Also strip the metadata. Camera EXIF data is dead weight, and on photos taken on a phone it can include location.
4. Lazy load below the fold, never above it
Images further down the page should load as the visitor approaches them. Images in the first screenful should load immediately and, ideally, be preloaded.
Lazy loading the hero is a surprisingly common error and it directly damages the metric you most want to protect.
5. Reserve the space
Set width and height, or an aspect ratio, so the browser knows how much space to leave before the image arrives.
Without it the page jumps as images load, which is both irritating and measured by Google as Cumulative Layout Shift.
Responsive images
A phone should not download the desktop version. Modern HTML handles this with `srcset` and `sizes`, which let the browser choose the right file for the screen.
Webflow does this for you automatically on images added through the Designer or CMS, which is one of the quiet advantages of the platform. If you are hand-coding, it is worth the extra attributes.
Alt text, while you are in there
Every meaningful image needs a description, for screen reader users and, incidentally, for image search. Decorative images should have an empty alt attribute so they are skipped.
Describe what matters. Skip "image of".
Video, briefly
The same logic, more severely. Never autoplay a large background video on mobile. Host video on a proper service rather than serving an MP4 from your own site. Use a poster image so something appears immediately. Keep background video short, muted and compressed hard.
How to check where you stand
Run your key pages through PageSpeed Insights and look at the opportunities list — it will name the specific images costing you time. Then open dev tools, load the page, sort by size, and look at the top five requests.
If your homepage is over about two megabytes, images are almost certainly the reason.
A workflow that keeps it fixed
The reason sites slow down over time is that optimisation is treated as a launch task rather than a habit. A simple rule for whoever adds content: resize, compress, export as WebP, write alt text.
Five minutes per image, and your site stays fast for years rather than months.
A quick workflow for whoever adds content
Write this down and stick it next to the CMS:
1. Crop to the shape it will be displayed in.
2. Resize to roughly twice the display width — usually 1600–2400px for a hero, 800–1200px for a card.
3. Compress at around 80% quality and check it still looks right.
4. Export as WebP unless transparency demands PNG.
5. Rename the file descriptively — `webflow-agency-team-leeds.webp`, not `IMG_4021.jpeg`.
6. Write alt text as you upload.
Five minutes an image. The alternative is a site that gets 200KB heavier with every blog post until someone notices a year later.
Questions we get asked
What size should my hero image be?
Usually around 2400px wide for a full-width hero, compressed to under 300KB. If it is over a megabyte, something has gone wrong.
Does Webflow optimise images for me?
Partly. It generates responsive variants and serves WebP, which covers a lot. It cannot undo a badly cropped 8MB original, so the upload still matters.
Should I use AI-generated images?
For abstract or decorative work, sometimes. For anything showing your team, your premises or your work, real photography is more persuasive — customers are getting good at spotting the difference.
If you would like us to audit what your images are costing you in speed, send us a link and we will take a look.