フィギュアレビューサイトが絶対やってはいけない写真の掲載方法

ブログにフィギュアのレビュー写真を掲載する時に注意するべきことをまとめておきます。

やってはいけない写真の掲載方法

先に結論を書いてしまいますが、「widthで画像を縮小表示させる＆元の画像へリンクを貼らない」組み合わせの画像掲載方法は絶対にやってはいけません。

widthを使ってブラウザで画像を縮小表示させると、画像がぼやけます（滲む）。それに加えて、元の画像へリンクを貼らないと、本来の綺麗な画像を見てもらうことができません。

無駄に大きなデータを送って、ぼやけた画像しか見てもらえないのではメリットがありません。当然ですが、widthを使って画像を拡大表示（引き延ばす）させても画質は劣化します。

メインカラムより大きな画像を表示させたい時は、サムネに元画像へのリンクを貼る。画像にリンクを貼りたくないなら、画像をメインカラムに収まる大きさに調整してからアップロードして下さい。

widthによって画像の大きさが変更表示されるケース

具体的にwidthで画像が縮小表示されるケースは2つあります。

CSSでimg要素の最大幅を定義する

一般的なテーマ（テンプレート）には下記のCSSが定義されています。

img {
    max-width: 100%;
    height: auto;
}

CSSを覚える必要はないのですが、これが定義されていることによって、どんなに大きな画像を掲載しても、画像が親要素の横幅を超えることはありません。例えば、メインカラムの横幅が728pxのこのブログの場合、上のCSSが定義されていることによって、横幅1000pxの画像を掲載しようが、横幅2000pxの画像を掲載しようが、画像は自動で横幅728pxに縮小表示されます。

HTMLでimg要素に直接書きむ

img要素にwidthとheightの値を直接書き込んで画像を縮小表示させることもできます。

<img src="画像へのパス" width="画像の幅" height="画像の高さ" alt="代替テキスト">

こちらは自分で指定しない限り、元画像の横幅と縦幅が入力されているはずです。widthとheightは入力しなくても問題ありませんが、値を入力したほうがブラウザで速く表示されます。

Google Chromeでの対処法

画像が多すぎて今更変更なんてできないという方は、下記のCSSを追加してみて下さい。

img {
    image-rendering: -webkit-optimize-contrast;
}

Google Chromeの場合は、ピクセルボケがある程度改善されます。

実際にwidthで大きさを変更した画像を比較

画像には元の画像へリンクが貼ってあります。

横幅726pxの画像を横幅726pxで表示

当然ですが、ブログに表示されている画像とリンク先の元画像の画質は同じです。

<a href="https://affilabo.com/wp-content/uploads/2017/04/726px.jpg" target="_blank" rel="noopener noreferrer"><img src="https://affilabo.com/wp-content/uploads/2017/04/726px.jpg" alt="726px" width="726" height="726" class="aligncenter" /></a>

横幅800pxの画像を横幅726pxで表示

ブログに縮小表示されている画像が若干滲んで見えます。

<a href="https://affilabo.com/wp-content/uploads/2017/04/800px.jpg" target="_blank" rel="noopener noreferrer"><img src="https://affilabo.com/wp-content/uploads/2017/04/800px.jpg" alt="800px" width="726" height="726" class="aligncenter" /></a>

横幅726pxの画像と横幅800pxの画像を比較

もっと分かりやすい様に2つの画像を重ねて表示させてみます。

左は横幅726px（726px表示）の画像、右は横幅800px（726px表示）の画像です。

右目のまつげを比較してもらうと、横幅800px（726px表示）の画像が滲んでいるのが分かります。

僕にはブラウザでどの様な処理が行われているのか分かりませんが、この処理は「Google Chrome」や「Internet Explorer」等のブラウザによっても異なります。いずれにせよ、widthを使ってブラウザで画像を縮小表示させると、画質が劣化する恐れがあるので注意して下さい。

最後に

画像の掲載方法に決まりなんてありません。

サムネを表示させて、フルサイズの画像へリンクを貼る方もいれば、ブログサイズに調整した画像を掲載して、元画像へリンクを貼らない方もいます。自分のやりたい方法で画像を掲載して下さい。

但し、今回紹介した画像の掲載方法「widthで画像を縮小表示させる＆元の画像へリンクを貼らない」組み合わせだけは、メリットが全くないので絶対におすすめしません。

スマホでは違いが分からないかもしれませんが、ブログにアップロードした写真が滲んで見えたり、シャープ感が損なわれている等、違和感を感じた時は、この記事の内容を疑ってみて下さい。

あわせて読みたい

フィギュア撮影ブースの作り方と必要な機材をまとめてみました フィギュア撮影ブースの作り方を紹介します。 【撮影ブースを自作するメリット】 撮影ブースを自作するメリットは、好きな背景紙で自由にライティングを組めることです...