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
80

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
63
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
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
33k
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
130
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
340
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
200
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
790
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
26
6.6k
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
1.1k
ソフトウェア設計の実践的な考え方
Avatar for 増田 亨 masuda220
PRO
4
630
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
6
3.3k
iOSでSVG画像を扱う
Avatar for Kishikawa Katsumi kishikawakatsumi
0
150

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
990
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
190
55k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k

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/