Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

UBJLJLPNBCB 
 !S@QMVT

Slide 3

Slide 3 text

webp࢖ͬͯ·͔͢ʁ

Slide 4

Slide 4 text

avif࢖ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CDN we are using 2018 2022 to use ImageOptimizer

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

੒Ռ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

avif࢖ͬͯͳ͍ʁ🤔

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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