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
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
130
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
260
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.4k
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
280
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
150
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
590
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.7k
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
150
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
120
安いハードウェアでVulkan
Avatar for Fadis fadis
1
770
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
7
3.1k
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
210
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
93
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k

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/