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

Serving WebP images via content negotiation

Avatar for Szymon Nowak Szymon Nowak
November 04, 2015
Programming
1
78

Serving WebP images via content negotiation

Lightning talk from meet.js meetup 11/2015

Avatar for Szymon Nowak

Szymon Nowak

November 04, 2015
Tweet

More Decks by Szymon Nowak

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

Other Decks in Programming

See All in Programming
為你自己學 Python - 冷知識篇
Avatar for 高見龍 eddie
1
330
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
170
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
150
時間軸から考えるTerraformを使う理由と留意点
Avatar for Ryoma Fujiwara fufuhu
9
3.8k
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
260
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
410
KessokuでDIでもgoroutineを活用する / Go Connect #6
Avatar for mazrean mazrean
0
140
パスタの技術
Avatar for Yusuke Wada yusukebe
1
560
print("Hello, World")
Avatar for 高見龍 eddie
1
290
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
2
210
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
300
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
Avatar for Itaru Ota ota1022
5
1.9k

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
It's Worth the Effort
Avatar for 3n 3n
187
28k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
830
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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/