Edit

Page

Page title:

Page body:

* 仕様書

[REFS[
- [18] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2014-06-20 15:40:17 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#the-picture-element>
]REFS]

* 歴史

** 前史

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

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

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

[FIG(data)[ [55] [[HTML要素概説]]

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

-
[CITE[IRC logs: freenode / #whatwg / 20071225]], 
[TIME(.published)[2007-12-25]],
[TIME[2024-09-07T03:25:34.000Z]] <https://krijnhoetmer.nl/irc-logs/whatwg/20071225>

]REFS]

]FIG]

-*-*-

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

[FIG(data)[ [44] [[HTML要素概説]]

:[F[要素名]]:[CODE[picture]]
:日付:[TIME[2008-11-09]]
:説明:
[TIME[2008-11-09]]、
[[HtmLayout]]
は
[CODE[picture]]
を実装した。
[CODE[img]]
と同等だが[[ブロック水準要素]]として機能する。
現在の [CODE[picture]] と互換性はない。
:出典:
[REFS[

- 
[CITE[Terra Informatica Software, Inc.]], 
[DATA(.author)[[[Terra Informatica Software Design]]]],
[TIME(.published)[2010-12-05]],
[TIME[2024-08-17T09:37:55.000Z]], [TIME[2011-01-01T08:17:50.894Z]] <https://web.archive.org/web/20110101081723/http://www.terrainformatica.com/htmlayout/logfile.whtm>
]REFS]

]FIG]

** [CODE(HTMLa)@en[srcset]] 属性

;; [17] [CODE(HTMLa)@en[[[srcset]]]] [[属性]]の項を参照してください。

** RICG

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

[FIG(data)[ [57] [[HTML要素概説]]

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

- 
[DFN[RICG:AllIn]]:
[CITE@en[all in.]], 
[DATA(.author)[[[scottjehl]]]], 
[TIME(.published)[2012-02-21 17:44:16 +09:00]], [TIME[2024-09-07T03:42:12.000Z]] <https://github.com/ResponsiveImagesCG/picture-element/commit/77defd7f9cfe645143a38b3b57b425a0c7b1f020>

]REFS]

]FIG]

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

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

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

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

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

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

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

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

[15] [CITE@en[ResponsiveImages.org]] ([TIME[2014-07-01 05:02:45 +09:00]] 版) <http://responsiveimages.org/>

** HTML Standard への統合

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

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

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[picture]]
:[F[要素名]]:[CODE[imgcandidate]]
:日付:[TIME[2014-04-02]]
:説明:
[TIME[2014-04-02]]、
[CITE[HTML Standard]]
の文書ソース注釈に
[CODE[picture]],
[CODE[imgcandidate]]
の構想が追加された。
現在の
[CODE[picture]],
[CODE[source]] ([CODE[picture]] 用)
に当たる。
:出典:
[REFS[

-
[CITE[HTML r8561]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2014-04-03 04:17:52 +09:00]], [TIME[2024-09-07T02:34:33.000Z]] <https://github.com/whatwg/html/commit/fd376b16b61bd1e6a82463f15c034a8ebac22a53>

]REFS]

]FIG]

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

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

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

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

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

[FIG(data)[ [54] [[HTML要素概説]]

:[F[要素名]]:[CODE[picture]]
:[F[要素名]]:[CODE[source]]
:日付:[TIME[2014-06-17]]
:説明:
[TIME[2014-06-17]]、
[CITE[HTML Standard]]
に
[CODE[picture]],
[CODE[source]] ([CODE[picture]] 用)
が追加された。
現行仕様である。
:出典:
[REFS[

-
[CITE[HTML r8680]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2014-06-18 02:41:49 +09:00]], [TIME[2024-09-07T02:00:39.000Z]] <https://github.com/whatwg/html/commit/a7716b7a2463323c7f25176f4b3768008d170204>

]REFS]

]FIG]

[13] [CITE[History for source - ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:01:06 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages/source>

[20] [CITE[Move the normative bits of the picture spec to the HTML spec. · 60e9bbd · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 07:07:53 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/60e9bbd1514d7c51dabab5fb750881e9f3e6a478>

[21] [CITE[<picture> doesn't need to be palpable content since it contains an <img> · c8b726a · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 07:08:10 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/c8b726afabaa0d139edac7ca657a78d212484581>

;; [22] [CODE(HTMLa)@en[[[srcset]]]] と [CODE(HTMLe)@en[[[source]]]]
も参照。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-*-*-

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

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

[39] [CITE@ja[暮らしに役立つプラットフォーム【ruum】(ルーム)]], [TIME[2023-02-23T02:15:31.000Z]] <https://www.ruum.me/shop/default.aspx>

>
[PRE(HTML code)[
      <picture><img class="fade-in lazyloaded" data-src="/img/header/logo.svg" src="/img/header/logo.svg"></picture></a>
]PRE]

>
[PRE(HTML code)[
						<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>
]PRE]

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

-*-*-

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

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

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

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

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

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

[66] [CITE[Picturefill]], [TIME[2017-06-15T15:09:04.000Z]], [TIME[2024-09-08T05:25:27.230Z]] <http://scottjehl.github.io/picturefill/>

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

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

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

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)