Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to think about HTML responsive images

danburzo.ro

Post reply on HN
Print view View original

31–40 of 47 posts

Re: How to think about HTML responsive images

#31

Post by est »

CGamesPlay wrote: post #30
est wrote: post #17

Is it possible to serve one image file of progressive encoding and display different size on different media conditions? As a hack I would just put the blob offset in the URL as part of file name, and use js to load those images. For example: filename.1000-120w.3000-240w.5000-360w.jpg means the 0-1000 bytes will get you 120w image, 0-3000 bytes will get you the 240w image, 0-5000 bytes will get you the 360w image, an…

What problem does this solve?

s3 storage cost, html size and CDN traffic cost?

Cache one file to serve image of multiple sizes.

Re: How to think about HTML responsive images

#32

Post by [deleted] »

fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

[deleted]

Re: How to think about HTML responsive images

#33

Post by jraph »

fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

When I find myself in such a situation, I pinch zoom with the touchpad or the touchscreen if reachable in the setup I'm using. On Firefox on Linux it doesn't reflow.

Of course, I sometimes end up with a zoom mess where the page is zoomed, and then pinch zoomed.

Re: How to think about HTML responsive images

#34

Post by safety1st »

fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

It's always morbidly interesting to speculate on how a user-hostile behavior like Reddit's image handling exists. Like, the default things that browsers do if you put in no effort beyond an img tag, work better than this. To make an experience as shitty at Reddit's takes a lot of time and effort. At Silicon Valley dev rates they must spend many millions of dollars just making stuff worse.

Remember when Google used to be cool and was basically just making simple tools that were on the web? I have not seen that philosophy of engineering come from Big Tech in many many years.

Re: How to think about HTML responsive images

#35

Post by drcongo »

fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

Pro tip: If you pinch to zoom it should zoom the entire page including the image, instead of increasing the size of elements inside the html as a Cmd+ does. (MacOS, any browser)

Re: How to think about HTML responsive images

#36

Post by aembleton »

fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

> Worse, they even do it if you "open image in new tab".

How does it know where to get the CSS or picture element from to manage that? Maybe it keeps it from the other page. Does this happen in all browsers? I don't think I've seen this in Firefox.

Re: How to think about HTML responsive images

#37

Post by falcor84 »

Lorin wrote: post #9

I have no idea why browsers moved away from providing the DPR (device pixel ratio) header on media requests so one could continue using the sensible and simple whilst the server could return the correct images on its own. Would love to know the rationale.

I'm not sure, but my understanding was that this is to reduce browser fingerprinting.

Re: How to think about HTML responsive images

#38

Post by lobsterthief »

frankzander wrote: post #11

To be honest ... this is IMHO by far one of the most complicated thing in the whole webdev area. I don't get it why ppl complain about how difficult CSS is ... but to foresee how an image behaves and find a good balance between size and file size is a hart thing to juggle with. This article clarifies a lot of things for me so thx for that.

Also, teaching non-engineers about the different file types to use (like not using PNGs for raster content) is another realm of complexity.

Optimizing images programmatically is easy. Converting them between PNG and JPG programmatically, along with determining when such a conversion should happen, is very difficult.

Re: How to think about HTML responsive images

#39

Post by lobsterthief »

est wrote: post #17

Is it possible to serve one image file of progressive encoding and display different size on different media conditions? As a hack I would just put the blob offset in the URL as part of file name, and use js to load those images. For example: filename.1000-120w.3000-240w.5000-360w.jpg means the 0-1000 bytes will get you 120w image, 0-3000 bytes will get you the 240w image, 0-5000 bytes will get you the 360w image, an…

What you’re describing is sort of how sprites used to work. They aren’t used as much anymore.

Basically, a bunch of small images would be combined into a single image (like a grid), and then that single image would be loaded and would use background-size and background-position to display the image in a background-image. One request for a large number of small images. This isn’t used as much now that SVGs are so widely supported and can be themselves inlined.

Re: How to think about HTML responsive images

#40

Post by 998244353 »

aembleton wrote: post #36
fifticon wrote: post #14

One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…

> Worse, they even do it if you "open image in new tab". How does it know where to get the CSS or picture element from to manage that? Maybe it keeps it from the other page. Does this happen in all browsers? I don't think I've seen this in Firefox.

It looks at the request headers.

When you navigate to https://i.redd.it/dl34o62azctc1.jpeg, Chrome sends (I'm doing this on Chrome because I think I've made some hacks in Firefox to fix this)

  GET https://i.redd.it/dl34o62azctc1.jpeg
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
and Reddit responds with a redirect to https://www.reddit.com/media?url=https://i.redd.it/dl34o62az....

But when the browser loads the same image from an tag, Chrome sends

  GET https://i.redd.it/dl34o62azctc1.jpeg
  Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
and Reddit responds with the actual image.
Post reply on HN