Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018_03_speeekaigi
Search
morioka shuhei
March 30, 2018
1
370
2018_03_speeekaigi
morioka shuhei
March 30, 2018
Tweet
Share
More Decks by morioka shuhei
See All by morioka shuhei
20191103_小山高専_卒業生講話
selmertsx
1
210
20190306_serverless_meetup_tokyo_11
selmertsx
5
1.6k
aws_reinvent_recap
selmertsx
2
270
aws_reinvent_recap_chaos_engineering_to_serverless
selmertsx
1
1.2k
sam_on_aws_2018_startup_days
selmertsx
1
290
20171019_aws_startup_tech
selmertsx
1
6.8k
rails_rdm_revieee
selmertsx
0
1.2k
2017_jaws_ug_night_shuhei
selmertsx
3
4.3k
revieee
selmertsx
0
340
Featured
See All Featured
What the flash - Photography Introduction
edds
67
11k
The Pragmatic Product Professional
lauravandoore
31
6.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Building Adaptive Systems
keathley
36
2.1k
Producing Creativity
orderedlist
PRO
340
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
24
3.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
We Have a Design System, Now What?
morganepeng
48
7.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
What's new in Ruby 2.0
geeforr
340
31k
Documentation Writing (for coders)
carmenintech
65
4.3k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Transcript
120%ڵຯຊҐͰ։ൃͯ͠Έͨ ~ JSΛWebPʹม͢Δ ~ ։ൃج൫ˍψϦΧΤ Ԭपฏ
JSΛWEBPʹมͯ͠Έͨ ࣗݾհ ▸ ໊લ: Ԭपฏ ▸ ॴଐ෦ॺ: ։ൃج൫ & ψϦΧΤ
▸ GitHub Account: @selmertsx ▸ ओۀ: RailsͰͷΞϓϦέʔγϣϯ։ൃ ▸ ࠷ۙͷڵຯ: ϑϩϯτϛογϣϯ/ ΞʔϚʔυίΞͷൃച
JSΛWEBPʹมͯ͠Έͨ ࠓ͢Δ͓͠ͷ֓ཁ ▸ JavaScriptͷίʔυΛWebPʹม ͯ͠Έͨ ▸ WebPʹม͞ΕͨJSͷίʔυݩ ͷJSʹͤΔ͜ͱ͕֬ೝͰ͖ͨ ▸ JS͔ΒWebPʹมͨ݁͠Ռ
gzipΑΓѹॖ͕ྑ͔ͬͨ ▸ ಛʹԿͷ՝ղܾ͍ͯ͠·ͤΜ ▸ શʹڵຯຊҐͰͬͯΈ·ͨ͠ WebPʹม JSʹม ݕূʹͬͨίʔυ: https://github.com/selmertsx/png_to_js
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ~എܠ (1/4)~ ͬͯΈΑ͏ͱࢥͬͨഎܠ ▸ 2017 ը૾ѹॖπʔϧͷબఆΛ͍ͯͨ͠ ▸ PNGը૾ͷѹॖͷͨΊʹ ZopfliͱWebPΛௐࠪ
▸ ZopfliJS/CSS/PNGѹॖʹΘΕΔπʔϧ ▸ gzipΑΓѹॖʹֻ͕͔࣌ؒΔ(10ഒҎ্)͕ ѹॖ͕ߴ͘ gzipͱಉ͡ํ๏Ͱղౚ͕Մೳͱ͍͏ಛΛ࣋ͭ ▸ ಈతίϯςϯπgzip, ੩తίϯςϯπ zopfliͱ͍͏ࣄྫ͋Δ https://developers.cyberagent.co.jp/blog/archives/5975/
JSΛWEBPʹมͯ͠Έͨ ~എܠ (2/4)~ WebPʹ͍ͭͯ ▸ ը૾ѹॖϑΥʔϚοτͷ̍ͭ ▸ LossLessͰѹॖ͕ߴ͍ ӈͷը૾Λѹॖ͢Δͱ original
(359637 byte) Zopfli (333423 byte) LossLess WebP (261420 byte) ▸ ΄΅ChromeͷΈར༻Մೳ https://caniuse.com/ #search=WebP ʮ͍Β͢ͱʯΑΓҾ༻
JSΛWEBPʹมͯ͠Έͨ ~എܠ (3/4)~ ը૾ѹॖπʔϧͷબఆ͔ΒֶΜͩ͜ͱ ▸ PNGͷσʔλϑΥʔϚοτ ▸ JSͱPNGಉ͡πʔϧͰѹॖͰ͖Δ ▸ WebPLossLessͰߴ͍ѹॖΛ͍࣋ͬͯΔ
▸ JSΛPNGʹม͢Δ͜ͱ͕Ͱ͖ΔΜ͡Όͳ͍͔ʁ (PNGͷσʔλϑΥʔϚοτ͔Β) ▸ ಉ͡πʔϧͰѹॖͰ͖ΔͳΒɺWebPʹม͢Δ͜ͱͰ ϑΝΠϧαΠζ͕અͰ͖ΔͷͰͳ͍͔ʁ ؾʹͳͬͨ͜ͱ
JSΛWEBPʹมͯ͠Έͨ ~എܠ (4/4)~ খ͘͞ͳͬͨͱͯ͠Կ͔ϝϦοτ͋Δͷʁ ▸ 多分あんまりメリットはない ▸ JSͷϑΝΠϧαΠζΛখͨ͘͞͠ͱ͜ΖͰɺWebαʔϏ ε͔ΒDL͢ΔϦιʔεͷ૯ྔ͔Β͢ΔͱӨڹݶఆత ▸
Α͠Μ͔ͳΓখ͘͞ͳͬͨͱͯ͠ɺWebPΛJSͱͯ͠ղ ऍ͢ΔॲཧͰCPUϦιʔεΛແବʹ৯͏ͩΖ͏ (ϑΝΠϧαΠζ͕େ͖͚Εେ͖͍΄Ͳ) ▸ それでも気になる!
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ~ઌߦࣄྫ (1/1)~ ઌߦࣄྫ Javascript ΛPNGʹม ▸ JSΛPNGʹม͠pngoutͰѹॖ͢Δ͜ͱͰ gzipΑΓ2% ఔߴ͍ѹॖΛಘͨ
(iamcal: 2010) http://iamcal.github.io/PNGStore/ ▸ PNGʹมͨ͠JSΛcanvasͰಡΈࠐΜͰɺJSͱ࣮ͯ͠ߦ (yomotsu: 2015) http://yomotsu.net/blog/2015/03/01/js2png.html ▸ JSΛWebPʹมͨ͠ࣄྫݟ͔ͭΒͳ͔ͬͨ
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ~JS =>PNG => WEBPม (1/5)~ JS => PNG =>
WebP มͷ֓ཁ ▸ JSίʔυΛ minify͢Δ (1ߦʹ·ͱΊͯѻ͍͘͢͢Δ) ▸ JSίʔυΛ grayscaleͷPNGʹม͢Δ ▸ grayscaleͰ 1pixel 8bitͰදݱ ▸ JS ASCII codeʹม => 1pixel 1 จࣈ ▸ alphaͳͲશͯແࢹ ▸ ্Ͱ࡞ͬͨPNGΛLosslessͷ WebPʹม͢Δ
JSΛWEBPʹมͯ͠Έͨ ~JS =>PNG => WEBPม (2/5)~ PNGͰඞਢͱ͞ΕΔσʔλͷ͓͞Β͍ https://www.w3.org/TR/2003/REC-PNG-20031110/#11Critical-chunks ▸ PNGࣝผࢠ:
pngͰ͋Δ͜ͱΛࣔ͢σʔλ (࠷ॳͷ8bytes) ▸ IHDR: ը૾ͷಛΛอ͍࣋ͯ͠Δσʔλ (෯ɾߴ͞ɾѹॖํ๏ͳͲ) ▸ IDAT: ѹॖ͞Εͨը૾σʔλ ▸ IEND: PNG datastreamͷऴྃΛࣔ͢σʔλ
JSΛWEBPʹมͯ͠Έͨ ~JS =>PNG => WEBPม (3/5)~ ࣮ࡍͷIHDRͷઃఆ ▸ width: 16386
(webp͕ѻ͑Δ1ลͷ࠷େ) ▸ height: JSจࣈ / width ͰΓ্͛ ▸ bit depth: 8 (1pixel 1จࣈͱ͢ΔͨΊ) ▸ color type: grayscale (1pixel 1จࣈͱ͢ΔͨΊ) ▸ compression method, Filter method, Interface method σϑΥϧτͷ··
JSΛWEBPʹมͯ͠Έͨ ~JS =>PNG => WEBPม (4/5)~ IDAT ▸ JSίʔυΛASCII_8BITʹΤϯίʔυ͠Deflateͯ͠ಥͬࠐΉ ▸
WidthʹΓͳ͍෦θϩ٧Ί͢Δ ԕ౻ ါհ͞Μͷʮ RubyͰPNGը૾ΛࣗྗͰੜ͢ΔʯΛࢀߟʹͨ͠ http://d.hatena.ne.jp/ku-ma-me/20091003/p1
JSΛWEBPʹมͯ͠Έͨ ~JS =>PNG => WEBPม (5/5)~ PNGΛੜ => LOSSLESS WEBPʹѹॖ
▸ ੜ͞Εͨ PNGͷҰ෦ (ԣʹ͍ͷͰ) ▸ grayscale Ͱԣͷը૾ʹͳΔ angular ͷϥΠϒϥϦΛPNGʹมͨ݁͠Ռ
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ~WebP => PNG => JS ม (1/1)~ WebP =>
PNG => JS ม ▸ WebP => PNG ʹม (dwebp ίϚϯυ) ▸ PNG ΛImageMagickΛͬͯpixel୯ҐͰಡΈࠐΉ ▸ pixelใΛՃͯ͠JSίʔυΛੜ grayscaleʹม͍ͯ͠ΔͷͰɺ3จࣈͣͭಉ͡จࣈ͕ೖΔ
JSΛWEBPʹมͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG =>
WebPม ▸ WebP => PNG => JSม ▸ ݁Ռ
JSΛWEBPʹมͯ͠Έͨ ݁Ռ ▸ angularͷίʔυͰݕূ ▸ WebP => JSʹม͞Εͨίʔυແ͘ಈ࡞ ▸ ྖҬઅ
= 1 - (ѹॖޙͷσʔλαΠζ / ѹॖલͷσʔλαΠζ ) ▸ WebPͷํ͕গ͔͠Γѹॖޮ͕ྑ͍ original gzip (Apple gzip 251) png WebP gzip (zopfli) αΠζ 169513 58671 58811 55866 56656 ྖҬઅ (খୈೋҐΓ্͛) 0% 65.4% 65.3% 67% 66.6% ୯Ґ (Bytes)
JSΛWEBPʹมͯ͠Έͨ ݁Ռ ( ؾʹͳͬͨͷͰՃௐࠪ ) ▸ RailsͷlogͰ֬ೝ ▸ JSΑΓWebPʹมͨ͠ࡍͷѹॖޮ͕ྑ͍ ▸
σʔλʹΑͬͯѹॖޮʹ͕ࠩ͋Δ ▸ zopfliΑΓѹॖ͍࣌ؒ (JS=>WebPม20ඵ͘Β͍. zopfli10Ҏ্ֻ͔ͬͨ) original gzip (Apple gzip 251) png WebP gzip (zopfli) αΠζ 113 M 10 M 8.8 M 3.7 M 9.5M ྖҬઅ (খୈೋҐΓ্͛) 0% 91.2% 92.1% 96.3% 91.4% ୯Ґ (MBytes)
JSΛWEBPʹมͯ͠Έͨ ·ͱΊ ▸ JSͷίʔυΛWebPʹมͰ͖ͨ ▸ GzipͰѹॖ͢ΔΑΓগ͚ͩ͠খ͘͞ͳͬͨ ▸ ͷʹΑͬͯ Zopfliͷ 1/3
͘Β͍ʹͳͬͨ ▸ ར༻γʔϯಛʹແ͍
JSΛWEBPʹมͯ͠Έͨ ࠓޙͷల ▸ 8bit, 24bitͰදݱͰ͖ΔͷΛWebPʹมͰ͖Δ ࣗ৴͕͍ͭͨ ▸ ԻΛWebP, ·ͨJSΛԻʹมͯ͠ΈͨΒָͦ͠͏ ▸
AlexaʹԻָฉ͔ͤͨΒJSͷίʔυΛ࣮ߦ͢Δͱָ͔ͦ͠͏ ▸ ϊΠζͲ͏͠Α͏ͱ͔͋Δ͚ΕͲ ୯Ґ (MBytes)