my web site displays images bigger than their original size. The images are 20% bigger than the original created with photoshop (for example), if an image's width is 200px, the browser display is 240px.
So all my images are blured.
Do you know why?
Asked
Active
Viewed 4,401 times
11
-
Didi you checked your browser settings? is it on 100% ? – Mohd Asim Suhail Jan 23 '18 at 16:33
-
1Yes, it is 100%, if I resize down to 80% everything has the right size... – Daniele Jan 23 '18 at 16:43
-
does your css have zoom property defined on html or body tag? – Mohd Asim Suhail Jan 23 '18 at 16:50
-
no, it hasn't zoom property – Daniele Jan 23 '18 at 16:56
-
1can you update your question with some sample code so that i can analyse it because it is highly improbable that image appears 20% larger. Didi you check all of your css code for zoom property? – Mohd Asim Suhail Jan 23 '18 at 17:02
-
did you solve the problem? If not, then can you please share your code on github or jsfiddle ? – Mohd Asim Suhail Jan 23 '18 at 20:56
-
ok, I've done it – Daniele Jan 24 '18 at 14:53
3 Answers
7
I've found the solution!
Windows 10 has the default setting of dpi seted to 125% (search dpi into serach box and then look at "update text app and other elements"), this increase the dimension of everything in my monitor, so the images into my web site are bigger of 25%.
What I can do to prevent this behaviour on my web site and continue to use the default windows settings dpi?
Daniele
- 538
- 1
- 5
- 17
-
1I'm not sure this is the case. Changing the DPI to 100% reduces both the browser and explorer (or photoshop) ones. Still different sizes. – rlatief Aug 19 '22 at 12:38
-
I'm testing it and might post a new question later after sorting out the tests... In the mean time of someone read this and knows why... I created an image with 640px width. I upload the image, it looked bigger on browsers. If I download the image back, it's back to 640px width. If I take screenshot, it's still bigger (around 800+px)... Why? It's a new monitor and I played with the DPI settings as well but as I mentioned it reduces/enlarges everything, while the problem here is that the image is larger on browsers only (not on explorer/pic viewer or photoshop). Browsers are of course at 100%. – rlatief Aug 19 '22 at 12:54
-
This is old but I am having this issue right now. When I upload an image that is high quality to my site, the image on the site looks to be much larger, as if it is scaled up, and it's blurry. When I download that same image, it's fine again on the computer. I tried playing with the screen DPI and putting on 100% which helped, but isn't ideal because the screen becomes way too small, but, that did make everything more consistent. It's just not the ideal solution. Ideally, the windows 11 image app would scale with the rest of the screen, then it will all be consistent. – K.D Sep 08 '22 at 19:17
1
Here are a part of my code:
First of all in the head tag I have this meta tags:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=1, height = device-height" />
My css hasn't any zoom or similar, and my html is like this:
<img src="/path-to-image-folder-ebook-cover.jpg">
The width of this image is 250px and in photoshop it looks like perfect, but in browser (chrome or firefox is the same) it looks bigger and blured, but, if I zoom down the browser to 80%, the image is perfect
Daniele
- 538
- 1
- 5
- 17
0
I also had my Chrome browser displaying larger than my picture viewer app. As Daniele said. My display settings in windows were scaled to 125%. When I changed the display scale to 100%, the picture viewer app still showed the same picture size while only changing the scale of buttons and other display elements. So perhaps it's helpful info that the scale of my display does not change the image display size but everything else. The browser on the other hand is entirely changed by the system display scale. I even found that http://whatismyscreenresolution.net/ read my screen size too small according to my system display scale being set larger.
Joe
- 1