ブログで使う写真のサイズを小さくする方法

ブログに写真は欠かせませんね、でも写真ファイルは大きいため表示に時間がかかります。

表示に時間がかかると、読者さんは面倒で見てくれず、Googleからの評価も上がりません(>_<)

写真サイズはどんどん巨大化

ぢぃちゃん使用のカメラはiPhoneXRで、初期設定の4032×3024ピクセル
他のアプリで使用する機会が多いので、ファイル形式はJPEGに変更してあります。

写真1枚のサイズは約2メガバイト、このままでは一枚の写真を表示するのにもかなりの時間がかかります。

何枚も使っていたら、その枚数分の時間がかかってしまうわけです。

先日、大嘗宮を見に行った時の写真を例に見てみましょう。

写真が軽ければ表示速度は速くなる

当たり前のことですが、サイズが小さければ小さいほど表示されるスピードは速くなります。

また、サーバーの容量も無限ではないので、できる限り写真は小さくしましょう!

写真特化サイトでなければ、表示速度優先で

かなりサイズを圧縮してもオリジナルとの違いは判らないと思います。

また、メディアの設定でブログの記事内に表示されるサイズは最大でも横幅680ピクセルなので、それ以上の大きさの写真は必要ないのです。

写真圧縮おすすめ2選

ぢぃちゃんおすすめの2つの圧縮方法をご紹介します。

オリジナル 2,078,163byte(1.98MB)

オリジナルサイズですが、WordPressにアップロードしただけで、 4032×3024から2560×1920にリサイズされて、ファイルの大きさもかなり小さくなっています。

TinyPNG

パンダで有名なTinyPNG
利用方法は簡単で、手持ちの写真をWebサイトにドラッグ&ドロップするだけです。

今回の写真は68%圧縮されて、669KBまで小さくなりました。

TinyPNG 669,519byte(653KB)

これもリサイズされますが、ファイルの大きさはあまり小さくなっていません。

手間を考えると、オリジナルを直接WordPressにアップロードしても、ほとんど差がありません。

これは、比べるまで分かりませんでしたので、ぢぃちゃんもお勉強になりました(^_-)-☆

AffinityPhoto

これは有料のアプリケーションになりますが、ぢぃちゃんお気に入りのAffinityPhotoで圧縮してみます。

出力をJPEGにして、横のサイズをWordPressに合わせて680ピクセルにします。
縦横比は固定していますので、縦は510ピクセルになります。

画像の品質をそのままで、680ピクセルにするだけで397KBまで小さくなります。

AffinityPhoto 406,600byte(397KB)

これは、サイズがあまり大きくないので、アップロードしてもあまり変わりません。

表示されたサイズは?

ブログに表示された写真をダウンロードしてサイズを確認してみましょう。
方法は画像を右クリックしPCにダウンロードして、サイズを確認します。

オリジナルTinyPNGAffinityPhoto
元サイズ 4032×3024
1.98MB
4032×3024
635KB
680×510
397KB
アップロード後のサイズ 2560×1920
616KB
2560×1920
586KB
680×510
397KB
表示サイズ 680×510
79.9KB
940×705
116KB
680×510
86.5KB

なぜかオリジナルをそのままアップロードしたものが、表示するファイルサイズが一番小さいという結果が出ました。

サーバーのディスクを節約するという点では、AffinityPhotoでリサイズするのが優秀でした。
AffinityPhotoでは、画質をまったく落としていないことを考えると、アプリケーションを立ち上げる手間はかかりますが、総合的に良いのかな?と思います。

検証結果

いかがだったでしょうか?
ちょっと???な結果になってしまいましたが、長い目でみたらサーバーにアップロードするファイルを小さくすることをおすすめします(^_-)-☆

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください