Responsive Images Community Group

picture 要素 (HTML)

仕様書

歴史

前史

[1] Pages using <picture> (sorted by MD5 of URL) (2007-12-27 01:29:06 +09:00 版) http://canvex.lazyilluminati.com/survey/2007-07-17/analyse.cgi/pages/tag/picture

[55] HTML要素概説
要素名
picture
日付
説明
FrontPage Server Extensions が写真アルバム機能のため picture を使っていた。 時点でも用例が若干残っていた。 現在の picture と互換性はない。
出典

[43] Terra Informatica Software, Inc., , https://web.archive.org/web/20110101081723/http://www.terrainformatica.com/htmlayout/logfile.whtm

[44] HTML要素概説
要素名
picture
日付
説明
HtmLayoutpicture を実装した。 img と同等だがブロック水準要素として機能する。 現在の picture と互換性はない。
出典

srcset 属性

[17] srcset 属性の項を参照してください。

RICG

[57] HTML要素概説
要素名
picture
要素名
source
日付
説明
Scott Jehl は、 picture, source (picture 用) の polyfill を公開した。 後に W3C HTML WG の仕様案として採択された。 類似の提案はこのしばらく前まで遡る。
出典

[16] Responsive Images Community Group ( ( 版)) http://www.w3.org/community/respimg/

[7] The picture element ( ( 版)) http://picture.responsiveimages.org/

[14] Use Cases and Requirements for Standardizing Responsive Images ( ( 版)) http://www.w3.org/TR/2013/WD-respimg-usecases-20130226/

[19] IRC logs: freenode / #whatwg / 20130921 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130921

[3] IRC logs: freenode / #whatwg / 20130930 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130930

[4] Use Cases and Requirements for Standardizing Responsive Images ( ( 版)) http://www.w3.org/TR/2013/NOTE-respimg-usecases-20131107/

[5] Simplified Picture Element ( ( 版)) http://geekhood.net/picture-element.html

[6] The picture element ( ( 版)) http://www.w3.org/TR/2013/WD-html-picture-element-20130226/

[15] ResponsiveImages.org ( 版) http://responsiveimages.org/

HTML Standard への統合

[9] IRC logs: freenode / #whatwg / 20140402 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140402#l-136

[216] HTML要素概説
要素名
picture
要素名
imgcandidate
日付
説明
HTML Standard の文書ソース注釈に picture, imgcandidate の構想が追加された。 現在の picture, source (picture 用) に当たる。
出典

[12] [whatwg] <picture> added to HTML ( (Simon Pieters 著, 版)) http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Jun/0061.html

[54] HTML要素概説
要素名
picture
要素名
source
日付
説明
HTML Standardpicture, source (picture 用) が追加された。 現行仕様である。
出典

[13] History for source - ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages/source

[20] Move the normative bits of the picture spec to the HTML spec. · 60e9bbd · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/60e9bbd1514d7c51dabab5fb750881e9f3e6a478

[21] <picture> doesn't need to be palpable content since it contains an <img> · c8b726a · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/c8b726afabaa0d139edac7ca657a78d212484581

[22] srcsetsource も参照。

[23] Remove obsolete files · 4a49661 · ResponsiveImagesCG/picture-element ( 版) https://github.com/ResponsiveImagesCG/picture-element/commit/4a4966184b0b0de9a8897b5cd499f63eb8cea4df

[24] <picture> in SVG (Tab Atkins Jr. 著, 版) https://lists.w3.org/Archives/Public/www-svg/2015Mar/0115.html

[25] Include <picture> directly rather than through a build script · whatwg/html@d9cff6e ( 版) https://github.com/whatwg/html/commit/d9cff6e9a6fb2928ef5d3f3d8df4e4dd18fb9b4c

[26] Moved to whatwg/html · ResponsiveImagesCG/picture-element@972412b ( 版) https://github.com/ResponsiveImagesCG/picture-element/commit/972412b4aff6cb687d36fd165a7e0b8f5057562c

[27] Merge <picture> dependencies · whatwg/html@68b277d ( 版) https://github.com/whatwg/html/commit/68b277d05dd6ac66321821de038e91fc90afc5fd

[28] Fix #414: Factor out "use srcset or picture" to avoid grammatical amb… · whatwg/html@5fa33f0 ( 版) https://github.com/whatwg/html/commit/5fa33f072011f29ed56adb0f2f63bb4404c92aae

[29] Fix #478: Set currentSrc to input if resolve fails · whatwg/html@5e6f6ae ( 版) https://github.com/whatwg/html/commit/5e6f6aeaaf5c2a1ca77207cd3954370a83a1f2f0

[30] Change step 11 of 'Update the image data' into substeps · whatwg/html@16eb8bb ( 版) https://github.com/whatwg/html/commit/16eb8bb254dde2d0ab5617c410d46a87485065c8

[31] Add images to embedded content introduction's examples · whatwg/html@14111f6 ( 版) https://github.com/whatwg/html/commit/14111f62f041fec58a8a622ea042273e12b5f271

[32] Fix #471: Change step 5.3 of 'Update the image data' into substeps · whatwg/html@ea2341f ( 版) https://github.com/whatwg/html/commit/ea2341f721972d87876d26aa6c48de331d085ed3

[33] Add acks and commit history for <picture> · whatwg/html@944e07d ( 版) https://github.com/whatwg/html/commit/944e07d6b5ca6fe3c9785d7309248d9ec1cf76c3

[34] Add sizes="" et al to the Index section · whatwg/html@dfe18ac ( 版) https://github.com/whatwg/html/commit/dfe18acf2b4834be5b63cf6bebb97245a1b2a910

[35] Merge source element definitions · whatwg/html@d8f4b79 ( 版) https://github.com/whatwg/html/commit/d8f4b792dcaa6e205a7af2c074ee59cd838717d7

[36] Editorial: restructure the <img>-related sections (zcorpan著, ) https://github.com/whatwg/html/commit/819272910bb1355bb3c45dc4976d71c1152eb723

[37] Cleaning up 'optionally-blockable'. (mikewest著, ) https://github.com/w3c/webappsec-mixed-content/commit/2ff806843a8e634d7d47484db185b995d2d6a95c

[38] Fixing link to 'use srcset or picture'. (mikewest著, ) https://github.com/w3c/webappsec-mixed-content/commit/e6220c8d697475562b778b41d18f9623a24c17cd


[40] picture が有意義に使われている例はほとんど見かけません。

[41] WordPress が (プラグインのどれかが?) 使っているので出現サイト数は無駄に多いみたいですが、 picture でもそうでなくても変わらないけど機械的に出力されているらしいものばかり。

[39] 暮らしに役立つプラットフォーム【ruum】(ルーム), https://www.ruum.me/shop/default.aspx

      <picture><img class="fade-in lazyloaded" data-src="/img/header/logo.svg" src="/img/header/logo.svg"></picture></a>
						<picture><img class="fade-in lazyload radius101000" data-src="/img/cms/639/639_01.jpg" decording="async">
							<div class="icon lato t-ss c-white new f-center">NEW</div>
							
							<div class="favoriteBtn" data-article="639">
								
								<img class="fade-in lazyload" data-src="/img/new/common/icon_heart_white.svg" decording="async">
								
							</div>
						</picture>

[42] >>39 これは figure と間違えている・・・というわけでもなさそうで謎


[59] picture 推進派は猛烈にプッシュしてついに全ブラウザーに実装させ Ian Hickson もしぶしぶ HTML Standard に取り込んだのですけど、 その熱量はいったいどこから来てたんですかね。

[60] あれから10年くらい経ちましたけど、いまいったいどれだけ picture って使われてますか。 WordPress などで picture は使われているけど実態はただの img と大差ない、 みたいなのは量産されて出現頻度はそこまで低くないですけど、 img + srcset で記述できなくて picture が生かされてる事例ってまだ見たことないです。

[61] RICG も最初から picture + source の仕様案ありきであとから use case / requirements を集めだしたりっていう酷い政治的ムーブかましてましたよね。 その use case は今実世界でどれだけありますか、どれだけ picture 使ってますか?

[62] やっぱり基本的には srcset、複雑なのは JavaScript、 ってのがいい、というか現実にそう運用されてるんじゃないですかねえ。

[63] srcset ですら、高解像度のディスプレイiPhone に搭載されたあの当時の一過性のブームみたいなもので等倍と2倍の画像を供給する必要があっただけで、 今はそんなに需要がないってのが実態じゃないですかね。 今じゃ高解像度の画像を1個用意するだけでいいし (その方が圧倒的に楽だし転送量も今やそんなに問題ではない)、 写真ではない図形なら SVG を使うのが一般的になっちゃいましたからね。

[64] Ian Hickson のいうとおり、稀な用法のために img の処理モデルをスパゲッティー化させる必要なかったんじゃないですかねえ。

[66] Picturefill, , http://scottjehl.github.io/picturefill/

[65] Please Update Picturefill | CSS-Tricks, , https://css-tricks.com/please-update-picturefill/

[69] >>67 これは WebP 対応ブラウザーとそれ以外の分岐のために picture を使った例。例といっても実利用例ではなくツールの利用例文だけど。 >>68 は例文が人工的すぎて何がしたいのかよくわからない。

[70] 某サービスで picture を使ってるところみました。 WebP かどうかの分岐でした。