Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2018_03_speeekaigi

morioka shuhei
March 30, 2018
370

 2018_03_speeekaigi

morioka shuhei

March 30, 2018
Tweet

Transcript

  1. JSΛWEBPʹม׵ͯ͠Έͨ ࣗݾ঺հ ▸ ໊લ: ৿Ԭपฏ ▸ ॴଐ෦ॺ: ։ൃج൫ & ψϦΧΤ

    ▸ GitHub Account: @selmertsx ▸ ओۀ຿: RailsͰͷΞϓϦέʔγϣϯ։ൃ ▸ ࠷ۙͷڵຯ: ϑϩϯτϛογϣϯ/ ΞʔϚʔυίΞͷൃച೔
  2. JSΛWEBPʹม׵ͯ͠Έͨ ࠓ೔͢Δ͓࿩͠ͷ֓ཁ ▸ JavaScriptͷίʔυΛWebPʹม׵ ͯ͠Έͨ ▸ WebPʹม׵͞ΕͨJSͷίʔυ͸ݩ ͷJSʹ໭ͤΔ͜ͱ͕֬ೝͰ͖ͨ ▸ JS͔ΒWebPʹม׵ͨ݁͠Ռ


    gzipΑΓ΋ѹॖ཰͕ྑ͔ͬͨ ▸ ಛʹԿͷ՝୊΋ղܾ͍ͯ͠·ͤΜ ▸ ׬શʹڵຯຊҐͰ΍ͬͯΈ·ͨ͠ WebPʹม׵ JSʹม׵ ݕূʹ࢖ͬͨίʔυ: https://github.com/selmertsx/png_to_js
  3. 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/
  4. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (2/4)~ WebPʹ͍ͭͯ ▸ ը૾ѹॖϑΥʔϚοτͷ̍ͭ ▸ LossLessͰ΋ѹॖ཰͕ߴ͍
 ӈͷը૾Λѹॖ͢Δͱ
 original

    (359637 byte)
 Zopfli (333423 byte)
 LossLess WebP (261420 byte) ▸ ΄΅ChromeͷΈར༻Մೳ
 https://caniuse.com/ #search=WebP ʮ͍Β͢ͱ΍ʯΑΓҾ༻
  5. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (3/4)~ ը૾ѹॖπʔϧͷબఆ͔ΒֶΜͩ͜ͱ ▸ PNGͷσʔλϑΥʔϚοτ ▸ JSͱPNG͸ಉ͡πʔϧͰѹॖͰ͖Δ ▸ WebP͸LossLessͰ΋ߴ͍ѹॖ཰Λ͍࣋ͬͯΔ


    ▸ JSΛPNGʹม׵͢Δ͜ͱ͕Ͱ͖ΔΜ͡Όͳ͍͔ʁ
 (PNGͷσʔλϑΥʔϚοτ͔Β) ▸ ಉ͡πʔϧͰѹॖͰ͖ΔͳΒɺWebPʹม׵͢Δ͜ͱͰ ϑΝΠϧαΠζ͕અ໿Ͱ͖ΔͷͰ͸ͳ͍͔ʁ ؾʹͳͬͨ͜ͱ
  6. JSΛWEBPʹม׵ͯ͠Έͨ ~എܠ (4/4)~ খ͘͞ͳͬͨͱͯ͠Կ͔ϝϦοτ͋Δͷʁ ▸ 多分あんまりメリットはない ▸ JSͷϑΝΠϧαΠζΛখͨ͘͞͠ͱ͜ΖͰɺWebαʔϏ ε͔ΒDL͢ΔϦιʔεͷ૯ྔ͔Β͢ΔͱӨڹ͸ݶఆత ▸

    Α͠Μ͹͔ͳΓখ͘͞ͳͬͨͱͯ͠ɺWebPΛJSͱͯ͠ղ ऍ͢ΔॲཧͰCPUϦιʔεΛແବʹ৯͏ͩΖ͏
 (ϑΝΠϧαΠζ͕େ͖͚Ε͹େ͖͍΄Ͳ) ▸ それでも気になる!
  7. 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ʹม׵ͨ͠ࣄྫ͸ݟ͔ͭΒͳ͔ͬͨ
  8. 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ʹม׵͢Δ
  9. 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ͷऴྃΛࣔ͢σʔλ
  10. 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͸
 σϑΥϧτͷ··
  11. 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
  12. JSΛWEBPʹม׵ͯ͠Έͨ ~JS =>PNG => WEBPม׵ (5/5)~ PNGΛੜ੒ => LOSSLESS WEBPʹѹॖ

    ▸ ੜ੒͞Εͨ PNGͷҰ෦ (ԣʹ௕͍ͷͰ) ▸ grayscale Ͱԣ௕ͷը૾ʹͳΔ angular ͷϥΠϒϥϦΛPNGʹม׵ͨ݁͠Ռ
  13. JSΛWEBPʹม׵ͯ͠Έͨ ~WebP => PNG => JS ม׵ (1/1)~ WebP =>

    PNG => JS ม׵ ▸ WebP => PNG ʹม׵ (dwebp ίϚϯυ) ▸ PNG ΛImageMagickΛ࢖ͬͯpixel୯ҐͰಡΈࠐΉ ▸ pixel৘ใΛՃ޻ͯ͠JSίʔυΛੜ੒ grayscaleʹม׵͍ͯ͠ΔͷͰɺ3จࣈͣͭಉ͡จࣈ͕ೖΔ
  14. 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)
  15. 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)
  16. JSΛWEBPʹม׵ͯ͠Έͨ ࠓޙͷల๬ ▸ 8bit, 24bitͰදݱͰ͖Δ΋ͷΛWebPʹม׵Ͱ͖Δ
 ࣗ৴͕͍ͭͨ ▸ ԻΛWebP, ·ͨ͸JSΛԻʹม׵ͯ͠ΈͨΒָͦ͠͏ ▸

    AlexaʹԻָฉ͔ͤͨΒJSͷίʔυΛ࣮ߦ͢Δͱָ͔ͦ͠͏ ▸ ϊΠζͲ͏͠Α͏ͱ͔͋Δ͚ΕͲ΋ ୯Ґ (MBytes)