写真ブログに最適な画像の大きさとサイズについて考えてみた

最初に書いておきますが、僕にも明確な答えは分かりません。

ただ、これから写真ブログを始めたい方は、最初にある程度ルールを決めておかないと、僕の様に途中で迷走してしまう可能性があるので、僕が試行錯誤した内容についてまとめておきます。

ブログに掲載する写真の大きさを決める

まずはブログに掲載する画像の大きさを決めます。

大きな画像と小さな画像のメリットとデメリットをざっくりまとめるとこんな感じです。

実際にLightroomで調整した写真で比較してみて下さい。

今表示されているのは横幅728pxの画像ですが、クリックすると横幅1920pxの画像が表示されます。

どちらもRAW現像で同じ調整をしてJPEGで書き出したものですが、横幅728pxの画像は細部がもやもやしています。また、明部や暗部のディテールが崩れるからだと思いますが、現像時には白飛びしてなかった部分が白飛びしたり、黒つぶれしていなかった部分が黒つぶれすることがあります。

そのせいで、現像時よりも若干コントラストが強くなって見える気がします。

かと言って、画像を大きくすればするほど画像の読み込みに時間がかかるので、ブログに画像を掲載する時は、画像の大きさとファイルサイズのバランスも考える必要があります。

ちなみに、Lightroomで最高画質で書き出した時のファイルサイズは下記の様になっています（色数の多い写真を横幅1920pxで書き出すと3～4MBになることもあります）。

画質を優先するのであれば、画像はある程度大きくするべきですが、ページの表示速度やサイトの快適さを優先するのであれば、画像はブログサイズ程度に調整するべきだと思います。

画像の大きさで迷っているなら、「何を優先したいのか？」で決めて下さい。

僕は一眼の良さ（画質を含めて）を伝えたいので長辺1920pxで書き出しています。

写真を圧縮してファイルサイズを調整する

次に画像を圧縮してファイルサイズを小さくします。

但し、圧縮すればするほど画質は劣化するので、どこまで妥協できるのかがポイントになります。

現像ソフトで書き出しする時にファイルサイズの制限をする

現像ソフト（僕の場合はLightroom）で書き出しする時にファイルサイズの制限をする方法です。

ファイルサイズの制限

ファイルサイズの上限を設定できるので、ある程度任意のサイズまで圧縮することができます。

僕は長辺1920pxの大きさで1000～1500KBに制限して書き出していますが、人によって妥協点は異なると思うので、ファイルサイズの制限はご自身で試行錯誤して下さい。僕の機材では、長辺1920pxの大きさで1000KB（1M）前後あれば画質の劣化はほとんど気になりません。

現像ソフトを使っている方におすすめの方法です。

プラグイン「EWWW Image Optimizer」

WordPressのプラグインEWWW Image Optimizerを使う方法です。

EWWW Image Optimizer

デフォルト（EXIF情報は削除）で大体5～10%サイズを小さくすることができます。

デフォルトの設定では圧縮率が低いのですが、画質の劣化がほぼありません（僕には全く違いが分からない）。また、有効化するだけでファイルをアップロードした際に自動で画像が最適化されます。

サムネも一緒に最適化してくれるので、WordPressを使っている方におすすめです。

ツール「Optimizilla」

無料のオンラインイメージ最適化ツールOptimizillaを使う方法です。

Optimizilla

デフォルトのクオリティ90で70～80%サイズを小さくすることができます。

但し、圧縮率が高い分画質の劣化も目立ちます。特に、空との境界線に出やすいもやもやしたノイズは気になります。体感ではクオリティを95前後まで上げるとノイズは気にならないのですが、圧縮率は50%前後まで下がります（1枚1枚クオリティを設定して圧縮する作業も少し面倒）。

どちらかと言えば、現像ソフトを使っていない＆JPEG保存されている方におすすめの方法です。

僕は現像ソフトで1000KB前後にファイルサイズの制限をかけて書き出した後に、プラグイン「EWWW Image Optimizer」で更に圧縮しています。

ブログに写真を掲載する

最後にアップロードした画像をブログに掲載します。

この際、メインカラムより小さな画像なら問題ありませんが、メインカラムより大きな画像を掲載する時は、「リンクを貼らずにフルサイズの画像だけを表示させる」＆「フルサイズの画像を表示させてフルサイズの画像にリンクを貼る」方法だけは絶対にやってはいけません。

どんなに大きな画像を掲載しても、画像はメインカラムの横幅（このブログなら728px）まで縮小されるので、リンクを貼らなければ無駄に大きな画像を読み込むことになるからです。サムネを使わずにフルサイズの画像にリンクを貼る方法も同じです。

ブログにメインカラムより大きな画像を掲載する時は、メインコンテンツの表示に影響が出ない様、メインカラムより小さなサムネにフルサイズの画像のリンクを貼るのがベストだと思います。

僕はWordPressのギャラリー機能とプラグインLightbox with PhotoSwipeを使って画像を表示しています（Lightbox系のプラグインはLightbox with PhotoSwipeが一番使いやすかった）。

実際には下記の様なショートコードが挿入されているだけなので、設定も凄く簡単です。

Lightbox系のプラグインは、Easy FancyBoxを使っている方が多いのですが、「ブラウザの大きさに依存する（拡大ができない）」＆「スマホで表示させた時に逆に小さく表示される」ので、僕は写真ブログには不向きだと思います。

Lightbox with PhotoSwipeの設定と使い方：高機能な画像拡大表示

2020.06.06

最後に

僕がやっていることをまとめるとこんな感じです。

楽天モバイルの4G回線で表示した時、画像の表示速度が若干遅く感じる時もありますが（2～3秒かかる時がある）、SEOを意識しすぎたり、ページの表示速度を優先しすぎて、「ブログで自分のやりたいことができなくなるのはなんか違うかも？」と思って今のやり方に落ち着きました。

ちなみに、画質を求めていないフリーの素材やツールの説明に使うキャプチャー画像はブログサイズに調整しています（EXIF情報も削除）。大きな画像を掲載するのはカメラで撮影した写真だけです。

ただ、正解がある訳ではないので、「最終的に自分が何を優先したいのか？」で画像の大きさ（ファイルサイズ）を決めるのがベストだと思います。

僕の知識不足で「もっといい方法があるよ」とか「そのやり方はだめだよ」等のアドバイスがあればコメントして頂けるとうれしいです。

カメラの物損を100%保障してくれる保険「長期保証ワイド」に入れるのはソニーストアだけ

2020.06.06

ソニーストア「αあんしんプログラム」の使い方とレンズを安くお得に購入する方法

2020.06.06