Re: Reserving aspect ratio for images

I have had the same problem on more than just img elements! Being able to
define aspect ratios on all styleable elements would make responsive games
and graphic UI features, canvas elements, videos, much easier to create and
maintain.

[image: photo]
*Rachel Nabors*
Web Animation Engineer
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
------------------------------

Curator of Web Animation Weekly <http://webanimationweekly.com>

*Speaking & Workshops*
- Aug 07 CSS Conf Argentina, Buenos Aires <http://cssconfar.com/>
- Oct 17 –18 CSS Dev Conf, San Antonio <http://2016.cssdevconf.com/>, Animation
Workshop <http://2016.cssdevconf.com/#workshops>
- Oct 26 –27 All Things Open Keynote, Raleigh, NC
<http://allthingsopen.org/>

On Sun, Jun 12, 2016 at 10:47 AM Oliver Joseph Ash <oliverjash@gmail.com>
wrote:

> I think page jumping is one of the worst UX/performance problems on the
> web. One culprit of this is images with undefined width and height
> attributes—the browser doesn’t know how to lay them out until they have
> been downloaded, thus the page jumps. The simple fix is to reserve space
> for them in the page, but more often than not, this is not implemented. Try
> scrolling down your Twitter timeline on twitter.com with a poor
> connection—as images load above your reading position, the page will jump,
> and you’ll have to try and find where you were reading again. This is
> incredibly frustrating for the user.
>
> Before responsive web design was a thing, reserving space for images while
> they load was as easy as adding height and width attributes to your img.
> Responsive websites rarely use fixed image sizes, so instead we want to
> reserve a space with a given aspect ratio. This can be done using the
> infamous “padding-bottom hack”. For example, for an image with an aspect
> ratio of 4:3, we can reserve space for the image whilst it loads by
> wrapping the image with an element whose padding-bottom is set to 75%
> (width/height), and then absolutely positioning the img relative to this
> wrapper:
>
> <div style="padding-bottom: 75%; position: relative;">
>     <img style="position: absolute; width: 100%;" src="foo.jpg" />
> </div>
>
> Looking at this, it’s no wonder authors rarely bother to reserve space for
> images.
>
> When rebuilding my photography blog, samefourchords.com, I wanted to use
> the picture element for art direction, mainly to provide different crops to
> landscape and portrait devices to increase their impact. I couldn’t do this
> because, to my knowledge, there’s no way to reserve space for art directed
> images. The “padding-bottom hack” won’t suffice for this use case, because
> there is only one img inside the picture, but multiple sources.
>
> How could the web platform make this easier for content authors? If we
> could solve that problem, perhaps page jumping on the web will decrease.
>
> One idea I had was to add an aspectratio attribute to the img element
> (e.g. aspectratio="4:3"). Perhaps the source element could also receive an
> aspectratio attribute, so browsers know how to lay out the img element.
>
-- 
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master
Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo