I am confused. I use a PNG image on my website. When I display this image without CSS (https://www.smart-rechner.de/assets/pics/rechner/erbschaftsteuer.png), the image appears blurred. The browser shows the image size (670x600) in the title. I use the chrome zoom level 100%. But the picture is displayed larger and is therefore blurred. If I save it as a screenshot with "Print", it becomes an image of 785 x 700 px. I suspect this is due to my screen resolution. Does anyone know this behaviour from Chrome?
Related
My website have some banner ads used by image (jpg,png, gif). Some of them do not display. When I inspect them by Chrome inspector and hover on the image src, the inspector show intrinsic size of images are 1x1. I open that link in the new tab, I do not see anything, but when I reload the page, the image appear. Have anyone had this problem?
I'm working through Mozilla's tutorial on responsive images. Part of the tutorial explains how you can use the responsive design feature of a browser's developer tools to see the pixel demensions of an embedded image on various display sizes.
It asks students to view their demo page in a browser, and open up the responsive design developer tool. I'm using Chrome and did just that. I then set the screen demensions to 320 X 480, and inspected the first picture in the body of the page. However, Chrome says the dimensions of the picture are 800 X 464. How can that be if the screen itself is only 320 X 480?
Furthermore I tried it out in Firefox, and Firefox gives 280 X 162.4.
So:
What are the units for all those demensions? I presumed all the dimensions were in pixels, but a fractional pixel doesn't really make sense.
Assuming the units are all the same, why is the picture larger than the screen in Chrome, and why does Chrome disagree with Firefox?
In general, mobile browsers use the following strategy to display web sites that were not mobile-optimized: they render them as if the were displayed on a small desktop (i.e. on a "virtual viewport", usually 800 to 1000 pixels wide), and then scale the result down to fit in the mobile screen. There is a classic article "A tale of two viewports" (particularly, part two) by Peter Paul Koch that explains it well.
It appears that the Responsice Design mode of the Chrome's devtools assumes that this behavior is happening and the "virtual viewport" is 980 pixels wide. Firefox doesn't do this, making the virtual viewport equal to the actual window size. Setting <meta name="viewport" contents="device-width"> makes all browsers (including real mobile ones) do the latter.
So:
The units are CSS pixels before the scaling. Non-integer pixels make sense for calculations, when browsers renders them they get rounded.
The picture is larger than the screen because the virtual viewport is scaled down. This can be prevented by setting <meta name="viewport" contents="device-width">.
Mozilla Firefox developer tools is showing you the size of image which is actually shown where as Google Chrome developer tools is showing the actual image size.
so we can say neither Google Chrome nor Mozilla Firefox is wrong, they are just showing different image size because their designers have chosen to do so.
The downloaded image can be larger than what is displayed in your screen. If a downloaded image is too large for the view space, it shrinks the image to fit.
With Chrome 90, when hovering over an image URL in the Dev Tools Elements inspector, a tool tip will show Rendered size and Intrinsic size. Intrinsic size is the downloaded size.
In Firefox hovering over an image URL in it's Inspector will show the actual image size (downloaded size) under a popup thumbnail of the image, and it will show the rendered size over the image in the page view.
On real mobile devices the rendered size is actually likely to be larger than these browser mobile views indicate. As of writing mobile screen dimensions are commonly 1080 x 1920 pixels or even denser (The Google Pixel 5 has a FHD+ screen (1080 x 2340)). The browser mobile view is likely to indicate the view size is something like 320 x 480 (depending on which device is selected).
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?
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?
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
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.
I've uploaded an image which is not blurry at all but once I display that image on the home page it looks like image 1 (very blurry).
image 1
The original image is not blurry at all. The graph was created in excel, I zoomed up real close, took a print scr (as opposed to snipping tool as with snipping tool it does get blurry) then put it in paint and cropped it out and saved it as a PNG.
Any suggestions?
If you put your image as it is and don't change the dimensions of your image, its's should looks fine (not blur). but if you change your image dimensions and force image to bigger than it's original size, it must be blur.
for more detail please mention your webpage link.
Okay, so here's the issue. I'm designing a website mockup in Photoshop (set at 72dpi).
I export a logo.png file with the width and height of: 295px x 129px.
I visit the logo.png file directly in the browser (Chrome or Firefox), and the image appears 25% larger. I verify this by taking a screenshot and comparing them side by side.
I was wondering what the issue was, and I realized that on Windows 8 control panel (Appearance and Resolution -> Display), "Change the size of all items" is set at "Larger - 150% (default)". I'm on 2 4k monitors.
If I change this value to 125% and log back in to the windows user, everything appears way smaller (uncomfortably smaller), but in the browser, my image now appears at the correct size.
So my question is this..
Is there a way to prevent the browsers from resizing my image content? I would prefer not to hack it by specifying width:75%, for obvious reasons (those with 100% OS item scales would see it even smaller).