Ask HN: Why do certain websites' images get smaller when I zoom in? | Hacker News Reader

Ask HN: Why do certain websites' images get smaller when I zoom in?

68 pointscphoover31 comments

It seems as though very frequently these days whenever I try to enlarge an image by zooming in within chrome (ctrl-+) images end up getting smaller. What is with this current anti-pattern? I see it all over the place including Whatsapp, google images, facebook's gallery view.

When I zoom in within my browser I would assume images would get bigger not smaller.

I believe this to be an issue within dynamic flex-based layouts and/or percentage based width on an image.

View on HN

Changing the Zoom in the browser doesn't actually zoom in (as in, the entire page is still in the viewport). Instead it increases the font size, which will have a knock-on effect on everything that is based on font size (like em, rem, or ch units in CSS).

Many images are responsive and will take up whatever (typically horizontal) space is available. So by making the text larger, there's less space left for the images and they become smaller.

I don't think that makes it an anti-pattern. It's more of a quirk of how zooming is implemented in browsers.(or perhaps the feature's name is misleading).

You can change that on Firefox desktop: View menu -> Zoom -> untick Zoom Text Only.

related, Firefox Android has: Settings -> Accessibility -> [allow] Zoom on all web sites

This sounds plausible but I'm not sure it's quite accurate, because in my experience, zooming in also affects the size of things that use px units in CSS.

Yeah, zoom changes page scale factor you can see it's computed value window.devicePixelRatio and that in return changes everything. Font-size can be also be changed independently of zoom inside browser settings.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

px units are not actual pixels, they're a synthetic approximation. I don't remember the exact formula but I'm sure it's affected by font scaling the same as everything else.

They're defined in terms of inches. I don't remember the fraction of an inch that a CSS pixel is.

I believe it's 1/96, while a point is 1/72.

On Safari/Firefox I'm able to "pinch-zoom" with the trackpad which behaves just as OP was expecting it to, while Command '-' and '+' works as you described

Makes sense. "Zoom" is a poor label for that function something like "Font size" would make more sense to the user as thats what it appears to be doing.

People who say it's just the font size are dead wrong. Zooming in changes element sizes, border widths, padding and margin sizes, the scale of effects like shadows, etc, etc, etc. It changes image sizes as well, unless you counter it with CSS.

You are mistaken. The first version of adjusting for DPI was browsers offering a font-size adjustment and it caused lots of issues for the reasons you're alluding to.

Modern zoom on browsers is simply that: multiply everything by 1.1, 1.25 or whatever. This has been the case for probably a decade.

I design sites and this is exactly what is happening. This is also partly to cater for all the different screen sizes, and partly because zooming and DPI are broken beyond repair. W3 broke it first by specifying in CSS 2.1 that DPI is fixed 96dpi, then freedesktop botched HiDPI, and browsers made it even worse by trying to fix it with window.devicePixelRatio and implementing it badly by lying about screen sizes, especially on mobile. And not to mention sites that abuse viewports.

Ctrl +/- does not zoom, it changes the fontsize and devicePixelRatio.

Using a base size (the font size) and scaling everything relative to that using em solves many problems. Sites handle this differently and it is getting progressively worse, confusing screen readers.

https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_...

https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-...

https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

In Firefox mobile, when changing the viewport initial-scale the sizes of some elements don't change. Do you know a way to soft-refresh the page so it recalculates all the sizes? This doesn't happen in Chrome mobile.

Why do many mobile versions of sites disable zoom? What's the use case they are solving?

That’s because they hired front-end “developers” to create their sites. The use case is that someone might want to use their website, which disabling browser features helps to prevent.

I guess like links on some mobile sites that you can't long press to open in a new tab, because they were coded as a weird button or something.

The reasoning I've head before is to prevent accidental zooming and make it feel more like a native app. Personally I just enable the option in Firefox to allow me to zoom in anyway.

There is an option in FF and I think chrome "zoom text only"

https://imgur.com/a/DuIroyH

Uncheck that in FF find it in chrome...

EDIT: Cant find same in chrome settings - but I no longer use chrome... but this setting in FF, if checked, is annoying AF.

I used to prefer that setting in Firefox, because I preferred to keep images pixel-accurate rather than scaling them, and I just wanted the text bigger for readability. I'd propagated that setting forward from Firefox install to Firefox install for roughly 15 years, since before the 16:9 display era.

Then I got higher-resolution 4k screens, which simultaneously meant that scaling looked better, and that scaling images (not just text) was necessary. (I also now use `devPixelsPerPx=-1` to scale everything up by default to an appropriate DPI for the display.)

>>`devPixelsPerPx`

How do?

https://support.mozilla.org/en-US/questions/964888

about:config, set layout.css.devPixelsPerPx to -1, and Firefox will autodetect your screen DPI. I believe this works on at least Windows and Wayland, possibly other environments.

I frequently have the same issue, and I wish there was a way to "highjack" the CTRL + zoom to make it behave like a pinch and zoom on a Mac trackpad. I literally just want to "zoom in" the webpage, not scale up text.

Does anybody knows if there's an extension or something for that?

All of this is for Firefox:

Linux has support for touchpad pinch zoom, at least under Wayland. Not sure if it's still gated behind an about:config user pref or not.

If you don't have a touchpad, I'm pretty sure you can bind "pinch zoom" to <modifier key>+<mousewheel>. I think the about:config preference is `mousewheel.with_alt.action=5` (or `with_shift`, etc).

As for "pinch zoom" using the keyboard, I'm not sure. I don't believe there's any extension API for it. A check of the Mozilla bug tracker didn't bring up anything.

Probably the CSS property background-size [0] with cover value.

[0] https://www.w3schools.com/csSref/tryit.asp?filename=trycss_p...

This is why I usually use the OS level zoom these days for enlarging an image.

ugh the gmail lightpanel does this

as part of goog's strategy of deeply nested divs ftw in modern gmail

`document.querySelector('div[role="img"] img')` to look at it

from what I can see, the width & height in the parent div's style are changing manually every time I zoom, i.e. JS event. This is probably why it takes a second to update; css would be synchronous with the rest of the UX zooming, unless there's an animation

yuck. also impossible to right click, so no easy way to view the image in another tab

TIL (last week) Chrome DevTools understands $$ as document.querySelector [0] e.g. $$('div[role="img"] img')

[0] https://javascript.plainenglish.io/an-easy-way-of-accessing-...

useful! thanks

I think you mean `document.querySelectorAll`. `document.querySelector` is aliased to $, at least in my Firefox.

Also, as a caveat, this only works when `window.$` and `window.$$` have not been defined by the site's JS code.

I can't check Facebook or WhatsApp because Facebook, but in Safari on a Mac this doesn't happen on Google Images.

Reply on news.ycombinator.com