Short answer
For images shown on a website, DPI does not meaningfully matter. Browsers draw an image using its pixel dimensions, not the DPI value stored in the file. A photo saved at 72 DPI and the same photo saved at 300 DPI, with identical pixel width and height, will generally look the same on a web page and download at about the same speed.
What does matter for the web is:
- the pixel dimensions of the image,
- the file size in kilobytes or megabytes, and
- the file format and compression level.
DPI becomes important when you print the image. If you plan to do both, keep reading, because the two jobs call for different checks.
What DPI and PPI mean
DPI stands for dots per inch. Strictly, it describes how many dots of ink or toner a printer lays down in one inch. PPI, pixels per inch, describes how many pixels of an image are spread across one inch of a screen or a print.
In everyday use, people mix the two terms, and image editors usually label the setting “resolution” in pixels per inch. The number stored in a file is only a label that suggests a print size. It does not change how many pixels the image contains.
Why DPI does not affect web images
A screen shows an image by mapping its pixels to the pixels of the display. The browser needs to know how many pixels wide and tall the image is, and how large the page layout wants to show it. The DPI tag is not part of that decision.
The “72 DPI for web” rule comes from older monitors that were commonly described as having roughly 72 pixels per inch. Modern displays vary widely and many have much higher pixel density, so the rule no longer describes anything useful. Changing a file from 300 to 72 in the resolution field, without resampling, changes only the label.
You can test this yourself. Take one photo, save it twice with the same pixel size but different DPI tags, and compare the files in a browser. Any difference in file size will usually be tiny, since only a metadata value changed.
What to set instead: pixel dimensions
Decide how large the image appears on the page, then export it at a matching pixel width.
- Match the display size. If your content column is 800 pixels wide, a 4000-pixel-wide original is mostly wasted data.
- Allow for high-density screens. Phones and many laptops pack more device pixels into each layout pixel. A common approach is to export at up to about twice the displayed width so the image stays sharp. Whether this is worth the extra file size depends on the image.
- Full-width hero images are often exported somewhere in the range of 1200 to 2000 pixels wide, though the right number depends on your layout and audience.
- Do not upscale small images. Enlarging a small image in an editor does not add real detail, and it tends to look soft.
If you need to hit a particular file size, see our guide on how to increase image file size to 100KB, which also explains what drives file size up and down.
File size, format, and compression
After pixel dimensions, file size is the next thing to control, because large images slow down pages.
- JPEG suits photographs. Lowering the quality setting reduces file size, with visible artifacts appearing if pushed too far.
- PNG suits graphics, screenshots, and images needing transparency. Photos saved as PNG are often much larger than JPEGs.
- WebP and AVIF are modern formats that often produce smaller files at similar quality. Browser support is broad today, but check the requirements of your platform.
- SVG suits logos and simple vector graphics.
A practical method is to export, look at the result at its display size, and lower the quality until you notice a drop, then step back up a little. Many editors have a “Save for Web” or “Export As” option that previews the size as you adjust quality.
Responsive images
A single file cannot be ideal for both a small phone and a large desktop monitor. Websites handle this by offering several sizes of the same image and letting the browser choose. In HTML this is done with the srcset and sizes attributes on the image element. Many content management systems and site builders generate several sizes automatically, so check whether yours does before doing it by hand.
Setting an explicit width and height on the image also helps prevent the page from jumping as it loads. For more reasons to take images seriously, see the importance of images on a web page.
Which is better in Photoshop, 72 or 300?
In an editor such as Photoshop, the resolution field in the new document or image size dialog sets the DPI label, and the pixel dimensions determine the actual detail. Our overview of common photo editing apps covers Photoshop and free alternatives.
- For a web-only image, the resolution value has little effect. Many people leave it at 72 out of habit, which is harmless.
- For an image you will print, set the resolution to match the printer’s needs, commonly 300, and make sure the pixel dimensions are large enough for the print size.
When you change resolution in the image size dialog, look for the “Resample” option. With resampling off, only the label and the document size in inches change. With it on, the editor adds or removes pixels, which affects quality and file size. Menu names differ between versions, so check your own software’s documentation.
DPI for print
Print is where DPI counts. The basic calculation is:
pixels across ÷ DPI = print width in inches
For example, an image 2400 pixels wide printed at 300 DPI comes out 8 inches wide. Printed at 150 DPI, the same image would be 16 inches wide, though with less fine detail per inch.
What does 300 DPI mean?
It means 300 dots, or pixels, per inch of the printed piece. It is widely used as a standard target for good-quality prints viewed at close range, such as photo prints and brochures.
Is 150 DPI enough for print?
It can be, depending on the item. Large prints that are viewed from a distance, like posters and banners, are often printed at lower effective resolutions and still look acceptable. For small prints held in the hand, 150 DPI may look softer than 300. Your print provider’s guidelines are the best reference.
Is 400 DPI high resolution?
It is above the common 300 DPI target, so it is certainly high. For most photo printing, going beyond 300 gives little visible improvement, while the file gets larger. Some fine line art or specialist printing may call for higher values.
If you are preparing prints, check the pixel size requirements of the lab or service you plan to use. Paper finish also changes how a print looks; see glossy vs matte photo prints.
How to check an image’s DPI
- Windows: right-click the file, choose Properties, open the Details tab, and look for the horizontal and vertical resolution under the image section.
- macOS: open the file in Preview, open the Inspector from the Tools menu, and look at the resolution information in the details.
- Photo editors: open the image size or resolution dialog. This also shows pixel dimensions, which are usually the more useful numbers.
Some files carry no DPI value at all, and many web images are exported without one. That is normal.
Quick export checklist for web images
- Decide the largest size the image will display on your page.
- Resize to that width, or up to roughly double it for sharper display on high-density screens.
- Choose a format that suits the image, typically JPEG or WebP for photos.
- Compress until quality is still acceptable at display size.
- Give the file a descriptive name and add alt text on the page.
- Ignore the DPI label unless you also plan to print.
FAQ
Should I save web images at 72 DPI?
You can, but it is not required. The pixel dimensions and file size are what affect how the image looks and loads.
Will a higher DPI make my website image sharper?
Not by itself. Sharpness on screen depends on having enough pixels for the size shown. A higher DPI label with the same pixels changes nothing.
Can I use one image for both web and print?
You can start from one high-resolution original and export separate copies: a smaller, compressed version for the web and a larger one for print. Keep the original untouched.