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

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

Avatar for SoichiroKatsuki SoichiroKatsuki
August 07, 2020
Programming
110
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
710
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
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
1k
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
1.9k
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
Avatar for nero15 takuya_houshima
0
2.6k
Agentic Elixir
Avatar for Andrea Leopardi whatyouhide
0
390
2026_04_15_量子計算をパズルとして解く
Avatar for HideakiTakechi hideakitakechi
0
110
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
340
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
770
PHP で mp3 プレイヤーを実装しよう
Avatar for memory m3m0r7
PRO
0
290
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
1.1k
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
0
410
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
110
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
490

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
140
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.4k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
360
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
280
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
170

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