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

by Akamai-Meetup-JPN

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 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 以降

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

© 2022 Akamai | Akamai Meetup 21 全体~÷ータ消費量を削減 ● AVIF 1JPEG や WebP x比較wv1画像õ±´ûµ´ºを大幅{削減 ● Netﬂix ö¹ø»óøw1öー¹Áー¹全体w JPEG {対wv 50％1 4:4:4 コンöンôw 60 ％以N~削減を示y結果を発表 https://netﬂixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 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 対応可能

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

注意：0IE 11 picture ¿À{対応wvいzい https://caniuse.com/?search=picture

Slide 34

Slide 34 text

accept: image/avif,image/webp,image/apng,image/svg+xml,image/ *,*/*;q=0.8 öùウ¶~ Accept ú¿¸¹øøóÀーw振»舞いを変え» HTML を動的{変更y» (js w読込õ±´ûを変更y» Áー¹も多あ») öー¶ー体験{影響y»遅延{注意y»

Slide 35

Slide 35 text

µーバーµ´ùもw CDN w対応以O~構文を変更wzいÁー¹

Slide 36

Slide 36 text

© 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 ú¿¸¹øøóÀー

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© 2022 Akamai | Akamai Meetup 40 AVIF ~作成方法例 - Squoosh CLI (node.js ²÷ú) - squoosh-cli --avif '{cqLevel:30}' image.jpg - FFmpeg (動画変換~ºー÷ンソー¹Ā - ﬀmpeg -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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

© 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://ﬀmpeg.org/

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

© 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%)

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

© 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}»

Slide 56

Slide 56 text