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

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

Avatar for SoichiroKatsuki SoichiroKatsuki
August 07, 2020
Programming
0
91

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

Avatar for SoichiroKatsuki

SoichiroKatsuki

August 07, 2020
Tweet

More Decks by SoichiroKatsuki

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

Other Decks in Programming

See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
Avatar for MIKIO KUBO mickey_kubo
1
120
効率的な開発手段として VRTを活用する
Avatar for Yosuke Ishikawa ishkawa
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
780
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
710
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
770
Hack Claude Code with Claude Code
Avatar for Akihiro Okuno choplin
4
2.1k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
21
4k
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
220
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール？ 〜
Avatar for Yoda Keisuke yodakeisuke
0
130
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
650

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k

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