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

5d74d743eabd2bf7d4d2f68b9d3c727d?s=47 Tatsuhiko Kubo
September 25, 2018

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

5d74d743eabd2bf7d4d2f68b9d3c727d?s=128

Tatsuhiko Kubo

September 25, 2018
Tweet

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΍σβΠϯͷมԽʹ΋ॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ • ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λ഑ஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥ ΠͰը૾Λม׵

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