お疲れ様です。
先日顔面、それも目の周り大量の蕁麻疹ができ、心霊特集真っ青の顔面になりました 制作の中村です。
先日、「パソコンで見るには良いけどスマホだとすごい汚い小さい画像問題」に行き当たりました。
パソコン（以下PC）で小さく並べているけどスマホ（以下SP）では小さいと見栄えが悪い。
じゃあSPで大きく表示しようと単純に大きくしたところブロックノイズでそれはそれは汚い・・・。
今までもそういう場面に出くわしたことはあったのですが、パソコン用の画像、スマホ用の画像を用意した上で
css上で「display:none」で消して、スマホとの表示を切り替えるという非常に面倒な手法を取っていました。
そうしなくても大丈夫で割とラクチンな方法をいまさらながら見つけたのでここに備忘録がてらご報告をさせて頂きたいと思います。
まずはコチラの画像をパソコン、スマホ両方からご覧ください↓
http://www.test-mypage.sakura.ne.jp/srcset_test/
PCで見ると同じ犬だけど良い感じの犬だけ、スマホで見た時、くっきり見えています。
（そもそも後ろが少しボケた素材をチョイスした時点で中村のセンスのなさが伺えますがわんこさんの目のあたりを見ればお分かりいただけるかと・・・）
普通の犬は、PCと同じ画像を、スマホで拡大表示しています。
いいかんじの犬は、スマホの時には２倍に切り出したものを表示しています。
（ムズカシイ言い方をするとデバイスピクセル比が２倍の時は違う画像を表示させています）
パソコンでウィンドウ幅を縮めても恐らくどちらも同じ画像が表示されていると思います。
【やり方】
先ず画像を用意します。2倍サイズのものも用意します。
この時２倍サイズの画像は必ず２で割り切れるサイズで用意しましょう。
（この辺はフォトショップのアセット機能が便利です。ファイル名を“hogehoge.jpg, 200%hogehoge@2x.jpg”とカンマでつなげて%指定するだけで2種類サイズの異なる画像を切り出してくれます。アセット万歳）
で、ソースコードはテストのページからご確認くださいまし！！
srcset属性で「デバイスピクセル比が２倍の時はこっちの画像使ってね！」ってやるだけです。かんたん。
市場に出回るスマホはデバイスピクセル比が３倍のものとかもあるので一筋縄ではいかないもののまだ２倍のものが主流だとお伺いしております。
割と使えるかもしれないと少し経験値を手に入れた気がするナカムラでした。
※デバイスピクセル比・・・1ピクセルの画像データをディスプレイが何ピクセルで表現するかを表す数値。
デバイスピクセル比が２の場合、画像の１ピクセルをディスプレイ上２ピクセル使用して表現する（２倍で表示する感じですね。）