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
2. UBJLJ
   LPNBCB 
 !S@QMVT
3. webp࢖ͬͯ·͔͢ʁ
4. avif࢖ͬͯ·͔͢ʁ
5. FileSize JPEG WEBP AVIF 0 70 140 210 280 ୯ҐKB
6. 14~ (2020~) 16~ (2022~) 4~※ (2011~) 12~ (2021~) Can I use? 4.xʹਖ਼͘͠දࣔ͞Εͳ͍όʔδϣϯ͕͋Δ
7. CoreWebVital - LCP • Largest Contentful PaintͷུɻWebͷSEOʹӨڹ • ͍͍ͩͨը૾͕Ұ൪େ͖͍ࣄ͕ଟ͍ͨΊɺը૾༰ྔ͕ݮΓද͕ࣔ଎͘ͳΕ ͹LCP͕ྑ͘ͳΔ • lossyѹॖͨ͠Γɺը૾ͷαΠζΛݮΒ͢ࣄ͕ॏཁͳཁૉͷ1ͭ • Mobileʹ͸ͦͷΑ͏ͳࢦඪ͸ಛʹແ͍͕…
8. Mobile appͰ΋Ϣʔβͷ௨৴ྔ͕ݮΓ ද͕ࣔ଎͍ͷ͸خ͍͠ͷͰ࢖͍͖͍ͬͯͨ (ฐࣾWebͰ͸طʹpictureλάΛར༻ͨ͠webp഑৴Λ࣮ࢪ͍ͯ͠Δ)
9. webͱൺֱͨ͠ࡍͷը૾දࣔ • Web • PictureλάͰͷࣗಈతͳରԠঢ়گຖͷϑΝΠϧͷग़͠෼͚ • Τϥʔ࣌ͷonerror JSͰͷfallback • Mobile app • ݹ͍ΞϓϦ΋ߟ͑ΔͱදࣔͰ͖ͳ͍ϑΥʔϚοτΛ౉ͯ͠͠·ͬͨ৔߹ද ࣔ͞Εͳ͘ͳΔ • ࣄલͷม׵ʹࣦഊ͓ͯ͠ΓɺͦͷURLʹ͸ϑΝΠϧ͕ଘࡏ͠ͳ͍৔߹΋ಉ༷
10. Mobile΋ࢹ໺ʹೖΕΔͱ on-the- f lyม׵+cache͕ྑ͍ ͋ͱࣄલม׵ͷίʔυͷϝϯς͔Βղ์͞ΕΔ
11. CDN we are using 2018 2022 to use ImageOptimizer
12. CDN we are using (ImageOptimizer) • ը૾΁ͷϦΫΤετʹಛఆͷquerystringΛ෇༩͢Δͱ༷ʑͳ ม׵Λߦͬͯ͘ΕΔ • Autoύϥϝʔλ(auto=webp౳)ͰΫϥΠΞϯτͷAcceptϔο μʔΛݟͯը૾ܗࣜͷग़͠෼͚΋ߦ͑Δɻ
13. Fastly - VCL • AcceptϔομʔʹԠͨ͡ AVIF→WEBP→ΦϦδφϧܗࣜͷ ༏ઌॱҐͰը૾ܗࣜΛબͿVCL ίʔυྫ • ͦͷଞɺ͔ͳΓࡉ੍͔͘ޚՄೳ Ref: https://developer.fastly.com/reference/io/auto/
14. 1ͭͷURLͰ ΫϥΠΞϯτʹԠͯ͡ը૾Λग़͠෼͚Δ
15. Accept/Vary header • 1ͭͷURLͰϦΫΤετ಺༰ʹԠͯ͡ෳ਺छͷϨεϙϯεΛฦ͢৔߹ʹԿ ʹج͍ͮͯCDN͕Ωϟογϡ࢓෼͚Δͷ͔Λॿ͚ΔHTTP Response Header • ςΩετίϯςϯπͩͱAccept-EncodingʹԠͯ͡gzip΍brotliѹॖΛ࢓ ෼͚Δ৔߹ʹVary: Accept-Encoding͕ͭ͘ • ը૾ͩͱAcceptϔομʔʹΑΔग़͠෼͚ʹͳΓVary: AcceptͱͳΔɻ • VaryͰͷΩϟογϯάڍಈ͸CDNʹΑͬͯ݁ߏҧ͏ͷͰΑ͘ௐ͕ࠪඞཁ
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ϔομʔແ͠
17. mobile appͰ͸ ࣗ෼ͰAcceptϔομʔΛ෇༩͢Δඞཁ͕͋Δ
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ͷॱ൪͕αʔ όଆ࣮૷ʹΑͬͯ໰୊ʹͳΔࣄ΋ɻ
19. Accept header - Android (Okhttp) • CoilͷImageLoaderʹ࢖͏ OkhttpClient༻ͷInterceptorΛ ॻ͍ͯ·ͱΊͯηοτ
20. ੒Ռ
21. Bandwidth app΁ͷwebp഑৴։࢝ • શମͰ20%ఔ౓సૹྔ͕࡟ݮ 🎉 • ੨: WEBP • ԫ৭: JPEG
22. avif࢖ͬͯͳ͍ʁ🤔
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
24. avif problem - Android • Android 12, 13Ͱը૾͸දࣔ͞ΕΔ͕྘৭ͷઢ͕ೖΔ • ͍·ͩṖ
25. avif problem - image quality webp(q=75) - 58kB png(q=75) - 97.8kB avif(q=75) - 43kB
26. avif problem - image quality ৗʹavif͕ྑ͍ͱ΋ݶΒͣ ը૾ʹΑͬͯࡉ͔͍quality஋ௐ੔͕ඞཁ ௐ੔ͨ݁͠Ռɺ ৔߹ʹΑͬͯwebpͷํ͕αΠζ͕খ͍͞ࣄ΋ɻ ࣸਅͰ΋webpͷํ͕ը࣭͕ྑ͘αΠζ΋খ͍͞ ͱ͍͏έʔε͕ͦͦ͜͜ɻ ΦϦδφϧͷJPEGΑΓαΠζ͕૿͑ͯ͠·͏ έʔε΋ɻ
27. avif͸webpʹରͯۜ͠ͷ஄ؙͰ͸ͳ͔ͬͨ🫠 (গͳ͘ͱ΋Fastly ImageOptimizerͰͷม׵ʹ͓͍ͯ) ·ͱΊ
28. CacheHitRatio΋ߟ͑Δͱ ͍·ͷͱ͜Ζwebp·ͰͷରԠͰ΋ྑ͍͔΋ ·ͱΊ
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