HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

[b_wa]

HTML複雑すぎません…？それにデザインはHTMLから分けて書くためにCSSができたのに、また戻るの？

[Nyoho]

HTML 5.1、HTML側に最大幅ピクセル数ハードコーディングになるのは正しい進化なのかな。

[takohaka]

これはレイアウトには影響無いからマークアップでやるのは適切な切り分けだと思うけど。正しさで言うなら、マルチ解像度対応のために意味のある画像でもbackground-imageにしなければならない現状がおかしい。

[meganetaaan]

ウサギが可愛すぎて後の説明が頭に入ってこない

[synbizmix]

レスポンシブデザイン自体微妙派。複雑なら可読性悪いし、メンテナンス性そんなに上がらないし。ビューわけた方がスマート。 ICS MEDIA - レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能

[kiri2mau]

“「レスポンシブイメージ」”

[miukro]

これ複雑だし実際使えんのかねと思ってはてぶみたらやっぱりか

[nilab]

「imgタグに指定されたsrcset属性とsizes属性」「pictureタグは複数のsourceタグと一つのimgタグで構成」「srcset属性とsizes属性、picture要素は、既に多くのブラウザで対応済みです」

[nai_nari]

HTMLにデザイン直接焼き込むのえ…と思いましたが、これがCSSに移譲できるのであれば、単純に「mediaで括らなくてもレスポンシブ簡単に書けるようになったよ」ということなので、喜ばしいなと思いなおしました。

[Falky]

img要素の話を「見た目と構造の切り分け」でざっくり話そうとするのには無理が…

[kathew]

ブコメでは文書とデザインの切り分けについて指摘があるけど、画像を表示するには必要な情報だから、これはHTML側に書いてもおかしくない気がするなぁ

[Shinwiki]

最初から考えとけよ…

[hackapellmanda]

ほげぇ

[catbears]

後で確認しますね。

[noitora-solution]

なるほど

[drapon]

なんかどんどん複雑になってくなー

[primedesignworks]

うーん…。

[Fushihara]

新しいタグ作るならもっと思い切ってもいいんじゃないすかねえ。

[kekkonmisui]

結局個別にイメージ必要ならcssのビューポートで一括管理した方がいいんちゃいます？

[piayo]

早くClient Hints欲しい

[kenjou]

CSSに書いていた内容をHTMLに記述できるようになるという感じですね。やれることが同じならどちらでもやっても別に変化はなさそうですが。

[nimroder]

デモ画面が真っ白で何も表示されないんだけど、自分だけ？

[yasu-log]

レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA変更する

[tonkotsuboy_com]

これからのレスポンシブwebデザイン対応には必須となる技術

[lesson5]

srcsetの解説。読み込みサイズへの影響も考慮して使っていかないと。