Question The image appears larger than its original size in web browser ?

[Antorib86]

The original PNG image is 1294px wide, but when I view it on the website, the image becomes larger. Even when I open the image in another tab (so no HTML) it's still bigger, so it can't be an HTML or CSS setting.

When I open it in an image viewer or Photoshop, the size is ok.

Using the developer tools, hovering over the image indicates that the image is actually 1294px.
The problem consistently occurs on Firefox, Chromium, and Chrome.

The zoom settings in the browser are at 100%, so that's not the cause.

Windows display settings are also at 100%...no scaling

In an image you can see the difference between the measurement with Photoshop rulers and the one with a Chrome extension that measures the screen...

Since I use photoshop to design the layout of my site, then when I bring the images into wordpress and open the
site in the browser, everything does not match....

 

[rgd1101]

don't have photoshop but paint.net have pixels/inch settings

https://imgur.com/BFAZCqt

View: https://imgur.com/BFAZCqt

 

[Antorib86]

I don't understand what you mean...I created an image in Photoshop 96 dpi 800 x 600 and this is the result..

 

[rgd1101]

try changing the pixels per inch, double it and see the different in photoshop

 

[Antorib86]

ok, if I resize an image in Photoshop to 130 pixels/inch the dimensions seem the same. Obviously I then have to resize them to 96 before saving them.
It's not ideal but for the moment it can be a solution to match the design of the site in photoshop with that in wordpress.
I'll try to do a test on another computer as soon as I can, to see if it's the same

 

[rgd1101]

I think you try to compare 2 different thing.
screen size vs print