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
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
効率的な開発手段として VRTを活用する
ishkawa
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Hack Claude Code with Claude Code
choplin
4
2.1k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
技術同人誌をMCP Serverにしてみた
74th
1
650
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Applications with DynamoDB
mza
95
6.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Site-Speed That Sticks
csswizardry
10
690
Designing for humans not robots
tammielis
253
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Faster Mobile Websites
deanohume
307
31k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Producing Creativity
orderedlist
PRO
346
40k
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Λར༻ͯ͠ରԠ͢Δ