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

先に結論を書いてしまいますが、下記2つの組み合わせは絶対にやってはいけません。

widthを使ってブラウザで画像の大きさを変更表示させると、画質が劣化します。それに加えて、元の画像へリンクを貼らないと、本来の綺麗な画像を見てもらうことができません。

widthで画像の大きさを変更表示する場合は、必ず元画像へリンクを貼る。元画像へリンクを貼らない場合は、画像がメインカラムに収まる大きさに調整してからサイトにアップロードして下さい。

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

具体的にwidthで画像の大きさが変更表示されるケースです。

CSSで定義されたimg要素の最大幅で画像が縮小表示される

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

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

無料ブログで時々見かけますよね？

フリーダムに画像がメインカラムからはみ出している光景。あれを防ぐためのものです。ちなみに、既に画像がはみ出している方は、今からでもスタイルシートに上のCSSを定義してあげれば、一発で画像が綺麗にカラム内に収まってくれます。

img要素に直接書き込んで画像の大きさを変更表示する

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

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

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

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

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

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

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

どうでしょう？

1000pxの画像は少し分かりにくいかもしれませんが、800pxの画像は明らかに劣化しているのが分かります。ちなみに、リンク先の画像を見てもらうと分かりますが、元の画像が劣化している訳ではありません。ブラウザ上で縮小表示された画像が劣化しているだけです。

横幅726px（726px表示）の画像と横幅800px（726px表示）の画像を比較

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

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

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

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

ということで、下記の様な画像の掲載方法「widthを使ってブラウザで画像を縮小表示させる＆元の画像へリンクを貼らない」は絶対におすすめしません。

※横幅800pxの画像を横幅726pxで表示させています。

この画像掲載方法では下記のデメリットがあるからです。

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

画像は本来の大きさで表示させた時に一番綺麗に見えます。

最後に

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

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

但し、今回紹介した画像の掲載方法だけは、メリットが全くないので絶対におすすめしません。

ちなみに、僕は画像をクリックするのが面倒臭いのと、そもそもクリックしてもらえるかも分からないので、基本的にはブログサイズに調整して画像へリンクは貼らない様にしています。