Performance improvement with WEBP images

Offer your ideas on how to improve the site or report problems.
User avatar
HB
Admin
Posts: 22021
Joined: 19 years ago

#1: Post by HB »

A quick nerdy website announcement, take two:

Last month, the percentage of browsers supporting the new image format WEBP increased to over 75%. This new image format is more compact that JPEG and PNG at the same quality. I've done some testing and on mobile phones, it noticeably reduces the time to display pages, especially if you're in an iffy network spot. So I've added support for WEBP images on this site.

If your browser supports WEBP format, references to other image formats (jpg, jpeg, png) will be automatically converted to webp format and substituted. If you copy image URLs (e.g. with the "Copy Image Location" popup-menu choice on Firefox and similar), you may notice the URL is different. For example, here's an "old" image URL:
.../userpix/2_favorites2020-teaser.jpg
And the same image URL in a browser that supports WEBP:
.../userpix/2_favorites2020-teaser.webp
Behind the scenes, the server converted the "old" jpg into a "new" webp image. The result is cached, so the conversion is a one-time cost. Since some posters copy URLs from one post and paste them into their own post for easy reference, the webp URL will be remapped to its originally uploaded image extension prior to be saved in the database. This avoids incompatibilities where a Firefox user copy/pastes a webp URL into their post that isn't [yet] supported by Safari.

To make it easier for posters who download existing existing images, mark them up, and re-upload, clicking a photo will bring up the original (non-WEBP format) image in a new window, where it's easy to download. This will also use the highest-resolution version instead of the lower-resolution one returned to mobile photos. For example:


(clicking image will open a new window on the original)

Devices that support WEBP image formats will automatically choose the WEBP version of the photo above; if it's requested from a mobile phone, the lower-resolution version is returned to save bandwidth/reduce download time. However, clicking the image will open a new window on the original JPEG, ready for easy download / markup.
Dan Kehn