ブログに写真を掲載する時の最適な大きさと容量

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

ブログに写真を掲載する時の最適な大きさと容量についてまとめておきます。

最初に書いておきますが、画像の掲載方法に正解がある訳ではありません。大事なのは「何を優先したいのか?」をはっきりさせて、最初からルールを決めておくことだと思います。

目次

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

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

大きな画像
小さな画像
  • ディテールまではっきり分かる
  • 現像時に近い状態で仕上がる
  • 容量(ファイルサイズ)が大きい
  • ノイズが目立つ
  • ピントがずれていると目立つ
  • 容量(ファイルサイズ)が小さい
  • ノイズが目立たない
  • 多少のピントずれはごまかせる
  • ディテールが崩れる
  • 現像時よりコントラストが強くなる

実際に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を使う方法です。

EWWW Image Optimizer

デフォルトの設定で5~10%容量を小さくしてくれます。

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

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

オンラインイメージ最低化ツール

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

Optimizilla

デフォルトで70%前後容量を小さくしてくれます(クオリティの変更可)。

但し、圧縮率が高い分画質の劣化も目立ちます。体感ではクオリティを95前後まで上げるとノイズは気にならないのですが、クオリティを上げれば当然圧縮率も下がります。

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

ブログに写真を掲載する

画像の大きさにもよりますが、ブログに写真を掲載する時は「リンクを貼らずにフルサイズの画像だけを表示させる」&「フルサイズの画像を表示させてフルサイズの画像にリンクを貼る」方法は絶対におすすめしません。

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

ページの読み込み速度に間違いなく影響が出ます。

ブログにメインカラムより大きな画像を掲載したい時は、ページの表示速度に影響が出ないサムネイルを使って、フルサイズの画像にリンクを貼る方法がおすすめです。この方法なら、画像をクリックするまでフルサイズの画像は読み込まれないので、ページの表示速度に影響が出ないからです。

水門川の夜桜 撮影した写真

ちなみに、僕はWordPressのギャラリー機能とプラグインLightbox with PhotoSwipeを使って画像を表示させています(Lightbox系のプラグインはLightbox with PhotoSwipeが一番使いやすかった)。

あわせて読みたい
WordPressの記事にギャラリーを挿入する WordPressの記事にギャラリー(画像一覧)を挿入する方法をまとめておきます。 【ブロックエディター】 編集画面で「ギャラリー」ブロックを追加します。 新規アップロ...

最後に

最初にも書きましたが、「何を一番優先したいのか?」で画像の大きさや容量(圧縮率)を決めて下さい。

画質に拘る必要がないのであれば、最初からブログサイズに調整して、さらに画像を圧縮して容量を小さくするべきだと思いますが、画質に拘りたい方は、大きな画像を使って、圧縮率もある程度抑えるべきだと思います。

但し、大きな画像を使う時は、掲載方法にだけは注意して下さい。

あわせて読みたい
カメラの物損を100%保証してくれる保険「長期保証ワイド」に入れるのはソニーストアだけ ソニーのカメラやレンズをソニーストアで購入するメリットについてまとめておきます。 【ソニーストアを選ぶ最大のメリット】 ソニーストアを選ぶ最大のメリットは、落...
あわせて読みたい
ソニーストア「αあんしんプログラム」の使い方とレンズを安くお得に購入する方法 ソニーストアの月額サービス「αあんしんプログラム」の特徴と使い方をまとめておきます。 【αあんしんプログラムとは?】 αあんしんプログラムは、ソニーストアのオリジ...
スポンサーリンク
スポンサーリンク

スポンサーリンク

この記事を書いた人

このブログでは、管理人が学んだこと、体験したこと、購入した商品を好き勝手レビューしています。また、できるだけ正確な情報を伝えるよう心がけてはいますが、古い情報や間違った情報を掲載している可能性があります。

気づかれましたら、遠慮なくコメントして頂けるとうれしいです。

関連コンテンツ

コメント

コメントする

目次
閉じる