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

Serving WebP images via content negotiation

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Szymon Nowak Szymon Nowak
November 04, 2015
Programming
1
87

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
64
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
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
9k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
110
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
270
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
410
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Design in an AI World
Avatar for tapps tapps
0
140
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
100
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
810
Designing for Performance
Avatar for Lara Hogan lara
610
70k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
93

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/