Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FukuokaJS #11 今さら聞けないWebP対応

B535c947f6a7fdd35fbf3f68fff533d0?s=47 SoichiroKatsuki
August 07, 2020
Programming
0
37

FukuokaJS #11 今さら聞けないWebP対応

B535c947f6a7fdd35fbf3f68fff533d0?s=128

SoichiroKatsuki

August 07, 2020
Tweet

More Decks by SoichiroKatsuki

See All by SoichiroKatsuki
画像の遅延 ローディングの話
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
260
VueのUIフレームワークを試してみた
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
510
Azureでお手軽動画配信
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
210
Vue.jsで直接DOM操作 したい時のTips
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
4k

Other Decks in Programming

See All in Programming
実践的！FPGA開発セミナー vol.11
Bbf28bf908ac83e5b85b52a675641641?s=48 fixstars
0
110
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
130
There's an API for that!
6b6e72d297aa0270654a0d4575f1287e?s=48 mariatta
PRO
0
110
Lookerとdbtの共存
739b3e6644385d832834f6d4db498642?s=48 ttccddtoki
0
620
Pluggable Storage in PostgreSQL
62f5ee39e37ba4f8a22acc714781c879?s=48 sira
1
190
How to Test Your Compose UI (Droidcon Berlin 2022)
E8168a08862631072b2e82e7b662dc07?s=48 stewemetal
1
130
Google IO 2022 社内LT会 / What's new in Android development tools
B65b9817b6cdb9bc923b82657a3162b7?s=48 shingo_kobayashi
0
400
Edge Side Frontend という新領域
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
22
10k
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
これからのスクラムマスターのキャリアプランの話をしよう - スクラムマスターの前に広がる世界
93b2f8445b4096456c336ec2ea5dd0e7?s=48 psj59129
0
190
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
3518f5ec9ebb241abc3569eb5cfc7d2a?s=48 1901drama
0
180
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
C54e383f9597a63832fcc1c2547c7540?s=48 turamy
1
210

Featured

See All Featured
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
107
16k
Distributed Sagas: A Protocol for Coordinating Microservices
9128d500301ae51524e887bb680f471d?s=48 caitiem20
316
19k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
598
210k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.4k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
597
63k

Transcript

  1. ࠓߋฉ͚ͳ͍ WebPରԠ FukuokaJS #11 2020/07/28 Ճ݄ फҰ࿠

  2. ࣗݾ঺հ Ճ݄ फҰ࿠ɹɹˏZuckey_ ɹɹ ϑϩϯτΤϯυΤϯδχΞ ϩʔυόΠΫͱےτϨ͕झຯ ಲࠎϥʔϝϯ͕େ޷͖ തଟҰ૒͸͍͍ͧʂʂ

  3. WebPͱ͸ʁʁ • JPEG,GIF,PNGͳͲͷஔ͖׵͑Λҙਤͨ͠ը૾ϑΥʔϚοτ • PNGͷ26ˋɺಉఔ౓ͷը࣭ͷJPEGΑΓ25ʙ34ˋఔ౓༰ྔΛ খ͘͞Ͱ͖Δ • Ξχϝʔγϣϯʹ΋ରԠ • ࣮͸2010೥͔Β͋Δҙ֎ͱݹ͍ը૾ϑΥʔϚοτ

    https://developers.google.com/speed/webp

  4. Apple͕Safari 14 Beta͔ΒWebP ʹରԠ͢Δͱൃද͠·ͨ͠ʂʂʂ https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

  5. imgλάͷsrcʹWebPϑΝΠϧͷύεΛࢦఆ͢Δ ͚ͩʂʂ Ҏ্Ͱ͢ʂʂ ͜Ε͔ΒͷWebPରԠ

  6. ͱݴ͍͍ͨͱ͜ΖͰ͕͢…

  7. None

  8. https://caniuse.com/#feat=webp

  9. pictureλάΛ࢖༻ͯ͠ରԠ͢Δ ඇରԠϒϥ΢β͸srcʹࢦఆͨ͠jpg͕ɺରԠϒϥ ΢βʹ͸WebP͕දࣔ͞ΕΔ ݱ࣮తͳWebPରԠ(HTMLฤ)

  10. ModernizrΛ࢖༻ͯ͠ରԠ͢Δ htmlλάʹରԠ༗ແʹ߹Θͤͯwebp, no-webp ͷΫϥε͕෇༩͞ΕΔͷͰͦΕʹ߹Θͤͯ෼ذ͢Δ ݱ࣮తͳWebPରԠ(CSSฤ)

  11. ·ͱΊ • Safari 14͕ϦϦʔε͞ΕΔͱϒϥ΢βαϙʔτΛϞμϯϒϥ ΢βͷ࠷৽൛ͷΈʹ͢Ε͹WebPඇରԠ࣌ͷϑΥʔϧόοΫ͕ ෆཁʹͳΓͦ͏ • IE11ͳͲ΋αϙʔτ͢Δ৔߹͸ɺHTML͸pictureλάɺCSS͸ ModernizrΛར༻ͯ͠ରԠ͢Δ