webサイト制作時の画像処理・表示方法

＜webサイトを製作する際には、画像の最適化と再圧縮を行う＞

参考書籍：「マルチデバイス対応サイト構築　/ エ・ビスコム・テック・ラボ（著）」

●JPEGやPNGフォーマットの画像は、符号化処理の最適化や、カラープロファイルといったメタデータ（マーカ）の削除などにより、画質に影響を与えずにデータ量を削減できる。

この処理は「最適化」や「ロスレス圧縮」と呼ぶ。
※元の画像を作成したツールによっては最適化処理によってデータが多きくなる場合もあるので要注意。

【画像の最適化するツール】
・jpegtrain
・jpegoptim
・OptiPNG
・PNGOUT

●さらに見た目の品質を維持しながら、再圧縮することで、よりデータ量を減らすことができる。

【画像の最適化 & 再圧縮するツール】
・media4x
・OPTIMIZILLA

＜レスポンシブサイト作成時の画像表示方法＞

●img要素を表示サイズで変化させる

【html】
<img src="img/header.jpg" alt="" class="photo">

【css】
.photo{
width: 100%;
height: auto;
vertical-align: bottom;
}

※ vertical-align: bottom　は画像の下に余白を入れないように指定。

●背景画像を可変サイズでトリミングさせる

backgroun-color: cover にすることで、背景画像は表示サイズの変化に応じて、ボックス(div)の大きさでトリミングされる。
この時に、トリミングの中心となるポイントをbackground-positionで指定する。
【html】
<div class="photo></div>

【css】
.photo {
width: 100%;
height: 200px;
background-image: url(img/header.jpg);
background-size: cover;
background-position: 50% 50%;
}

●picture要素で画像の切り替えを行なう

CSSやjavascriptを使用しなくても、下記のコードのようにsource要素のmedia属性でブレイクポイントを設定して、
画面サイズに合わせて画像が拡大縮小される。注意点としては、最後にimg要素を記述することを忘れないようにする。
【html】
<picture>
<source media="(min-width: 768px)" srcset="images/picture_l.gif">
<source media="(min-width: 321px)" srcset="images/picture_m.gif">
<img src="images/picture_s.gif" alt="###">
</picture>