前史

• [52] <!--webbot-->
  • [51] FP2002: Photo Gallery May Not Show All Images, 2024-09-07T02:12:13.000Z, 2007-08-08T01:49:03.073Z https://web.archive.org/web/20070808014621/http://support.microsoft.com/kb/813736

[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

• [2] HTML5 IRC logs: freenode / #whatwg / 20071225 (2007-12-27 01:31:25 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20071225#l-150

[43] Terra Informatica Software, Inc., 2024-08-17T09:37:55.000Z, 2011-01-01T08:17:50.894Z https://web.archive.org/web/20110101081723/http://www.terrainformatica.com/htmlayout/logfile.whtm

srcset 属性

RICG

• [56] all in., scottjehl, 2012-02-21 17:44:16 +09:00, 2024-09-07T03:42:12.000Z https://github.com/ResponsiveImagesCG/picture-element/commit/77defd7f9cfe645143a38b3b57b425a0c7b1f020
• [58] Commits · ResponsiveImagesCG/picture-element · GitHub, 2024-09-07T03:45:58.000Z https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages/?after=7c7402c1c219dd12a63437a4cbf4bf76c0d9b67a+2239

[16] Responsive Images Community Group ( (2012-05-11 00:38:40 +09:00 版)) http://www.w3.org/community/respimg/

[7] The picture element ( (2013-02-25 18:22:25 +09:00 版)) http://picture.responsiveimages.org/

[14] Use Cases and Requirements for Standardizing Responsive Images ( (2013-02-26 19:38:11 +09:00 版)) http://www.w3.org/TR/2013/WD-respimg-usecases-20130226/

[19] IRC logs: freenode / #whatwg / 20130921 ( (2013-09-24 09:00:22 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130921

[3] IRC logs: freenode / #whatwg / 20130930 ( (2013-10-03 20:18:29 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130930

[4] Use Cases and Requirements for Standardizing Responsive Images ( (2013-11-06 19:34:20 +09:00 版)) http://www.w3.org/TR/2013/NOTE-respimg-usecases-20131107/

[5] Simplified Picture Element ( (2013-11-24 09:28:21 +09:00 版)) http://geekhood.net/picture-element.html

[6] The picture element ( (2013-02-26 01:52:04 +09:00 版)) http://www.w3.org/TR/2013/WD-html-picture-element-20130226/

[15] ResponsiveImages.org (2014-07-01 05:02:45 +09:00 版) http://responsiveimages.org/

HTML Standard への統合

• [8] Web Applications 1.0 r8561 Internal annotations for future img stuff ( (2014-04-03 04:17:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=8560&to=8561
  • [53] [e] (0) Internal annotations for future img stuff, Hixie, 2014-04-03 04:17:52 +09:00, 2024-09-07T02:34:33.000Z https://github.com/whatwg/html/commit/fd376b16b61bd1e6a82463f15c034a8ebac22a53

[9] IRC logs: freenode / #whatwg / 20140402 ( (2014-04-03 13:58:15 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140402#l-136

• [10] Web Applications 1.0 r8612 Remove the <img> stuff so that zcorpan can edit it instead. (this is purely editorial) ( (2014-05-08 06:40:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=8611&to=8612
  • [48] [e] (0) Remove the <img> stuff so that zcorpan can edit it instead. (…, Hixie, 2014-05-08 06:40:45 +09:00, 2024-09-07T02:03:12.000Z https://github.com/whatwg/html/commit/61b568a581ffa526d0061444b7d1ae258719a66c

• [50] picture-element/source at gh-pages · ResponsiveImagesCG/picture-element · GitHub, 2024-09-07T02:06:00.000Z https://github.com/ResponsiveImagesCG/picture-element/blob/gh-pages/source

• [11] [e] (0) Merge upstream changes for <img> · 08e2efd · whatwg/html-mirror ( (2014-05-15 07:09:26 +09:00 版)) https://github.com/whatwg/html-mirror/commit/08e2efd661728b8b2563cd5f144a89e3b6c5409f
• [49] [e] (0) Merge upstream changes for <img>, Hixie, 2014-05-10 02:45:11 +09:00, 2024-09-07T02:05:15.000Z https://github.com/whatwg/html/commit/08e2efd661728b8b2563cd5f144a89e3b6c5409f

• [45] [] (0) integrate upstream <picture> updates, Hixie, 2014-06-18 02:41:49 +09:00, 2024-09-07T02:00:39.000Z https://github.com/whatwg/html/commit/a7716b7a2463323c7f25176f4b3768008d170204
• [46] [] (0) integrate upstream <picture> updates, Hixie, 2014-06-18 02:51:10 +09:00, 2024-09-07T02:01:41.000Z https://github.com/whatwg/html/commit/62c031f20109c6b6dd57b553ee860bddb1eb7b45
• [47] [] (0) <picture> integration and moving to html5lib, Hixie, 2014-06-21 00:39:43 +09:00, 2024-09-07T02:01:57.000Z https://github.com/whatwg/html/commit/62c9b4de8b583b6d005049daa4aa0dbe6384c087

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

[13] History for source - ResponsiveImagesCG/picture-element ( (2014-07-01 05:01:06 +09:00 版)) 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 ( (2014-07-01 07:07:53 +09:00 版)) 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 ( (2014-07-01 07:08:10 +09:00 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/c8b726afabaa0d139edac7ca657a78d212484581

[23] Remove obsolete files · 4a49661 · ResponsiveImagesCG/picture-element (2015-03-03 16:18:48 +09:00 版) https://github.com/ResponsiveImagesCG/picture-element/commit/4a4966184b0b0de9a8897b5cd499f63eb8cea4df

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

[25] Include <picture> directly rather than through a build script · whatwg/html@d9cff6e (2015-09-02 16:42:41 +09:00 版) https://github.com/whatwg/html/commit/d9cff6e9a6fb2928ef5d3f3d8df4e4dd18fb9b4c

[26] Moved to whatwg/html · ResponsiveImagesCG/picture-element@972412b (2015-09-02 16:46:58 +09:00 版) https://github.com/ResponsiveImagesCG/picture-element/commit/972412b4aff6cb687d36fd165a7e0b8f5057562c

[27] Merge <picture> dependencies · whatwg/html@68b277d (2015-09-03 14:38:44 +09:00 版) https://github.com/whatwg/html/commit/68b277d05dd6ac66321821de038e91fc90afc5fd

[28] Fix #414: Factor out "use srcset or picture" to avoid grammatical amb… · whatwg/html@5fa33f0 (2015-12-18 18:35:34 +09:00 版) https://github.com/whatwg/html/commit/5fa33f072011f29ed56adb0f2f63bb4404c92aae

[29] Fix #478: Set currentSrc to input if resolve fails · whatwg/html@5e6f6ae (2016-01-12 11:30:04 +09:00 版) https://github.com/whatwg/html/commit/5e6f6aeaaf5c2a1ca77207cd3954370a83a1f2f0

[30] Change step 11 of 'Update the image data' into substeps · whatwg/html@16eb8bb (2016-01-12 11:30:18 +09:00 版) https://github.com/whatwg/html/commit/16eb8bb254dde2d0ab5617c410d46a87485065c8

[31] Add images to embedded content introduction's examples · whatwg/html@14111f6 (2016-01-13 12:08:01 +09:00 版) https://github.com/whatwg/html/commit/14111f62f041fec58a8a622ea042273e12b5f271

[32] Fix #471: Change step 5.3 of 'Update the image data' into substeps · whatwg/html@ea2341f (2016-01-13 12:13:20 +09:00 版) https://github.com/whatwg/html/commit/ea2341f721972d87876d26aa6c48de331d085ed3

[33] Add acks and commit history for <picture> · whatwg/html@944e07d (2016-01-20 17:28:04 +09:00 版) https://github.com/whatwg/html/commit/944e07d6b5ca6fe3c9785d7309248d9ec1cf76c3

[34] Add sizes="" et al to the Index section · whatwg/html@dfe18ac (2016-01-20 17:28:47 +09:00 版) https://github.com/whatwg/html/commit/dfe18acf2b4834be5b63cf6bebb97245a1b2a910

[35] Merge source element definitions · whatwg/html@d8f4b79 (2016-04-26 20:47:31 +09:00 版) https://github.com/whatwg/html/commit/d8f4b792dcaa6e205a7af2c074ee59cd838717d7

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

[37] Cleaning up 'optionally-blockable'. (mikewest著, 2017-10-20 16:45:38 +09:00) https://github.com/w3c/webappsec-mixed-content/commit/2ff806843a8e634d7d47484db185b995d2d6a95c

[38] Fixing link to 'use srcset or picture'. (mikewest著, 2017-10-23 16:32:08 +09:00) https://github.com/w3c/webappsec-mixed-content/commit/e6220c8d697475562b778b41d18f9623a24c17cd

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

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

[39] 暮らしに役立つプラットフォーム【ruum】(ルーム), 2023-02-23T02:15:31.000Z 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, 2017-06-15T15:09:04.000Z, 2024-09-08T05:25:27.230Z http://scottjehl.github.io/picturefill/

[65] Please Update Picturefill | CSS-Tricks, 2024-09-07T23:28:47.000Z, 2024-09-08T05:24:23.786Z https://css-tricks.com/please-update-picturefill/

• [67] GitHub - posthtml/posthtml-webp: Add webp supporting in your html, 2024-09-25T15:13:23.000Z https://github.com/posthtml/posthtml-webp
• [68] GitHub - posthtml/posthtml-sugar-srcset: This shortens the description of the value of srcset., 2024-09-25T15:14:14.000Z https://github.com/posthtml/posthtml-sugar-srcset

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

[70] 某サービスで picture を使ってるところみました。 WebP かどうかの分岐でした。 2024-11-07T11:10:26.700Z

[71] フレームワークが機械的に picture を生成していると思われ、それ自体に実質的な意味を持たず、子供に img が1つだけある事例をまた観測 2026-03-03T02:33:40.794Z

[72] フレームワークは汎用性と高機能性を効率よく実現するために picture を使っていくつでも img を入れて切り替えさせられるように作っているのだけれども、実際の開発者には複数の img で切り替える需要がないので、こういうことになる 2026-03-03T02:35:08.996Z

[73] もし何かの理由、例えばPCとスマートフォンで画面設計を変えたい、というのがあるとしても、その場合必要な切り替えは画像の差し替えだけでは済まない。画像を差し替えなければならないほど画面設計が違うとなると、画像以外の要素構造にも大規模な切り替えが必要になる可能性が高く、すると picture だけブラウザーに選択させるメリットが皆無。むしろブラウザーの判定基準と独自部分の判定基準が一致せず齟齬が生じる境界領域が発生するリスクもあるから悪手。 2026-03-03T02:39:16.705Z

[74] そこまでの大規模でなくても、 picture を使った切り替えと CSS との統合は中途半端なので、やはり picture と CSS の @media 等による分岐で境界領域が発生するリスクが残り、 picture を実運用に乗せるのはハードルが高い。 2026-03-03T02:40:43.503Z