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
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
AIコーディングAgentとの向き合い方
eycjur
0
270
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
140
Navigating Dependency Injection with Metro
zacsweers
3
260
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Cache Me If You Can
ryunen344
2
700
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
アセットのコンパイルについて
ojun9
0
120
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Site-Speed That Sticks
csswizardry
10
810
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Balancing Empowerment & Direction
lara
3
620
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Being A Developer After 40
akosma
90
590k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Fireside Chat
paigeccino
39
3.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
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Λར༻ͯ͠ରԠ͢Δ