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
0
410
2018_03_speeekaigi
morioka shuhei
March 30, 2018
Tweet
Share
More Decks by morioka shuhei
See All by morioka shuhei
LangChain Meetup Tokyo UPCYCLEにおけるLangChain 活用事例
selmertsx
1
850
20191103_小山高専_卒業生講話
selmertsx
0
250
20190306_serverless_meetup_tokyo_11
selmertsx
5
1.7k
aws_reinvent_recap
selmertsx
2
350
aws_reinvent_recap_chaos_engineering_to_serverless
selmertsx
1
1.3k
sam_on_aws_2018_startup_days
selmertsx
0
380
20171019_aws_startup_tech
selmertsx
1
6.9k
rails_rdm_revieee
selmertsx
0
1.3k
2017_jaws_ug_night_shuhei
selmertsx
3
4.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Experiences People Love
moore
142
24k
Speed Design
sergeychernyshev
32
1.1k
It's Worth the Effort
3n
187
28k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Site-Speed That Sticks
csswizardry
10
780
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Docker and Python
trallard
45
3.5k
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)