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
390
Vue.jsで直接DOM操作 したい時のTips
soichirokatsuki
1
4.4k
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
20250613-SSKMvol.15
diostray
0
100
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
530
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
520
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
It's Worth the Effort
3n
185
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
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Λར༻ͯ͠ରԠ͢Δ