Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serving WebP images via content negotiation

Szymon Nowak
November 04, 2015
Programming
1
76

Serving WebP images via content negotiation

Lightning talk from meet.js meetup 11/2015

Szymon Nowak

November 04, 2015
Tweet

More Decks by Szymon Nowak

See All by Szymon Nowak
meet.js Katowice - ES6 Promises 101
szimek
1
230
GDG DevFest 2015 Poland - How to grow your own Babel fish
szimek
0
61
JSConf EU 2015 - How to grow your own Babel fish
szimek
0
330

Other Decks in Programming

See All in Programming
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Formの複雑さに立ち向かう
bmthd
1
810
[Fin-JAWS 第38回 ～re:Invent 2024 金融re:Cap～]FaultInjectionServiceアップデート＠pre:Invent2024
shintaro_fukatsu
0
410
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
Ruby on cygwin 2025-02
fd0
0
140
昭和の職場からアジャイルの世界へ
kumagoro95
1
360
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
1
180
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.1k
負債になりにくいCSSをデザイナとつくるには？
fsubal
9
2.4k

Featured

See All Featured
Fireside Chat
paigeccino
34
3.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
27
3.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Large-scale JavaScript Application Architecture
addyosmani
510
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
BBQ
matthewcrist
86
9.5k
Faster Mobile Websites
deanohume
306
31k

Transcript

  1. SERVING WEBP IMAGES VIA CONTENT NEGOTIATION SZYMON NOWAK @SZIMEK

  2. 366K [email protected] 248K [email protected] 198K [email protected] 81K [email protected] 173K [email protected]

    81K [email protected]

  3. FIREFOX Accept: image/png,image/*;q=0.8,*/*;q=0.5

  4. CHROME Accept: image/webp,image/*,*/*;q=0.8

  5. NGINX if ($http_accept ~* "webp") { set $webp_accept "true"; }

  6. NGINX if ($webp_accept = "true") { rewrite (.*) $1.webp break;

    }

  7. NGINX add_header Vary Accept;

  8. https://www.igvita.com/2013/05/01/deploying- webp-via-accept-content-negotiation/

  9. OR USE PICTURE ELEMENT https://developer.mozilla.org/en-US/docs/Web/ HTML/Element/picture

  10. OR USE SERVICE WORKERS http://deanhume.com/Home/BlogPost/service- workers--dynamic-responsive-images-using- webp-images/10132/