5 ms·

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 e

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.

rimantas 10y ago
Specifying image dimensions is enought to prevent any jumps.
- eknkc 10y ago
  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.
  - kuon 10y ago
    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?
    - woof 10y ago
      <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/ http://scottjehl.github.io/picturefill/
  - hinkley 10y ago
    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.
    - eknkc 10y ago
      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.
      - patates 10y ago
        > 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?
        eknkc 10y ago
        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.
- woof 10y ago
  And what dimensions would you prefer? Small, medium, large? And what kind of display would you like those for? 1x, 2x or maybe 3x?
tyfon 10y ago
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.
- y4mi 10y ago
  i actually wrote a scraper and a tiny android webview application because my most visited website was constantly jumping around...
the8472 10y ago
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.

rimantas 10y ago

Specifying image dimensions is enought to prevent any jumps.

eknkc 10y ago
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.
- kuon 10y ago
  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?
  - woof 10y ago
    <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/ http://scottjehl.github.io/picturefill/
- hinkley 10y ago
  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.
  - eknkc 10y ago
    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.
    - patates 10y ago
      > 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?
      - eknkc 10y ago
        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.
woof 10y ago
And what dimensions would you prefer? Small, medium, large? And what kind of display would you like those for? 1x, 2x or maybe 3x?

tyfon 10y ago

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.

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

the8472 10y ago

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.