Explore related tutorials & articles
126
Replies
and that just costed me 120€ for printing :((
Double checked that its set for 300ppi and exported - got 2500 blurry flyers...
By @Tijana368661393fub
That is an incorrect assumption.
A 2000x2000px @300ppi is the same as 2000x2000px @3ppi - it's all about the effective resolution created when you size the image at a given physical print size.
So to understand where things went wrong, what are the pixel dimensions of the exported image vs. the physical print size?
If i go on 'save as' - there is no option JPEG.
By @Tijana368661393fub
Things have changed since 2016 when this was posted. Apple changed their API and Photoshop had to comply. You can still save JPEGs.
As of 22.4.1, you can find png, jpg, pdf, etc., in Save a Copy.
As of 22.4.2 you can revert to the previous behavior in Preferences > File Handling > File Saving Options:
- Enable Legacy Save As
- Do not append Copy to filename
Jane
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>
AdChoices