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
450
VueのUIフレームワークを試してみた
Avatar for SoichiroKatsuki soichirokatsuki
1
730
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
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
600
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
2
740
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
9
4.5k
Webプラットフォームで議論されているセキュリティ課題 / Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
250
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
660
週末にAI-DLCを本気で回したら$1,600溶けた
Avatar for Atsushi Shimizu hbashimizu
0
130
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
290
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
210
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
150
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
100
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
420

Featured

See All Featured
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
890
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
980
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
680
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k

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