width=””及びheight=””による画像の縮小&拡大表示は画質を劣化させる

scofield
画像(img要素)は、「width=””」及び「height=””」を追加して表示サイズを変更することができます。

但し、いくらアスペクト比を維持しても、画像を縮小及び拡大表示させると画質は劣化します。ブログに画像を掲載する時は、メインカラム以下かつ本来の画像の大きさそのままで表示させて下さい。

どうしても表示サイズを変更する時は、必ず元画像へのリンクを貼って下さい。

widthは「横幅」、heightは「高さ」です。

一般的なブログには、どんな大きな画像を掲載しても画像がメインカラムからはみ出ない様、CSSでimg要素に「max-width: 100%;」が定義されています。これもwidthによる画像縮小表示ですから、画像はブログのメインカラム以下に調整する必要があります。

横1060pxの画像を横1060pxで表示

1060px

※画像をクリックすると元画像が表示されます。

元画像の大きさでそのまま表示しています。画質の劣化はありません。

横1500pxの画像を横1060pxで表示(縮小表示)

1500px

※画像をクリックすると元画像が表示されます。

横1500pxの画像を横1060pxで表示しています。先ほどの横1060pxの画像及び元画像と比較すると、シャープ感が損なわれて画質が劣化しているのが分かります。左目のアイプリの模様(点)を見てもらうと違いが分かり易いと思います。

横800pxの画像を横1060pxで表示(拡大表示)

800px

※画像をクリックすると元画像が表示されます。

横800pxの画像を横1060pxで表示しています。画像を引き延ばして表示しているので画質は劣化します。

最後に

画像の大きさは、width及びheightを使って変更するのではなく、現像時にブログサイズに調整して下さい。ページの容量軽減にも繋がります。

特に、元画像へリンクを貼らずに画像を掲載する時は、本来の画像サイズそのままで表示させて下さい。