[HN Gopher] Ask HN: Why do certain websites' images get smaller ...
___________________________________________________________________
Ask HN: Why do certain websites' images get smaller when I zoom in?
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.
Author : cphoover
Score : 60 points
Date : 2022-03-08 14:49 UTC (8 hours ago)
| cma wrote:
| Why do many mobile versions of sites disable zoom? What's the use
| case they are solving?
| leephillips wrote:
| 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.
| cma wrote:
| 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.
| derkades wrote:
| 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.
| fouc wrote:
| This is why I usually use the OS level zoom these days for
| enlarging an image.
| joostdecock wrote:
| 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).
| crtasm wrote:
| 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
| ossopite wrote:
| 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.
| no_way wrote:
| 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...
| mark-r wrote:
| 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.
| wizzwizz4 wrote:
| They're defined in terms of inches. I don't remember the
| fraction of an inch that a CSS pixel is.
| mark-r wrote:
| I believe it's 1/96, while a point is 1/72.
| [deleted]
| cruano wrote:
| 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
| [deleted]
| dangerface wrote:
| 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.
| bufferoverflow wrote:
| 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.
| pickledcods wrote:
| 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...
| jmyeet wrote:
| 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.
| samstave wrote:
| 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.
| JoshTriplett wrote:
| 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.)
| samstave wrote:
| >> _`devPixelsPerPx`_
|
| How do?
| JoshTriplett wrote:
| 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.
| severine wrote:
| https://support.mozilla.org/en-US/questions/964888
| drcongo wrote:
| I can't check Facebook or WhatsApp because Facebook, but in
| Safari on a Mac this doesn't happen on Google Images.
| awinter-py wrote:
| 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
| cuttysnark wrote:
| 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-...
| awinter-py wrote:
| useful! thanks
| bashy wrote:
| Probably the CSS property background-size [0] with cover value.
|
| [0]
| https://www.w3schools.com/csSref/tryit.asp?filename=trycss_p...
___________________________________________________________________
(page generated 2022-03-08 23:02 UTC)