#＜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】
`
`