<p>They are not making any claim about the size in pixels of the image. The key phrase here is “resolution <strong>metadata</strong>”. This means a field in the image metadata which specifies a resolution (PPI) number for the image, independent of the size in pixels of the image, and independent of the physical resolution of any device it might be displayed on.</p>
<p>The purpose of this PPI/resolution number that is stored in the metadata is that it can be used in the following ways:</p>
<ul>
<li>Scanning software will record it when making a digital copy of a physical document.</li>
<li>Printing software will read it and print the image at that resolution.</li>
<li>Image display/editing software can optionally display the image at “actual size” — if your monitor accurately reports its PPI, at least.</li>
</ul>
<p>Thus, it allows documents to be moved between physical and digital formats without changing their <em>scale</em> — what the physical lengths of elements of the image are — regardless of what PPI is being used by the equipment involved.</p>
<p>This system of tracking resolution and thus scale was more important historically, when workflows that involve both physical and digital copies of the same document were more common. Scale can also still matter for documents which describe or become physical objects, such as engineering drawings, sewing patterns, cutting or drilling templates, and paper models.</p>
<hr />
<p>However, even if the image has no scale to its contents, and the exact resolution doesn't matter, it can still be desirable to know <strong>what will happen</strong> if an image is printed, or displayed in PPI-aware software. That is probably why the standard specifies a fixed resolution number — so that the author of the HTML document can predict how an image saved out of a <code>&lt;canvas&gt;</code> will be printed. If you wanted to make a circle exactly one inch across, you would make it 96 pixels.</p>
<p>You can't be certain that the software used to print the image will in fact respect the metadata — it might use a fixed DPI, or scale the image to fill the page — but you can at least design content that is <em>consistent</em> in what it says about itself.</p>

CC BY-SA 4.0
2024-06-16T15:22:51.930Z
2024-06-16T15:22:51.930Z
Kevin Reid
<p>I wanted to convert a chart rendered by canvas element to an image file so that the user can download it. But the official HTML docs say that: <strong>The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata.</strong> I don't know much about digital images so I want some clarification. Here is my understanding :
Pixel per inch (PPI) of an image will always be with respect to the screen size on which you are trying to display the image. Lets say i have screen of 10 inches with a PPI of 10 and 100x100 pixel image. This image will also have a PPI of 10 on this screen. But the same image will have a PPI of 5 on a 20 inch screen with lets say a 20 PPI.
So PPI of screen is like the maximum possible resolution
and PPI of an image is the actual resolution on a SPECIFIC screen.
Now the DPI is also something similar. There is the DPI of printer and then the paper size on which we are printing and finally the image which we are trying to print. For simplicity lets assume one pixel maps to one dot on the printer.
Now screen PPI's and Printer DPI's are generally good so for standard screen and paper sizes its the image size in pixels that will determine its PPI. Now the canvas element converts the rendered canvas image into a data URL according to its size. So if the canvas is lets say 500 x 500 pixels. Then the downloaded image will be around this size as well. Why does then the documentation say that <strong>The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata.</strong> Won't the resolution depend on the canvas height and width. And what print output size is this 96dpi with respect to?</p>

<image><pixel-graphics><pixels><raster-image>
Clarification on PPI
Urooj
# Clarification on PPI

(Asked by: username_0 on 2024-06-15)

I wanted to convert a chart rendered by canvas element to an image file so that the user can download it. But the official HTML docs say that: **The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata.** I don't know much about digital images so I want some clarification. Here is my understanding :
Pixel per inch (PPI) of an image will always be with respect to the screen size on which you are trying to display the image. Lets say i have screen of 10 inches with a PPI of 10 and 100x100 pixel image. This image will also have a PPI of 10 on this screen. But the same image will have a PPI of 5 on a 20 inch screen with lets say a 20 PPI.
So PPI of screen is like the maximum possible resolution
and PPI of an image is the actual resolution on a SPECIFIC screen.
Now the DPI is also something similar. There is the DPI of printer and then the paper size on which we are printing and finally the image which we are trying to print. For simplicity lets assume one pixel maps to one dot on the printer.
Now screen PPI's and Printer DPI's are generally good so for standard screen and paper sizes its the image size in pixels that will determine its PPI. Now the canvas element converts the rendered canvas image into a data URL according to its size. So if the canvas is lets say 500 x 500 pixels. Then the downloaded image will be around this size as well. Why does then the documentation say that **The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata.** Won't the resolution depend on the canvas height and width. And what print output size is this 96dpi with respect to?

**Tags:** image, pixel-graphics, pixels, raster-image


---

## 1 answers

### Answer by username_1 on 2024-06-16. Score: 0

They are not making any claim about the size in pixels of the image. The key phrase here is “resolution **metadata**”. This means a field in the image metadata which specifies a resolution (PPI) number for the image, independent of the size in pixels of the image, and independent of the physical resolution of any device it might be displayed on.

The purpose of this PPI/resolution number that is stored in the metadata is that it can be used in the following ways:

* Scanning software will record it when making a digital copy of a physical document.
* Printing software will read it and print the image at that resolution.
* Image display/editing software can optionally display the image at “actual size” — if your monitor accurately reports its PPI, at least.

Thus, it allows documents to be moved between physical and digital formats without changing their *scale* — what the physical lengths of elements of the image are — regardless of what PPI is being used by the equipment involved.

This system of tracking resolution and thus scale was more important historically, when workflows that involve both physical and digital copies of the same document were more common. Scale can also still matter for documents which describe or become physical objects, such as engineering drawings, sewing patterns, cutting or drilling templates, and paper models.

---

However, even if the image has no scale to its contents, and the exact resolution doesn't matter, it can still be desirable to know **what will happen** if an image is printed, or displayed in PPI-aware software. That is probably why the standard specifies a fixed resolution number — so that the author of the HTML document can predict how an image saved out of a `<canvas>` will be printed. If you wanted to make a circle exactly one inch across, you would make it 96 pixels.

You can't be certain that the software used to print the image will in fact respect the metadata — it might use a fixed DPI, or scale the image to fill the page — but you can at least design content that is *consistent* in what it says about itself.


---

