Web制作者必見！ImageMagickで画像を最適化する方法【容量削減・SEO対策】

はじめに

Webサイトの表示速度は、ユーザーエクスペリエンスだけでなく、SEOにも大きく影響します。

Googleは、Core Web Vitalsという指標でサイトの表示速度を評価しており、ページの読み込み速度が遅いサイトは検索順位が下がる可能性があります。

画像の最適化は、Webサイトの表示速度を改善するための重要な要素の一つです。

しかし、画像を一枚一枚手作業で最適化するのは大変な作業です。

そこで今回は、コマンドラインツール「ImageMagick」を使って、画像を一括で最適化する方法を紹介します。

ImageMagickを使えば、画像のサイズ変更、フォーマット変換、圧縮などを簡単に行うことができます。

この記事では、ImageMagickの基本的な使い方から、Webサイトの表示速度向上に役立つ実践的なテクニックまで解説します。

ぜひ最後まで読んで、ImageMagickをマスターしてください！

対象者

Homebrew入ってるMacユーザー
またはWindowsなどでUbuntuを使っているユーザー

インストール

・Mac

brew install imagemagick

・Ubuntu/Devian

sudo apt-get install imagemagick

インストールできたか確認

convert -version

インストール成功できていれば以下のような表示が出る。

ImageMagick 7.1.1-41 Q16-HDRI aarch64 22504 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP
Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png ps raw tiff webp xml zlib zstd
Compiler: clang (16.0.0)

コマンド類

・ディレクトリ内のarwを一括フォーマット

mogrify -format jpg /path/to/directory/*.ARW

または、対象ディレクトリに移動してから

mogrify -format jpg *.ARW

mogrify -format png *.ARW

mogrify -format webp *.ARW

オプション -quality

画質を劣化させるが、大幅に軽量化できる。
80%の画質に圧縮する場合

mogrify -format webp -quality 80 *.arw

オプション2 -lossless

webp変換時のみ、-losslessを使える
画質を劣化させずに軽量化できる。

mogrify -format webp -lossless *.ARW

サイズ変更

・縦横比を維持したまま、幅を512px以下に統一

mogrify -resize 512> *.jpg

・縦横比を維持したまま、高さを512px以下に統一

mogrify -resize x512< *.jpg