eeeps

example from whatwg/html#9448 (comment)

Let's say instead of concrete-width-ignoring-natural-dimensions we had just used concrete width and not done any size containment.

<img
	loading=lazy
	sizes=auto
	srcset="a 2w, b 4w, c 8w, d 16w, ..."
	style="min-width: 1px"

eeeps

let teal = new Color("oklch(75% 0.25 205)");
teal.inGamut('srgb');
let teal_srgb = teal.clone().toGamut('srgb');

// it's not even in P3, so I can't even see how teal it is
teal.inGamut('p3');
// if you have a rec.2020-capable laser projector, maybe you can?
teal.inGamut('rec2020')

eeeps

#standardSQL
# How accurate are <img width=x height=y> attributes?

CREATE TEMPORARY FUNCTION getSrcsetInfo(payload STRING)
RETURNS ARRAY<STRUCT<srcsetHasWDescriptors BOOL, hasWidth BOOL, hasHeight BOOL, approximateResourceWidth FLOAT64, approximateResourceHeight FLOAT64, aspectRatiosMatch BOOL, aspectRatioPercentError FLOAT64>>
LANGUAGE js AS '''

// sameAspectRatio :: ( Object, Object) -> Boolean
// input Objects look like: { width: 1920, height: 1080 }

eeeps

#standardSQL
# How many img elements with srcset + w descriptors rely on intrinsic height?

CREATE TEMPORARY FUNCTION getSrcsetInfo(payload STRING)
RETURNS ARRAY<STRUCT<srcsetHasWDescriptors BOOL, someKindOfExtrinsicHeightProbably BOOL, someKindOfExtrinsicWidthProbably BOOL, thereWasAHeightAttribute BOOL, thereWasAWidthAttribute BOOL, thereWereBothHeightAndWidthAttributes BOOL, computedCSSHeightWasNotAuto BOOL, computedCSSWidthWasNotAuto BOOL, computedCSSHeightWasAutoButThereWasAMaxOrMinHeight BOOL, computedCSSWidthWasAutoButThereWasAMaxOrMinWidth BOOL, computedCSSHeightWasAutoAndThereWasNoMaxOrMinHeight BOOL, computedCSSWidthWasAutoAndThereWasNoMaxOrMinWidth BOOL>>
LANGUAGE js AS '''
try {
  var $ = JSON.parse(payload);
  var responsiveImages = JSON.parse($._responsive_images);
  responsiveImages = responsiveImages['responsive-images'];

eeeps

example 1

This <img> will have a concrete object size ignoring natural dimensions of 0, and sizes=auto will resolve to 100vw.

CodePen showing concrete object size

<style>
main {
    max-width: 60rem;

eeeps

#standardSQL
# LCP pixels loaded and painted

CREATE TEMPORARY FUNCTION getPixels(responsiveImagesJsonString STRING)
RETURNS ARRAY<STRUCT<imgURL STRING, loadedImagePixels INT64, paintedCssPixels INT64>>
LANGUAGE js AS '''
  const parsed = JSON.parse( responsiveImagesJsonString );
  if ( parsed && parsed.map ) {
    return parsed
      .map( d => ({

eeeps

#standardSQL
# pixels loaded and painted

CREATE TEMPORARY FUNCTION getPixels(responsiveImagesJsonString STRING)
RETURNS ARRAY<STRUCT<loadedImagePixels INT64, paintedCssPixels INT64>>
LANGUAGE js AS '''
  const parsed = JSON.parse( responsiveImagesJsonString );
  if ( parsed && parsed.map ) {
    return parsed
      .map( d => ({

eeeps

#standardSQL
# pixels loaded and painted

CREATE TEMPORARY FUNCTION getPixels(responsiveImagesJsonString STRING)
RETURNS STRUCT<loadedImagePixels BIGNUMERIC, paintedCssPixels BIGNUMERIC>
LANGUAGE js AS '''

  const parsed = JSON.parse( responsiveImagesJsonString );
  if ( parsed && parsed.map ) {
    return parsed

eeeps

CREATE TEMPORARY FUNCTION getImageDensity(payload STRING)
RETURNS ARRAY<STRUCT<clientWidth INT64, approximateResourceWidth INT64, d FLOAT64>>
LANGUAGE js AS '''
try {
  var $ = JSON.parse(payload);
  var responsiveImages = JSON.parse($._responsive_images);
  responsiveImages = responsiveImages['responsive-images'];
  return responsiveImages.map(({approximateResourceWidth, clientWidth}) => ({
    approximateResourceWidth: parseInt(approximateResourceWidth) || 0,
    clientWidth: parseInt(clientWidth) || 0,

eeeps

Four examples (all uncredentialed requests):

Let’s say image.com is varying responses based on Accept. Permissive CORS/CORP might allow embedder.com to detect whether the user is sending a different Accept to it vs image.com. If embeder.com has some understanding of image.com’s delivery logic, it also allows embedder.com to tell something about the Accept value that was sent to image.com. That seems… innocuous? ACAO:* and CORP:cross-origin are probably OK here. But I’m not 100% sure.

Now, let’s say image.com is doing some kind of A/B test, and sending different responses randomly based on IP. That (+ read permissions) allows embedder.com to determine whether or not it got a different IP address from the user than image.com. This feels worse to me than the first case… like it could work against privacy protections the user is trying to employ against embedder.com. IPs are more unique than Accept, so, especially with lots of A/B buckets, this feels like maybe a fingerprinting risk. Also IP is tied t