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

Serving WebP images via content negotiation

Szymon Nowak
November 04, 2015
Programming
1
73

Serving WebP images via content negotiation

Lightning talk from meet.js meetup 11/2015

Szymon Nowak

November 04, 2015
Tweet

More Decks by Szymon Nowak

See All by Szymon Nowak
meet.js Katowice - ES6 Promises 101
szimek
1
220
GDG DevFest 2015 Poland - How to grow your own Babel fish
szimek
0
61
JSConf EU 2015 - How to grow your own Babel fish
szimek
0
330

Other Decks in Programming

See All in Programming
Tauriでネイティブアプリを作りたい
tsucchinoko
0
360
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
240
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
320
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
500
Better Code Design in PHP
afilina
PRO
0
120
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
1
280
EventSourcingの理想と現実
wenas
6
2.3k
詳細解説！ ArrayListの仕組みと実装
yujisoftware
0
560
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
210
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
340

Featured

See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Speed Design
sergeychernyshev
24
610
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
A Tale of Four Properties
chriscoyier
156
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
A designer walks into a library…
pauljervisheath
202
24k
The Pragmatic Product Professional
lauravandoore
31
6.3k

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/