ウェブサイトの表示速度は、ユーザーエクスペリエンスを左右する重要な要素です。
特に画像のファイルサイズが大きすぎると、読み込み時間が長くなり、ストレスを感じさせてしまいます。
そこでおすすめなのが、WebP画像形式への変換です。
WebP形式は、画質を維持しつつファイルサイズを大幅に削減できるため、サイトの高速化に大きく貢献します。
この記事を読み終わる頃には、あなたのウェブサイトがより快適に閲覧できるようになっているはずです！
早速WebP形式への変換方法を確認し、最適化に取り組んでみましょう！
この記事を書いた人！
WebP形式とは
WebP形式は、GoogleがPNG形式やJPEG形式に代わるものとして開発した画像形式です。
WebP形式の最大の特徴は、同等の画質を保ちつつ、ファイルサイズを大幅に削減できることです。
ウェブサイトの表示速度を向上させるためには、画像の最適化が欠かせません。
WebPに変換することで、サイトの読み込み時間を短縮し、ユーザーエクスペリエンスを改善することができるでしょう。
spa早速WebP形式への変換を実践してみましょう！
動作環境
動作環境は以下の通りです。
- Windows 11 23H2
- FFmpeg version 6.0
事前準備
事前準備として以下を済ませているものとします。
- FFmpegのインストール
- FFmpegのPATH設定
WebPに変換するコードの紹介
まず、以下のコードを使ってバッチファイルを作成します。
@echo off
REM コードページをUTF-8に設定
chcp 65001
setlocal enabledelayedexpansion
REM 圧縮品質を設定(0-100)
set quality=60
REM ドロップされたファイルの数を取得
set count=0
for %%A in (%*) do set /a count+=1
REM ファイルがない場合は終了
if %count% equ 0 (
echo ファイルがドロップされませんでした
pause
exit /b
)
REM ドロップされたファイルをループして処理
for %%A in (%*) do (
set "input=%%~fA"
set "extension=%%~xA"
REM 画像ファイルのみ処理
if /i "!extension!" neq ".webp" (
REM 出力ファイル名を設定
set "output=%%~dpnA.webp"
REM FFmpegで変換と圧縮
ffmpeg -i "!input!" -c:v libwebp -quality !quality! "!output!"
echo 変換・圧縮が完了しました
) else (
echo 非対象のファイル形式です
)
)
pause
exit /bこのバッチファイルを使えば、変換したい画像をドラッグアンドドロップするだけで、簡単にWebP形式に変換することができます。
spaこのバッチファイルであれば、複数の画像を一度に変換できるので、作業効率が大幅に向上するよ！
圧縮品質を調整
REM 圧縮品質を設定(0-100)
set quality=60バッチファイルのコード内には、「quality」という変数があります。
この変数で、WebP形式に変換する際の圧縮品質を指定することができます。
数値が小さいほど圧縮率が高くなり、ファイルサイズは小さくなりますが、画質は劣化してしまいます。
一方、数値が大きいほど圧縮率は低くなり、ファイルサイズは大きくなりますが、画質は保たれます。
用途に応じて適切な値を設定し、最適なバランスを見つけることが重要です。
spa試行錯誤を繰り返し、ベストな設定を探そう！
WebPに変換するコードの解説
バッチファイルの処理は主に以下の3つです。
- コードページをUTF-8に設定
- ドロップされたファイルの数を取得
- ファイルをループしてWebP変換と圧縮
この3点について、詳しく見ていきましょう！
コードページをUTF-8に設定
REM コードページをUTF-8に設定
chcp 65001バッチファイルでは、コンソールに日本語を出力しています。
そのため、最初にコードページをUTF-8に設定しています。
これにより、日本語が正しく表示されるようになり、コンソールの出力が読みやすくなります。
ドロップされたファイルの数を取得
REM ドロップされたファイルの数を取得
set count=0
for %%A in (%*) do set /a count+=1
REM ファイルがない場合は終了
if %count% equ 0 (
echo ファイルがドロップされませんでした
pause
exit /b
)バッチファイルは、ドラッグアンドドロップされたファイルの数を取得し、その数だけ処理を行うようになっています。
これにより、一度に複数の画像を変換することができ、作業効率が大幅に向上します。
ただし、ファイルがドロップされなかった場合は、エラーメッセージを表示して処理を終了するので注意してください。
ファイルをループしてWebP変換と圧縮
REM ドロップされたファイルをループして処理
for %%A in (%*) do (
set "input=%%~fA"
set "extension=%%~xA"
REM 画像ファイルのみ処理
if /i "!extension!" neq ".webp" (
REM 出力ファイル名を設定
set "output=%%~dpnA.webp"
REM FFmpegで変換と圧縮
ffmpeg -i "!input!" -c:v libwebp -quality !quality! "!output!"
echo 変換・圧縮が完了しました
) else (
echo 非対象のファイル形式です
)
)バッチファイルは、ドロップされた画像ファイルを1つずつ処理していきます。
出力されるファイル名は、元の画像ファイル名の拡張子をWebPに変更したものになります。
例えば、「image.png」を変換すると、「image.webp」という名前のファイルが出力されます。
変換と圧縮には、FFmpegというコマンドラインツールを使用しています。
FFmpegは、動画や音声の処理に広く使われているツールですが、画像の変換にも対応しています。
バッチファイルでは、FFmpegを使ってWebP形式への変換と、指定された品質での圧縮を行っています。
また、画像ファイル以外がドロップされた場合は、エラーメッセージを表示して処理をスキップするので安心ですね！
変換と圧縮が完了すると、元の画像と同じ場所にWebP画像が出力されます。
spaこれで一連の処理が完了したよ！
【まとめ】WebP形式への変換でサイト表示速度アップ!
ここまで読んでいただきありがとうございます!
この記事では、WebP形式への変換により、ウェブサイトの表示速度を向上させる方法について解説しました。
この記事のポイントをおさらいしましょう。
- WebP形式はファイルサイズが小さい
- 画質維持しながら圧縮可能
- FFmpegとバッチファイルでWebP変換が手軽で簡単
以上のポイントを踏まえれば、あなたのサイトでもWebP形式への変換を実践し、表示速度の改善を図ることができるでしょう。
ユーザーエクスペリエンスの向上は、ウェブサイト運営の要です。
WebP形式の活用は、その一助となるに違いありません。早速最適化に取り組み、快適なサイト体験を提供してみてはいかがでしょうか。
