Image optimization for mobile on CDN

potatotips #80 のLTで発表したもの。

CDN edgeで変換すると便利だけど、avifのご利用は慎重にという話をしたかったけど時間切れになってしまったやつ。

Transcript

1. Image optimization for mobile
   12/22 potatotips #80
   
   
   Taiki Komaba @r_plus
   on CDN
   

   View Slide

2. UBJLJLPNBCB
   

   !S@QMVT
   
   

   View Slide

3. webp࢖ͬͯ·͔͢ʁ
   

   View Slide

4. avif࢖ͬͯ·͔͢ʁ
   

   View Slide

5. FileSize
   JPEG
   WEBP
   AVIF
   0 70 140 210 280 ୯ҐKB
   

   View Slide

6. 14~
   
   
   (2020~)
   16~
   
   
   (2022~)
   4~※
   
   
   (2011~)
   12~
   
   
   (2021~)
   Can I use?
   4.xʹਖ਼͘͠දࣔ͞Εͳ͍όʔδϣϯ͕͋Δ
   

   View Slide

7. CoreWebVital - LCP
   • Largest Contentful PaintͷུɻWebͷSEOʹӨڹ
   
   
   • ͍͍ͩͨը૾͕Ұ൪େ͖͍ࣄ͕ଟ͍ͨΊɺը૾༰ྔ͕ݮΓද͕ࣔ଎͘ͳΕ
   ͹LCP͕ྑ͘ͳΔ
   
   
   • lossyѹॖͨ͠Γɺը૾ͷαΠζΛݮΒ͢ࣄ͕ॏཁͳཁૉͷ1ͭ
   
   
   • Mobileʹ͸ͦͷΑ͏ͳࢦඪ͸ಛʹແ͍͕…
   

   View Slide

8. Mobile appͰ΋Ϣʔβͷ௨৴ྔ͕ݮΓ
   
   
   ද͕ࣔ଎͍ͷ͸خ͍͠ͷͰ࢖͍͖͍ͬͯͨ
   (ฐࣾWebͰ͸طʹpictureλάΛར༻ͨ͠webp഑৴Λ࣮ࢪ͍ͯ͠Δ)
   

   View Slide

9. webͱൺֱͨ͠ࡍͷը૾දࣔ
   • Web
   
   
   • PictureλάͰͷࣗಈతͳରԠঢ়گຖͷϑΝΠϧͷग़͠෼͚
   
   
   • Τϥʔ࣌ͷonerror JSͰͷfallback
   
   
   • Mobile app
   
   
   • ݹ͍ΞϓϦ΋ߟ͑ΔͱදࣔͰ͖ͳ͍ϑΥʔϚοτΛ౉ͯ͠͠·ͬͨ৔߹ද
   ࣔ͞Εͳ͘ͳΔ
   
   
   • ࣄલͷม׵ʹࣦഊ͓ͯ͠ΓɺͦͷURLʹ͸ϑΝΠϧ͕ଘࡏ͠ͳ͍৔߹΋ಉ༷
   

   View Slide

10. Mobile΋ࢹ໺ʹೖΕΔͱ
    
    
    on-the-
    f
    lyม׵+cache͕ྑ͍
    ͋ͱࣄલม׵ͷίʔυͷϝϯς͔Βղ์͞ΕΔ
    

    View Slide

11. CDN we are using
    2018 2022 to use ImageOptimizer
    

    View Slide

12. CDN we are using
    (ImageOptimizer)
    • ը૾΁ͷϦΫΤετʹಛఆͷquerystringΛ෇༩͢Δͱ༷ʑͳ
    ม׵Λߦͬͯ͘ΕΔ
    
    
    • Autoύϥϝʔλ(auto=webp౳)ͰΫϥΠΞϯτͷAcceptϔο
    μʔΛݟͯը૾ܗࣜͷग़͠෼͚΋ߦ͑Δɻ
    

    View Slide

13. Fastly - VCL
    • AcceptϔομʔʹԠͨ͡
    AVIF→WEBP→ΦϦδφϧܗࣜͷ
    ༏ઌॱҐͰը૾ܗࣜΛબͿVCL
    ίʔυྫ
    
    
    • ͦͷଞɺ͔ͳΓࡉ੍͔͘ޚՄೳ
    Ref: https://developer.fastly.com/reference/io/auto/
    

    View Slide

14. 1ͭͷURLͰ
    
    
    ΫϥΠΞϯτʹԠͯ͡ը૾Λग़͠෼͚Δ
    

    View Slide

15. Accept/Vary header
    • 1ͭͷURLͰϦΫΤετ಺༰ʹԠͯ͡ෳ਺छͷϨεϙϯεΛฦ͢৔߹ʹԿ
    ʹج͍ͮͯCDN͕Ωϟογϡ࢓෼͚Δͷ͔Λॿ͚ΔHTTP Response
    Header
    
    
    • ςΩετίϯςϯπͩͱAccept-EncodingʹԠͯ͡gzip΍brotliѹॖΛ࢓
    ෼͚Δ৔߹ʹVary: Accept-Encoding͕ͭ͘
    
    
    • ը૾ͩͱAcceptϔομʔʹΑΔग़͠෼͚ʹͳΓVary: AcceptͱͳΔɻ
    
    
    • VaryͰͷΩϟογϯάڍಈ͸CDNʹΑͬͯ݁ߏҧ͏ͷͰΑ͘ௐ͕ࠪඞཁ
    

    View Slide

16. Accept header
    Chrome 108: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
    
    
    Firefox 106: image/avif,image/webp,*/*
    
    
    Safari 16※: image/webp,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
    
    
    ※macOSͷόʔδϣϯʹΑͬͯavifͷ༗ແ͕มΘΔ
    
    
    ※Safari͸ը૾ͷURLʹ௚઀ΞΫηε͢Δͱը૾ܥͷAcceptʹͳΒͳ͍
    
    
    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    
    
    Acceptϔομʔແ͠
    
    
    Acceptϔομʔແ͠
    

    View Slide

17. mobile appͰ͸
    
    
    ࣗ෼ͰAcceptϔομʔΛ෇༩͢Δඞཁ͕͋Δ
    

    View Slide

18. Accept header - iOS (Alamo
    f
    ireImage)
    https://github.com/Alamo
    f
    ire/Alamo
    f
    ireImage/blob/4.2.0/Source/Request%2BAlamo
    f
    ireImage.swift#L47
    • Alamo
    f
    ireImageͰImageViewʹը૾Ληο
    τ͍ͯ͠Δ৔߹ࣗಈͰAcceptϔομʔΛઃ
    ఆͯ͘͠Ε·͢
    
    
    • Prefetch౳ͦͷଞͷը૾ϦΫΤετ΋͋Δͷ
    Ͱ࠷ऴతʹ͸པΒͣʹAcceptϔομʔΛॻ
    ͘ࣄʹ͠·ͨ͠
    
    
    • Abcॱιʔτ͞ΕΔͷͰMIMEͷॱ൪͕αʔ
    όଆ࣮૷ʹΑͬͯ໰୊ʹͳΔࣄ΋ɻ
    

    View Slide

19. Accept header - Android (Okhttp)
    • CoilͷImageLoaderʹ࢖͏
    OkhttpClient༻ͷInterceptorΛ
    ॻ͍ͯ·ͱΊͯηοτ
    

    View Slide

20. ੒Ռ
    

    View Slide

21. Bandwidth
    app΁ͷwebp഑৴։࢝
    • શମͰ20%ఔ౓సૹྔ͕࡟ݮ 🎉
    • ੨: WEBP
    
    
    • ԫ৭: JPEG
    

    View Slide

22. avif࢖ͬͯͳ͍ʁ🤔
    

    View Slide

23. avif problem - iOS
    • iOS 16͕ͩavifը૾͕දࣔ͞Εͳ͍ˠޙड़
    
    
    • ৽نΞϓϦΛ࡞੒͠ద౰ʹUIImageViewʹྲྀ͠ࠐΉͱදࣔ͞ΕΔ
    
    
    • ͜ͷࢿྉΛॻ͍͍ͯͯɺίʔυΛݟ͍ͯͨΒAlamo
    f
    ireImage͕
    ͍࣋ͬͯΔMIMEϦετ(·ͩσϑΥϧτͰ͸image/avif͕௥Ճ͞
    Ε͍ͯͳ͍)ʹແ͍MIME͕ฦͬͯ͘ΔͱΤϥʔΛthrow͍ͯ͠ΔՕ
    ॴΛݟ͚ͭͨͷͰɺAlamo
    f
    ireImageͷΞοϓσʔτ(ݱ࣌఺ະϦ
    Ϧʔε)·ͨ͸addAcceptableImageContentTypes(_:)ϝιουͰͷ௥
    Ճ͕ඞཁ
    https://github.com/Alamo
    f
    ire/Alamo
    f
    ireImage/blob/4.2.0/Source/Request%2BAlamo
    f
    ireImage.swift#L150-L156
    

    View Slide

24. avif problem - Android
    • Android 12, 13Ͱը૾͸දࣔ͞ΕΔ͕྘৭ͷઢ͕ೖΔ
    
    
    • ͍·ͩṖ
    

    View Slide

25. avif problem - image quality
    webp(q=75) - 58kB
    png(q=75) - 97.8kB
    avif(q=75) - 43kB
    

    View Slide

26. avif problem - image quality
    ৗʹavif͕ྑ͍ͱ΋ݶΒͣ
    
    
    ը૾ʹΑͬͯࡉ͔͍quality஋ௐ੔͕ඞཁ
    
    
    ௐ੔ͨ݁͠Ռɺ
    
    
    ৔߹ʹΑͬͯwebpͷํ͕αΠζ͕খ͍͞ࣄ΋ɻ
    
    
    ࣸਅͰ΋webpͷํ͕ը࣭͕ྑ͘αΠζ΋খ͍͞
    ͱ͍͏έʔε͕ͦͦ͜͜ɻ
    
    
    ΦϦδφϧͷJPEGΑΓαΠζ͕૿͑ͯ͠·͏
    έʔε΋ɻ
    

    View Slide

27. avif͸webpʹରͯۜ͠ͷ஄ؙͰ͸ͳ͔ͬͨ🫠
    
    
    (গͳ͘ͱ΋Fastly ImageOptimizerͰͷม׵ʹ͓͍ͯ)
    ·ͱΊ
    

    View Slide

28. CacheHitRatio΋ߟ͑Δͱ
    
    
    ͍·ͷͱ͜Ζwebp·ͰͷରԠͰ΋ྑ͍͔΋
    ·ͱΊ
    

    View Slide

29. ΊͬͪΌࢀߟʹͳΔϦϯΫू
    • WebαʔϏε্ͷը૾ม׵ͱWebPͷར༻ʹ͍ͭͯ
    
    
    • https://engineering.mercari.com/blog/entry/20201211-image-optim-webp/
    
    
    • FastlyΛ׆༻ͨ͠noteͷը૾഑৴ޮ཰Խ #yamagoya2021
    
    
    • https://note.jp/n/n516042eef752
    
    
    • େن໛ImageOptimizerར༻Ҋ͔݅ΒֶͿɹ҆৺҆શͷCDNҠߦ / Fastly yamagoya 2022
    
    
    • https://speakerdeck.com/kakerukaeru/fastly-yamagoya-2022
    

    View Slide