2018_03_speeekaigi

Transcript

1. 120%ڵຯຊҐͰ։ൃͯ͠Έͨ
 ~ JSΛWebPʹม׵͢Δ ~ ։ൃج൫ˍψϦΧΤ
 ৿Ԭपฏ
2. JSΛWEBPʹม׵ͯ͠Έͨ ࣗݾ঺հ ▸ ໊લ: ৿Ԭपฏ ▸ ॴଐ෦ॺ: ։ൃج൫ & ψϦΧΤ ▸ GitHub Account: @selmertsx ▸ ओۀ຿: RailsͰͷΞϓϦέʔγϣϯ։ൃ ▸ ࠷ۙͷڵຯ: ϑϩϯτϛογϣϯ/ ΞʔϚʔυίΞͷൃച೔
3. JSΛWEBPʹม׵ͯ͠Έͨ ࠓ೔͢Δ͓࿩͠ͷ֓ཁ ▸ JavaScriptͷίʔυΛWebPʹม׵ ͯ͠Έͨ ▸ WebPʹม׵͞ΕͨJSͷίʔυ͸ݩ ͷJSʹ໭ͤΔ͜ͱ͕֬ೝͰ͖ͨ ▸ JS͔ΒWebPʹม׵ͨ݁͠Ռ
 gzipΑΓ΋ѹॖ཰͕ྑ͔ͬͨ ▸ ಛʹԿͷ՝୊΋ղܾ͍ͯ͠·ͤΜ ▸ ׬શʹڵຯຊҐͰ΍ͬͯΈ·ͨ͠ WebPʹม׵ JSʹม׵ ݕূʹ࢖ͬͨίʔυ: https://github.com/selmertsx/png_to_js
4. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
5. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
6. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (1/4)~ ΍ͬͯΈΑ͏ͱࢥͬͨഎܠ ▸ 2017೥຤ ը૾ѹॖπʔϧͷબఆΛ͍ͯͨ͠ ▸ PNGը૾ͷѹॖͷͨΊʹ ZopfliͱWebPΛௐࠪ ▸ Zopfli͸JS/CSS/PNGѹॖʹ࢖ΘΕΔπʔϧ ▸ gzipΑΓѹॖʹֻ͕͔࣌ؒΔ(10ഒҎ্)͕ ѹॖ཰͕ߴ͘
 gzipͱಉ͡ํ๏Ͱղౚ͕Մೳͱ͍͏ಛ௃Λ࣋ͭ ▸ ಈతίϯςϯπ͸gzip, ੩తίϯςϯπ͸ zopfliͱ͍͏ࣄྫ΋͋Δ
 https://developers.cyberagent.co.jp/blog/archives/5975/
7. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (2/4)~ WebPʹ͍ͭͯ ▸ ը૾ѹॖϑΥʔϚοτͷ̍ͭ ▸ LossLessͰ΋ѹॖ཰͕ߴ͍
 ӈͷը૾Λѹॖ͢Δͱ
 original (359637 byte)
 Zopfli (333423 byte)
 LossLess WebP (261420 byte) ▸ ΄΅ChromeͷΈར༻Մೳ
 https://caniuse.com/ #search=WebP ʮ͍Β͢ͱ΍ʯΑΓҾ༻
8. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (3/4)~ ը૾ѹॖπʔϧͷબఆ͔ΒֶΜͩ͜ͱ ▸ PNGͷσʔλϑΥʔϚοτ ▸ JSͱPNG͸ಉ͡πʔϧͰѹॖͰ͖Δ ▸ WebP͸LossLessͰ΋ߴ͍ѹॖ཰Λ͍࣋ͬͯΔ
 ▸ JSΛPNGʹม׵͢Δ͜ͱ͕Ͱ͖ΔΜ͡Όͳ͍͔ʁ
 (PNGͷσʔλϑΥʔϚοτ͔Β) ▸ ಉ͡πʔϧͰѹॖͰ͖ΔͳΒɺWebPʹม׵͢Δ͜ͱͰ ϑΝΠϧαΠζ͕અ໿Ͱ͖ΔͷͰ͸ͳ͍͔ʁ ؾʹͳͬͨ͜ͱ
9. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (4/4)~ খ͘͞ͳͬͨͱͯ͠Կ͔ϝϦοτ͋Δͷʁ ▸ 多分あんまりメリットはない ▸ JSͷϑΝΠϧαΠζΛখͨ͘͞͠ͱ͜ΖͰɺWebαʔϏ ε͔ΒDL͢ΔϦιʔεͷ૯ྔ͔Β͢ΔͱӨڹ͸ݶఆత ▸ Α͠Μ͹͔ͳΓখ͘͞ͳͬͨͱͯ͠ɺWebPΛJSͱͯ͠ղ ऍ͢ΔॲཧͰCPUϦιʔεΛແବʹ৯͏ͩΖ͏
 (ϑΝΠϧαΠζ͕େ͖͚Ε͹େ͖͍΄Ͳ) ▸ それでも気になる！
10. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
11. 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ʹม׵ͨ͠ࣄྫ͸ݟ͔ͭΒͳ͔ͬͨ
12. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
13. 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ʹม׵͢Δ
14. 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ͷऴྃΛࣔ͢σʔλ
15. 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͸
 σϑΥϧτͷ··
16. 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
17. JSΛWEBPʹม׵ͯ͠Έͨ ~JS =>PNG => WEBPม׵ (5/5)~ PNGΛੜ੒ => LOSSLESS WEBPʹѹॖ ▸ ੜ੒͞Εͨ PNGͷҰ෦ (ԣʹ௕͍ͷͰ) ▸ grayscale Ͱԣ௕ͷը૾ʹͳΔ angular ͷϥΠϒϥϦΛPNGʹม׵ͨ݁͠Ռ
18. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
19. JSΛWEBPʹม׵ͯ͠Έͨ ~WebP => PNG => JS ม׵ (1/1)~ WebP => PNG => JS ม׵ ▸ WebP => PNG ʹม׵ (dwebp ίϚϯυ) ▸ PNG ΛImageMagickΛ࢖ͬͯpixel୯ҐͰಡΈࠐΉ ▸ pixel৘ใΛՃ޻ͯ͠JSίʔυΛੜ੒ grayscaleʹม׵͍ͯ͠ΔͷͰɺ3จࣈͣͭಉ͡จࣈ͕ೖΔ
20. JSΛWEBPʹม׵ͯ͠Έͨ ΞδΣϯμ ▸ എܠ ▸ ઌߦࣄྫ ▸ JS =>PNG => WebPม׵ ▸ WebP => PNG => JSม׵ ▸ ݁Ռ
21. 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)
22. JSΛWEBPʹม׵ͯ͠Έͨ ݁Ռ ( ؾʹͳͬͨͷͰ௥Ճௐࠪ ) ▸ RailsͷlogͰ֬ೝ ▸ JSΑΓ΋WebPʹม׵ͨ͠ࡍͷѹॖޮ཰͕ྑ͍ ▸ σʔλʹΑͬͯѹॖޮ཰ʹ͕ࠩ͋Δ ▸ zopfliΑΓ΋ѹॖ࣌ؒ͸୹͍ 
 (JS=>WebPม׵͸20ඵ͘Β͍. zopfli͸10෼Ҏ্ֻ͔ͬͨ) 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)
23. JSΛWEBPʹม׵ͯ͠Έͨ ·ͱΊ ▸ JSͷίʔυΛWebPʹม׵Ͱ͖ͨ ▸ GzipͰѹॖ͢ΔΑΓ͸গ͚ͩ͠খ͘͞ͳͬͨ ▸ ΋ͷʹΑͬͯ͸ Zopfliͷ 1/3 ͘Β͍ʹͳͬͨ ▸ ར༻γʔϯ͸ಛʹແ͍
24. JSΛWEBPʹม׵ͯ͠Έͨ ࠓޙͷల๬ ▸ 8bit, 24bitͰදݱͰ͖Δ΋ͷΛWebPʹม׵Ͱ͖Δ
 ࣗ৴͕͍ͭͨ ▸ ԻΛWebP, ·ͨ͸JSΛԻʹม׵ͯ͠ΈͨΒָͦ͠͏ ▸ AlexaʹԻָฉ͔ͤͨΒJSͷίʔυΛ࣮ߦ͢Δͱָ͔ͦ͠͏ ▸ ϊΠζͲ͏͠Α͏ͱ͔͋Δ͚ΕͲ΋ ୯Ґ (MBytes)