Re: Reserving aspect ratio for images

On Sun, 12 Jun 2016 19:42:52 +0200, 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.

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

Received on Tuesday, 28 June 2016 20:00:30 UTC