Wordpressでの画像最適化方法、プラグインの安易な利用には注意

2017-09-14

最近はGoogleのPageSpeed Insightsを使ってサイトの表示速度を確認している方も多いかと思います。
そんな中、気になる警告の一つに「画像を最適化する」があります。

「Wordpress + 画像最適化」とかで調べると良く出てくるのが「EWWW Image Optimizer」を使った最適化の方法。
これはこれで良いのですが、思った以上に画質が劣化したり(劣化させない場合はそこまで小さくならない)、実際に何をやっているかはわからないので、最初からプラグインに頼らなくて済む方法を書いておきます。

プラグインが悪いというわけではないですが、「よくわからないけどプラグイン突っ込んでおけばOK」というのはあんまりお勧めできません。

サムネイルに合わせたサイズの画像を追加する

WordPressでは、メディアに画像をアップロードしたタイミングで、複数のサイズの画像が生成されます。
この時に、一覧画面のサムネイルなど、比較的小さいサイズで利用する画像を同時に生成しておくと、その際に利用する画像の容量節約につながります。

ということでadd_image_size(‘画像サイズ名’, ‘width’, ‘height’)を追加。

↑では省略していますが、add_image_sizeの第四引数にはboolean型のtrueかfalseが設定可能。trueを設定するとハードクロップ(画像をそのサイズで切り抜く)、falseを設定するとソフトプロポーショナル(サイズに合わせて縮小)。デフォルトは(設定しなければ)falseです。

また、ソフトプロポーショナル時には縦横比率が固定されるため(当たり前ですが)、上の条件であれば横長の画像は横幅200px、縦幅はそれに合わせた高さ、縦長の画像は縦幅150px横幅はそれに合わせた幅になります。なので、縦横比の心配は無用。

※add_image_sizeが記載された状態でアップロードされた画像のみ、そのサイズの画像が生成されます。最初にやっておきましょう。

画像を自分で圧縮する

コマンドでもオンライン圧縮ツール利用でも構いませんが、フリーソフトにも出来が良いソフトがあるので、そっちを使ったほうが楽です。

Ralpha Image Resizer – Nilposoft

個人的にお勧めなのはこれ。Ralpha。しっかり圧縮できるし劣化も少ない、何より圧縮速度が速い。

以下Ralphaの設定。
一般的なサイトであれば、透過pngを使わない限りはほぼjpgだと思うので、jpg向けに設定を行います。

設定→JPEG設定
品質：任意(おすすめは劣化が分かりにくく、サイズもしっかり落ちる80)
Exif情報を保持する：チェック外す
常に再圧縮する：チェック

常に再圧縮にチェックを入れる理由は、すでに超高品質で圧縮済のjpgであってもサイズをキッチリ落とすため。フリー画像とかを使っている人はチェック必須。
あとは、他のフォーマットをjpgにする際には、フォーマット変換設定を調整すればOK。

縦長、横長共にmaxのピクセル数を決めておいて、幅、または高さを設定して圧縮しましょう。サイズそのままの場合は、比率で100％を選ぶ。

WordPressの画像圧縮を止める

画像は圧縮してからアップロードする前提なので、Wordpress側には圧縮回避のためのフックを追記。

これでWordpress側での勝手な圧縮が行われなくなります。

画像表示部分の調整

折角小さな画像を作成できるようにしても、利用する画像がlargeだったりfullだったりすると大惨事。
横200pxしかないサムネイルに1024pxのフルサイズを表示したりすると相当にギガが減ります。

ということで表示部分を見直しましょう。

テーマによって書き方が異なるため一例ですが、例えばthe_post()後であれば

みたいな感じで、さっき追加したサイズの画像を取得出来ます。

めんどくさい方、テーマ変更でサムネイルのサイズが変わった方

あきらめてプラグイン使ってください。

私はプラグイン使った結果が気に入らなくて全部手動で対応したことがありますが、面倒な方は

1.add_image_size追加
2.「Regenerate Thumbnails」で画像再生成
3.「EWWW Image Optimizer」で画像圧縮

でも、PageSpeed Insightsの点数は確実に上がります。

関連記事