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
91

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
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
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
120
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
160
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
150
Claude Codeログ基盤の構築
Avatar for giginet giginet
PRO
7
3.6k
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
350
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
180
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
150
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
500
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
4
460
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
360
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
210
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
510

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
130
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
HDC tutorial
Avatar for Michiel Stock michielstock
1
580
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
280
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k

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/