Revisiting aspect ratios in sizes

Back in 2014, Steve Caflin started an interesting thread on finding some
way to tell the browser the size of the image in the page for the purposes
of assisting with layout.[^1]

The conversation led to two tickets in Github about intrinsic
dimensions[^2] and how sizes only works with width-constrained images.[^3]
Conversations on both tickets have subsided and issue #86 was explicitly
tabled.

I would like to reopen this conversation. In particular, we've seen an
increased emphasis on providing old school width and height attributes to
avoid the page jumping around.

AMP Pages explicitly require height and width declarations for this
reason.[^4] Owen Cambell-Moore's UI recommendations for Progressive Web
Apps also state you should avoid pages jumping around by declaring height
and width.[^5]

The problem was also recently raised on the www-style list[^6] where Rachel
Nabors[^7] among others described how this is a generalized problem for
more than simply images.

I believe we need to strongly consider two actions:

1. Prioritize adding aspect ratio information to sizes (or adding a aspect
attribute).
2. Considering extending the sizes (and an aspect attribute if one exists)
to be available to other elements that provide similar layout problems in
responsive designs.

With sizes, we've provided half of what the browser needs to reserve the
size of the image in the page. If the browser knew the aspect ratio, it
could calculate the other half. Let's find a way to make this happen.

-Jason


[^1]: https://lists.w3.org/Archives/Public/public-respimg/2014Oct/0043.html

[^2]: https://github.com/ResponsiveImagesCG/picture-element/issues/85
[^3]: https://github.com/ResponsiveImagesCG/picture-element/issues/86
[^4]: https://www.ampproject.org/docs/guides/amp_replacements.html
[^5]:
https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7#.hzxdz4z7d
[^6]: https://lists.w3.org/Archives/Public/www-style/2016Jun/0072.html
[^7]: https://lists.w3.org/Archives/Public/www-style/2016Jun/0091.html


-- 
+1 (503) 290-1090 o | +1 (503) 502-7211 m | http://cloudfour.com | @grigs