Explore related tutorials & articles
118
Replies
HTML and CSS code has no ppi resolution property,
Yes & no. The W3C web standard for images is 96 pixels per inch, not 72. And it has been that way for many years. To illustrate my point, I prepared a little CSS pixels per inch test. No matter which display you use -- high res, low res or something in between -- 96 CSS pixels = the same length as 1 CSS inch. See screenshot taken from Firefoxr.
For anyone interested, I used the following HTML & CSS code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Pixels Per Inch Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
background: #555;
color: white;
width: 50%;
margin: 5vh auto;
}
.css-box > span {
display: inline-block;
height: 2rem;
border-right: 2px solid red;
}
.px72 > span {
width: 72px;
background: pink;
}
.px96 > span {
width: 96px;
background: aqua;
}
.inch > span {
width: 1in;
background: gold;
}
</style>
<body>
<h1>CSS pixels per inch test</h1>
<div class="css-box px72">72 pixels<br>
<span></span></div>
<div class="css-box px96">96 pixels<br>
<span></span></div>
<div class="css-box inch">1 inch<br>
<span></span></div>
</body>
</html>
The 72 ppi screen res was an Apple-only standard that didn't last long. Its origin dates back to the mid 1980's when Apple released its first Macintosh computers. The early Macs included a built-in 9 inch display with a screen resolution of 72 pixels per inch. Why 72 pixels per inch? Because the Mac screens were specifically designed to work with Apple's ImageWriter printers, which had a print res of 144 dots per inch - exactly twice the res of the screen. This made it easy to scale the screen display to the printed page for WYSIWYG rendering of graphics and text. Later on, as Apple began making larger displays for Macs, they made sure to keep the screen res set to the same 72 pixels per inch so users would always see an accurate on-screen preview of the printed document (as long as they were using an ImageWriter printer). Meanwhile, Apple's competitors had no reason to stick with 72 ppi res.
Today, 72 ppi screens are long gone. But for some strange reason, Photoshop still clings to this woefully outdated number as if it were the gold standard. And what's worse, the developers and some PS experts would like us all to believe that ppi is only relevant in print which is ridiculous. When I export 96 ppi images, I need the ppi setting to remain unchanged. The Export As feature used to work correctly. Now it's as badly broken as legacy Save For Web <shaking head>.
But 96ppi is equally arbitrary. None of the three screens on my desktop have a resolution of 96ppi, so your 1 inch div example never measures as 1 inch on screen. It also doesn’t print as 1 inch when the page setup is set to 100%.
We are also talking about images here. This HTML example displays three, 300 x 250 pixel images at 100%. The images have been saved at different resolutions—72ppi, 96pp, and 300ppi respectively—but they all display as the same size in the browser page.
The page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Resolution Comparison</title>
</head>
<body style="background-color:#000;">
<div style="margin: 10px; width:100%">
<img src="Snapper72.jpg">
</div>
<div style="margin: 10px; width:100%">
<img src="Snapper96.jpg">
</div>
<div style="margin: 10px; width:100%">
<img src="Snapper300.jpg">
</div>
</body>
</html>
As Dave suggests you can’t use Export if your printer requires 300ppi.
You also don’t have to involve another application, just use Image Size to set the print dimensions and resolution and use Save As to either TIFF or PSD.
If you uncheck Resample you can change the Resolution and maintain the 6000 x 4000 pixel dimensions, and the output Width & Height dimensions will be adjusted accordingly. At 72ppi your 6000 x 4000 pixel image would have an output dimension of 83.3 x 55.5 inches and get placed at that size in page layout.
At 300ppi the same pixel dimensions would have an output size of 20 x 13.3 inches
AdChoices