News for hackers. Stuff that matters.
Re:Faster Images using HTTP2 and Progressive JPEGs by rebuilder on Wednesday December 28, 2016 @06:40AM (#13269903)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by the8472 on Wednesday December 28, 2016 @08:55AM (#13270438)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by tyfon on Wednesday December 28, 2016 @08:35AM (#13270333)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by y4mi on Wednesday December 28, 2016 @11:27AM (#13271543)
i actually wrote a scraper and a tiny android webview application because my most visited website was constantly jumping around...
Re:Faster Images using HTTP2 and Progressive JPEGs by rimantas on Wednesday December 28, 2016 @06:51AM (#13269937)
Specifying image dimensions is enought to prevent any jumps.
Re:Faster Images using HTTP2 and Progressive JPEGs by eknkc on Wednesday December 28, 2016 @07:35AM (#13270097)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by kuon on Wednesday December 28, 2016 @08:06AM (#13270200)
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?

Re:Faster Images using HTTP2 and Progressive JPEGs by woof on Wednesday December 28, 2016 @08:22AM (#13270284)
<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/

Re:Faster Images using HTTP2 and Progressive JPEGs by hinkley on Wednesday December 28, 2016 @12:45PM (#13272138)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by eknkc on Thursday December 29, 2016 @02:48AM (#13276185)
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.

Re:Faster Images using HTTP2 and Progressive JPEGs by patates on Thursday December 29, 2016 @05:27AM (#13276622)
> 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?

Re:Faster Images using HTTP2 and Progressive JPEGs by eknkc on Thursday December 29, 2016 @06:33AM (#13276789)
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.
Re:Faster Images using HTTP2 and Progressive JPEGs by woof on Wednesday December 28, 2016 @07:40AM (#13270113)
And what dimensions would you prefer?

Small, medium, large?

And what kind of display would you like those for?

1x, 2x or maybe 3x?