Fluid images VS Responsive Images

Fluid Imagesとは？

ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。
ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法
具体的には、img 要素に対して以下のスタイルを適用する。

img { max-width : 100%}

Fluid Imagesの利点

• ウィンドウサイズなど利用者の環境に関わらず、使用する画像を1つに統一できる為
  • 画像管理が用意
  • HTMLの記述は、従来通りのシンプルなものでよい

Fluid Imagesの欠点

欠点は利点と表裏だが以下が主な問題として議論されている

• 利用者の環境（特に回線速度やピクセル密度の違い）に応じて最適な画像を提供できない

この手法を採用した場合、より多くの利用者の環境に於いても高画質の画像を提供するために、コンテンツ提供者はより大きなサイズ（ファイルサイズも）の画像を用います。
その為、3G回線のスマートフォン利用者でも、ハイスピードLANの主に会社のオフィスPC利用者と全く同一のファイルを強制的にダウンロードさせられてしまいます。

---

Responsive Imagesとは？

<picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。

<picture> 要素と、新しく <img> に追加された srcset と sizes 属性を使えば、画像リソースを柔軟に指定できます。レスポンシブデザインのサポートとページ読み込み時間を短くするため、どの状況下でどの画像を読み込むかはブラウザにまかせてしまいましょう。私たちは、今から紹介する画像の使われ方にもとづいて、わかりやすい HTML を書くだけです。

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

出典：レスポンシブイメージのネイティブサポート

Responsive Imagesの利点

上にも記載しましたが、Fluid Imagesの問題点を解決してくれ利用者の環境に最適な画像の出し分けをブラウザの判断に委ねることができます。

また、アートディレクションによる出し分け（モバイルデバイス用、ワイドデスクトップモニター用と、表示される画面によって画像を出し分けたい）にも適しています。

Responsive Imagesの欠点

IE11に於いては、picture要素は使用することが出来ません。
img要素のsrcsetとsizes属性のブラウザ実装状況においてもmicrosoft製ブラウザは不十分です。

• [picture要素のブラウザ実装状況]https://caniuse.com/#search=picture
• srcsetとsizes属性のブラウザ実装状況

また、この実装方法では一つの画像に対して想定出し分け環境に応じた複数の画像を用意する必要があります。つまり、例えば10ページのHTMLからなるウェブサイトの中で1ページあたり5枚の画像が使用されいた場合、それらを3つの環境に出し分けるというルールを設定すると

5X3X10=150

コンテンツ制作者は150枚の画像を用意し、それらを管理する必要があります。

ベスト・プラクティス

Responsive ImagesはFluid Imagesの欠点を補う完全なオルタネイティヴと認識されがちであるが、必ずしもそれは正しくありません。

確かにウェブ利用者の環境が多様化している現在に於いて、それらに応じた最適なサイズや見栄えを提供することはコンテンツ制作者にとって正しい選択だと思います。
但し、同時に全ての環境に最適化することに掛けられるコストも同時に勘案しておく必要があります。上記Responsive Imagesの欠点でも述べたように一つの小規模なサイトを制作するために100以上もの画像を制作・管理することは理想的な姿ではありません。

その点を考慮すると

• 一般的な挿絵や説明画像など、見栄えに強く拘らない若しくはデスクトップモニターのサイズでも極端に大きな画像サイズが要求されない画像については、従来通りFluid Imagesを用いる
• それ以外、特にアートディレクションによる出し分けを要求される場合に於いては、対象環境が許す範囲でResponsive Imagesの実装方法を用いる

というベーシックルールに則ることが現状のベスト・プラクティスだと考えられます。