So on video monitors, we don't all see the same size of things. Browsers do zoom the whole page, including the images, when we zoom the page away from 100% zoom size, but (except for Firefox) NOT when we only set a larger text size in Windows, which only applies to text. However, web page 'meta viewport' size can tell the mobile browser other starting instructions.īut manually zooming any browser affects the whole page. iPhone 4 and 5 and iPad 4 and Air report a Pixel Ratio (enlargement factor) of 2, initially enlarging the whole page screen to show page and text larger. On this page (a directive sets viewport to device settings), then iPhone always reports screen size to be viewport size, which is fixed, independent of actual window size. Chrome is different than the others, it always reports screen size to be hardware size, instead of cropped zoomed size of full screen. Plus browser zoom is added to it.Ĭhrome and MS IE (desktop) initially report a Pixel Ratio enlargement factor of 1, regardless of Windows text size (but it also adds browser zoom size). So in the browser, the initial showing enlarges the whole page, both text and images (Windows only enlarges the text). Speaking of a Reset 100% Zoom view, then.įirefox (desktop) specifies a Pixel Ratio equal to the Windows text size enlargement (120% Windows text size is 1.2 Pixel Ratio in Firefox). There are also differences in browsers too.That too may change the size of the image that you might see. Now some sites (this site is trying too) try to present 'responsive image sizes' to tiny screens, smaller so they will better fit on the screen.The web page can specify a viewport size to specify other starting zoom instructions for the small phones.

So a new logical CSS Pixel Ratio factor was added, basically a multiplier generally from 1 to 3, a difference in logical pixels and actual device pixels - which causes the phones to begin zoomed in some, to enlarge the text.

Fitting the full web page width to the small screen makes the text too small to be readable. So today, a 500x200 pixel image is not always shown at 500x200 size, depending on your zoomed text size.

Today's browsers also zoom the images when we zoom the text size, to keep the page layout consistent, relative to text size.

Times have changed after much of this was written. Your image will be resized based on the type of page and the type of paragraph that it appears in.Necessary updates: (techie stuff, about images we see on video monitors now) As explained above, all images in the CMS should be at least 1,200 pixels wide.

Standard web image resolution