Page MenuHomePhabricator

Send WebP images when possible
Open, NormalPublic

Description

About 45% of traffic supports WebP, and Mapnik can generate WebP images natively.

On a big (67k) tile, WebP lossless is 70% of file size, "near lossless" 100 is 35%, and lossy is 20%-40%. Producing directly from Mapnik might produce slightly different results.

WebP is reported to require less CPU than PNG on the server.

The downside to WebP is it reduces image cache hit ratios, but the size reduction for clients is probably worth it.

Event Timeline

Pnorman created this task.Dec 8 2016, 10:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 8 2016, 10:49 PM
Yurik added subscribers: debt, Yurik.Dec 9 2016, 2:23 AM

@debt don't add parent tags -- we will have to resort it afterwards, once @herald is fixed

Yurik moved this task from All map-related tasks to Kartotherian on the Maps board.Dec 9 2016, 5:23 AM
Yurik edited projects, added Maps (Kartotherian); removed Maps.
debt moved this task from Kartotherian to Maps-data on the Maps board.Dec 9 2016, 5:32 PM
debt edited projects, added Maps (Maps-data); removed Maps (Kartotherian).
debt moved this task from Maps-data to Kartotherian on the Maps board.
debt edited projects, added Maps (Kartotherian); removed Maps (Maps-data).

From some discussion while waiting for a download

The 30 tiles from that page can be gotten with

for x in `seq 125 130`; do for y in `seq 83 87`; do curl -o 8_${x}_${y}.png "https://maps.wikimedia.org/osm-intl/8/$x/$y.png"; done; done

Recompressing them with pngnq and cwebp gives the following sizes

format            size (kb)
png               1565
png256            691
webp lossless z3  1281
webp lossless z6  1258
webp lossless z9  1243
webp nl 80        1047
webp nl 40        760
webp jpeg-like 40 111
webp jpeg-like 80 309
webp jpeg-like 90 482
webp jpeg-like 95 618
webp jpeg-like 98 752

webp compression numbers are done with -jpeg_like to make the quality resemble that of a jpeg of the same quality, nl is -near_lossless.

What struck me is how blazingly fast webp lossy 95 and 98 were. Visible artifacts are hard to see at 90 and above, even when zoomed in.

I forgot to mention that these 2.5MB were on a 2.0 DPR (device pixel ratio). For 1.0 DPR it seems to be around 1.1MB. But still.

Pnorman triaged this task as Normal priority.Jul 10 2018, 4:43 PM
Great_Brightstar added a comment.EditedFeb 6 2019, 4:40 AM

Since Firefox 65 released, all major web browsers except Safari got support for WebP format, so it's reasonable to provide WebP images directly to them. We can try to detect the request header firstly while the server received the request, then we decide weather sending WebP images to the client.