HTMLでレスポンシブやRetinaディスプレイ、ファイル形式など画像の読み込みを最適化する | Free StyleWebサイトのコンテンツとして、とても重要な写真やイラストなどの画像。 綺麗な写真をどのように見せて、写真コンテンツとして情報を伝えるか。 写真もデザインの1つです。 アイコンやイラストなどの画像もそうですが、写真の画像も綺麗な画質でWebに載せていきたいところです。 しかし、画像も高解像度であればファイルサイズが大きくなり、Webサイトにも影響を与えてしまします。 Retinaディスプレイでは、高画素密度であるため利用する画像を2倍にしないと、画質が悪くて少しぼやけて見えてしまいます。 スマートフォンでは、そこまで大きいサイズの画像を読み込む必要はないので、ファイルサイズの小さい画像を読み込むようにしたりと、いろいろとコントロールする必要はあります。 Webサイトに最適化していこうとなると、意外といろんな問題が見えてきます。 ただ、これらの問題はHTMLで対応可能です。 今回は、デバイス
