ブログに大きな写真（画像）を掲載する時に注意すべきことをまとめておきます。
最初に書いておきますが、画像の掲載方法に正解がある訳ではありません。大事なのは「何を優先したいのか？」をはっきりさせて、自分のルールを決めておくことだと思います。
ブログに掲載する画像の大きさについて
大きな画像と小さな画像のメリットとデメリットをざっくりまとめるとこんな感じです。
画質を優先するのであれば、大きな画像を掲載するべきですが、大きな画像は容量が大きくなることに加え、粗が目立ちやすいデメリットもあります。逆に、表示速度を優先するのであれば、ブログサイズに調整した小さな画像を掲載するべきですが、小さな画像はディテールまでしっかり伝わらないデメリットがあります。
参考までに、下記の画像をLightroomの最高画質で書き出した時の容量は下記の様になっています。
| 大きさ | 容量 |
|---|---|
| 1920 x 1280 | 3,454kb |
| 1280 x 854 | 1,570kb |
| 800 x 534 | 549kb |
当然ですが、画質を優先して大きな画像を大量に掲載すれば、目に見えてページの表示速度が遅くなってしまうので、大きな画像を使いたい時は、掲載方法にも注意する必要があります。
大きな画像を掲載する時に注意すること
大きな画像を掲載する時に注意することは3つです。
- 許容範囲まで画像を圧縮する
- サムネを掲載してフルサイズの画像にリンクを貼る
- 画像を遅延読み込みさせる
必須ではありませんが、対策できる項目があれば試してみて下さい。
許容範囲まで画像を圧縮する
いずれかの方法で画像を圧縮してファイルサイズを小さくします。
- 現像ソフトで書きだす時にファイルサイズを制限する
- WordPressプラグイン「EWWW Image Optimizer」等を使用してアップロード時に圧縮する
- オンラインイメージ最低化ツール「Optimizilla」等を使って圧縮する
僕の場合は、Lightroomで書き出しする際に、2MBの制限をかけて書き出しています。また、WordPressプラグイン「EWWW Image Optimizer」も併用して更にファイルサイズを圧縮しています。
現像ソフトやWordPressを使っていない方には、無料で使えるオンライン最適化ツールもおすすめです。
許容できる範囲まで圧縮して、ファイルサイズを小さくして下さい。
サムネを掲載してフルサイズの画像にリンクを貼る
一般的なブログの場合、コンテンツ幅は長くても1000px前後しかありません。
コンテンツ幅を超える画像は、自動でコンテンツ幅まで縮小表示されますから（無駄に大きなファイルを読み込んでいる）、大きな画像を掲載したい時は、サムネ等にリンクを貼る方法がおすすめです。
WordPressの場合は、ギャラリー機能やLightbox系のプラグインを使う方法がおすすめです。
この方法なら、サムネをクリックした時に大きな画像が読み込まれるので、ページの表示速度に大きな影響が出ないですし、画面いっぱいに画像を表示させることができるからです。
画像を遅延読み込みさせる
ページ全体を先に読み込んで、画像を後から読み込む設定です。
WordPress5.5から画像は自動で遅延読み込みされています。特に設定は不要です。
おすすめしない画像の掲載方法
個人的には、コンテンツ幅よりも大きな画像をwidthで縮小表示させる＆フルサイズの画像にリンクを貼らない掲載方法は絶対おすすめしません。無駄に大きな画像を読み込むことになりますし、大きな画像を見てもらえる可能性が低いからです。縮小表示させることで、画質にも少なからず影響が出ます。
また、最近はWebpで画像を配信されているサイトが増えてきましたが、画質を優先するならおすすめしません。画像サイズは大幅に縮小できても、目に見えてノイズが増えますし、色も破綻しやすいからです。
ちなみに、Amazonの商品画像は今でもjpgが使われていますし、カメラメーカーの公式サイトでもjpgが使われています（個人的には画質の劣化や色の破綻が理由ではないかと思っている）。
気になる方は、ソニーのページでファイル形式や掲載方法を確認してみて下さい。
最後に
画質に拘らない方は、画像をブログサイズに調整する＆圧縮して容量を小さくするべきだと思いますが、画質に拘りたい方は、大きな画像を使って、圧縮率もある程度抑えるべきだと思います。
但し、大きな画像を使う時は、ページ表示速度が落ちない様、掲載方法には注意して下さい。
コメント