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 of the image.
However, this works only when the browser zoom level is 100% . When I increase or decrease the zoom level, the quality of the images decrease.
Some clients actually have different zoom levels by default. I was wondering, how can you handle it and do we handle it at all ?
Cheers
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:
width: 200px; height: 200px; will actually scale that 200px by 200px image up across more than 200 x 200 pixels, potentially making it grainy.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 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.
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.
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: http://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...
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.
The annoying behaviour of upscaling images on HiDPI screens, which leads to blurry photos (aka the photographers nightmare), has also troubled me for quite some time. I also wondered that there is no simple CSS attribute to disable that for images.
My current solution with CSS looks like this:
@media only screen and (min--moz-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
(-o-min-device-pixel-ratio: 7/4),
(-webkit-min-device-pixel-ratio: 1.75),
(min-device-pixel-ratio: 1.75) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
(-o-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2.00),
(min-device-pixel-ratio: 2.00) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
}
}
Next step would be using classes to define and set different image sizes if needed. I don't know a way to dynamically get the image sizes. The CSS Function attr() seems not to work for this.
Another possibility is the following. The only problem is that the image still uses 100% of the space. This means that there will be empty space around the image after it is resized.
@media only screen and (min--moz-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25) {
img {
transform: scale(0.8);
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
img {
transform: scale(0.6666666666666667);
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
(-o-min-device-pixel-ratio: 7/4),
(-webkit-min-device-pixel-ratio: 1.75),
(min-device-pixel-ratio: 1.75) {
img {
transform: scale(0.5714285714285714);
}
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
(-o-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2.00),
(min-device-pixel-ratio: 2.00) {
img {
transform: scale(0.5);
}
}
CSS method 'zoom' works as expected (instead of scale), but its non-standard and does not work with Firefox.
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.
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.
Hope it helps: css rule transform: scale on body tag or another - not perfect see here, please:
