Question posted in 
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?
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?
3
Answers
Here are a part of my code:
First of all in the head tag I have this meta tags:
My css hasn't any zoom or similar, and my html is like this:
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
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?
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.