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
96
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
240
GDG DevFest 2015 Poland - How to grow your own Babel fish
Avatar for Szymon Nowak szimek
0
70
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」の 設計と実装 
Avatar for 奈良亮耶 ryoyanara
0
220
私のClaude Code活用法 （個人開発編） - PHPerKaigi mini #4（2026/08/24）
Avatar for panda_program panda_program
1
110
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
350
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
220
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
150
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
260
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
140
夏だ！祭りだ！祭りとはドメインモデリングでは？
Avatar for ryugen04 ryugen04
0
360
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
560
運用ダッシュボードの設計を誰も教えてくれないのだけど みなさんどうしてるんですか？ - チームに監視するという文化を根付かせるための第一歩を踏みたい -
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
140
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
340
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
5.1k

Featured

See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
330
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.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/