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
92
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
AIコーディングAgentとの向き合い方
eycjur
0
250
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
380
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
複雑なドメインに挑む.pdf
yukisakai1225
5
960
Laravel Boost 超入門
fire_arlo
2
190
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
180
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
CSC305 Summer Lecture 12
javiergs
PRO
0
130
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.2k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
4 Signs Your Business is Dying
shpigford
184
22k
Done Done
chrislema
185
16k
We Have a Design System, Now What?
morganepeng
53
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
40
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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Λར༻ͯ͠ରԠ͢Δ