次世代画像フォーマットの利用方法：WebPとAVIFの実践ガイド

SEO

SEO（Search Engine Optimization・検索エンジン最適化）と書かれた積木

WebP・AVIFをサイトに配置し、ページ速度を改善

この実践ガイドでは、次世代画像フォーマットであるWebPとAVIFの利用方法について詳しく解説します。WebPとAVIFのメリットについて説明し、ページ速度とパフォーマンス向上の重要性に焦点を当てました。

ガイドでは、形式変換の方法について詳しく説明し、コマンドラインを使用したWebP形式への変換手順とバッチ処理の自動化方法、オンラインツールを活用しての画像圧縮手順も提供しています。

最後に、WebPとAVIFの画像をサイトに埋め込む方法について解説し、picture要素を使用した画像の埋め込み手順まで一通りの活用方法を網羅しました。

これらを実践することで、サイトのパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させることができます。次世代画像フォーマットを活用して、サイトの速度と品質を向上させましょう。

WebP・AVIFをサイトに配置し、ページ速度を改善
- 振り返り
WebPとAVIFの再確認
- WebPとAVIFのメリット
最新の形式で画像と動画を提供する重要性
- ページ速度とパフォーマンス向上の意義
- LighthouseとPageSpeed Insights
ツールを使った形式変換
- コマンドライン
  - cwebpを使用したWebP形式への変換
  - バッチ処理の自動化方法
    - バッチファイル化の手順
- オンラインツールでGIFアニメを圧縮
  - 圧縮手順のサンプル例
ファイルのアップロード
- Dropboxを利用
- ブラウザ・傾向と対策
picture要素を使用した画像の埋め込み
- picture要素の基本概要
埋め込みの操作手順と具体的な解説
- 「picture」と「source」
おわりに

振り返り

前回の記事では、次世代フォーマットの利用につき、ざっと以下の内容をご紹介しました。

WebP・AVIFについて
Lighthouse・PageSpeed Insightsでページ診断
WebPへの変換手順（cwebp）
圧縮後の改善点
DropBoxへの保存、配置手順

今回は、これらのサイトへの配置パターンを、いくつかご紹介したいと思います。

WebPとAVIFの再確認

WebPとAVIFは、次世代の画像フォーマットで、ウェブサイトの速度向上とパフォーマンス向上に大いに貢献します。これらのフォーマットは、伝統的なJPEGやPNGに比べて高い圧縮率を提供し、画質を損なわずにファイルサイズを削減します。さて、なぜこれらのフォーマットが重要なのでしょうか。

WebPとAVIFのメリット

WebPは、Googleが開発したフォーマットで、高い圧縮効率を持ちながらクリアな画質を提供します。
AVIFは、AV1ビデオコーデックに基づいたフォーマットで、非常に効率的な圧縮と高品質な画像を提供します。

これらのフォーマットを使うことで、ウェブページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。

ツールを使った形式変換

コマンドライン

cwebpを使用したWebP形式への変換

WebP形式の画像を作成するには、Googleが提供するcwebpというコマンドラインツールを使用します。以下は基本的な手順です：

まず、cwebpツールをダウンロードしてインストールします。
WebP のダウンロードとインストール - Google for Developers
コマンドプロンプトまたはターミナルを開き、cwebpコマンドを使用して画像を変換します。
変換後のWebP画像をサイトに配置します。以下はDropboxを利用した配置の手順です。
DropBoxからAVIF, WebPをサイトに配置する手順 - rubirubi.hateblo.jp

バッチ処理の自動化方法

大量の画像を変換する場合、バッチ処理が役立ちます。スクリプトを使って、一括変換を自動化できます。これにより、多くの画像を効率的に変換できます。

バッチ処理を自動化する手法は、以下の通りです。

スクリプトの作成:
- スクリプトを使用して、複数の画像を一括変換するプロセスを自動化できます。例えば、Bashスクリプト（Linux/macOS）やバッチファイル（Windows）を作成し、cwebpコマンドを繰り返し実行します。
- 以下は、Linux/macOS用の簡単なスクリプトの例です:

bash

#!/bin/bash
for file in *.jpg; do
  cwebp "$file" -o "${file%.jpg}.webp"
done

このスクリプトではcwebp.exeを使用して画像を変換しています。

スクリプトの実行:
- 実行すると、カレントディレクトリにあるすべてのJPEG画像を一括でWebPに変換されます。

これにより、大量の画像を手動で1つずつ変換する手間を省き、効率的に次世代フォーマットに変換できます。

バッチファイル化の手順

複数画像を一括でWebP形式に変換するバッチファイルの作成・実行手順は以下の通りです。以下は、Windows用の作成手順です。

テキストエディタを開く:
- メモ帳などのテキストエディタを開いてください。
バッチファイルを作成:
- 以下のサンプルコードはJPEG画像をWebP形式に一括変換し、変換後のファイルを指定のディレクトリに保存します。

batch

@echo off
set cwebp_dir=C:\libwebp-1.3.2-windows-x64\bin
set input_dir=C:\images
set output_dir=C:\images\webp

for %%A in ("%input_dir%\*.jpg") do (
    %cwebp_dir%\cwebp.exe "%%A" -o "%output_dir%\%%~nA.webp"
)

フォルダ構成（例）:

cwebp.exeファイルの場所: 「set cwebp_dir=」で指定しています。コードではC:\libwebp-1.3.2-windows-x64\binを指定。
変換前の画像ファイルの場所: 「set input_dir=」で指定しています。コードではC:\imagesを指定。
変換後、ファイルを保存したい場所: 「set output_dir=」で指定しています。コードではC:\images\webpを指定。

※ご利用の際、パスはご自身の環境に合わせ任意に置き換えてください。

ファイルの保存:
- テキストエディタに上記のスクリプトをコピーして貼り付けたら、ファイルを保存します。保存場所（バッチファイルの実行場所）は、変換したい画像のあるフォルダと同じディレクトリ（サンプルコードだと、C:\images）に配置してください。
ファイル形式を変更:
- 保存する際にファイルの拡張子を.txtから.batに変更します。
  例: "convert_images.txt" -> "convert_images.bat"
バッチファイルを実行:
- 作成した.batファイルをダブルクリック、もしくは右クリックから実行します。これにより、バッチ処理が開始され、指定した変換後のフォルダ（例ではC:\images\webp）に保存されます。

この手順に従ってバッチファイルを活用すれば、大量の画像をひとつひとつ手動でやらずに一発変換できます。

快晴桟橋自転車笑顔楽しい女性

オンラインツールでGIFアニメを圧縮

圧縮手順のサンプル例

色々なツールがありますのでこれがベスト、と断言はできませんが、オンラインツールを使ったGIFアニメーションの圧縮手順例です。

以下のサイトにアクセスし、GIF画像を圧縮する
GIF Compressor – Compress GIF Animations Online
圧縮したGIF画像を、以下のサイトでMP4に変換、保存する。
Online GIF to MP4 Video converter
続けて同サイトのまま、変換したMP4動画をAVIF（動画）に変換、保存する。
※WebP（動画）も利用するなら、このタイミングで「MP4 -> WebP（動画）」への変換もやっておくと効率的です。
以下のサイトにアクセスし、圧縮後のGIF画像をJPG、PNGなどの静止画に変換する

Squoosh

©nyanco

「MozJPEG」は汎用性・圧縮率が高くオススメ！

ファイルのアップロード

Dropboxを利用

はてなブログやBloggerなど、多くのプラットフォームではAVIFや動画ファイルなど、アップロード対象のフォーマットに制限があります。

しかしこの制限は、外部クラウドサービスを活用することで回避できます。そして数あるオンラインストレージの中でもDropboxは操作も簡単で、多くのファイルフォーマットを扱えます。

具体的な手順は以下の通りです。詳細は、「こちらのリンク」から参照できます。

Dropboxにログイン:
まず、Dropboxにログインします。
ファイルをアップロード:
アップロードしたいファイルを選び、Dropboxにアップロードします。AVIFやWebP、MP4など制限のあるフォーマットも埋め込み用にアップロードできます。
共有リンクの生成:
アップロードが完了したら、そのファイルに共有リンクを生成します。この共有リンクを後でブログ記事に埋め込むために使用します。
ブログに埋め込む

以上の手順に従うことで、制限のあるフォーマットのファイルを自サイト・ブログに組み込むことができます。

ブラウザ・傾向と対策

下記は直近１年間（2022/10~2023/09）の、日本国内のブラウザ利用率です。

desktop-browser-JP-monthly-202210-202309 — Desktop

mobile_browser-JP-monthly-202210-202309 — Mobile

Total

Desktop

	%
Chrome	63.28
Edge	21.88
Firefox	6.26
Safari	6.21
Opera	0.82
IE	0.57

Mobile

	%
Safari	61.55
Chrome	33.76
Sumsung	2.09
Firefox	0.69
UC	0.51
Edge	0.32

PCはChromeがほぼ 2/3を占め、Edgeが続きます。2つ合わせて約85％。モバイルは、日本ではiPhone人気でSafariが高く約62％、続くChromeが約34％と、この2つで全体の約96％を占めています。

引用元: gs.statcounter.com

なお、2012年以降Windows向けSafariはリリースされておらず、すでにサポートも終了しています。

Apple では、Windows 用 Safari のアップデートの提供を停止しました。Windows 用 Safari 5.1.7 が Windows 向けの最終バージョンであり、サポートはすでに終了しています。

最新バージョンの Safari にアップデートする - Apple サポート (日本)

そして2023年10月現在、次世代画像フォーマットの対応ブラウザは、

WebP
- Chrome
- Opera
- Firefox
- Safari
- Edge

AVIF
- Chrome
- Opera
- Firefox
  (Firefoxは静止画のみ)

となっています。

AVIFはEdge、IE（Microsoft社）とSafari（Apple社）のブラウザで未対応のため、PCで約22％、スマートフォンではほぼ 2/3をカバーできていません。その穴埋め対策が必要となります。

picture要素を使用した画像の埋め込み

picture要素の基本概要

picture要素はHTML5から新たに追加されました。ユーザーの閲覧環境に応じて最適な画像を表示させることができます。

読み込まれるソースセットのコンテナとして機能し、picture要素自身は意味を持たずソースセットの中で表示されている子要素を表します。

picture要素 | 用語集 | ミツエーリンクス

picture要素は、「WebPとAVIF」というような複数の画像フォーマットをサポートするためにも利用できます。<picture>タグの活用により、ブラウザは表示可能なフォーマットを選択し、高品質で圧縮率の高い画像から優先的に表示させることが可能となります。

埋め込みの操作手順と具体的な解説

「picture」と「source」

<picture>、<source>要素を使用して、WebP・AVIF形式の画像をウェブページに埋め込む手順を具体的に説明します。以下はコードサンプルとその解説です。

html

<picture>
  <source srcset="第一候補の画像アドレス.avif" type="image/avif" />
  <source srcset="第二候補の画像アドレス.webp" type="image/webp" />
  <img src="どちらもダメだった時の画像アドレス.jpg" alt="広場に座ってはしゃぐ少年" />
</picture>

コードの解説:

<picture>: 複数の画像フォーマットをサポートするために使用されます。これにより、ブラウザは最適なフォーマットを選択します。
<source>: 画像のソースを指定します。srcset属性にWebPとJPEGの画像へのパスを指定しています。ブラウザはこのリストからサポートするフォーマットを選択します。
<img>: <source>で指定したフォーマットがサポートされていない場合に表示される代替画像を指定します。

©nyanco

最後の砦がここで指定した画像です笑

このコードサンプルを使用すると、WebPとAVIF形式の画像をウェブページに埋め込むことができ、ブラウザはサポートするフォーマットを選択して高品質なメディアを優先的に提供します。

以下はこれまでの記事の手順に倣い、圧縮したGIF画像をAVIF・WebP・JPEGの3種類に変換し、サイトに設置したアウトプットと実際のコードです。

広場に座ってはしゃぐ少年 — Image Configuration Test: "From AVIF -> WebP -> JPEG"

<picture>
  <source srcset="https://dl.dropboxusercontent.com/scl/fi/na40kls4xxnukm0b616jb/jitabata-hiroba.avifs?rlkey=csh1hb4etg5yjjama81isa605" type="image/avif" />
  <source srcset="https://dl.dropboxusercontent.com/scl/fi/mkwonpiwyucuplaqy6nld/ezgif.com-gif-maker.webp?rlkey=9k2559vyrkz40eukzmwskwv6m" type="image/webp" />
  <img src="https://dl.dropboxusercontent.com/scl/fi/h10dpvwbc9czv73tl3lwl/img_20131118_02-min.jpg?rlkey=yww9hsb506lcsnh1adjzs2fam" alt="広場に座ってはしゃぐ少年" />
</picture>