Hacker News new | ask | show | jobs
by fifticon 807 days ago
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.
7 comments

> 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...

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.

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.

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...

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)
> 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 <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.
Why make a new request? The image is already loaded.
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.