Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FukuokaJS #11 今さら聞けないWebP対応
Search
SoichiroKatsuki
August 07, 2020
Programming
0
91
FukuokaJS #11 今さら聞けないWebP対応
SoichiroKatsuki
August 07, 2020
Tweet
Share
More Decks by SoichiroKatsuki
See All by SoichiroKatsuki
画像の遅延 ローディングの話
soichirokatsuki
1
430
VueのUIフレームワークを試してみた
soichirokatsuki
1
680
Azureでお手軽動画配信
soichirokatsuki
1
400
Vue.jsで直接DOM操作 したい時のTips
soichirokatsuki
1
4.4k
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
830
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
NPOでのDevinの活用
codeforeveryone
0
840
Discover Metal 4
rei315
2
140
Is Xcode slowly dying out in 2025?
uetyo
1
270
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Writing Fast Ruby
sferik
628
62k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Visualization
eitanlees
146
16k
Statistics for Hackers
jakevdp
799
220k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Transcript
ࠓߋฉ͚ͳ͍ WebPରԠ FukuokaJS #11 2020/07/28 Ճ݄ फҰ
ࣗݾհ Ճ݄ फҰɹɹˏZuckey_ ɹɹ ϑϩϯτΤϯυΤϯδχΞ ϩʔυόΠΫͱےτϨ͕झຯ ಲࠎϥʔϝϯ͕େ͖ തଟҰ͍͍ͧʂʂ
WebPͱʁʁ • JPEG,GIF,PNGͳͲͷஔ͖͑Λҙਤͨ͠ը૾ϑΥʔϚοτ • PNGͷ26ˋɺಉఔͷը࣭ͷJPEGΑΓ25ʙ34ˋఔ༰ྔΛ খ͘͞Ͱ͖Δ • ΞχϝʔγϣϯʹରԠ • ࣮2010͔Β͋Δҙ֎ͱݹ͍ը૾ϑΥʔϚοτ
https://developers.google.com/speed/webp
Apple͕Safari 14 Beta͔ΒWebP ʹରԠ͢Δͱൃද͠·ͨ͠ʂʂʂ https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes
imgλάͷsrcʹWebPϑΝΠϧͷύεΛࢦఆ͢Δ ͚ͩʂʂ Ҏ্Ͱ͢ʂʂ ͜Ε͔ΒͷWebPରԠ
ͱݴ͍͍ͨͱ͜ΖͰ͕͢…
None
https://caniuse.com/#feat=webp
pictureλάΛ༻ͯ͠ରԠ͢Δ ඇରԠϒϥβsrcʹࢦఆͨ͠jpg͕ɺରԠϒϥ βʹWebP͕දࣔ͞ΕΔ ݱ࣮తͳWebPରԠ(HTMLฤ)
ModernizrΛ༻ͯ͠ରԠ͢Δ htmlλάʹରԠ༗ແʹ߹Θͤͯwebp, no-webp ͷΫϥε͕༩͞ΕΔͷͰͦΕʹ߹Θͤͯذ͢Δ ݱ࣮తͳWebPରԠ(CSSฤ)
·ͱΊ • Safari 14͕ϦϦʔε͞ΕΔͱϒϥβαϙʔτΛϞμϯϒϥ βͷ࠷৽൛ͷΈʹ͢ΕWebPඇରԠ࣌ͷϑΥʔϧόοΫ͕ ෆཁʹͳΓͦ͏ • IE11ͳͲαϙʔτ͢Δ߹ɺHTMLpictureλάɺCSS ModernizrΛར༻ͯ͠ରԠ͢Δ