ワードプレスでサイトを運営することで最も気をつけなければならないことの1つはサイトスピードだと思います。それを決定づける大きな要素が画像サイズです。
おそらく、初心者の方であれば画像をそのままアップロードしている場合があるかもしれません。もしそうであれば今日から画像を圧縮してアップロードすることをオススメします。
ただ、画像の圧縮と言っても様々な方法や順序があるのでこの記事ではできるだけ画質を落とさずに圧縮する方法について解説していきたいと思います。
私事ですが、このホームページを開設して約1ヶ月が経過しました。今までに制作した写真や絵などの作品はバラバラに管理していたのでwebサイトにまとめることにしたのですが、その過程で画像の重さと向き合ってきました。
その際の大まかな作業の手順についても書きとめていきたいと思います。
今までの作品の保管状況について。
まず、私が自前のwebサイトを作ろうと思ったのは作品を見せる場としてちゃんとしたスペースが欲しかったというのが1番の理由です。それからWordPressを立ち上げたのですが、webサイトについて調べるうちにいろいろ詰め込んでしまい肝心のギャラリーは後回しになっていました。
今回ようやく公開にこぎつけたのですが、それまでは下記のサービスを利用していました。
- 写真：blogger （Googleのブログサービス)
- イラスト、絵：instagram
といったように何となくで作品を公開しており何の脈絡もない、趣味感が溢れるページとなっていました。上記のサービスは非常に便利ですが、その反面カスタマイズが出来ないので統一感に乏しいです。
一応載せておきます。
趣味でやるのなら問題ないかもしれませんが、作品が多くなるほど見せ方も考えなければと思います。また、ジャンルによってページを分けないと雑多な印象になってしまいます。
ワードプレスの場合は自分の好きなようにカスタマイズできるので、ジャンルごとにページ分けが可能です。また、背景の設置方法によっても驚くほど作品の見え方も違ってきます。実際に固定ページにまとめたのが下記のリンクです。
作品を移行させる手順について。
作品をwebサイトに載せる上で大切なことはデータ量を少なくすることです。
初期の内は画像の枚数も少なく、ページの読み込みも問題ないと思います。しかし、必ず画像は増えていきますからデータサイズが大きければそれだけページの読み込み速度も低下します。どれだけ素晴らしい作品を載せていたとしても、いつまで経っても表示されなければ意味はありません。すぐに閲覧者は離脱してしまいます。
下記のリンクにURLをコピペすればページスピードを計測できます。
では、1枚の写真をベースにどれだけデータ量が少なくなっていくかを順を追って確認していきましょう。
今回は猫の画像をサンプルとして用意しました。
一眼レフで撮影した画像ですが、下記のとおり、webサイトにアップするにはサイズが大きすぎます
- サイズ：15.8MB
- 大きさ：5069 x 3390
なので、この画像の画質をできるだけ落とさずにサイズだけ小さくしていきます。
- 作品の仕分け
- 画像サイズの統一、修正
- 画像の圧縮
- WordPressへアップロード（ewww image optimizer）
①：作品の仕分け。
作品を移行させるにあたり、まずはジャンル分けをする必要があります。webサイトに載せたいデータをデスクトップでフォルダに振り分けましょう。
この作業は後からでもいいですが、オリジナルデータを残したい場合はごちゃごちゃしてくるので作品を取捨選択する意味も含めて先に済ませておくと良いです。
②：画像サイズの統一、修正。
次に画像サイズを統一していきます。
基本的にこのサイトの画像の長辺は1,200pxで統一してます。初めはどの大きさにすればいいのか分からずに違うサイズをそれぞれアップロードして比べてみました。
結果として1,200pxだと画面いっぱいに表示してもぼやけることがなく、汎用性が高いという結論に至りました（デスクトップの大きさにもよります）。
ただ、これはギャラリーとしてアップロードする場合の数値であって、ブログ用の画像でしたらまだ小さくてもOKです。簡単なのは有名ブロガーの画像を保存してみてサイズを真似することです。その際はサイトの構成が似ているサイト（1カラムか2カラム）を選びましょう。
さて、サイズを変更していきますがそれにはツールが必要です。私はAdobeのLightroomを使っています。
Lightroomが優れているところは一括で画像の編集ができることです。今回はリサイズに焦点を当てているのでこの話はまた別の機会に:)。
上の画像の通り、長辺を1,200pxに設定してください。そして、詳細設定では「著作者情報のみ」を選択します。
これをしないとEXIF情報といって撮影日や撮影場所が第三者に知られてしまいます（そういったツールがある）。大したことはないかもしれませんが、一応セキュリティ対策としてやっておけば安心です。
ただ上記で説明したLightroomは有料（月980円-）ですのでもし無料で使いたいのであれば、iLoveIMGがオススメです。画像のリサイズだけでなく、切り抜きや透かし画像など便利な機能がついています。
この時点での画像のサイズをリサイズ前のデータ量と比べてみましょう。
- サイズ：15.8MB→795KB
- 大きさ：5069 x 3390→1200 x 803
およそ95%の削減率です。ただし、これで終わりではありません。まだまだ小さくしていきますよ！
③：画像の圧縮。
上述したリサイズでwebサイトにアップロードするには問題ない程度の大きさになりました。しかし、１度に何枚も画像を表示させるのであれば画像サイズは小さいに越したことはないです。
そこで活躍するのがTinyPNGというツールになります。
このTinyPNGを使うことにより、驚くほど画像サイズを小さくすることが可能です。しかも、ほとんど画質は変わりません。ただし、よく見れば若干ですが画質の劣化は否めませんが。細部まで見せる必要のある作品の場合は圧縮のプロセスは飛ばしてもいいかなと思います。
どれくらい圧縮されたかというと。。
なんと、75%もコンパクトになりました！
結果的に最初の画像の段階から比べると、約99%のデータサイズ削減に成功しました。
つまり1枚のオリジナル画像のサイズは、78枚の圧縮した画像のサイズと同じということになります。恐ろしや。。
これで下準備は終わりです。次にWordPressに画像をアップロードしていきます。
④：WordPressへアップロード（ewww image optimizer）。
アップロードの段階でも更にサイズを圧縮することが可能です。
「ewww image optimizer」というプラグインを使います。各種設定を済ませるだけで、自動的に画像を圧縮してくれる優れものです。
削減率はTinyPNGほどではありませんがwebサイトは後々「チリツモ」が重要になってきます。以前にアップロードした画像も一括で圧縮できるので、後から導入しても大した手間は掛かりません。
まだインストールしてない方は是非。
※現在、私はこちらのプラグインを使用しておりません。理由としては下記のサイトで指摘されているように画像をアップロードできない不具合があるからです（使用テーマはSWELL）。
あとがき。
これで画像をいかに小さくできるかが分かってもらえたかと思います。逆に何も知らずにオリジナル画像を上げ続けていると後からページスピードが重いことで離脱率が上がり、大変な手間と労力をもって画像の総入れ替えに臨まなければなりません。
一度上げた画像は記事ごとに入れ替えする必要があり、とても大変です。幸いにも私は記事数が少なかったこともあって作業時間は1日も掛からなかったですが、もし100記事も投稿していたとなれば手間を考えるだけで恐ろしいですね。。
サイトを見る限りでは表に表れない、非常に地味なポイントですが、「塵も積もれば山となる」ということわざを胸にサイト運営に勤んでいきたいものです。