WordPressでサイトを運営することで最も気をつけなければならないことの1つはサイトスピードだと思う。何も対策しなければ途方もなく重いサイトが出来上がってしまうから注意しないといけない訳だ。そして、それを決定づける大きな要素が画像サイズである。おそらく、初心者であれば画像をそのままアップロードしている場合があるかもしれない。もしそうであれば今日から画像を圧縮してアップロードすることをオススメする。というか、悪いこと言わないからしたほうが良い。
ただ、画像の圧縮と言っても様々な方法や順序があるのでこの記事ではできるだけ画質を落とさずに圧縮する方法について解説していきたいと思う。私事だが、このホームページを開設して約1ヶ月が経過した。今までに制作した写真や絵などの作品はバラバラに管理していたのでWebサイトにまとめることにしたのだが、その過程で画像の重さと向き合ってきた。 その際の大まかな作業の手順についても書きとめていきたいと思う。
今までの作品の保管状況について
まず、私が自前のWebサイトを作ろうと思ったのは作品を見せる場としてちゃんとしたスペースが欲しかったというのが1番の理由だ。それからWordPressを立ち上げたのだが、Webサイトについて調べるうちにいろいろ詰め込んでしまい肝心のギャラリーは後回しになっていた。今回ようやく公開にこぎつけたのですが、それまでは下記のサービスを利用していた。
- 写真：blogger （Googleのブログサービス)
- イラスト、絵：Instagram
といったように何となくで作品を公開しており何の脈絡もない、趣味感が溢れるページとなっていた。上記のサービスは非常に便利だが、その反面カスタマイズが出来ないので統一感に乏しい。
趣味でやるのなら問題ないかもしれないが、作品が多くなるほど見せ方も考えなければと思う。また、ジャンルによってページを分けないと雑多な印象になってしまう。WordPressの場合は自分の好きなようにカスタマイズできるので、ジャンルごとにページ分けが可能だ。また、背景の設置方法によっても驚くほど作品の見え方も違ってくる。
作品を移行させる手順について
作品をWebサイトに載せる上で大切なことはデータ量を少なくすることだ。
初期の内は画像の枚数も少なく、ページの読み込みも問題ないと思う。しかし、必ず画像は増えていくからデータサイズが大きければそれだけページの読み込み速度も低下する。どれだけ素晴らしい作品を載せていたとしても、いつまで経っても表示されなければ意味はない。すぐに閲覧者は離脱してしまう。
下記のリンクにURLをコピペすればページスピードを計測できる。
では、1枚の写真をベースにどれだけデータ量が少なくなっていくかを順を追って確認していこう。
今回は猫の画像をサンプルとして用意した。
一眼レフで撮影した画像だが、下記のとおり、Webサイトにアップするには馬鹿みたいにサイズが大きすぎる。
- サイズ：15.8MB
- 大きさ：5069 x 3390
なので、この画像の画質をできるだけ落とさずにサイズだけ小さくしていく。
- 作品の仕分け
- 画像サイズの統一、修正
- 画像の圧縮
- WordPressへアップロード（ewww image optimizer）
1. 作品の仕分け
作品を移行させるにあたり、まずはジャンル分けをする必要がある。Webサイトに載せたいデータをデスクトップでフォルダに振り分けよう。この作業は後からでもいいが、オリジナルデータを残したい場合はごちゃごちゃしてくるので作品を取捨選択する意味も含めて先に済ませておくと良い。
2. 画像サイズの統一、修正
次に画像サイズを統一していく。基本的にこのサイトの画像の長辺は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%の削減率である。ただし、これで終わりではない。まだまだ小さくしていこう。
3. 画像の圧縮
上述したリサイズでWebサイトにアップロードするには問題ない程度の大きさになった。しかし、1度に何枚も画像を表示させるのであれば画像サイズは小さいに越したことはない。そこで活躍するのがTinyPNGというツールだ。
このTinyPNGを使うことにより、驚くほど画像サイズを小さくすることが可能になる。しかも、ほとんど画質は変わらない。ただし、よく見れば若干ですが画質の劣化は否めない。細部まで見せる必要のある作品の場合は圧縮のプロセスは飛ばしてもいいかなと思う。
どれくらい圧縮されたかというと。。
なんと、75%もコンパクトになった。結果的に最初の画像の段階から比べると、約99%のデータサイズ削減に成功。
つまり1枚のオリジナル画像のサイズは、78枚の圧縮した画像のサイズと同じということになる訳ね。恐ろしい。これで下準備は終わり。次にWordPressに画像をアップロードしていく。
4. WordPressへアップロード（ewww image optimizer）
アップロードの段階でも更にサイズを圧縮することが可能だ。ここでは「ewww image optimizer」というプラグインを使う。各種設定を済ませるだけで、自動的に画像を圧縮してくれる優れものである。
削減率はTinyPNGほどではないがWebサイトは後々「チリツモ」が重要になってくる。以前にアップロードした画像も一括で圧縮できるので、後から導入しても大した手間は掛からない。まだインストールしてない方は是非。
※現在、私はこちらのプラグインを使用していない。理由としては下記のサイトで指摘されているように画像をアップロードできない不具合があるからだ（使用テーマはSWELL）。
あとがき
これで画像をいかに小さくできるかが分かってもらえたかと思う。逆に何も知らずにオリジナル画像を上げ続けていると後からページスピードが重いことで離脱率が上がり、大変な手間と労力をもって画像の総入れ替えに臨まなければならない。一度上げた画像は記事ごとに入れ替えする必要があり、とても大変だ。幸いにも私は記事数が少なかったこともあって作業時間は1日も掛からなかったが、もし100記事も投稿していたとなれば手間を考えるだけで恐ろしいわ。
サイトを見る限りでは表に表れない、非常に地味なポイントだが、「塵も積もれば山となる」ということわざを胸にサイト運営に勤んでいきたいものである。