パフォーマンスの診断
PageSpeed Insightsで当サイトのパフォーマンスを測定してみたら、画像のフォーマット及び画像サイズでかなりパフォーマンスが悪くなっている。
画像のフォーマットについて調べたら、webPフォーマットが良さそうなので、webPに変換して画像をアップするようにしたいと思い調べてみました。
WebPとは
WebPは、Googleによって開発された画像フォーマットで、静止画および動画に対応しています。このフォーマットは、ファイルサイズを小さくしながらも高い画像品質を維持することを目的としており、特にウェブ上での画像配信において効果的です。WebPは、JPEGおよびPNGフォーマットに比べて効率的な圧縮を提供し、透明性をサポートしています。また、アニメーション画像の作成にも利用することが可能です。
WebPフォーマットの主な特徴は以下の通りです:
- 効率的な圧縮: WebPは、JPEGやPNGと比較して小さなファイルサイズで高品質の画像を提供します。これにより、ウェブページの読み込み速度が向上し、データ使用量が削減されます。
- 透明性のサポート: PNG同様に、WebPはアルファチャンネルをサポートしており、透明な画像を作成することが可能です。
- アニメーションのサポート: WebPはアニメーションをサポートしており、GIFに代わる選択肢として利用することができます。
- ロスレスおよびロスィ圧縮: WebPは、ロスレス(無劣化)圧縮とロスィ(有劣化)圧縮の両方をサポートしています。これにより、画像の品質とファイルサイズのバランスを自由に選択できます。
- 広範なブラウザとツールのサポート: 主要なウェブブラウザや画像処理ツールの多くは、WebPフォーマットをサポートしています。
Macにインストール
Macにwebp変換ツールをインストールするには、homebrewが一番手っ取り早いです。
Homebrewでインストール
brew install webp
これで、cwebp
エンコーダーアプリケーションがインストールされ、WebPフォーマットで画像を圧縮することができるようになります。
ダウンロード画像を変換
ダウンロードしたjpegやpng画像をwebpフォーマットに変換するために、下記のコードを ~/.zshrcファイルに記述します。
※ 尚、Downloadsディレクトリは、jpegやpngだけ無く、いろんなファイルをダウンロードするので、先にDownloadsディレクトリの直下にconvertディレクトリを作成しておきました。
convert_to_webp() {
# ワイルドカードが何にもマッチしない場合にエラーを無視する
setopt local_options nullglob
# 入力と出力ディレクトリを変数で定義
local input_dir="/Users/[ユーザーディレクトリ]/Downloads/convert"
local output_dir="/Users/[ユーザーディレクトリ]/Downloads/convert/webp"
local old_images_dir="$output_dir/old_images"
# 出力ディレクトリとold_imagesディレクトリが存在しない場合は作成
mkdir -p "$output_dir"
mkdir -p "$old_images_dir"
# 入力ディレクトリに移動
cd "$input_dir" || return 1
# 各画像ファイルに対してcwebpで変換を行う
for file in *.jpg *.jpeg *.png; do
# ファイルが存在するか確認
[ -e "$file" ] || continue
# 出力ファイル名を決定(拡張子を.webpに)
local output="${file%.*}.webp"
# cwebpで変換、圧縮率を60%に設定
cwebp -q 60 "$file" -o "$output_dir/$output"
# 変換後のオリジナルファイルをold_imagesディレクトリに移動
mv "$file" "$old_images_dir/"
done
# デフォルトのディレクトリ(通常はホームディレクトリ)に移動
cd ~
}
コードを記述したら、シェルコマンドを読み込んで実行できるようにsourceコマンドを実行します。
source ~/.zhrc
これで、ターミナルから convert_to_webp コマンドを実行すると、Downloads/convertファイルにある、jpegやpngファイルがwebpに変換され、オリジナルファイルは、Downloads/convert/old_images ディレクトリに移動します。
改善結果
画像をjpegやpngからWebPに変更したら、以下のように改善されました
「次世代フォーマットでの画像の配信」項目が消えました。尚、画像サイズも若干修正したので、「適切なサイズの画像」項目も改善されています。
レンダリングを妨げるリソースの除外についても後日調べて改善してみたいと思います。
画像サイズ
SEO(画像表示速度)的に適切な画像サイズを下記に記述しておきます。
画像の種類 | サイズ |
---|---|
メインビジュアル | 横幅 1280px(PC)縦幅 〜720px程度まで |
横幅 640px(SP) 縦幅 〜960px程度まで | |
ヘッダーロゴ | 600×135px |
アイキャッチ | 1200×630px |
サイトアイコン | 512×512px |
NO IMAGE | 1200×630px |
OGP | 1200×630px |
コンテンツヘッダー | 横幅 1280px |
上記は、あくまでもSEO的な画像サイズです。各サイトのコンセプトによりますが、ズームアップしても綺麗な画像を提供したいのなら、画像サイズは適切に変更してください。
コード修正
追記です。いちいちconvertディレクトリに移動するのが面倒になったので、コードの修正と、関数の外部書き出しを行います。
まず、.zshrcの中に記述してあるconvert_to_webp関数は、削除してください。
次に、ホームディレクトリ直下にmy_scriptsディレクトリを作成します。
mkdir ~/my_scripts
その中に、convert_to_webp.shファイルを作成します。
vim ~/my_scripts/convert_to_webp.sh
その中に、下記のコードを記述します
#!/usr/bin/env zsh
# ワイルドカードが何にもマッチしない場合にエラーを無視する
setopt local_options nullglob
# 入力と出力ディレクトリを変数で定義
local input_dir="/Users/[ユーザーディレクトリ]/Downloads"
local output_dir="/Users/[ユーザーディレクトリ]/Downloads/webp"
local images_dir="/Users/[ユーザーディレクトリ]/Downloads/images" # webpと同じ階層に設定
# 出力ディレクトリとimagesディレクトリが存在しない場合は作成
mkdir -p "$output_dir"
mkdir -p "$images_dir"
# 入力ディレクトリに移動
cd "$input_dir" || return 1
# .jpg, .jpeg, .pngファイルだけを対象とする
for file in *.jpg *.jpeg *.png; do
# ファイルが存在するか確認
[ -e "$file" ] || continue
# 出力ファイル名を決定(拡張子を.webpに)
local output="${file%.*}.webp"
# cwebpで変換、圧縮率を60%に設定
cwebp -q 60 "$file" -o "$output_dir/$output"
# 変換後のオリジナルファイルをimagesディレクトリに移動
mv "$file" "$images_dir/"
done
# デフォルトのディレクトリ(通常はホームディレクトリ)に移動
cd ~
Downloadsディレクトリ内にある全ての画像ファイル(jpg,jpeg,png)をWebPに変換し、念のため元のファイルは、webpディレクトリと同じ階層にあるimagesに移動するように修正しました。
次に、このファイルに実行権限を与えます
chmod +x ~/my_scripts/convert_to_webp.sh
このコマンドをどこからでも使えるようにパスを通します。~/.zshrcファイルの中に下記を追加記述します。
export PATH="$HOME/my_scripts:$PATH"
ターミナルを再起動するか、下記を実行します。
source ~/.zshrc
試しに、Downloadsディレクトリに画像(jpg,jpeg,png)をダウンロードしてから、下記コマンドをターミナルで実行してみてください。
convert_to_webp
きちんと、Downloadsディレクトリから画像が消え、Downloas/webpにWebpフォーマットの画像が生成されれば、大丈夫です。
前回は、簡略化して、.zshrcの中に関数を記述しましたが、本来的にはこちらの記述方法が正しいと思います。
スクリーンショットの保存先変更
スクリーンショットの画像をブログの画像として使うことも多いので、スクリーンショットの保存先もDownloadsに変更します。
- コマンド+Shift+5でスクリーンショットを起動
- オプションをクリック
- その他の場所をクリック
- Downloadsディレクトリを開いて、選択をクリック
- 次回以降のスクリーンショットの保存先がDownloadsディレクトリになります。
これで、スクリーンショットの画像もWebPに変換されますので、変換忘れがなくなります。
コメント