WordPressブログサイトでの最適な写真サイズとプラグイン設定

アフィリエイト
fotografierende / Pixabay

ブログサイトを運営している上で、写真サイズをどうすればいいのか考えてみました。

なぜ、写真サイズを考えることになったかと言うと、

  1. 写真サイズが大きいと表示に時間がかかる
  2. 表示に時間がかかるとGoogleからの評価が悪くなる
  3. 写真はiPhone撮影メインなので一眼ほどの画質は求めてない

あたりのことを解決しようと思ったから。

スポンサーリンク

写真サイズはどうすればいいのか

結論としては各WordPressテーマのPC表示時の横幅に合わせる、ということになりました。

写真が大きくても自動的に表示時はテーマ横幅に合わせてくれるので、一見何の問題もなさそうに思えます。

高解像度の写真を掲載していれば詳細な情報を表示できますが、そもそも一眼レフで動きのある動物や風景を撮影している訳ではありません。

写真の用途としては、あくまで画像を挿入することで、文字だけでは伝わりにくい部分を補完しています。たとえば、何かの商品レビューでそこまで細かい情報が必要な場合は少ないでしょう。

ゆえに、WordPressテーマの横幅分の画像サイズにすれば、少なくとも伝えたいイメージとしては十分だろうと考えたわけです。

CoCoonテーマの場合、PCでの表示カラムは790ピクセルでした。

ちょっと790ピクセルという幅は画像サイズとして設定するのは中途半端な感じがしたのと、今後は800ピクセルまで広がる可能性も考慮して、800*600ピクセルを基本とすることに決定。

写真サイズをどこで変更するか

iPhoneで撮影した写真サイズを確認するとデフォルトサイズが4032*3024で、だいたい1.2Mbyte前後。

このままアップしてもそこまで重いとは感じないでしょうが、Google Analiticsによると全てのサイトで半分以上がスマホでのアクセスである。

つまり、

画像は軽くて表示が速い方が情報が多いことよりも大切

ということである。

スマホ側で画像サイズを変更する

iPhoneには画像サイズを一括で変更できるアプリがあります。

‎バッチリサイズ2
‎前作のバッチリサイズをiOS9用にリニューアルして一層使いやすくなりました。 バッチリサイズ2は、複数の写真をまとめてリサイズしたり、正方形に切り取ったり、回転することができるアプリです。選択した写真をまとめて削除も可能です。 リサイズした写真はカメラロールやDropboxに保存したり、メールで送信することができま...

この「バッチリサイズ2」を使って写真の幅を変更すると、自動的にファイルサイズも小さくなります。

写真サイズを800*600などに変更してからWordPress管理画面でアップロードすれば、テーマ幅に合ったものなります。

WordPressのImsanityプラグインで対応する

WordPressにはアップロードされた画像のサイズを自動で変更するプラグインがあります。

Imsanity
Imsanity は巨大な画像のアップロードを自動的にサイズ変更します。投稿者は巨大な写真をアップロードしていますか? 手動スケーリングに疲れましたか? 不満への救済です!

Imsanityをインストール後、設定画面でアップロード時の画像最大サイズを設定します。

CoCoonテーマの幅に合わせるので800*600に設定しました。

また、Imsanityプラグインには、過去にアップロード済みの画像サイズも一括して変更できます。

やってみると、自分ではちゃんと縮小してからアップしたつもりだったのが、忘れていて大きいサイズのママだったことが分かりました。

Imsanityプラグインを導入後、iPhoneのWordPressアプリから写真を縮小せずにアップしましたが、無事に800*600サイズに変更され てファイルサイズも小さくなっていました。

‎WordPress
‎iOS 端末から WordPress ブログとサイトを管理または作成しましょう。投稿やページの作成と編集、お気に入りの写真と動画のアップロード、統計の表示、コメントへの返信が可能です。 WordPress for iOS を使えばスマートフォンから投稿を公開できます。くつろぎながら、頭に浮かんだ言葉をさっと下書きで...

 

EWWW Image Optimizerプラグインで画像を圧縮する

Imsanityプラグインで画像サイズを自動縮小してくれるようになりました。

さらにEWWW Image Optimizerプラグインを導入すると、画像自体を自動圧縮してファイルサイズを小さくしてくれます。

EWWW Image Optimizer
Speed up your website to better connect with your visitors. Properly compress and size/scale images. Includes lazy load and WebP convert.

インストール後、特に設定を変更する必要はありません。

というか、ほとんどがいつの間にか有料オプションになってしまいましたが、だいたい20%くらいは圧縮してくれるようです。

 

まとめ

iPhone側でファイルサイズを変更するのは忘れそうなので、WordPress側のプラグインを使うことで自動縮小することにしました。

写真を撮影し、そのままiPhoneのWordPressアプリで下書きと写真アップロードを同時に行い、微修正をPCで実施する。

この手順が最も手間が掛からない方法かと思います。

タイトルとURLをコピーしました