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
300
20171019_aws_startup_tech
selmertsx
1
6.8k
rails_rdm_revieee
selmertsx
0
1.2k
2017_jaws_ug_night_shuhei
selmertsx
3
4.4k
revieee
selmertsx
0
350
Featured
See All Featured
Optimizing for Happiness
mojombo
376
69k
GraphQLの誤解/rethinking-graphql
sonatard
66
10k
KATA
mclloyd
29
13k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Fireside Chat
paigeccino
32
3k
Automating Front-end Workflow
addyosmani
1365
200k
RailsConf 2023
tenderlove
29
880
A designer walks into a library…
pauljervisheath
202
24k
Gamification - CAS2011
davidbonilla
80
5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Statistics for Hackers
jakevdp
796
220k
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)