aspect ratio as an attribute

Hi,

I’ve been lurking here and just wanted to put two cents in about 
aspect-ratio.

Like most devs here I’ve often dreamed of a way to hint the browser 
about image proportions during page load, but without fixing either 
dimension.  I often use padding-boxes for above-the-fold images, to 
limit layout jumps during load. It works, but it’s a pretty miserable, 
time-consuming pattern. It seems to me that this is the really urgent 
use case. Speaking as a user, when I accidentally tap on the wrong link 
because an image just above my finger has suddenly loaded, the 
irritation factor is really high.

Putting together lots of what’s been said, it seems that solution needs 
to be:

1) Attribute-based. The CSS aspect-ratio proposals solve different, more 
complicated problems. They are harder to understand, harder to 
implement, harder to polyfill. I don’t want to wait five years. Since 
the ratio is a property of the asset, it should be marked up with the 
image/video.

2) Only a hint during load. Once the asset (metadata) is loaded 
successfully, the actual aspect-ratio of the asset takes over. If the 
image fails to load, the image’s box retains the hint. This fails 
gracefully, in cases of sloppy authoring. It also allows conventional 
stretching via CSS, as Tommy Hodgins has requested. Basically, it should 
do its job and then get out of the way.

3) Distinct from sizes attribute. I don’t see a way to add onto the 
existing sizes syntax without backwards-incompatible changes. zcorpan, 
correct me if I’m wrong here? Even if there were a way to do it, I’m 
worried it would be hard to read.

I suggest a syntax that closely parallels sizes, e.g.:

<img
   sizes="(min-width: 40em) 60vw, (min-width: 60em) 80vw, 100vw"
   aspect-ratio=“(min-width: 40em) 3:2, (min-width: 60em) 16:9, 4:3”
   srcset="examples/images/medium.jpg 375w,
           examples/images/large.jpg 480w,
           examples/images/extralarge.jpg 768w"
   alt="…">


This has the advantage of being familiar, and handles the the 
“art-direction” use case easily.

Best,
A

Received on Tuesday, 29 November 2016 16:03:46 UTC