: How do you handle client's browser zoom ? I have a lot of images on a page, a gallery. I want the images to stay sharp, so I don't do any browser scaling, I use the original dimensions

@BetL875

Hope it helps: css rule transform: scale on body tag or another - not perfect see here, please:
stackoverflow.com/questions/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741

Vote Up Vote Down

@Sue6373160

Other people have given some great tips on the problems that you'll face and I'm not good enough in this area to do a good tutorial but...

You may want to design a responsive site that adjusts according to the user's res/device and then you're probably looking for code that will switch images to higher or lower res files when requested, rather than stretching and squeezing the images you have.

When I last tried to do this, I used media-query.js and picturefill.js. See: responsivedesign.is/resources/images/picture-fill . I had a 3 column layout where some images would span two columns... When the browser window was made small enough, the large images would switch to a smaller res version that would only be one column wide. The user's browser would just load the version of the file that they needed. (and in my case, masonry plugin would move everything to accommodate).

Of course then your user has to have javascript enabled...

Vote Up Vote Down

@Jessie844

I think most of the other answers have missed the point: this isn't about overriding user preferences, it's about giving the best quality images in the common scenario of a user's device assigning more than one physical pixel for each CSS pixel aka "Reference pixel" in your image, resulting in the browser scaling up the image, making it pixelated and grainy.

My suggested solutions below, but first here are the four ways this can happen:


Most rare: the user chooses to zoom in. Not such a big problem, since it's their choice.
Surprisingly common: the user's browser is zoomed in by default. For example, many high pixel density Windows machines are zoomed to 125% or more by default, and Firefox recently (confusingly!) made it so in these cases it tells users they are zoomed to 100% when they're actually zoomed to 125%, leaving them scratching their heads wondering why everything suddenly looks grainy.
Very common: most Android devices (and other devices?) have a pixel ratio of greater than 1. This means that every "CSS pixel" actually gets displayed using more than one physical pixel - so a 200px by 200px image set to width: 200px; height: 200px; will actually scale that 200px by 200px image up across more than 200 x 200 pixels, potentially making it grainy.
Very common: many modern Apple devices have "retina displays". This is essentially the same as an Android device with a pixel ratio of 2, but with better marketing, and a few custom properties that allow it to be detected by name.


Any of these will result in John's problem of a gallery of images looking surprisingly grainy.



I was hoping someone would have a great solution to this problem, but for now here are my preferred options, starting with most effective but least universally possible:


If possible, go vector - SVG (or Raphael.js if you still need to support IE8). Realistically, this is only an option for icons, diagrams etc, and it's never an option for photographs. Very complex SVG can also be clunky on low-end mobiles due to the processing required.
If possible, detect the device's pixel ratio, and serve images based on that. This can also solve the Firefox on Windows problem because Firefox on Windows changes its reading of pixel ratios when it zooms in and out. The downside is, it becomes a tricky coding problem involving development work on the server and client side.
If 1. and 2. aren't possible, but it's really important and image quality is more important than, say, load time, just double up the image.


This is what Google do with their logo on their homepage: they squash a 538px x 190px PNG image in a 269px x 95px container. It's also more or less the same as how responsive images work.
This used to be considered bad practice because old versions of IE were terrible at scaling down images, but those are now very rarely used and much less common than high pixel density screens. It's still somewhat undesirable since it will increase image size and therefore increase load time - that's a trade-off you need to judge case-by-case.
Doubling size is common because very few devices have a ratio greater than 2, very few users are zoomed in more than 200%, and scaling images 50% is cleaner than other amounts.

If 1, 2 aren't possible and load times are too high a priority for 3, I'm not aware of any other options, and my recommendation is to not worry about it, because half the sites on the internet have the same problem, and people with this problem on your site will also have this problem on other sites. Hell, Firefox on Windows even pixelates its own UI buttons...

Vote Up Vote Down

@Speyer780

As DA01 commented you should not do anything about it.

Zoom is a user-specified option and therefore is under their control. The settings they decide to mess with shouldn't be your responsibility.

You can account for different browsers and versions and what not, but reasonably speaking you shouldn't account for a user's zoom.

Sure you may account for 125% or 150% (and you may not even have to). But 200%, 300%, more? It just doesn't make any sense.

What if the user uses the high contrast windows theme? What if they are constantly using the magnifier? Who cares?

Ideally your website is flexible enough that it doesn't make a real different between small zoom difference, but images will decrease in quality with zoom but that isn't your responsibility.

This is of course just my opinion but the company I work for also explicitly tells customers that we do not support their zoom preferences.

Vote Up Vote Down

@Berumen635

You can simply do this via HTML in the head of the site add this

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


This isn't recommended by developers for every type of site but should accomplish what you're asking.

Vote Up Vote Down

@Angie364

So this would be more of a programming question. But using JQuery, or even just plane css you can display different images based on the users screen width, screen height and so on.

Again though this probably isn't the stackexchange to ask.

Vote Up Vote Down

@Vandalay110

You can not force the users hand. The user settings are not yours to play with. Settings and circumventing them is a bad idea there might be a reason why the user did something. In either case you can not guarantee anything across the various devices.

In fact if you go into the technical side it becomes even more interesting. You really give the keys to the kingdom with your webpage. See the user downloads the webpage and the user can now do whatever they like with it. You have no control over this layer, it is after all running on the users machine and they can do whatever they please. Even stackexhange does not look the same on my computer/mobile as it does on yours. I change some aspects of the GUI in my end automatically, to fix 2 rendering bugs and have added 2 shortcuts.

Vote Up Vote Down