A directory of brand guidelines: logosearch.link

Serving WebP images

Dom Habersack
Dom HabersackApril 15, 2020
A printed picture served on a plate.
One coffee and one WebP, freshly served!

If you run a Lighthouse Audit on your website, it’ll probably ask you to “Serve images in next-gen formats”. While most pictures are JPEGs or PNGs, there are more space-efficient formats available. WebP-files are about 25% smaller, with a higher quality than their older counterparts.

Google released WebP in 2010. A decade later, caniuse shows that most current browsers now support the format. Because IE11 and Safari still don’t, we cannot replace all our JPEGs with WebP today. Instead, we can send WebP to browsers that support it, while sending JPEGs to everybody else.

The switch between the formats happens on the server when a browser requests an image. Browsers send an Accept-header with each request. This header tells us what responses that browser can process. If it understands WebP, it tells us through this header. IE11 and Safari do not have WebP in their list of accepted responses.

We can use this header to send the requested picture in the appropriate format. One way to achieve this is by storing two versions of all images. For every cat.jpeg, we keep a cat.jpeg.webp right next to it. If a browser that supports WebP requests cat.jpeg, we send cat.jpeg.webp instead. If it does not support WebP, or cat.jpeg.webp is missing, we send the regular JPEG-version.

The exact setup for this depends on what server you use. This is how you could do it in nginx:

# set `$suffix` to `.webp` if the
# Accept-header contains “webp”
map $http_accept $suffix {
  "~*webp" ".webp";
}

# if a `.jpeg`-file is requested, try
# `.jpeg${suffix}` instead; if that does
# not exist, return the `.jpeg`-file
location ~* .jpeg$ {
  try_files $uri$suffix $uri $uri/ =404;
}

Yet again, progressive enhancement enables us to use a new feature today. If a browser does not support it, the previous functionality still works as always. Our visitors won’t even know the difference.

– Dom

Continue reading

The sculpture of a hand holding up a heavy tree branch.
#26March 4, 2020

Progressive enhancement with @supports (with video tutorial)

With @supports, we can start using features that will come to CSS soon in supporting browsers today.

A Lego knight about to be stepped on.
#68December 23, 2020

Running a static site saved me from getting hacked

When I looked at my site’s analytics for the first time in forever, I found that someone ran a script against it to find known vulnerabilities.

An analog alarm clock in front of a two-colored background.
#54September 16, 2020

End of an era

Moment.js is now a legacy project. While you can keep using it, these other projects might be better fits for you.

Read all issues →