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

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

4. View Slide

5. ϝϧΧϦʹ͍ͭͯ
   • ೔ຊ࠷େͷϑϦϚΞϓϦ
   
   • 3෼Ͱ؆୯ʹग़඼
   
   • 1) ࣸਅΛࡱΔ
   
   • 2) ঎඼৘ใΛهೖ
   
   • 3) ग़඼ϘλϯΛԡ͢
   
   • ҆৺҆શͳܾࡁɾऔҾ
   
   • ΤεΫϩʔ
   
   • ಗ໊഑ૹ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

10. ImageFlux࠾༻ͷഎܠ
    • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ
    
    • ഑৴ίετͷ૿Ճ
    
    • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ
    
    • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ
    
    • UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ
    
    • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢Δͷ͸ࠔ೉
    

    View Slide

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

    View Slide

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

    View Slide

13. ImageFluxʹΑΔը૾࠷దԽ
    • ϝϧΧϦͰ഑৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม׵
    
    • ΦϦδϯ্ʹΦϒδΣΫτ͸ۃྗ૿΍͞ͳ͍
    
    • ύϑΥʔϚϯεతͳ࿩
    
    • ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷม׵ॲཧʹ͔͔ΔΦʔόʔϔου
    
    • ίετతͳ࿩
    
    • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε
    

    View Slide

14. εϚʔτϑΥϯΞϓϦͰWebPը૾Λ഑৴͢Δ
    • iOS
    
    • ΞϓϦଆͰରԠ͕ඞཁ
    
    • Webview͸ෆՄ
    
    • Android
    
    • OSωΠςΟϒͰରԠʢ4.0+ʣ
    
    • Webview΋Մ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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ྻ༻
    

    View Slide

19. 1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ
    • ϦαΠζ
    
    • 10~20%ݮ
    
    • ϦαΠζ & WebPԽ
    
    • 40~50%ݮ
    
    • λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸঎඼ը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ
    

    View Slide

20. ϝϧΧϦετΞ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. 720x720 140KB
    o=1

    (JPEG࠷దԽ)
    ϝϧΧϦετΞͷ঎඼ը૾
    720x720 50KB
    

    View Slide

29. 720x720 140KB
    o=1

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. ͜ΕΒͷ໰୊Λ࿨Β͛ΔͨΊʹɺ
    • ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐ੔ʢe.g. q=75ʣ
    
    • ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢Ε͹ίϯτϩʔϧύωϧͰ
    ੍ޚ͢Δ͜ͱ΋Մೳ
    
    • ঎඼ৄࡉը໘Ͱͷը૾දࣔͷ࢓ํΛ޻෉
    
    • λΠϜϥΠϯ͔Β঎඼ৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠
    ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓ͸iOS൛ͷΈʣ
    

    View Slide

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

    View Slide