Skip to main content

DPI/PPI doesn’t matter at all on the web

I often hear people talking about the proper dpi/ppi to use when creating images for websites.  Here is the simple answer: it doesn’t matter at all.  Not even a little bit.

It is certainly a big deal when designing print pieces, as that’ll make a big difference in how it looks.  On the web, though, all that matters is pixels.  It’s often said that web images should be 72 ppi, but that doesn’t matter.  72 ppi is fine, but certainly not required.

As an example, here are four images that are each 300×300 pixels in size, but with varying levels of ppi:

72 ppi, 19.7KB
samsung 72
300 ppi, 19.7KB
samsung 300
1 ppi, 19.7KB
samsung 1
10,000 ppi, 19.7KB
samsung 10,000

On the web, it clearly doesn’t matter.  However, you’ll want to keep those high-resolution (and high ppi) files for printing in a separate location.  If I ever scale an image down for the web, I make sure to keep an original high-resolution copy of the image safe somewhere.

Another consideration are the new HD/Retina displays coming out, that show images in a sharper resolution than they’re shown on the screen.  This still has nothing to do with ppi.  As explained by mobify:

So if you want to create an HD image at 200 x 200 on a Retina display, create the image at 400 x 400 then use CSS to control the HD image down to 200 x 200: img { width:200px; height:200px; }.

So there you go. Use any ppi you want, just make sure your images are sized correctly!

Share this:

Mickey Mellen

Co-Founder and Technical Director

View Mickey's Profile

More from Our Blog

How We’re Improving Our Brighter Web Marketing Meetups in 2023

As we enter 2023, we’re changing things up again with our meetups. No matter if you’ve never been to one before or have attended several,...

Read More
group of people on conference room

A Robot Wrote This Post About Artificial Intelligence In Digital Marketing

We had a robot write a blog post about artificial intelligence in marketing. What's the worst that could happen?

Read More
high angle photo of robot

[Recap] GreenMellen’s 2022 Year in Review

We like to write these recap blog posts each year. It helps us to celebrate what we’ve accomplished and learn from how much we’ve grown....

Read More
man standing infront of white board

Comments

  1. It’s true. Web is based entirely on set measurements, so your pixel ratio doesn’t matter at all. If you are looking for higher quality, then you need to be looking at the image type, the saving quality settings, and the quality of the original image.

Leave a Reply

Your email address will not be published.