News for hackers. Stuff that matters.

A comment on How to think about HTML responsive images.

Re:How to think about HTML responsive images by fifticon on Tuesday April 09, 2024 @03:00AM (#39976812)
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 (because neighbour elements like text still grows). Reddit is one of the sites guilty of this. Worse, they even do it if you "open image in new tab". I have surrendered on this, and instead just DOWNLOAD the image to disk, to then reopen it in a separate tab, to finally zoom it.. Sigh.
[ Parent | on HN ]
Re:How to think about HTML responsive images by danburzo on Tuesday April 09, 2024 @03:15AM (#39976893)
Oh yeah, definitely something I’ve witnessed and been frustrated by before. Some of it stems from improper use of CSS units [1], and the only real recommendation I have is for people to _test_ for basic things like zooming in and out of the page, while keeping close in mind _the reasons_ people might want to zoom in and out of the page.

[1] https://ashleemboyer.com/blog/why-you-should-use-px-units-fo...

[ Parent | on HN ]
Re:How to think about HTML responsive images by Lammy on Tuesday April 09, 2024 @04:34AM (#39977321)
> Reddit is one of the sites guilty of this. Worse, they even do it if you "open image in new tab".

You might enjoy https://addons.mozilla.org/en-US/firefox/addon/load-reddit-i...

[ Parent | on HN ]
Re:How to think about HTML responsive images by jraph on Tuesday April 09, 2024 @07:11AM (#39978206)
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.

[ Parent | on HN ]
Re:How to think about HTML responsive images by safety1st on Tuesday April 09, 2024 @07:12AM (#39978211)
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.

[ Parent | on HN ]
Re:How to think about HTML responsive images by drcongo on Tuesday April 09, 2024 @07:14AM (#39978223)
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)
[ Parent | on HN ]
Re:How to think about HTML responsive images by aembleton on Tuesday April 09, 2024 @08:14AM (#39978591)
> 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.

[ Parent | on HN ]
Re:How to think about HTML responsive images by 998244353 on Tuesday April 09, 2024 @08:57AM (#39978930)
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 <img src="..."> 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.
[ Parent | on HN ]
Re:How to think about HTML responsive images by Am4TIfIsER0ppos on Tuesday April 09, 2024 @09:26AM (#39979210)
Why make a new request? The image is already loaded.
[ Parent | on HN ]
Re:How to think about HTML responsive images by rchaud on Tuesday April 09, 2024 @10:29AM (#39979823)
I always open an image in a new tab. I can pan and zoom as much as I want there.
[ Parent | on HN ]
Re:How to think about HTML responsive images by bobbylarrybobby on Tuesday April 09, 2024 @03:52PM (#39983508)
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.
[ Parent | on HN ]