News for hackers. Stuff that matters.

A comment on Faster Images using HTTP2 and Progressive JPEGs. Parent comment

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.

[ Parent | on HN ]
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?

[ Parent | on HN ]
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/

[ Parent | on HN ]
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.

[ Parent | on HN ]
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.

[ Parent | on HN ]
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?

[ Parent | on HN ]
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.
[ Parent | on HN ]