[mediaqueries] Queries for image support

Recently, while browsing the web with image downloads disabled to save
data, I was struck by how broken some sites were, despite being coded to
current best practices.  Screen reader-accessible text labels (for icon
buttons) that were "visually hidden" with CSS were completely inaccessible
to me.  If I turned off those styles in the inspector, the site became
usable again.

Wouldn't it be nice if a media query could restrict those style rules so
that they aren't applied for users who don't receive the image icons?

Other use cases for changing styles based on whether or not images are
supported:

- elegantly styling the alt text for <img>, instead of shoving it into the
width and height reserved for the image
- switching from a figure caption that is normally visible on hover/tap to
one that is displayed by default in place of the image
- changing colors/blending modes when background images won't be displayed

Given that some browsers / accessibility modes support content images but
not background images, the media query could distinguish between support
for images in different contexts:

   - images: none
   - images: content
   - images: all (meaning content + stylesheet images)



A second aspect of image support that it would often be useful to test for
in a stylesheet is which *types* of images are supported.  Currently, CSS
has no way to test this support: a url() reference in a property value is
valid even if the downloaded file type would be unrecognized.  Newer
high-compression image formats cannot be safely used with fallbacks to
older file types unless you use JS-based support tests.  In contrast, the
HTML <picture> element has already demonstrated the implementability of
this type of fallback switch.

The <source> element for <picture> uses MIME type strings to distinguish
image formats.  It's a little verbose, but it adds consistency and
extensability:

   - image-type: image/png
   - image-type: image/svg+xml
   - image-type: image/webp

Maybe the "image/" could be made optional for brevity.

Of course, if a browser does not currently support any images for this
document, these should all evaluate as false.  But the other media query is
still useful for the general case and because it addresses the case when an
image type is supported in content, but images are not downloaded at all
for stylesheet properties.  (Although I think that should also trigger an
@supports test on the relevant CSS properties.)


Best,
Amelia