[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。HTMLレスポンシブMediaQuery 世間のWebサイトをみてみると「横幅120pxのサムネイルに、1600pxの画像が使われている」ということがちょいちょいありまして、ソースコードを確認してみると ウインドウサイズが2000pxの場合の場合は800pxで表示して、スマホだと120pxで表示する。 またRetina対応をしているから、解像度の2倍が必要で、800px@2xだから、大きい方にあわせてる というパターンを結構みかけるので、あらためてimgの属性であるsrcsetとsizesについてまとめておきます。 大きい画像はファイルサイズが大きい おそらくこの記事をご覧いただく方には「何を当たり前な」と思われると思うのですが、もう少しお付き合いください。 猫のオリジナル画像
![[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。](https://cdn-ak-scissors.b.st-hatena.com/image/square/76d15183c3242fe1c09cd44a534ffdf1babe63cc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSFRNTCU1RCUyMCVFNCVCQiU4QSVFNiU5QiVCNCVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBOSVFMyU4MCU4MSVFMyU4MSVBMSVFMyU4MiU4MyVFMyU4MiU5MyVFMyU4MSVBOCVFMyU4MyVBQyVFMyU4MiVCOSVFMyU4MyU5RCVFMyU4MyVCMyVFMyU4MiVCNyVFMyU4MyU5NiVFMyU4MSVBQSVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MSVBRSVFOCVBOCVBRCVFNSVBRSU5QSVFNiU5NiVCOSVFNiVCMyU5NSVFMyU4MiU5MiVFNyU5MCU4NiVFOCVBNyVBMyVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4MnNyY3NldCVFMyU4MSVBOHNpemVzJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg0JUUzJTgxJTkzJUUzJTgxJUFBJUUzJTgxJTlEJUUzJTgxJTg2JUUzJTgwJTgyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lZWQ2OGEyYTYyZmFkMWVlYmI0MTgyNDkxZmMxYWZmZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcmRsYWJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yYzExNzQwNDhmZmM4YTU3MTVjNDA5NmU5YjEzNTBkOQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7dbabc119a6fce6cf3ec76f724c77915)
