Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2
Tatsuhiko Kubo
September 25, 2018
Technology
4
15k
実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2
Tatsuhiko Kubo
September 25, 2018
Tweet
Share
More Decks by Tatsuhiko Kubo
See All by Tatsuhiko Kubo
cubicdaiya
2
350
cubicdaiya
0
300
cubicdaiya
4
2.6k
cubicdaiya
0
170
cubicdaiya
0
1.9k
cubicdaiya
5
2.4k
cubicdaiya
11
10k
cubicdaiya
8
5.3k
cubicdaiya
12
4.4k
Other Decks in Technology
See All in Technology
kanaugust
PRO
0
130
tenjuu99
1
200
binarymist
0
1.3k
norioikedo
0
250
gamella
3
1.5k
robcrowley
0
150
legalforce
PRO
1
100
ch1aki
2
210
yoku0825
PRO
3
120
pakio
0
130
twada
PRO
6
2k
karamem0
1
750
Featured
See All Featured
nonsquared
81
3.4k
sstephenson
145
12k
imathis
479
150k
searls
204
36k
3n
163
22k
rmw
11
810
philhawksworth
190
17k
orderedlist
PRO
328
36k
afnizarnur
176
14k
erikaheidi
14
4.3k
destraynor
222
47k
bryan
31
3.4k
Transcript
Tatsuhiko Kubo@cubicdaiya ImageFlux meetup #2 2018/09/25 ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
@cubicdaiya / Tatsuhiko Kubo Principal Engineer, SRE @ Mercari, Inc.
imageflux-cli • ImageFluxͷAPIΫϥΠΞϯτ • github.com/mercari/imageflux-cli • $ imageflux-cli Usage: imageflux-cli
cache.lookup -k $url # lookup cache by key imageflux-cli cache.delete -k $url # delete cache by key imageflux-cli signature -s $secret -p $path # calculate signature of signed url
None
ϝϧΧϦʹ͍ͭͯ • ຊ࠷େͷϑϦϚΞϓϦ • 3Ͱ؆୯ʹग़ • 1) ࣸਅΛࡱΔ • 2)
ใΛهೖ • 3) ग़ϘλϯΛԡ͢ • ҆৺҆શͳܾࡁɾऔҾ • ΤεΫϩʔ • ಗ໊ૹ
ྦྷܭग़ͷਪҠ
ϝϧΧϦʹ͓͚Δը૾৴ • ϝϧΧϦͷσʔλ௨৴ྔͷେ෦ΛΊΔͷը૾ • ը૾ • ϓϩϑΟʔϧը૾ • όφʔը૾ •
etc…
ϝϧΧϦʹ͓͚Δը૾৴ • ը૾ͷྔ͕ͱʹ͔͘ଟ͍ • ຖը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ • ଟ͘ͷػೳ໘Ͱը૾͕ओͳͷͰը૾σʔλͷ৴ྔ͕ͱͯଟ͍ • λΠϜϥΠϯɺݕࡧɺৄࡉ •
͍͍ͶʂҰཡɺӾཡཤྺ • etc…
ϝϧΧϦʹ͓͚Δը૾৴ • CDN • Akamai • ImageFlux • Fastly •
Origin • Amazon S3 ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific
ImageFlux࠾༻ͷഎܠ • ʑ૿͑ଓ͚ΔCDNͷը૾৴σʔλྔ • ৴ίετͷ૿Ճ • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ • ΞϓϦͷಈ࡞UXʹӨڹ •
UIσβΠϯมߋʹ͏࠷దͳը૾αΠζͷมԽ • σʔλ͕ଟ͍ͷͰෳύλʔϯͷը૾Λࣄલʹ४උ͢Δͷࠔ
ΞϓϦ͕շదʹ͑ΔΑ͏ʹͳΔͨΊʹ • σʔλͷ௨৴ྔΛ͑Δ͕ඞཁ • ͳωοτϫʔΫͰετϨεͳ͘ಈ࡞ • ߴͳಈ࡞͕ඞཁෆՄܽ • ͲΜͳʹૉΒ͍͠UIͰಈ࡞͕ա͗ΔͷUXͱͯͩ͠Ί
ImageFluxͷ࠾༻ͰظͰ͖Δ͜ͱ • ը૾ͷಈతͳϦαΠζɺ࠷దԽʹΑΔ • ৴σʔλྔͷݮ • ΞϓϦͷσʔλ௨৴ྔͷݮ • UIσβΠϯʹ͋ͬͨ࠷దͳը૾αΠζͷ࠾༻
ImageFluxʹΑΔը૾࠷దԽ • ϝϧΧϦͰ৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม • ΦϦδϯ্ʹΦϒδΣΫτۃྗ૿͞ͳ͍ • ύϑΥʔϚϯεతͳ •
ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷมॲཧʹ͔͔ΔΦʔόʔϔου • ίετతͳ • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε
εϚʔτϑΥϯΞϓϦͰWebPը૾Λ৴͢Δ • iOS • ΞϓϦଆͰରԠ͕ඞཁ • WebviewෆՄ • Android •
OSωΠςΟϒͰରԠʢ4.0+ʣ • WebviewՄ
࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
UIͷมԽʹରԠʢ2ྻλΠϜϥΠϯ -> 3ྻλΠϜϥΠϯʣ
2ྻλΠϜϥΠϯ͔Β3ྻλΠϜϥΠϯ • ظؒͷA/Bςετͷʹସ • ҰʹදࣔͰ͖Δը૾ͷ͕૿͑Δ • CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ • ίετ͕(ry •
ΞϓϦͷ௨৴ྔ૿Ճ • ΪΨ͕ݮΔ
3ྻ༻ͷαΠζʹϦαΠζ & WebPԽ 296x296 15.1KB 240x240 7.2KB w=240,f=webp 2ྻ༻ 3ྻ༻
296x296 15.1KB 240x240 12.5KB w=240 2ྻ༻ 3ྻ༻
1αϜωΠϧ͋ͨΓͷαΠζݮޮՌ • ϦαΠζ • 10~20%ݮ • ϦαΠζ & WebPԽ •
40~50%ݮ • λΠϜϥΠϯݕࡧ݁ՌͰը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ
ϝϧΧϦετΞ
ϝϧΧϦετΞ ϝϧΧϦͷΞϓϦͰ ࠝแࡐͷΦϦδφϧάοζ ͕ߪೖͰ͖Δػೳ
ϝϧΧϦετΞͷը૾৴ • ը૾ͷࣗମগͳ͍ • े • λΠϜϥΠϯͷҰ෦ͳͷͰϦΫΤετ͕ଟ͍ • ը૾αΠζ͕େ͖͍ͱ௨৴ྔ͕ΕΔ
ϝϧΧϦετΞʢλΠϜϥΠϯʣ
ϝϧΧϦετΞʢλΠϜϥΠϯʣ ࣮1ը૾͋ͨΓ 140KB͋ͬͨ (720x720)
ϝϧΧϦετΞʢৄࡉʣ
ϝϧΧϦετΞʢৄࡉʣ ͜ΕݪੇେͰදࣔ
ϝϧΧϦετΞͷը૾৴ • λΠϜϥΠϯͱৄࡉը໘ͰٻΊΒΕΔը૾αΠζ͕ҧ͏ • ͰɺΦϦδϯʹαΠζຖͷΦϒδΣΫτͭ͘Βͳ͍ • λΠϜϥΠϯͷը૾͚ͩImageFluxͰϦαΠζ
720x720 140KB o=1 (JPEG࠷దԽ) ϝϧΧϦετΞͷը૾ 720x720 50KB
720x720 140KB o=1 (JPEG࠷దԽ) ϝϧΧϦετΞͷը૾ 720x720 50KB αΠζ65%ݮ
720x720 140KB w=360 ϝϧΧϦετΞͷը૾ 360x360 15KB
720x720 140KB w=360 ϝϧΧϦετΞͷը૾ 360x360 15KB αΠζ90%ݮ
720x720 140KB w=360,f=webp ϝϧΧϦετΞͷը૾ 360x360 8KB
720x720 140KB w=360,f=webp ϝϧΧϦετΞͷը૾ 360x360 8KB αΠζ94%ݮ
ImageFluxͰϦαΠζ & WebPม w=360 or w=360,f=webp
ImageFluxͰϦαΠζ & WebPม w=720,o=1 or w=720,f=webp
ը૾ͷը࣭ௐ Before After
ը૾ͷը࣭ௐ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾ͷը࣭վળ • ࠓͷ8݄ޙҎ߱ʹग़͞Εͨݪੇେը૾ͷ • ղ૾Λ720x720͔Β1080x1080ʹมߋ • ը࣭ύϥϝʔλΛௐ • ΑΓߴը࣭Ͱ໌ͳը૾ʹ
ը૾ͷը࣭վળ • ը૾ͷදࣔεϐʔυ͍ํ͕Α͍ͷͰը૾αΠζۃྗ͍͑ͨ • ͱ͍͑ɺݪੇେͷը૾ͬͱߴը࣭ʹ͍ͨ͠ • ͜ͷ̎ͭτϨʔυΦϑͳͷͰɺαΠζͱը࣭ͷόϥϯεΛ͏·͘ௐ͢ Δඞཁ͕͋Δ
ը૾ͷը࣭վળ • ϝϧΧϦͷը૾ग़࣌ʹΫϥΠΞϯταΠυͰϦαΠζɺը࣭ௐ ͕ߦΘΕΔ • ύϥϝʔλࣗମαʔόαΠυͰมߋՄೳ • ը૾ͷαΠζ৴͚࣌ͩͰͳ͘ɺग़࣌ͷUXʹେ͖͘Өڹ͢Δ • ग़࣌ͷUXͷӨڹΛௐࠪ͢ΔͨΊʹA/BςετΛ࣮ࢪ্ͨ͠Ͱมߋ
ը૾ͷը࣭վળ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾Λ֦େ ͦͷ1 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾Λ֦େ ͦͷ2 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ҰํͰɺ • ղ૾Ξοϓ & ߴը࣭ԽʹΑΓը૾ͷαΠζવ૿͑Δ • ৴ίετ૿ • ग़࣌ͷը૾Ξοϓϩʔυɺݪੇେը૾ͷදࣔʹ͕͔͔࣌ؒΔ •
UXԼ
͜ΕΒͷΛΒ͛ΔͨΊʹɺ • ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐʢe.g. q=75ʣ • ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢ΕίϯτϩʔϧύωϧͰ ੍ޚ͢Δ͜ͱՄೳ • ৄࡉը໘Ͱͷը૾දࣔͷํΛ •
λΠϜϥΠϯ͔Βৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠ ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓiOS൛ͷΈʣ
·ͱΊ • ImageFluxͷಋೖʹΑΓΞϓϦͷσʔλ௨৴ྔݮͱUX্Λಉ࣌ʹ࣮ݱ • ը૾σʔλͷ௨৴ྔΛ30%Ҏ্ݮ • ΞϓϦͷUIσβΠϯͷมԽʹॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ • ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥ ΠͰը૾Λม
• εϚʔτϑΥϯΞϓϦ͕շదʹ͑ΔΑ͏ʹͳΔͨΊʹɺ • σʔλͷ௨৴ྔΛ͑Δ͕ॏཁ