Hacker News Reader

Comment by philbo | Hacker News Reader

It's worth balancing this against other research showing that users often don't like the experience provided by progressive image rendering:

http://www.webperformancetoday.com/2014/09/17/progressive-im...

View on HN

Sample size of one, but on mobile, my number one pet peeve (apart from popover ads and autoplay videos!) is layouts that change as the page loads. Progressive encoding with multiplexing should help make sure newly loaded images don't make article text jump around as I try to read it.

Then again, maybe this is a laziness issue since it seems to me defining a layout independent of actual image content is something that you could do in the 90's.

Specifying image dimensions is enought to prevent any jumps.

On mobile, we mostly do percentages on images due to varying display sizes. Gets ridiculous when you want to specify the dimension, because you can't. We need to specify aspect ratios and css does not provide that.

Went with a padding-top + absolute position in wrapper hack at the end. That jumpiness is part the tooling problem.

I know it's a hack, but what is wrong with it? I've always been using that and it works.

I haven't looked in details into the new srcset and size attributes of image, but won't that help also?

<picture> with multiple srcset makes it possible to serve images that are displayed at 100% width, filling their (DOM) container.

Check out http://scottjehl.github.io/picturefill/

This is why I use vh, vw for proportional images at mobile breakpoints.

You still have to know the aspect ratio of the original image of course, but it does help.

We decided not use use viewport relative units for some reason I can't remember. I guess we had paddings etc in pixels and that would mean using calc() and that's another can of worms.

On a second thought, cw, ch as in container width, height would be a great addition.

> On a second thought, cw, ch as in container width, height would be a great addition.

Isn't that achieved by just defining height and width in percentages?

This would allow `height: 50cw`. Then we can define specific aspect ratios like `width: 100cw; height: 50cw;` would force image to have 2:1 aspect ratio.

And what dimensions would you prefer?

Small, medium, large?

And what kind of display would you like those for?

1x, 2x or maybe 3x?

Two! I hate when it moves the stuff around just as I am about to hit a link and hit an ad instead. It's hard enough without the page moving due to my large fingers.

Also:

* Popups asking me to download app

* Auto starting video of any sort

* Not loading the complete page so it has to keep loading as you read. This is very inconvenient when sitting on the train or subway with lots of tunnels.

* Link/button for "Read full story" on the story it self.

Most of these are reason enough for me to never visit the page again.

i actually wrote a scraper and a tiny android webview application because my most visited website was constantly jumping around...

As far as page layout goes progressive should not behave any different than non-progressive since images have an intrinsic size in the header which is considered by the rendering engines when sizing the image layer. It does not change throughout the load process.

Multiplexing will load the necessary headers just as soon with non-progressive images.

This is the only research that claims progressive images aren't a good user experience though. I can't confirm with electrodes attached to my brain but personally I like progressive images better than baseline and they are smaller too!

True. As ever, it makes sense to A/B test these things with your userbase. Their behaviour is more important to your own sites than any research or personal preference.

Can't you just reason that images coming through earlier is a better experience than not? Do you really need to AB test this?

You can. You can also be wrong.

If the value coming through your site is great enough that marginal improvements (on the order of 1%) are worth time investment (compared to other available improvement avenues) then this is something you should A/B test.

Hah, I'm surprised at the replies here. I guess I'm in the minority opinion (I don't like progressive loading of anything; just prepare the page, then show it to me :-).

One piece of research that measures vitals instead of just asking the users which one they liked more isn't very convincing. It could even be A/B tested by measuring how long people stay on the page or bounce rate above the fold.

Sample size: three (and counting). It's an awful problem, mobile or laptop/desktop: My greatest gripe is that I may think page is fully loaded, click to highlight text and - boom! I'm sent of to some page of video or advertising through a link that abruptly displaces the target I aimed at.

I'm starting to think this is on purpose. Or at least willful ignorance.

I also believe that, on some sites, it's 100% on purpose.

Reply on news.ycombinator.com