Images bring a website to life, but they are also the most common reason a page loads slowly. Around half (HTTP Archive) of the average page weight is made up of images, often without anyone noticing: a photo straight from the camera easily carries several megabytes, even though it is shown only a few hundred pixels wide on screen. It is exactly these unnoticed data volumes that cost load time, rankings and, in the end, enquiries. 53 percent (Google) of mobile visits are abandoned if a page takes longer than three seconds to load. The good news: image optimisation is one of the most effective and at the same time simplest levers for making a website faster. This article shows in practical terms how to get the most out of your images with modern formats, the right size, sensible compression, responsive images, lazy loading and clean image SEO, without any visible loss of quality.
Why Heavy Images Cost Load Time and Revenue
Every image a website delivers has to be loaded over the network before the visitor sees it. On fast Wi-Fi a large photo barely registers, but on a mobile connection it very much does. Since a large share of visits now comes from smartphones, it is mobile load time in particular that decides the first impression. When a page starts with several uncompressed images, the visitor stares for seconds at a half-empty page while megabytes load in the background. This wait is the most common reason for an early bounce, before the actual content has even been noticed.
The link between load time and outcome is well documented. Studies show that every extra second of load time measurably raises the bounce rate and lowers the likelihood of a conversion (Google). For a business this means something very concrete: slow images cost enquiries. That is exactly why we treat image optimisation not as a cosmetic detail but as a fixed part of every web design project and every conversion optimisation. Anyone who wants to get more out of existing traffic sensibly starts with speed, and that depends to a large extent on images.
Image weight is usually invisible
Modern Formats: WebP and AVIF Instead of Heavy JPG
The most important tool in image optimisation is the right format. Classic formats such as JPG and PNG come from a time when screens were smaller and connections slower, and they do not pack images as efficiently as modern alternatives. WebP delivers noticeably smaller files than JPG at the same visible quality, and AVIF goes a step further still. In practice, photos can often be brought down to a fraction of their original size with no discernible difference. Modern browsers support these formats broadly, and for older browsers a fallback format can be offered cleanly through the picture element.
| Format | Strength | Typical use |
|---|---|---|
| AVIF | Smallest files at good quality | Photos, large hero images |
| WebP | Small and very widely supported | Standard for photos and graphics |
| JPG | Readable everywhere, but larger | Fallback format for old browsers |
| PNG | Lossless, transparent areas | Logos, graphics with transparency |
| SVG | Scales with no loss of quality | Logos, icons, simple illustrations |
The key is to match the format to the image content. Photos belong in WebP or AVIF, while logos and icons are often best as SVG, because this vector format stays razor sharp at any size and is at the same time tiny. A common mistake is a large logo saved as a heavy PNG, when an SVG delivers the same appearance with a fraction of the data. When we build a website or maintain it as part of website care, we consistently move images to the leanest suitable format and keep the fallback for older browsers in mind.
The Right Resolution and Compression
Even the best format helps little if an image is delivered at a far too high resolution. A photo from a smartphone is quickly 4000 pixels wide or more, yet on the website it may be shown only 800 pixels wide. The browser still has to load the entire data volume and then scales the image down. That is pure waste. The rule of thumb is: an image should only be delivered as large as it is displayed at most, with a little reserve for high-resolution displays. Anyone who scales an image to the width actually needed before uploading often saves more data than through any other measure.
The second lever is compression. For photos, light lossy compression is practically invisible but reduces file size considerably. It is not about making images blurry, but about finding the point at which the eye no longer sees a difference while the file is clearly lighter. Between a full-resolution original and a cleanly compressed, correctly scaled image there can easily be factors of twenty or more, with no visible loss of quality. This combination of scaling, format and compression is the core of every image optimisation.
Scale correctly
Save an image only as large as it is displayed, with reserve for high-resolution displays. This often saves the most data of all.
Compress sensibly
Choose lossy compression so the eye sees no difference while the file becomes clearly lighter. Not every image tolerates the same amount.
The right format
Photos in WebP or AVIF, logos and icons in SVG. The right format decides a large part of the saving on its own.
Responsive Images and Lazy Loading
A smartphone needs a smaller image than a large desktop monitor. This is exactly where responsive images come in: through the srcset and sizes attributes the website provides several sizes of the same image, and the browser automatically loads the matching variant for the device at hand. A phone loads the small version, a desktop the large one, and no one pays with load time for pixels they never see. This technique is standard for a clean implementation and one of the most effective ways to lower mobile load time without giving up good display on large screens.
The second building block is lazy loading. By default a browser tries to load all images on a page immediately, including those that only become visible far down. With the loading attribute set to lazy, the browser loads images only when the visitor scrolls near them. This makes the page start faster, because at first only the visible area is loaded. The important exception is the most important image at the top of the page: it should not be loaded lazily, because it is usually the element against which the LCP is measured. It is exactly this fine tuning that belongs to a professional implementation, as we build into every web design and consider in our web hosting.
- srcset and sizes for several image sizes depending on the device
- Lazy loading for images below the visible area
- Deliberately load the most important image at the top early, not lazily
- Set fixed widths and heights so the layout does not jump
- Modern formats with a fallback via the picture element
- Deliver images over fast hosting with compression
Avoid layout shifts
Images and Core Web Vitals: the LCP Factor
Google assesses a page's user experience partly through the Core Web Vitals, and images play a central role in this. The most important value in this context is the Largest Contentful Paint, or LCP: it measures how long it takes for the largest visible element to load, and on many pages that is precisely the large image at the top. A good target is an LCP of under 2.5 seconds (web.dev). A heavy, uncompressed hero image is the most common reason for a poor LCP, and thus directly a ranking factor, because Google factors the user experience into its assessment.
Image optimisation therefore pays off twice: it makes the page faster and directly improves the metrics that feed into the search assessment. An optimised hero image that loads early, is small and comes in the right format often improves the LCP noticeably. Anyone who wants to strengthen content visibility alongside the technology sensibly combines image optimisation with clean search engine optimisation, because fast pages and good content reinforce each other. How to turn the gained speed into more enquiries then belongs to the field of conversion optimisation.
One lever, three effects
Image SEO: Getting Found Through Images
Optimised images not only load faster, they can also be found in their own right. Image search is a channel of its own through which visitors reach a website, and the basis for it is clean image SEO. It starts with the file name: a meaningful name such as bathroom-renovation-hildesheim tells search engines more than a cryptic string from the camera. Just as important is the alt text, the textual description of the image. It helps search engines classify the content and is at the same time a building block of accessibility, because screen readers read it aloud. A good alt text describes factually what is shown in the image rather than stringing keywords together.
Beyond file name and alt text, the surrounding text supports how an image is understood, and a visible caption is often read particularly attentively. For certain content, images can additionally be marked up with structured data, for example for products or recipes, so they can appear more prominently in search. Accessible, well-described images are no contradiction to good SEO but go hand in hand: what screen readers can read well, search engines can also understand well. How to combine both cleanly is something we show with accessible websites and in our SEO work.
- A descriptive file name instead of a cryptic camera code
- A meaningful alt text that factually describes the image content
- A fitting caption where it helps the reader
- Place images thematically alongside the surrounding text
- Where useful, add structured data for products or content
Image Rights and Licences Explained Briefly
As important as the technology is, one point must never be missing: the rights to the image. Not every image from the internet may simply be used. Photos are subject to copyright, and unauthorised use can lead to warnings and costs. Use is only permitted with a suitable licence, whether from a reputable image database, through a free licence with the required attributions, or with your own photos. Your own authentic photos of the business, the team or completed projects in particular often work more convincingly than bought stock images and are legally unproblematic, as long as the people shown consent.
In practice it is advisable to document the origin and licence terms for every image used, so that in case of doubt it is traceable where it came from. Free licences often require the creator to be named, which must then be done visibly. In every website project we make sure the images used are legally clean and advise where your own photos are the better choice. Anyone who regularly publishes new content should consider image rights from the outset rather than having to clarify them afterwards. Examples of our work can be found in the references.
How to Go About It
Review the stock
Establish which images are how heavy and which pages load slowly as a result. Usually it is a few large images that make the biggest difference.
In the end, image optimisation is not a one-off project but a habit. Every new image brought into the right format, scaled to fit and embedded cleanly keeps the website fast. Anyone who builds this routine in from the start does not have to make expensive corrections later. For existing sites, a targeted rework of the heaviest images almost always pays off, because it saves noticeable load time with manageable effort and improves the Core Web Vitals. If you are unsure where your website carries ballast, we will look at it together: get in touch via our contact form, or browse our blog for further tips.