PrAha Inc.

PrAha Inc. のブログ、あるいは社員の観察日記

srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた

レスポンシブイメージとは

  • 画面幅や端末(パソコン、スマホなど)に応じて表示するイメージを切り替えること

 なぜ重要なのか

  • スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想
  • 逆にスマホ用の小さな画像をPCで開くと、画像がボケる
  • なので表示端末に応じて画像を切り替える必要がある

 そのために何を理解する必要があるのか

  • HTML5でimgに追加されたsrcset属性, sizes属性
  • ブラウザがどうやって画像を選択しているのか
  • Retinaについて

凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました

 早速実装してみよう

続きはコチラ...

https://qiita.com/dowanna6/items/b9e132b4c56e67491027