WordPressで画像を軽量化するために行っている4つのこと

サーバーなどの根本的な部分を除けば、「サイトの軽量化は画像にあり」と言っても過言ではありません。

参考になるかどうかは見た人に委ねるとして、今回はブログを投稿する際に、どのようにして画像の負担を少なくしているのかを紹介したいと思います。

軽量化はダウンロード時から始まっている

まず画像はサイトの横幅・縦幅に見合ったものをダウンロードしましょう。このブログの場合は横幅は大体650pxぐらいだったと思うので、ダウンロードするサイズもそこに収まるようにしています。

screenshot_565-min

「大きいほど良い」という短絡的な考えで巨大サイズの画像をダウンロードしても、サイトで表示するときに縮小されるのだったら無意味です。負荷にしかならないので、画像サイズは適切なものを選びます。

必要に応じてサイズを最適化させる

中にはサイズが一種類しかなく、好みのサイズではない場合もあると思います。そういう場合は少し面倒ですが、ツールを使ってサイズを変更しています。

最近使用しているのは、「CubeImage Resize」というツールです。複数の画像を指定したサイズに一括変換できるので重宝しています。

screenshot_567-min

画像を圧縮する

画像が用意できたら、そのままサーバーにアップロードはせずに、画像を圧縮してくれるサイトを経由してからアップロードしています。

愛用のサイトは「Optimizilla」。JPEGとPNGの両方に対応していますし、一度に20個までの圧縮に対応しています。圧縮率は自由に変更できるので、やろうと思えば容量90%削減ということもできます。ただ画質がめちゃくちゃになるので、基本的にはデフォルトがいいですね。

screenshot_566-min (1)

またこの工程以外に、プラグインでも画像の処理を行っています。「EWWW Image Optimizer」というプラグインを使用していますが、アップロードした画像を自動で圧縮してくれる他に、今までにアップロードした画像全ても圧縮することができるという万能ツールです。

個人的には、JPGのEXIF情報を自動削除してくれる機能が重宝しています。

記事内の画像表示を遅延させる

サイトの画像表示に敢えて遅延を発生させることで、ページの読み込みをスムーズにしてくれます。プラグインを使用するのが便利です。僕は「Unveil Lazy Load」というプラグインを使用しています。

画像が設置してある場所にスクロールされた時点で表示されるのでページに負担が少ないですし、見た目も少しお洒落なのが気に入っています。

まとめ

その他だと、ファイル形式は基本的にJPEGを使用したり、シンプルな画像(色などがゴチャゴチャしていないもの)を中心に選ぶことも、地味ですが大切です。

一番は画像を使用しないことなのかもしれませんが、記事内の画像は読者の休憩ポイントとなったり、文章をわかりやすくするサポート的な効果があったりと便利なので、上手に使用していきたいですね。

SNSでもご購読できます。