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

Serving WebP images via content negotiation

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Szymon Nowak Szymon Nowak
November 04, 2015
Programming
91
1

Serving WebP images via content negotiation

Lightning talk from meet.js meetup 11/2015

Avatar for Szymon Nowak

Szymon Nowak

November 04, 2015

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
65
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
How Swift's Type System Guides AI Agents
Avatar for Yuta Koshizawa koher
0
230
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
120
SkillがSkillを生む：QA観点出しを自動化した
Avatar for sontixyou sontixyou
6
3.3k
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
4
2.9k
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
750
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
510
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
140
Coding at the Speed of Thought: The New Era of Symfony Docker
Avatar for Kévin Dunglas dunglas
0
4.8k
Make GenAI Production-Ready with Kubernetes Patterns
Avatar for Bilgin Ibryam bibryam
0
110
PHP 7.4でもOpenTelemetryゼロコード計装がしたい！ / PHPerKaigi 2026
Avatar for Arthur arthur1
1
570
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.3k
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
Avatar for Takuma Kajikawa kajitack
2
180

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.2k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
250
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.6k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
120
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150

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/