ブログに写真を掲載する時の最適な大きさと容量についてまとめておきます。
最初に書いておきますが、画像の掲載方法に正解がある訳ではありません。大事なのは「何を優先したいのか？」をはっきりさせて、最初からルールを決めておくことだと思います。
ブログに掲載する写真の大きさ
大きな画像と小さな画像のメリットとデメリットをざっくりまとめるとこんな感じです。
実際にLightroomで調整した写真で比較してみて下さい。
今表示されているのは横幅800pxの画像ですが、クリックすると横幅1920pxの画像が表示されます。
どちらもRAW現像で同じ調整をしてJPEGで書き出したものですが、横幅800pxの画像ではディテールまで伝えることはできません。また、明部や暗部のディテールが崩れるからだと思いますが、現像時には白飛びしてなかった部分が白飛びしたり、黒つぶれしていなかった部分が黒つぶれすることがあります。
そのせいで、現像時よりも若干コントラストが強くなることがあります。
かと言って、画像を大きくすればするほど容量も大きくなってしまうので、ブログに掲載する時は画像の読み込みに時間も考慮して、画像の大きさを決めなければいけません。
ちなみに、上の写真をLightroomの最高画質で書き出した時の容量は下記の様になっています。
| 容量（サイズ） | |
|---|---|
| 1920 x 1280 | 1.79MB |
| 1280 x 854 | 931KB |
| 800 x 533 | 390KB |
大きな画像を大量に掲載すると、ページの読み込み速度が遅くなってSEOにも影響する可能性があります。
写真を圧縮してファイルサイズを調整する
写真を圧縮すれば容量は小さくなりますが、やりすぎると画質が劣化するので注意して下さい。
現像ソフトで書き出しする時にファイルサイズを制限をする
現像ソフト（僕の場合はLightroom）で書き出しする時にファイルサイズを制限する方法です。
ファイルサイズの上限を設定できるので、任意のサイズまで画像を圧縮することができます。
ちなみに、僕は長辺1920pxで書き出すことが多いのですが、1000～1500KBに制限をかければほとんど画質の劣化は気になりません。現像ソフトを使っている方におすすめです。
プラグイン「EWWW Image Optimizer」
WordPressのプラグインEWWW Image Optimizerを使う方法です。
デフォルトの設定で5～10%容量を小さくしてくれます。
圧縮率は低いのですが、画質の劣化がほぼありません（僕には全く違いが分からない）。また、有効化するだけでファイルをアップロードした際に自動で画像を最適化（EXIF情報を削除）されます。
サムネも一緒に最適化してくれるので、WordPressを使っている方におすすめです。
オンラインイメージ最低化ツール
無料のオンラインイメージ最適化ツールOptimizilla等を使う方法です。
デフォルトで70%前後容量を小さくしてくれます（クオリティの変更可）。
但し、圧縮率が高い分画質の劣化も目立ちます。体感ではクオリティを95前後まで上げるとノイズは気にならないのですが、クオリティを上げれば当然圧縮率も下がります。
どちらかと言えば、現像ソフトを使っていない＆JPEG保存されている方におすすめの方法です。
ブログに写真を掲載する
画像の大きさにもよりますが、ブログに写真を掲載する時は「リンクを貼らずにフルサイズの画像だけを表示させる」＆「フルサイズの画像を表示させてフルサイズの画像にリンクを貼る」方法は絶対におすすめしません。
どんなに大きな画像を掲載しても、画像はメインカラムの横幅まで縮小されるので、リンクを貼らなければ無駄に大きな画像を読み込むことになるからです。フルサイズの画像にリンクを貼る方法も同じです。
ページの読み込み速度に間違いなく影響が出ます。
ブログにメインカラムより大きな画像を掲載したい時は、ページの表示速度に影響が出ないサムネイルを使って、フルサイズの画像にリンクを貼る方法がおすすめです。この方法なら、画像をクリックするまでフルサイズの画像は読み込まれないので、ページの表示速度に影響が出ないからです。
ちなみに、僕はWordPressのギャラリー機能とプラグインLightbox with PhotoSwipeを使って画像を表示させています（Lightbox系のプラグインはLightbox with PhotoSwipeが一番使いやすかった）。
最後に
最初にも書きましたが、「何を一番優先したいのか？」で画像の大きさや容量（圧縮率）を決めて下さい。
画質に拘る必要がないのであれば、最初からブログサイズに調整して、さらに画像を圧縮して容量を小さくするべきだと思いますが、画質に拘りたい方は、大きな画像を使って、圧縮率もある程度抑えるべきだと思います。
但し、大きな画像を使う時は、掲載方法にだけは注意して下さい。
コメント