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

WebPに代わる次世代画像フォーマットAVIF Akamai_Meetup #1

WebPに代わる次世代画像フォーマットAVIF Akamai_Meetup #1

Akamai Meetup は、Akamai や Linode に興味のある方なら、どなたでも参加頂ける技術者向けオンライン勉強会です。 低価格なクラウドサービス「Linode」の活用例や、Web サイトの高速化やモニタリング、エッジコンピューティングのための最新の技術知識、実際の導入例などを、毎回のテーマに沿って学習、議論、情報交換しましょう。

第1回目のテーマは、「WebP に代わる次世代画像フォーマット AVIF について学ぶ」です。

次世代画像フォーマットAV1 Image File Format (AVIF) は WebP, JPEG より圧縮効率が高く、すでに Chrome、Firefox でサポートを開始、Safari でもiOS16で一部対応が始まっています。Google PageSpeed Insightでも、WebP、AVIF が推奨されています。本勉強会では、画像フォーマットの基礎、AVIF の特徴、圧縮効果、アカマイを使った対応方法などを紹介しました。

Akamai Meetup への参加はこちらから >https://akamai-meetup.connpass.com/

Akamai-Meetup-JPN

November 08, 2022
Tweet

Other Decks in Technology

Transcript

  1. © 2022 Akamai | Akamai Meetup 1 いxうひwき Technical Solution

    Architect Akamai Meetup WebP {代わ» 次世代画像õ¹ーþóø AVIF {tいv学|う 金児 仁史 Technical Solution Architect
  2. © 2022 Akamai | Akamai Meetup 3 本日、z伝えしたいこx AVIF |生~¼背景x特徴

    AVIF ~öùウ¶µýーø状況x採用w Chrome ~v断 AVIF ~圧縮効果 AVIF をöùウ¶w表示y»方法 AVIF ~作成方法 AVIF を選択y»Nw考え»こx
  3. © 2022 Akamai | Akamai Meetup 5 AVIF JPEG1WebP {代わ»新wいõ¹ーþóø

    Alliance of Open Media | 2019 € 2 o{ V1.0.0 を策定 AV1 Video õ¹ーþóø~´ñー¸バー¸÷ン
  4. © 2022 Akamai | Akamai Meetup 6 AVIF |生~¼た背景 Webúー¸~úóÁ化

    Web~写真画像w利用さ¼vい»JPEG~限界 õ±´ûµ´º|大}い高品質z画像 ÀウンýーùŸ度|öー¶ー体験{影響 高品質z画像を軽量zµ´ºw配信y»要望
  5. © 2022 Akamai | Akamai Meetup 8 AVIF |生~¼»~w~試 JPEG

    {代わ»様々z試 - WebP, Mozjpeg, JPEG XR, JPEG 2000 Google |開発wWebP |主流{zº{ Netflix, Chrome | AVIF を支援w
  6. © 2022 Akamai | Akamai Meetup 9 JPEG -> WebP

    -> AVIF 1992 JPEG 2022 2012 2002 JPEG 2000 (JP2) 2019 2010 JPEG XR
  7. © 2022 Akamai | Akamai Meetup 10 WebP、 AVIF x²動画技術{¹派生しvい»

    1992 JPEG 2022 2012 2002 JPEG 2000 (JP2) 2019 2010 JPEG XR VP8 AV1 VP9 VP10 Daala Thor
  8. © 2022 Akamai | Akamai Meetup 11 Safari | JPEG

    2000 {対応 https://caniuse.com/?search=jpeg%202000
  9. © 2022 Akamai | Akamai Meetup 12 IE | JPEG

    XR {対応 https://caniuse.com/?search=jpeg%20xr
  10. © 2022 Akamai | Akamai Meetup 14 Chrome、 Firefox、Safari |

    AVIF {対応 https://caniuse.com/?search=avif
  11. © 2022 Akamai | Akamai Meetup 15 JPEG XL 1992

    JPEG 2022 2012 2002 JPEG 2000 (JP2) 2019 2010 JPEG XR JPEG XL
  12. © 2022 Akamai | Akamai Meetup 16 JPEG XL ~対応状況

    https://caniuse.com/?search=jpeg%20xl
  13. © 2022 Akamai | Akamai Meetup 17 Chrome、JPEG XL 対応先送º

    (þイúóûュース) https://news.mynavi.jp/techplus/article/20221101-2500084/
  14. © 2022 Akamai | Akamai Meetup 19 öùウ¶~ AVIF ~µýーø状況

    Desktop Chrome 2020 € 8 o 25 日ÿバー¸÷ン 85Ā{¹対応済 Desktop Safari 2022 € 10 o 24 日ÿバー¸÷ン 16.1Ā{¹対応済 macOS 13 Ventura 以降|条件 Desktop Microsoft Edge 最新版バー¸÷ン 107 ~時点w未対応 Desktop Firefox 2021 € 10 o 5 日ÿバー¸÷ン 93Ā{¹対応済 Mobile Chrome Android 12 {¹µýーø Mobile Safari 2022 € 9 o 12 日ÿバー¸÷ン 16.1Ā{¹対応済 iOS 16 以降
  15. © 2022 Akamai | Akamai Meetup 20 AVIF を採用した Chrome

    ~判断 Chrome | AVIF µýーø開始wòÁùー·÷ン 1. 帯域幅~消費を抑えvúー¸~読込を高Ÿ化w1 全体~÷ー¿消費量を削減 2. HDR »ùー対応 3. Facebook, Netflix, YouTube zy多数~企業~関心 https://chromestatus.com/feature/4905307790639104
  16. © 2022 Akamai | Akamai Meetup 21 全体~÷ータ消費量を削減 • AVIF

    1JPEG や WebP x比較wv1画像õ±´ûµ´ºを大幅{削減 • Netflix ö¹ø»óøw1öー¹Áー¹全体w JPEG {対wv 50%1 4:4:4 コンöンôw 60 %以N~削減を示y結果を発表 https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
  17. © 2022 Akamai | Akamai Meetup 22 HDR カùー対応 •

    AVIF 1Web 用~ HDR 画像対応xwv期待さ¼vい» • JPEG 18 óóø~色深度{制限さ¼vい» • ÷³¹÷ü´~輝度1色óóø深度1色域~向N{¸º1Web 関係者 JPEG w失わ¼»画像÷ー¿を保存y»こx{関心|あ»
  18. © 2022 Akamai | Akamai Meetup 23 JPEG 未対応~た±他~õ¹ーþóøを使svいた ±ースw²

    WebP, AVIF を使え» JPEG  Lossy (損失~あ») 圧縮w{µýーøwvいzい - WebP, AVIF  lossless {も対応可能 JPEG  ²ûõ±Áóネûÿ透過Āをµýーøwvいzい - Png, AVIF 対応可能 JPEG  ²ニñー·÷ンをµýーøwvいzい - Gif, Png, WebP, AVIF 対応可能 JPEG  ºーバーü´をµýーøwvいzい - AVIF 対応可能
  19. © 2022 Akamai | Akamai Meetup 24 AVIF ~圧縮例 •

    適用µ´ø|ð供w削減÷ー¿例 • HTTP Archive ~÷ー¿{¹見え»圧縮効果 • WebP x~比較例
  20. © 2022 Akamai | Akamai Meetup 25 AVIF ~圧縮効果例 Webµ´øを

    AVIF 対応w こxw 25% バ´ø削減 1,400万~´ñー¸òóø WebP 対応wvいµ´ø https://twitter.com/TimVereecke/status/1372210487191085063
  21. © 2022 Akamai | Akamai Meetup 26 AVIF ~圧縮効果例 Webµ´øを

    AVIF 対応wこxw 21.4% バ´ø削減 WebP 対応wvいµ´ø https://twitter.com/robinwhittleton/status/1486013791670353922
  22. © 2022 Akamai | Akamai Meetup 27 AVIF 利用状況 -

    HTTP Archive AVIF 0.22% https://almanac.httparchive.org/en/2022/media
  23. © 2022 Akamai | Akamai Meetup 28 AVIF 利用状況 -

    HTTP Archive AVIF 利用対前€比0 405% https://almanac.httparchive.org/en/2022/media
  24. © 2022 Akamai | Akamai Meetup 29 AVIF 利用状況 -

    HTTP Archive Pixel あº~ óóøµ´º| 最も小さい~| AVIF https://almanac.httparchive.org/en/2022/media
  25. © 2022 Akamai | Akamai Meetup 30 AVIF 利用状況 -

    HTTP Archive JPEG x~比較 38% 削減 52% 削減 HTTP Archive |共pwvい»÷ー¿を元{独自{Àùõ化
  26. © 2022 Akamai | Akamai Meetup 31 WebP {勝» AVIF

    ~圧縮効率 Daniel 氏|発表w JPEG {¹~バ´ø削減例ÿ中央値Ā - WebP: 31.5%~削減効果 - AVIF: 50.3%~削減効果 同x画質 (DSSIM) w比較 WebP w 2.7% ~õ±´û| JPEG ¸ºも大}zsvい https://www.ctrl.blog/entry/webp-avif-comparison.html
  27. © 2022 Akamai | Akamai Meetup 32 AVIF をöùウ¶w表示す»方法 •

    HTML ~構 を事前{変更y» • HTML ~構 を動的{変更y» • HTML ~構 を変えz{µーバーµ´ùw対応y» • HTML ~構 を変えz{µーバーµ´ùw対応wz|¹ CDN を使う • HTML ~構 を変えz{ Image CDN €w対応y»
  28. © 2022 Akamai | Akamai Meetup 33 HTML ~構造を事前{変更す» Picture

    タ°を使sv AVIF {対応 <picture> <source srcset="img/photo.avif" type="image/avif"> <source srcset="img/photo.webp" type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture> 注意:0IE 11  picture ¿À{対応wvいzい https://caniuse.com/?search=picture
  29. © 2022 Akamai | Akamai Meetup 34 HTML ~構造を動的{変更す» <img

    src="img/photo.avif" alt="Description" width="360" height="240"> accept: image/avif,image/webp,image/apng,image/svg+xml,image/ *,*/*;q=0.8 öùウ¶~ Accept ú¿¸¹øøóÀーw振»舞いを変え» HTML を動的{変更y» (js w読込õ±´ûを変更y» Áー¹も多あ») öー¶ー体験{影響y»遅延{注意y»
  30. © 2022 Akamai | Akamai Meetup 35 HTML を変更w}zい±ース <img

    src="img/photo.jpg" alt="Description" width="360" height="240"> µーバーµ´ùもw CDN w対応 以O~構文を変更wzいÁー¹
  31. © 2022 Akamai | Akamai Meetup 36 HTML を変更w}zい場合、µーðーµイùw対応 accept:

    image/avif,image/webp,image/apng,image/svg+xml,image/ *,*/*;q=0.8 µーバーw動的{´ñー¸を出w分 öùウ¶{ content-type ü¹ýン¹øóÀーw通知 content-type: image/jpeg content-type: image/avif öùウ¶~ Accept ú¿¸¹øøóÀー
  32. © 2022 Akamai | Akamai Meetup 37 CDN xµーðーµイùw対応 request.setvariable(8PMUSER_CACHEKEY9,

    <image/avif=); request.cacheKey.includeVariable('PMUSER_CACHEKEY'); 初回~÷ー¿~返信µーバーµ´ù~責任 CDN w Accept øóÀーをキóó·õキー{»óø CDN ~キóó·õキー一般的{ URL ~€|1 個w{キóó·õキーを追加y»こx|w}»
  33. © 2022 Akamai | Akamai Meetup 38 Image CDN を使う

    Akamai Image and Video Manager 変換バó¿ Àùウンùw実施 処理|終わ»x1 最適zõ±´û ¿´÷を使用
  34. © 2022 Akamai | Akamai Meetup 39 Akamai Image and

    Video Manager AVIF 対応€wz1 様々z変換を CDN w 対応可能
  35. © 2022 Akamai | Akamai Meetup 40 AVIF ~作成方法例 -

    Squoosh CLI (node.js ²÷ú) - squoosh-cli --avif '{cqLevel:30}' image.jpg - FFmpeg (動画変換~ºー÷ンソー¹Ā - ffmpeg -i image.jpg -c:v libaom-av1 -crf 18 image.avif - Avifenc (libavif zyを利用wvóûùw CLI) - avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim image.jpg image.avif
  36. © 2022 Akamai | Akamai Meetup 41 AVIF を選択す»上w考え»こx •

    圧縮率 • 品質 • ¸ンコーùx÷コーù~¹ôーù
  37. © 2022 Akamai | Akamai Meetup 43 Image and Video

    Managerを使sたByte削減比較 AVIF WebP JPEG 3.0MB 2.2MB 0.8MB
  38. © 2022 Akamai | Akamai Meetup 44 人~知覚感度{影響y» Structural Similarity

    (構 的類似性) 品質y~¸う{確認w}»{? 1{近いほy同一~画像
  39. © 2022 Akamai | Akamai Meetup 45 Q10 - DSSIM:

    0.0566 Q50 - DSSIM: 0.0251 Q80 - DSSIM: 0.0179 DSSIM (Dis)Similarity Index Measurement{tいv 
 0 {近いx同x´ñー¸ 1 {近いx異z»´ñー¸
  40. © 2022 Akamai | Akamai Meetup 46 2t~画像を比較しv、SSIM(DSSIM)を理解 https://pngquant.org/dssim.html %

    dssim -o diff.png sample3.png sample4.png 0.003458 sample4.png % ffmpeg -i sample1.jpg -i sample2.jpg \ -filter_complex ssim -an -f null - ~ [Parsed_ssim_0 @ 0x558d76a0a700] SSIM Y:0.999726 (35.626515) U:0.999661 (34.695287) V:0.999514 (33.129446) All:0.999680 (34.946991) https://ffmpeg.org/
  41. © 2022 Akamai | Akamai Meetup 47 ¸ンコーùx÷コーù~スôーù öùウ¶w~÷コーùÿAVIF õ±´û~ï画Ā

    - Dav1d : ºー÷ンソー¹~高Ÿ AVIF ÷コーÀー1Chrome, Firefox |利用 µーバーµ´ùw~¸ンコーù (元õ±´û{¹AVIFõ±´ûへ~変換Ā - 一回€~変換処理xいえ1CPU コ¹ø高い - 変換処理時間~長さú²û¿´ð変換{O向} - µーバーµ´ùw~ CPU 消費|高い
  42. © 2022 Akamai | Akamai Meetup 48 ¸ンコーùx÷コーù~スôーù öùウ¶w~÷コーùÿAVIF õ±´û~ï画Ā

    - Dav1d : ºー÷ンソー¹~高Ÿ AVIF ÷コーÀー1Chrome, Firefox |利用 µーðーµイùw~¸ンコーù (元õ±´û{¹AVIFõ±´ûへ~変換Ā - 一回€~変換処理xいえ1CPU コ¹ø高い - 変換処理時間~長さú²û¿´ð変換{O向} - µーバーµ´ùw~ CPU 消費|高い
  43. © 2022 Akamai | Akamai Meetup 50 一括変換可能z Squoosh CLI

    https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli
  44. © 2022 Akamai | Akamai Meetup 51 Squoosh CLI ~コþンù例

    % squoosh-cli --webp '{quality:75}' leather_jacket.jpg 1/1 ✔ Squoosh results: leather_jacket.jpg: 631.46KB └ leather_jacket.webp → 133.23KB (21.1%) % squoosh-cli --avif '{cqLevel:33}' leather_jacket.jpg 1/1 ✔ Squoosh results: leather_jacket.jpg: 631.46KB └ leather_jacket.avif → 68.64KB (10.9%)
  45. © 2022 Akamai | Akamai Meetup 52 Squoosh{¸»AVIFxWebP~変換時間 WebP: quality=75,

    AVIF: cqlevel=331Linode CPU4コ² RAM08GB110枚(均3MB/枚)~JPEG画像を100回変換 37秒 316秒 8.5倍変換{時間を要y»
  46. © 2022 Akamai | Akamai Meetup 54 ùイöùú{¸»ñõ¹ーþンス差分 8¹üóùw¸ンコーù cqlevel=331Linode

    CPU4コ² RAM 8GB110枚(均3MB/枚)~JPEG画像を100回変換 316秒 64秒 1/5{短縮
  47. © 2022 Akamai | Akamai Meetup 55 ~x± • AVIF

    多~öùウ¶{¹支持さ¼vい» • AVIF  JPEG, WebP ¸ºも圧縮効率|高い • AVIF  JPEG, WebP ¸ºも多~色を使え» • AVIF ~¸ンコーù処理~コ¹ø|高い • AVIF を採用wzいöùウ¶{対wv WebP, JPEG zyを使う • Image CDN を使え€今y€{ AVIF {変換wv配信w}»