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)