The biggest speed gain on most websites, and you don't need a developer for it.
You optimise images by exporting them at the size at which they are displayed, saving them as WebP, specifying width and height in the code and only loading images below the fold when scrolling. Together that is half the loading time for most sites.
STEP BY STEP
In order of yield
- Reduce to display sizeA photo 4000 pixels wide displayed at 800 makes visitors download five times too much. Export at the size it appears at, double at most for sharp screens.
- Save as WebPWebP is typically thirty percent smaller than JPEG at the same viewable quality and is widely supported. Only this conversion makes a noticeable difference.
- Quality around 80 percentAbove eighty percent you no longer see a difference and you only pay for file size. It becomes visible below seventy.
- Enter width and heightWithout those values, the browser does not reserve space and the page jumps during loading. That is the most common cause of a bad CLS score.
- Load below the fold laterImages that only become visible after scrolling do not have to be loaded immediately. The image at the top does, and with priority.
- Write descriptive alt textFor screen readers and in case the image doesn't load. Describe, don't stuff it with keywords.
PITFALLS
Where things go wrong
The classic mistake is uploading the photo straight from the camera. A five megabyte file is a wall for a visitor on mobile internet.
The second is lazy loading everything, including the image at the top. It should come first, because it determines when the page appears 'finished'.
- Not straight from the camera — always reduce first.
- Do not lazy load top image — it actually needs priority.
- Always width and height — prevents jumping.
- No keywords in the alt text — description is the goal.
- Test on mobile with WiFi off — the fairest control.
FREQUENTLY ASKED QUESTIONS
More about images
Which tool do I use?
Any photo editing program can export by size and quality. There are free online tools for converting to WebP. You do not need a subscription for this.
How large can an image be?
As a rule of thumb, under 200 kilobytes for a regular photo, and under 400 for a large top image. If you get above that, there is still profit to be made.
Do you do this automatically?
For sites we build, images are delivered custom-made, in WebP, with dimensions in the code. That is part of the construction and not an individual item.
CONTINUE READING
Of course, continue reading about this subject.
You gain speed itself can you grab?
We measure your site and tell you which images take the most time.