Reserving aspect ratio for images

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Reserving aspect ratio for images

Oliver Joseph Ash
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.
Reply | Threaded
Open this post in threaded view
|

Re: Reserving aspect ratio for images

Rachel Nabors
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.

photo
Rachel Nabors
Web Animation Engineer
   

On Sun, Jun 12, 2016 at 10:47 AM Oliver Joseph Ash <[hidden email]> 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
Reply | Threaded
Open this post in threaded view
|

Re: Reserving aspect ratio for images

Una Kravets
In reply to this post by Oliver Joseph Ash

On Jun 12, 2016, at 12:42 PM, Oliver Joseph Ash <[hidden email]> wrote:

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.

I agree —and I’ve seen this padding-bottom hack several times, especially for videos. I think this might be useful for other elements (not just video and img), too. Aspect ratio could be a CSS property with spaced values to remain in consistency with box-shadow and shorthand properties.

I.e. `preserve-ratio: <width-ratio> <height-ratio>`

```
.element {
  preserve-ratio: 4 3;
}
```

- Una
Reply | Threaded
Open this post in threaded view
|

Re: Reserving aspect ratio for images

josh on
I joined this list because of the same question!: http://lists.w3.org/Archives/Public/www-style/2016Mar/0210.html
My proposal was to use new units %w and %h - which would be the width and height percentages of the offsetParent. So you could use width:100%w and height:56.25%w to get a 16:9 ratio.
There was a problem with my solution, which I did not understand (but is no doubt correct): http://lists.w3.org/Archives/Public/www-style/2016Mar/0215.html

With a preserve-ratio solution I think you get into problems when a fixed width and height have also been provided:
```
.element {
  preserve-ratio: 4 3;
  width: 1000px;
  height:1000px;
}
```

SVG uses a number of values to handle this:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Are there proposals to handle aspect ratio in flexbox and grid layout?

Josh On





 

On Mon, Jun 13, 2016 at 6:05 PM Una Kravets <[hidden email]> wrote:

On Jun 12, 2016, at 12:42 PM, Oliver Joseph Ash <[hidden email]> wrote:

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.

I agree —and I’ve seen this padding-bottom hack several times, especially for videos. I think this might be useful for other elements (not just video and img), too. Aspect ratio could be a CSS property with spaced values to remain in consistency with box-shadow and shorthand properties.

I.e. `preserve-ratio: <width-ratio> <height-ratio>`

```
.element {
  preserve-ratio: 4 3;
}
```

- Una
Reply | Threaded
Open this post in threaded view
|

Re: Reserving aspect ratio for images

Amelia Bellamy-Royds
There's a current proposal (GitHub issue here: https://github.com/w3c/fxtf-drafts/issues/7) to extend the SVG viewBox to CSS box model.  It would handle most cases where aspect-ratio control is required.  

The only thing it wouldn't handle is aspect-ratio control without scaling to fit.  The only practical case I could think of that isn't covered is if you were using CSS shapes, and wanted the box to maintain the aspect ratio of the shape, but to have text stay the same font-size flowing within that shape instead of scaling to fit.

~ABR



On 14 June 2016 at 16:08, josh on <[hidden email]> wrote:
I joined this list because of the same question!: http://lists.w3.org/Archives/Public/www-style/2016Mar/0210.html
My proposal was to use new units %w and %h - which would be the width and height percentages of the offsetParent. So you could use width:100%w and height:56.25%w to get a 16:9 ratio.
There was a problem with my solution, which I did not understand (but is no doubt correct): http://lists.w3.org/Archives/Public/www-style/2016Mar/0215.html

With a preserve-ratio solution I think you get into problems when a fixed width and height have also been provided:
```
.element {
  preserve-ratio: 4 3;
  width: 1000px;
  height:1000px;
}
```

SVG uses a number of values to handle this:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Are there proposals to handle aspect ratio in flexbox and grid layout?

Josh On





 

On Mon, Jun 13, 2016 at 6:05 PM Una Kravets <[hidden email]> wrote:

On Jun 12, 2016, at 12:42 PM, Oliver Joseph Ash <[hidden email]> wrote:

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.

I agree —and I’ve seen this padding-bottom hack several times, especially for videos. I think this might be useful for other elements (not just video and img), too. Aspect ratio could be a CSS property with spaced values to remain in consistency with box-shadow and shorthand properties.

I.e. `preserve-ratio: <width-ratio> <height-ratio>`

```
.element {
  preserve-ratio: 4 3;
}
```

- Una

Reply | Threaded
Open this post in threaded view
|

Re: Reserving aspect ratio for images

Simon Pieters-3
In reply to this post by Oliver Joseph Ash
On Sun, 12 Jun 2016 19:42:52 +0200, Oliver Joseph Ash  
<[hidden email]> 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.

This is a known issue for <picture>.

https://github.com/ResponsiveImagesCG/picture-element/issues/85

It is *possible* to give the right space for your art directed images with  
CSS, you "just" need to repeat the media queries you use in <picture> in  
the CSS and specify the width and height the img should have for each  
breakpoint. The HTML spec includes an example for how to do that.

https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:art-direction-3


> 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.


--
Simon Pieters
Opera Software