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
69

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
55
JSConf EU 2015 - How to grow your own Babel fish
szimek
0
320

Other Decks in Programming

See All in Programming
Implementing Design Systems in Swift
seyfoyun
1
420
ゆるい個人開発のススメ
kuroppe1819
10
1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Elm Form Validation
bkuhlmann
0
510
"config" ってなんだ？ / What is "config"?
okashoi
0
250
Snowflakeで眠ったデータを起こそう！
estie
0
130
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
670
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
2 週間で Twitter Bot を作ってみた
contour_gara
0
760
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Rails Girls Zürich Keynote
gr2m
91
13k
What's new in Ruby 2.0
geeforr
337
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Documentation Writing (for coders)
carmenintech
61
4k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Building Applications with DynamoDB
mza
88
5.6k
A Philosophy of Restraint
colly
197
16k
What the flash - Photography Introduction
edds
64
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Making Projects Easy
brettharned
109
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/