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

41–47 of 47 posts

Re: How to think about HTML responsive images

#41

Post by Am4TIfIsER0ppos »

998244353 wrote: post #40
aembleton wrote: post #36

Earlier quoted context omitted.

> 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 htt…

Why make a new request? The image is already loaded.

Re: How to think about HTML responsive images

#42

Post by rokkamokka »

est wrote: post #31
CGamesPlay wrote: post #30

Earlier quoted context omitted.

What problem does this solve?

s3 storage cost, html size and CDN traffic cost? Cache one file to serve image of multiple sizes.

But at that point, since you're not optimizing for filesize (everyone fetches every size), you might as well just provide the highest quality version only

Re: How to think about HTML responsive images

#43

Post by rchaud »

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…

I always open an image in a new tab. I can pan and zoom as much as I want there.

Re: How to think about HTML responsive images

#44

Post by est »

rokkamokka wrote: post #42
est wrote: post #31

Earlier quoted context omitted.

s3 storage cost, html size and CDN traffic cost? Cache one file to serve image of multiple sizes.

But at that point, since you're not optimizing for filesize (everyone fetches every size), you might as well just provide the highest quality version only

> everyone fetches every size

Nah, by using the Content-Range header, you can download partition of the file and render lower resolution image.

Re: How to think about HTML responsive images

#45

Post by csnover »

falcor84 wrote: post #37
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.

This doesn’t make sense to me. You can perform the exact same fingerprinting by looking at which image in a srcset is being requested.

Re: How to think about HTML responsive images

#46

Post by youngtaff »

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…

The ideal of an image format the can progessively support different sizes was discussed back when solutions to the responsive image issue were first being sought out e.g. https://blog.yoav.ws/posts/responsive_image_container/

JPEG 2000 already offers the ability to encoded multiple sizes of an image in the same file https://www.verypdf.com/pdfinfoeditor/jpeg-jpeg-2000-compari...

I think there was some hope that JPEG XL might be able to meet this need too

Re: How to think about HTML responsive images

#47

Post by bobbylarrybobby »

rchaud wrote: post #43
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…

I always open an image in a new tab. I can pan and zoom as much as I want there.

Reddit redirects images you attempt to open in a new tab back to an image viewer within Reddit, so you aren't just loading the image in a tab like you would be on most sites.
Post reply on HN