「次世代フォーマットでの画像の配信」を試す。

2019/06/18 What's Up, サイト制作, 技術系 投稿者:

GoogleのPageSpeed Insightsを利用してWebサイトの高速化を図るにあたり、改善できる項目の中にある「次世代フォーマットでの画像の配信」について、どれほど速く、軽くなるのか検証をとってみたいと思います。

次世代フォーマットでの画像の配信とは

GoogleのPageSpeed Insightsの説明では、

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

とあります。

次世代フォーマットのブラウザ等対応状況

2019年6月現在でのブラウザ、画像加工ツールの対応状況はどうでしょうか?
『caniuse.com』で調べてみます。

JPEG 2000

SafariとiOSのみ対応

JPEG XR

IEとEdgeのみ対応

WebP

Edge、Firefox、Chrome、Androidに対応

対応状況

Microsoft、Google、Appleでそれぞれ推しているフォーマットが違うようですが、シェアと影響力の関係からGoogle陣営のWebPが主流になっていきそうです。

検証方法

同じ画像を従来のJPEG、PNGと次世代フォーマットのJPEG 2000、JPEG XR、WebPそれぞれに変換し、GoogleのPageSpeed Insightsで速度チェックを行います。
その他、データサイズの比較や主観になってしまうかもしれませんが見た目の劣化具合も確認してみたいと思います。
GoogleのPageSpeed InsightsではGoogle推しのWebPが優勢になってしまう可能性もありますが、PageSpeed Insightsが公正な結果を出している事を前提としたいと思います。

変換方法

Web上で各形式に変換するサービスもあるようですが、Photoshopのプラグインを使うのが一番効率が良く、日々のWebサイト制作に組み込めそうです。

Photoshopプラグインをダウンロードし、プラグインフォルダに設置

JPEG 2000についてはプラグインを用意せずとも最初から対応しているようです。
残りの2つのプラグインファイルをダウンロードし、Photoshopのプラグインフォルダへファイルを設置します。

私はWindows7環境でPhotoshop CS6(64bit)を使用しています。

JPEG XRプラグイン

Microsoft
https://www.microsoft.com/en-us/research/group/interactive-visual-media/

WebPプラグイン

github.com
https://github.com/fnordware/AdobeWebM

設置後、Photoshopを確認

「別名で保存」から「ファイル形式」プルダウンを開いて、JPEG 2000、JPEG XR、WebPを選択出来ることを確認します。

検証開始

JPEGを何枚か用意し、各フォーマットへ変換します。その後、データサイズや劣化具合、Webサイトで表示した際のスピードを検証します。

変換の検証(データサイズ)

変換方法は元のJPEGからロスレス(劣化なし)で変換をかけると、PNGと同様にファイルサイズが大きくなってしまうようです。
1.2MBくらいのJPEG(写真)をロスレス変換すると3MB~5.7MBくらいになってしまいました。

品質を80にする

データサイズと画質の比較を行うために、品質を80にしてみました。

データサイズ検証結果

元のJPEG PNG変換 JPEG 2000 JPEG XR WebP
img01 1236KB 5252KB 990KB 448KB 128KB
img02 1975KB 7646KB 1769KB 1034KB 420KB
img03 1639KB 6760KB 1469KB 809KB 324KB

元の画像(写真)にもよると思いますが、
比較的古い規格のJPEG 2000では半分くらいでしょうか。
WebPではデータサイズが1/5から1/10近くになるようです。

見た目の劣化具合

各フォーマットを元の画像から品質80で出力したときの画像の劣化具合を調べてみました。
拡大すると多少劣化しているように見えますが、見比べないとわからないレベルです。
ファイルサイズに対する画質はかなり良いようです。
また、高圧縮によるノイズは出ていないようです。

一例としてJPEGとWebPの比較です。

デモページを作成して検証

各フォーマットでのデモページを作成し、それぞれのページをGoogleのPageSpeed Insightsで速度調査しましたが、JPEG 2000とJPEG XRについてはPageSpeed Insights側も画像を認識していないようで、結果が正確でない可能性があります。
それぞれ対応しているブラウザにて検証しましたが、画像を認識していない部分は同じのようです。
ですので、今回はJPEGとWebPの比較にて検証したいと思います。

PNG

Google PageSpeed Insightsでの結果

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

元のJPEGとWebPの比較において上の画像にある通り、「改善できる項目」の箇所が改善されているのがわかります。
スコアについては向上しているのですが、シンプルなデモページでは画像のフォーマットの違いのみでスコアに差をつけるのは難しいようです。

GTmetrixでの結果

GTmetrix
https://gtmetrix.com/

Webサイトの表示速度計測のGTmetrixを使って調べてみます。
内部でGoogleChromeを使ってレンダリングしているようですので、元のJPEGとWebPで比較します。
画像3枚分の画像フォーマット変更により速度としては0.3秒速くなっており、データサイズは4.82MBから960KBまで減っています。

検証結果まとめ

次世代フォーマットのメリット

  • データサイズが小さい。(特にWebP)
  • データサイズが小さいので表示速度があがる。
  • 画質の劣化は気にならない。

次世代フォーマットのデメリット

  • ひとつのフォーマットで全てのブラウザに対応していない。
  • 現在は画像加工ツールが標準対応していない。画像変換にひと手間必要。
  • ロスレス圧縮では逆にデータサイズが大きくなる。

メリットについては予想の範囲内でした。
デメリットについては「ひとつのフォーマットで全てのブラウザに対応していない。」が現時点ではデメリットとして大きいです。
これが解決すれば画像加工ツールも標準対応してくるでしょう。

まとめ(WebPは今使えるのか?)

どの次世代フォーマットもファイルサイズを小さくすることは可能です。
特にGoogleが推している「WebP」については目立った劣化もなく、ファイルサイズを大幅に小さくすることが出来るようです。
ファイルサイズを小さくすることによる速度の改善も比較的大きいものです。

現在主流のブラウザではAppleのSafariとiOSがWebPに対応していないだけです。
Apple推しのJPEG 2000は規格も古いようですし、WebP採用となれば一気に主流の画像フォーマットとなるかもしれません。
Microsoft、Apple、Googleの3社はブラウザ競争をしつつ、画像フォーマットでも競争しているようです。

コーディングの工夫で表示できるブラウザではWebPを、そうでないブラウザではJPEGを表示することも可能ですが、すべての画像をそうするわけにもいきませんので、今の段階では残念ですが「時期尚早」と言わざるを得ません。

カレンダー

 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
   1234
567891011
12131415161718
19202122232425
26272829   
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
1234567
891011121314
15161718192021
22232425262728
       
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
     12
3456789
10111213141516
17181920212223
24252627282930
31      
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
     12
3456789
10111213141516
17181920212223
242526272829 
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
Wide Netのクラウドバックアップ
クラウド型ファイル共有サービスRushDrive
ワイドオフィス
ネディアのSDGsへの取り組み