How many pages use <picture> with <source media>

Analysis
1

In https://twitter.com/zcorpan/status/1277150608609419265 I wrote

As folks learn about this new behavior with <img>'s width and height attributes, I’d like browsers to implement a solution for this for the art direction case, where different <source>s have different ratio.

https://github.com/whatwg/html/issues/4968

to which Christian Schaefer replied

I’ve seen more people scan QR codes than I’ve seen people use the art direction feature on a page. So in practice it’s probably not worth the time. And you could still go the CSS route then.

So obviously, I wanted to find out how common art direction is. In httparchive, it’s possible to find the number of pages using <picture> and how many of those also use <source media>. (Limitation: not all of them might be art direction with different aspect ratio images. They could have the same aspect ratio and use media for dark mode or something else.)

The result:

  • 125,957 pages use <source media>
  • 179,383 pages that use <picture>
  • 4,988,625 pages in total

That is, around 70% of pages that use <picture> also use <source media>. ~3.6% of all pages use <picture>.

Queries used:

SELECT
  *
FROM (
  SELECT
    page,
    url,
    REGEXP_EXTRACT(body, r'(?i)(<picture(?:\s[^>]+)?>)') AS picture,
    REGEXP_EXTRACT(body, r'(?i)(<source\s(?:[^>\s]+\s+)*media\s*=[^>]+>)') AS media
  FROM
    `httparchive.response_bodies.2020_06_01_desktop`
    #`httparchive.sample_data.response_bodies_desktop_10k`
    )
WHERE
  picture IS NOT NULL

SELECT COUNT(DISTINCT page) AS count FROM `(saved as table)` WHERE media IS NOT NULL

SELECT COUNT(DISTINCT page) AS count FROM `(saved as table)` WHERE picture IS NOT NULL
2 Likes
2

https://almanac.httparchive.org/en/2019/media has some data about <picture> but not picture+source AFAIK. This would be a great topic to include in the 2020 version, which we’re planning here: https://github.com/HTTPArchive/almanac.httparchive.org/issues/900

3

Unfortunately, I’ve seen many sites using <picture> and <source media> when srcset/sizes would have been better, just for resolution switching.

So number of real Art Direction use cases is even lower.

4

Thanks. Yeah. To figure out how common aspect ratios are different between <source>s, at least loading the image metadata to get their dimensions may be necessary. (See discussion in the twitter thread.)

1 Like
5

<picture> is also used for checking things like webp support - like in the very link @rviscomi gave earlier :slight_smile: :

            <!-- Show large image for large screens and high density screens and use webp when supported -->
            <picture>
              <source media="(min-width: 327px)" type="image/webp" srcset="/static/images/2019/media/hero_lg.webp" />
              <source media="(min-width: 327px)" type="image/jpeg" srcset="/static/images/2019/media/hero_lg.jpg" />
              <source type="image/webp" srcset="/static/images/2019/media/hero_lg.webp 2x" />
              <source type="image/jpeg" srcset="/static/images/2019/media/hero_lg.jpg 2x" />
              <source type="image/webp" srcset="/static/images/2019/media/hero_sm.webp" />
              <source type="image/jpeg" srcset="/static/images/2019/media/hero_sm.jpg" />
              <img src="/static/images/2019/media/hero_lg.jpg" class="content-banner" alt="" width="866" height="433" loading="eager" />
            </picture>

There’s no way to do this with <img srcset="..." sizes="..."> AFAIK?

Unfortunately, I’ve seen many sites using <picture> and <source media> when srcset / sizes would have been better, just for resolution switching.

To be honest I find <picture> syntax less confusing than <img srcset="..." sizes="..."> and, coupled with it’s greater functionality would tend to use that more.

6

srcset was always a dreadful hack, not least because there was no CSS control for it. Bruce Lawson and others proposed the picture tag as a way of giving HTML developers the same kind of control over images that the video tag gave them for videos:

https://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/

It also neatly provided a simple and reliable way to support webp as well as jpeg for those browser makers ideologically opposed to webp. Ten years later and it looks like Apple is finally coming in from the cold.

7

@tunetheweb pages that use only type and not media might be the other 30% of <picture> uses.

8

Another use of media in source I would like to dive in for 2020 almanach is for "device-pixel-ratio switching", inspired by @eeeps study: https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio

I did this a while ago for a client (both Art Direction + dppx switching), using a stronger compression for screens above 3dppx (could have been lower, thanks to Eric’s data): https://www.dfs.com/en/hong-kong

<picture>
	<source media="(max-width: 1023px) and (min-resolution: 3dppx), (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 3)" sizes="calc(100vw-20px)" srcset="…">
	<source media="(max-width: 1023px)" sizes="calc(100vw-20px)" srcset="…">
	<source media="(min-resolution: 3dppx), (-webkit-min-device-pixel-ratio: 3)" sizes="calc(50vw - 35px)" srcset="…">
	<img src="…" sizes="calc(50vw - 35px)" srcset="…">
</picture>

It would be much easier with Safari supporting min-resolution…

1 Like
9

@nhoizey have you suggested this metric in the Media chapter planning doc?

10

@rviscomi yes, I did, and I suggested a way to get the metric.

1 Like