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

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

Avatar for SoichiroKatsuki SoichiroKatsuki
August 07, 2020
Programming
120
0

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

Avatar for SoichiroKatsuki

SoichiroKatsuki

August 07, 2020

More Decks by SoichiroKatsuki

See All by SoichiroKatsuki
画像の遅延 ローディングの話
Avatar for SoichiroKatsuki soichirokatsuki
1
440
VueのUIフレームワークを試してみた
Avatar for SoichiroKatsuki soichirokatsuki
1
720
Azureでお手軽動画配信
Avatar for SoichiroKatsuki soichirokatsuki
1
410
Vue.jsで直接DOM操作 したい時のTips
Avatar for SoichiroKatsuki soichirokatsuki
1
4.4k

Other Decks in Programming

See All in Programming
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
140
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
160
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
130
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
180
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
1k
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2.7k
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
180
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
180
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
240
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
1.1k
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
300
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
340

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
860
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k

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Λར༻ͯ͠ରԠ͢Δ