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

UBJLJLPNBCB 
 !S@QMVT

webp࢖ͬͯ·͔͢ʁ

avif࢖ͬͯ·͔͢ʁ

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

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

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

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

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

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

CDN we are using 2018 2022 to use ImageOptimizer

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

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

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

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

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ϔομʔແ͠

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

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ͷॱ൪͕αʔ όଆ࣮૷ʹΑͬͯ໰୊ʹͳΔࣄ΋ɻ

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

੒Ռ

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

avif࢖ͬͯͳ͍ʁ🤔

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

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

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

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

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

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

ΊͬͪΌࢀߟʹͳΔϦϯΫू • 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