4 tips for faster images on your website

MARTIN SPLITT: If you think about it,
photos and videos from your last vacation
look great on your phone, but might not look as great
on your bigger screens.
We can actually use that to our advantage.
Users are on small screen devices,
and our images might just look fine
if we use a smaller size and more compression.
And then we can give larger, higher-quality images
to those users who are visiting on bigger screens.
[MUSIC PLAYING]
Look at this website.
Isn't it beautiful?
These photos are so pretty, but it's such a slow website.
Hmm, I wonder if we can do something about it.
Let's look at four things we can do to make this website faster.
Images on the web can add a lot of value to a website.
They set the tone.
They give a visual first impression to your visitors.
And as the saying goes, a picture
is worth a thousand words.
But this comes at a cost.
Images often are a significant portion of a website's download
size and often cause websites to be slower than they should be.
If used incorrectly, they can not only
cost time and money during download,
but they can also cause layout shifts
as they pop into a website and move stuff
around, annoying your users.
So let's look at our first tip, using the right format.
Think about the image format you're
using, depending on the kinds of images you have.
There are a bunch of different formats, some of them classics,
like JPEG, PNG, or GIF, and some of them
are more recent, like WebP or AVIF.
It's not super straightforward which format
to choose for an image, unfortunately.
But there's a nice way to play around with images to get
a feeling for it, squoosh.app.
You can upload an image, play with the settings,
and get a side-by-side comparison
between different formats and settings.
Which brings me to my second tip,
checking your compression settings
for photos on your website.
At a first glance, this is relatively easy.
I mean, compress images as much as possible without losing more
quality than you're OK with.
By the way, once you find the settings you're happy with,
you can automate most of the image conversion
and compression, but make sure to double check the results.
Some images might look worse than you'd like,
and you might want to hand tune settings for those images.
Next up is responsive sizing.
If you think about it, photos and videos
from your last vacation look great on your phone
but might not look as great on your bigger screens.
We can use that to our advantage, actually.
If users are on small-screen devices,
our images might look fine with a smaller
size and more compression.
And we can give the larger, higher-quality images
to users who are visiting on bigger screens.
To do that, we can use the picture element or the source
set attribute on image elements.
This way, the browser will choose the best image
for the device, and Google Search
will use the fallback image.
You can also add structured data to tell Google Search
about the other versions.
If you want to learn more on that,
see the article below for more information.
Last but not least, use lazy-loading where appropriate.
For images that are very unlikely to be immediately
visible upon loading the page, kind of below-the-fold images,
these can be delayed and loaded once they become
more likely to be visible.
This reduces data transfers for images
that might not show up because the user isn't scrolling
down far enough to see them.
But don't use this technique for all of the images,
as it has downsides for images that are immediately visible.
Conveniently, you can use the loading
HTML attribute to do this.
It works in all modern browsers and old browsers just
ignore them.
So there we go.
Four tips to get images to work better for your users.
Please leave us a comment if you want more technical content
on Google Search Central and what other topics
you would like to be covered.
Thanks for watching, and see you soon.
[MUSIC PLAYING]