srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた
レスポンシブイメージとは
- 画面幅や端末(パソコン、スマホなど)に応じて表示するイメージを切り替えること
なぜ重要なのか
- スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想
- 逆にスマホ用の小さな画像をPCで開くと、画像がボケる
- なので表示端末に応じて画像を切り替える必要がある
そのために何を理解する必要があるのか
凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました
早速実装してみよう
続きはコチラ...