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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Claude CodeでETLジョブ実行テストを自動化してみた
Avatar for yoshiki kasama yoshikikasama
0
1.2k
【26新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
180
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
5
1.6k
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
150
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
350
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
Avatar for teyamagu teyamagu
PRO
3
780
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
Avatar for Kashun Yoshida kashewnuts
1
240
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
380
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
150
Building on Bluesky's AT Protocol with Ruby
Avatar for Kuba Suder mackuba
0
110
ソフトウェア設計の結合バランス #phperkaigi
Avatar for Takuma Kajikawa kajitack
0
500
GitHubCopilotCLIをはじめよう.pdf
Avatar for tkym htkym
0
330

Featured

See All Featured
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
340
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
190
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
110
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
300
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
190
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
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Λར༻ͯ͠ରԠ͢Δ