Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Image optimization for mobile on CDN

r-plus
December 22, 2022

Image optimization for mobile on CDN

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

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

r-plus

December 22, 2022
Tweet

More Decks by r-plus

Other Decks in Technology

Transcript

  1. Image optimization for mobile
    12/22 potatotips #80


    Taiki Komaba @r_plus
    on CDN

    View Slide

  2. UBJLJLPNBCB

    [email protected]

    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