実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2

Transcript

1. Tatsuhiko Kubo@cubicdaiya ImageFlux meetup #2 2018/09/25 ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux

2. @cubicdaiya / Tatsuhiko Kubo Principal Engineer, SRE @ Mercari, Inc.

3. 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
4. None

5. ϝϧΧϦʹ͍ͭͯ • ೔ຊ࠷େͷϑϦϚΞϓϦ • 3෼Ͱ؆୯ʹग़඼ • 1) ࣸਅΛࡱΔ • 2)

   ঎඼৘ใΛهೖ • 3) ग़඼ϘλϯΛԡ͢ • ҆৺҆શͳܾࡁɾऔҾ • ΤεΫϩʔ • ಗ໊഑ૹ

6. ྦྷܭग़඼਺ͷਪҠ

7. ϝϧΧϦʹ͓͚Δը૾഑৴ • ϝϧΧϦͷσʔλ௨৴ྔͷେ෦෼Λ઎ΊΔͷ͸ը૾ • ঎඼ը૾ • ϓϩϑΟʔϧը૾ • όφʔը૾ •

   etc…

8. ϝϧΧϦʹ͓͚Δը૾഑৴ • ը૾ͷྔ͕ͱʹ͔͘ଟ͍ • ຖ೔ը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ • ଟ͘ͷػೳ໘Ͱը૾͕ओ໾ͳͷͰը૾σʔλͷ഑৴ྔ͕ͱͯ΋ଟ͍ • λΠϜϥΠϯɺݕࡧɺ঎඼ৄࡉ •

   ͍͍ͶʂҰཡɺӾཡཤྺ • etc…

9. ϝϧΧϦʹ͓͚Δը૾഑৴ • 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

10. ImageFlux࠾༻ͷഎܠ • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ • ഑৴ίετͷ૿Ճ • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ •

    UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢Δͷ͸ࠔ೉

11. ΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ඞཁ • ௿଎ͳωοτϫʔΫͰ΋ετϨεͳ͘ಈ࡞ • ߴ଎ͳಈ࡞͕ඞཁෆՄܽ • ͲΜͳʹૉ੖Β͍͠UIͰ΋ಈ࡞͕஗ա͗Δͷ͸UXͱͯͩ͠Ί

12. ImageFluxͷ࠾༻Ͱظ଴Ͱ͖Δ͜ͱ • ը૾ͷಈతͳϦαΠζɺ࠷దԽʹΑΔ • ഑৴σʔλྔͷ࡟ݮ • ΞϓϦͷσʔλ௨৴ྔͷ࡟ݮ • UI΍σβΠϯʹ͋ͬͨ࠷దͳը૾αΠζͷ࠾༻

13. ImageFluxʹΑΔը૾࠷దԽ • ϝϧΧϦͰ഑৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม׵ • ΦϦδϯ্ʹΦϒδΣΫτ͸ۃྗ૿΍͞ͳ͍ • ύϑΥʔϚϯεతͳ࿩ •

    ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷม׵ॲཧʹ͔͔ΔΦʔόʔϔου • ίετతͳ࿩ • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε

14. εϚʔτϑΥϯΞϓϦͰWebPը૾Λ഑৴͢Δ • iOS • ΞϓϦଆͰରԠ͕ඞཁ • Webview͸ෆՄ • Android •

    OSωΠςΟϒͰରԠʢ4.0+ʣ • Webview΋Մ

15. ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux

16. UIͷมԽʹରԠʢ2ྻλΠϜϥΠϯ -> 3ྻλΠϜϥΠϯʣ

17. 2ྻλΠϜϥΠϯ͔Β3ྻλΠϜϥΠϯ΁ • ௕ظؒͷA/Bςετͷ຤ʹ੾ସ • Ұ౓ʹදࣔͰ͖Δը૾ͷ਺͕૿͑Δ • CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ • ίετ͕(ry •

    ΞϓϦͷ௨৴ྔ΋૿Ճ • ΪΨ͕ݮΔ

18. 3ྻ༻ͷαΠζʹϦαΠζ & WebPԽ 296x296 15.1KB 240x240 7.2KB w=240,f=webp 2ྻ༻ 3ྻ༻

    296x296 15.1KB 240x240 12.5KB w=240 2ྻ༻ 3ྻ༻

19. 1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ • ϦαΠζ • 10~20%ݮ • ϦαΠζ & WebPԽ •

    40~50%ݮ • λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸঎඼ը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ

20. ϝϧΧϦετΞ

21. ϝϧΧϦετΞ ϝϧΧϦͷΞϓϦ಺Ͱ ࠝแࡐ౳ͷΦϦδφϧάοζ ͕ߪೖͰ͖Δػೳ

22. ϝϧΧϦετΞͷ঎඼ը૾഑৴ • ঎඼ը૾ͷ਺ࣗମ͸গͳ͍ • े਺඼໨ • λΠϜϥΠϯͷҰ෦ͳͷͰϦΫΤετ਺͕ଟ͍ • ը૾αΠζ͕େ͖͍ͱ௨৴ྔ͕๲ΕΔ

23. ϝϧΧϦετΞʢλΠϜϥΠϯʣ

24. ϝϧΧϦετΞʢλΠϜϥΠϯʣ ࣮͸1ը૾͋ͨΓ 140KB͋ͬͨ (720x720)

25. ϝϧΧϦετΞʢ঎඼ৄࡉʣ

26. ϝϧΧϦετΞʢ঎඼ৄࡉʣ ͜Ε͸ݪੇେͰදࣔ

27. ϝϧΧϦετΞͷ঎඼ը૾഑৴ • λΠϜϥΠϯͱৄࡉը໘Ͱ͸ٻΊΒΕΔը૾αΠζ͕ҧ͏ • Ͱ΋ɺΦϦδϯʹαΠζຖͷΦϒδΣΫτ͸ͭ͘Βͳ͍ • λΠϜϥΠϯͷը૾͚ͩImageFluxͰϦαΠζ

28. 720x720 140KB o=1
 (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB

29. 720x720 140KB o=1
 (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB αΠζ65%ݮ

30. 720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB

31. 720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB αΠζ90%ݮ

32. 720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB

33. 720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB αΠζ94%ݮ

34. ImageFluxͰϦαΠζ & WebPม׵ w=360 or w=360,f=webp

35. ImageFluxͰϦαΠζ & WebPม׵ w=720,o=1 or w=720,f=webp

36. ঎඼ը૾ͷը࣭ௐ੔ Before After

37. ঎඼ը૾ͷը࣭ௐ੔ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

38. ঎඼ը૾ͷը࣭վળ • ࠓ೥ͷ8݄ޙ൒Ҏ߱ʹग़඼͞Εͨݪੇେ঎඼ը૾ͷ • ղ૾౓Λ720x720͔Β1080x1080ʹมߋ • ը࣭ύϥϝʔλΛௐ੔ • ΑΓߴը࣭Ͱ઱໌ͳը૾ʹ

39. ঎඼ը૾ͷը࣭վળ • ը૾ͷදࣔεϐʔυ͸଎͍ํ͕Α͍ͷͰը૾αΠζ͸ۃྗ཈͍͑ͨ • ͱ͸͍͑ɺݪੇେͷ঎඼ը૾͸΋ͬͱߴը࣭ʹ͍ͨ͠ • ͜ͷ̎ͭ͸τϨʔυΦϑͳͷͰɺαΠζͱը࣭ͷόϥϯεΛ͏·͘ௐ੔͢ Δඞཁ͕͋Δ

40. ঎඼ը૾ͷը࣭վળ • ϝϧΧϦͷ঎඼ը૾͸ग़඼࣌ʹΫϥΠΞϯταΠυͰϦαΠζɺը࣭ௐ੔ ͕ߦΘΕΔ • ύϥϝʔλࣗମ͸αʔόαΠυͰมߋՄೳ • ը૾ͷαΠζ͸഑৴͚࣌ͩͰͳ͘ɺग़඼࣌ͷUXʹ΋େ͖͘Өڹ͢Δ • ग़඼࣌ͷUX΁ͷӨڹΛௐࠪ͢ΔͨΊʹA/BςετΛ࣮ࢪ্ͨ͠Ͱมߋ

41. ঎඼ը૾ͷը࣭վળ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

42. ը૾Λ֦େ ͦͷ1 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

43. ը૾Λ֦େ ͦͷ2 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

44. ҰํͰɺ • ղ૾౓Ξοϓ & ߴը࣭ԽʹΑΓը૾ͷαΠζ͸౰વ૿͑Δ • ഑৴ίετ૿ • ग़඼࣌ͷը૾Ξοϓϩʔυɺݪੇେը૾ͷදࣔʹ͕͔͔࣌ؒΔ •

    UX௿Լ

45. ͜ΕΒͷ໰୊Λ࿨Β͛ΔͨΊʹɺ • ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐ੔ʢe.g. q=75ʣ • ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢Ε͹ίϯτϩʔϧύωϧͰ ੍ޚ͢Δ͜ͱ΋Մೳ • ঎඼ৄࡉը໘Ͱͷը૾දࣔͷ࢓ํΛ޻෉ •

    λΠϜϥΠϯ͔Β঎඼ৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠ ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓ͸iOS൛ͷΈʣ

46. ·ͱΊ • ImageFluxͷಋೖʹΑΓΞϓϦͷσʔλ௨৴ྔ࡟ݮͱUX޲্Λಉ࣌ʹ࣮ݱ • ը૾σʔλͷ௨৴ྔΛ30%Ҏ্࡟ݮ • ΞϓϦͷUI΍σβΠϯͷมԽʹ΋ॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ • ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λ഑ஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥ ΠͰը૾Λม׵

    • εϚʔτϑΥϯΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ɺ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ॏཁ