93 thoughts on “What DPI do web images need to be? (spoiler alert: it doesn’t matter)”

1. Great way to explain it (bonus… you’re funny)! :)

   • Thanks, Janet! :D

2. So if you do need to print an image, I use this free tool to change the DPI
   http://convert.town/image-dpi

3. Great article, but doesn’t optimizing images for retina (doubling something that’s 300px wide to 600px) also increase the file size tremendously and therefore slow down the page load speed?

   • Hey DebG, that’s a great question! Doubling the size of graphics definitely increases the file size, but you can do things like run the images through a minifier which will reduce the file size, or if the images are included via CSS (as background images, like in a sprite) you can show them only to people with retina displays through a media query, like this one: https://css-tricks.com/snippets/css/retina-display-media-query/

     Or, these days you can use SVGs for lots of things, and since those are vector, they’ll look great at any size!

     • Hi,
       I manage the web affairs of a hotel. The sites like Expedia and Booking ask for pictures to have about 2,800 px wide as minimum, because users, visitors like to see HQ pics. Of course it’s for selling hotel services. Shall they have a good engine that support a great bandwith to accept 2,3 and 4 MB pics!

       And when you check the photos of those sites, they don’t take so long to load, right? Maybe the engines and bandwith are improving in the last years?

     • Sprites… ok… what about photo galleries? Any tips?

4. Here the things. For the most part I agree with you about the importance of DPI. But, even using the examples you have of the kittens, you can see one important reason to lower the dpi for web usage. File size. Last I checked Macs are 72 and PCs are 96. So in all honesty if you are no planning to consider your images for someone to download and print off at high quality, you should bring dpi to 96 dpi. Why? Optimization of your website. Yes the internet speeds have risen considerably over the years, but download time is still a major factor in the ranking and overall quality of a website. One image may not make much of a difference, but when you look at a blog main page, every one of those images being 300dpi could slow down the load time. As for Retina, displaying image still has the same consideration, size. While it’s better for them to have the better dpi, they are not mainstream enough just yet to change the internet. They will be though, just not yet.

   • Hey Jeremy, thanks for chiming in!

     You’re right that the pictures do have different file sizes! However, you really have to go out of your way to create an image with a high DPI for the web. To save those kitten images, I had to avoid using Photoshop’s Save for Web functionality (which discards the DPI info entirely, and defaults to 72 the next time you open the file), and save the JPGs the old fashioned, non-optimized way. There’s no reason anyone would want to do that normally, unless they were illustrating a point like I was.

     Macs and PCs haven’t been 72 and 96 DPI, respectively, since the 90s – you can check out http://dpi.lv/ which will show you the DPI of many current screens.

     So, that being said, I still stand behind image DPI not mattering on the web — especially when the most common save for web functionality (in Photoshop and likely lots of other apps and image optimizers) will discard that information no matter what number you put in, and since websites are meant to be viewed on screens, not printed out.

     • I suppose it’s because I’m a front end developer that I receive a ton of images in 300 dpi for every website and see the stock photography sent to me also in 300 dpi. I’m an exception to the rule I guess.

       • You are totally missing the point here. The problem with the images you receive is not that they are 300 dpi, but rather their pixel dimensions. Read the article again.

5. Here’s the only reason why this matters:

   In the example you gave, where we just communicate in pixel dimensions, my client asks me what size images… if I say 1000 x 1000 pixels for an image, there is a big difference in size between 1000 x 1000 x 72 dpi and 1000 x 1000 x 300 dpi. If she uploads 1000 x 1000 @ 300 dpi, her site is going to drag. Pixels are the fundamental measure, but DPI is the multiplier. That’s huge.

   For a long time, it was 72. So for retina, instead of asking for 1000 x 1000, I would ask for 2000 x 2000 @ 72 dpi. Or 1000 x 1000 @ 144 dpi. It’s math, true, but it’s also communication.

   • Hey Tim,

     File size definitely does matter – however, most image optimizers/Photoshop’s Save for Web strip either out dpi information entirely or default to 72 as a convention, since dpi is only relevant for the purpose of printing. So, if you’re saving your images properly for the web, dpi won’t even be in the picture.

     On the web, 1000 x 1000 at 144 dpi and 2000 x 2000 at 72 dpi are two completely different things. Since browsers don’t take dpi into consideration, you’re simply dealing with a 1000 x 1000 image vs a 2000 x 2000 image. A 1000 x 1000 image at any dpi (whether it’s 72, 144, 1000 or 100000) is still 1000 x 1000, and it won’t be retina optimized. If you don’t believe me, you can load this blog post on a retina device and compare the cats and you’ll see that they all look identical.

     • I am not disputing the math. I am talking about communication. You’re assuming people are using image optimizers or Photoshop, which my clients don’t usually have. Nothing is stopping them from uploading a 300 dpi image to their home page if I tell them it needs to be 1000 x 1000. In fact, I am dealing with this issue today. So, it does matter, especially to those who are not so technical.

       • You did seem to be disputing the math when you said “I would ask for 2000 x 2000 @ 72 dpi. Or 1000 x 1000 @ 144 dpi.” Those two things aren’t equivalent. In fact, 1000 x 1000 @ 144 dpi is the worst of both worlds, since you have the smaller, non-retina optimized pixel size *and* the increased file size due to dpi (which has no effect in a web browser).

         I completely agree that client communication is important – so is education. Most people who are uploading images to the web will have a way of resizing them, and most of those programs will have some sort of save for web option. If your clients are really untechnical and don’t have image editing software, how are they going to be able to change the dpi setting in their images? Teaching a client to change dpi settings seems just as complicated, if not more so, than teaching them how to resize an image or how to run images through an optimizer (especially one like ImageOptim that’s a simple drag-and-drop) that will strip out dpi information automatically.

         Alternatively, if they don’t have any software, you can send them to an online image editor like Pixlr, or you can install one of the many image optimization plugins that are available for WordPress that will take care of optimizing the images automatically with no client input. There are many ways to get around technical abilities and limitations.

         • I think we are talking about two different things. DPI matters when it comes to file size. Image optimizers take care of this, but not everyone uses them before uploading.

           So, perhaps a more accurate subhead for this article would be: (spoiler: it doesn’t matter if you optimize your images).

   • I was thinking more about what you said, and I wondered, why should dpi affect file size in any way? It’s just a ratio between pixels and inches on the printed page – a tiny bit of metadata in a file that determines printed output and nothing more.

     The images I’d posted were indeed different file sizes, but I just realized that that was a function of how I was saving them (I must have been saving the image, closing it, re-opening it, and then re-saving it). I just regenerated the 72, 300, and 1000 dpi examples without closing the original file between saves and now the file sizes are identical. You can open them and see for yourself if you’d like.

     It really, truly doesn’t matter – optimized image or not.

     • Well, I am going to have to eat my hat, stand (or sit) corrected, and just plain apologize for my ignorance and hubris. I have been in this business far too long for me to have such a fundamental misunderstanding of this topic. Thank you for your diligence and willingness to make sure I am educated on this aspect of web images.

       All these many years, I have operated with the wrong understanding that pixel density in images was a factor in quality (probably because of my roots in print). I now see that it does have an impact if you are measuring/sizing in physical dimensions (such as inches) which is important for print, but when it comes to the web, it’s all about pixels. And for retina, its just 2x as many pixels.

       It also turns out that the issue I mentioned before, about dealing with a 300 dpi image, turned out to be a red herring in terms of the dpi. The image had also not been optimized for web, so it contained unnecessary metadata and no compression, both of which were causing the size to be big.

       Bows… thank you, and I am sorry if I added to any one’s confusion. I should have known better!

       • Thanks, Tim! It’s definitely a somewhat confusing topic with a lot of misinformation out there, and it took me a bit to wrap my head around it as well!

         • There’s a lot of us out there who spent time in print and now work on the web that still refer to it as DPI. I wouldn’t say that the explanations here changed my understanding in any meaningful ways. (Size and resolution have an inverse relationship, images for the web should be optimized for screens, images for print should be optimized for output devices, etc.) But I can see how communicating about resolution with younger web natives contributes more and more to the confusion if we don’t phase out DPI in favor of PPI.

6. Such a great funny informative read. Thanks!

7. Thank you!!!
   This whole 72 vs 300 dpi thing has always confused me!!!! I’ve argued extensively with my father about this topic on numerous occasions (he kept saying “dpi doesn’t matter for web!” and he was right lol).
   You’ve explained it in a way I can finally understand and can now post/send images without fear of quality loss.

8. Disappointed that this is misleading to say “it doesn’t matter”. This is a huge issue for sites as page download time is a significant factor in quality score for both organic and paid traffic from Google, and other search engines. I regularly come across sites that lose visitors because their home page takes too long to load, and the consumer leaves, largely due to images taking too long to download. They are not getting organic traffic ranking and they pay a higher price for clicks because of the poorer user experience if they are doing paid search. It is a matter of form and function. The image displayed on screen as you say, will not look any different, regardless of the dpi. But the download time and bandwidth can be massively different, and cost both consumers and web site owners significantly in time and money to download the same ‘sized’ images that happen to weight 10, 20, 100 times more than they need to.

   So visually, it doesn’t matter, but in every other aspect, it absolutely does matter, hugely. I think the best designers will look beyond obvious and immediate requirements, and hopefully add value to the entire process. To do otherwise, could seriously hinder the success of many sites traffic generation strategies.

   • Hi Tania, this would be true if DPI had any effect whatsoever on file size, but it doesn’t. You can set your image to 1 DPI or 10000 DPI and the file size will be identical, which makes perfect sense if you understand how DPI works and you think it through, because the pixels are exactly the same – it only affects how the image prints on paper. Feel free to download the cat examples in my post if you don’t believe me and you’ll see that the file size is the same on all three.

     It really doesn’t matter. (However, image optimization absolutely does.)

     • It’s still something not clear. If you say that browser DON’T read the dpi or ppi, they just read the dimensions of the images, like 800 x 600px, 1200px wide, and so on… And also you say that the dpi or ppi don’t even appear in the browser, so… if the dpi/ppi doesn’t really matter for web… What is the reason to use 72 ? why not 36, 24, 12, 8 or even 1 dpi?

9. Thanks for the informative post!
   I had a question regarding printing… if I wanted to blow up one of my images for a wall poster print, how do I figure out how many PPI I should save my image as? Ultimately, I would want the best quality possible.

   Thank you!

10. Pingback: How to Manage Your New WordPress Website

11. nice plagiarism. didn’t expect much from a woman designer.

    original, better written, properly explained:
    http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

    • 

      • You’re AWESOME! I found this first, so for me it’s the original. LOL.

      • “Properly explained?” No. That article is poorly explained, and includes the false statements “resizing changes pixel sizes” and “there are two ways to enlarge an image: add more pixels or make the pixels larger.” You cannot change the size of a pixel on your monitor.

        I think understand what the author is trying to explain, which is that you can open an image in Photoshop and double the width of the image (resampling), and the content of the image that used to be the size of one pixel on your monitor would now take up the space of two pixels. But no pixels have changed size! A pixel on a monitor is always going to be the same size as it was when it left the manufacturer.

        I can see why you like the other article though, as you seem determined to maintain your ignorance. Now go change the size of your monitor’s pixels, to your heart’s delight.

      • *upvote*

    • OMG! I cannot believe I just read this kind of comment on 2015!
      FYI ‘Mister’ (I assume) ‘whatever’, it’s not a plagiarism. Just two posts on the same subject, and in my humble “woman webdesigner” opinion, this one here was better written, and nicest to read. Dona, congrats! You did a great job here! =]

    • What a misogynist comment. How ignorant of you.

12. I feel like this might be a bit misleading- at the beginning of the post you show all images as the same size but tag them with different resolution- this is where is it misleading. If those images were physically the same size but different resolutions they would look significantly different once downloaded. I get the point, that it doesn’t really matter for web. As someone that deals with generating digital images via 3d rendering for web and print, I ended up here trying to find the best image resolution for HD screens. I challenge you to try your example test again but start with a hi-res image and down sample. I think you will be surprised at how different pixel smoothing is when you change the size versus change the resolution. When you zoom in to each image at 500% the differences will be obvious. I am probably more attuned/paranoid (and also probably not your target audience) about it since I am trying to figure out how to make large images look really nice on the web, when you by necessity have to discard a lot of image data to serve it up over the internet.

    • Hi Lindsay, there’s nothing misleading here though I do get that it can be confusing! My sample images are the same pixel sizes but different DPIs. If you download them and open them in Photoshop, you can verify this yourself (and you’ll see that they’re the same file size, too). You can zoom in as much as you want, and you’ll see no difference in any of them. They’re identical in pixel size, but with different DPI values, they’d be different physical sizes if they were printed out (as shown above).

      DPI is a simple ratio of pixel size to printed size, which means that DPI on its own doesn’t mean anything except in relation to those two numbers. With that in mind, you can make the DPI change in two different ways: by leaving the pixels alone and changing the print output size (which is what I did in this post), OR by leaving the print output size alone and changing how many pixels make up the image (resampling – which is what you’re talking about). If you do the latter, then of course the image is going to change in quality, but that’s not due to the DPI (which means nothing on its own, being simply a ratio between pixel size and print size) but rather because you’re altering the image. And if you’re resampling an image, you should be sizing it to the exact dimensions you need for your particular website (say, sizing an image to 1000px for a 1000px container – or to 2000px if you’re accommodating high resolution/”retina” screens) versus worrying about DPI, which is a meaningless value if you’re not printing the image.

      • “And if you’re resampling an image, you should be sizing it to the exact dimensions you need for your particular website (say, sizing an image to 1000px for a 1000px container – or to 2000px if you’re accommodating high resolution/”retina” screens) versus worrying about DPI, which is a meaningless value if you’re not printing the image.”

        If you size an image to 2000px for a 1000px container, you are effectively increasing the resolution, or the dpi or ppi or whatever we want to call it. I get the point about dpi doesn’t matter for maybe the majority of screens, though increasingly more and more devices can render images with more pixels in a smaller area, so if you care about how the image looks on those devices then you are saying it needs to have a higher resolution? Or am I misunderstanding that?

        My other comment was more about the way in which you are discarding image data via downsampling, which really wasn’t applicable to this post or what your were doing, as you were never discarding any image data, and probably no one else is pixel peeping at 500% anyway!

        • I guess I need a clarification- if we generally measure screen stuff in pixels- but hd devices can render images with more than 72 pixels per inch, if you are laying out stuff on a screen and want a 1000px wide image, that will render well on hd, then you suggest upping the size to 2000px…this seems a bit arbitrary… I am wondering if there is an actual consensus resolution to work towards, basically is there a new ’72’ for hd devices? I know that the retina displays actually vary in ppi…

          • A few things:

            1. An image’s DPI setting (ratio of pixels on screen to inches printed out) is 100% unrelated to the pixel density of a screen. I know that gets confusing because people use DPI and PPI interchangeably, but know that they have nothing to do with each other.

            2. Most screens (retina or not) for the last 20+ years have had a pixel density of more than 72, and they’re all different from each other. Check this site out to see: http://dpi.lv/ There is no standard screen pixel density and there hasn’t been for a very long time. Plus, remember point #1, which is that the DPI setting in an image is entirely unrelated to pixel density anyway.

            3. Creating an image at double the target size is not arbitrary, but rather the standard way of accommodating retina (or HiDPI) screens on the web if you’re not using a vector format (i.e. SVG) for your images. I’m not going to write a long explanation about that here, but you can google it and find plenty of info supporting this.

          • Oh, and one more thing to clarify: I would never suggest taking a 1000px image and then sizing that up to 2000px. In that case you’ll just get a gross, blurry mess! The idea is to create the original image at double the size that you’re targeting, or if you’re sizing down from an existing image, make sure it’s at least double the size to start with, because no one likes gross, blurry images.

          • So double the size you want it to appear is rule of thumb for hd devices. Sorry for my confusion. I may still be confused, but everything that was written above also assumes a baseline of 72 ppi, right? Or are you saying images just exist by pixel width and height and resolution actually never even matters? I ended up here because I recently saw some of my web images on a retina display and was appalled at how they looked, especially since I stair-step downsample images and always thought I knew how to web optimize. I definitely don’t know best practices with web coding, and I laid out my site with percentages rather than pixel dimensions, which generally does exactly what I want, except if I stick a 2000px image in a spot intended for a 1000px image, it overflows and busts up my layout. I am still wondering if image resolution can solve this. If I up the resolution, but keep pixel size the same… It seems to work in my layout, I haven’t had a chance to look on a retina display again to see if the image actually looks better.

          • I think I solved my own problem regarding twice as large images messing up my layout measured in percentages… I was targeting img tags with my styling at a percentage of browser width… I just need to wrap those images in a div and and target div as percentage of browser window, then img can be 100%… Now I just need to check images look better on retina…

13. Hi Dara,

    Thanks you so much for sharing such a wonderful article on DPI. Let me first introduce my self so that you get the detail idea for my question. We had just started our website for online printing business in which we put templates on our website for product like Mugs, T-Shirts, Wall Calendars, Brochures, Letterheads, Business cards etc. so that the customer can easily upload their images in our templates and edit them accordingly but we are facing problem.

    1. We Can’t upload templates in 72 DPI as they need to be printed at 300 DPI later.
    2. We Can’t upload templates in 300 DPI as they Slow down the website.
    3. For web color mode required is RGB but we need CMYK color mode to print the Templates.

    So I just want to know is there any way that we can maintain out templates on website in 72 DPI in RGB color mode and link this Templates to our original file i.e., 300 DPI in CMYK color mode for printing?

    Thanks in advance.
    Buvnesh

14. My brain hurts after reading that. I definitely learned when I started the whole 72dpi thing. I am still confused a bit via partially what Lindsay was saying. My site design for joomla is by pixel. So the template size of where the main text goes is I think 1200 or something (just off the top of my head; it still will get my point across). So normally if I want an image to line up along the text (wrapped) I choose 400 px if it’s wide, 300 if it’s tall (and 500 pretty much nothing will fit but it). But on an ipad these look bad. Everything is saved optimized in PS at 72dpi. Obviously the size matters, but in this case to make them higher resolution wouldn’t you want to up the dpi? Or is the ipad showing the 1200 template at 2400 that if I use 800 or whatever it will adapt?

15. Ok, I’m still confused. Here’s what I’m trying to do: I’m on a MacBook. I have a Parkinson’s Society newsletter pdf with 4 pages. An article on the first page is about my sister. I want to export the first page as a jpg, so that I can put it on Facebook. When I click Export, and choose jpeg, it lets me slide to Highest Resolution. There’s also an option to type in number of Pixels. The default it starts at is 150. Should I raise that to higher?

16. Came across this post via a google search, and I love it! Thank you. I’m such a novice at all this, and this helps explain resolution. So if I’m trying to resize an image to a specific size (640 x 360, for instance), you’re saying that if it’s for the web, I don’t need to worry about dpi at all? See, I get stymied by even the simplest of things. :)

17. Well explained. Thanks a lot for the article.
    “A 1000 x 1000 image at any dpi (whether it’s 72, 144, 1000 or 100000) is still 1000 x 1000”

18. Great article, thanks a lot!

19. So, what do we need this for? Why not just keep it the way you did? screen related dpi doesn t matter. Forget it exists . Period..

    • Hes explaination makes it seem useless but its not.
      He dd not explain in full but check my explanation at the bottom. I do photography n designs

20. You explanation is correct but ur last illustration is a little unclear or partly explained. infect u just explained one side of the equation. Here is how it works. As Tim put it. 1000 x 1000mm or cm or pixels at 72dpi ppi looks way different to the same image but at 150dpi or 300dpi etc. your last images/illustration is a gud example, if u were to make those images the same dimensions, we were going to see the difference in dpi

    Here is another fact, wen looking at an image of the same dimension, it starts looking bad or pixels showing wen u keep the dimension but reduce the dpi. A 1m x 1m image at 300dpi can be made and enlarged to 4m x 4m at 72 dpi. Simple math. Increase dimension = reduce dpi. Reverse it true.

21. Very helpful article. Thank you.

22. I see you don’t monetize your site, i think there is one opportunity
    to earn additional money on your page, search in google for- idol4jp makes money

23. Thanks for this article (and all your patient responses). I must admit I didn’t quite get it until I took your suggestion and downloaded the sample images and had a look in photoshop. The penny dropped for me when I inspected the images and the pixel dimensions were all the same (600 x 400) but the cm dimensions were all different. I thought pixels and cm were just different units of measurements (like cm and inches) but this now makes so much more sense to me! Thanks again

24. Hello – I have read your article which is great however I am still baffled! This is not my area at all however we had professional photo’s done for use on our new website and we have one with following properties:
    width 801 pixels
    height 1200 pixels
    dpi 72
    We are being told by the web designer they need the photo in high resolution. The photographer who took the originals sent them via WeTransfer and is saying she has deleted the originals!! Aaaaargh!
    Can the web designer use the images with the above properties??

    Thanks so much!!

25. To all who are still proclaiming that dpi matters on a screen or for web: no, it does not. It is NOT a setting for anything but print. Image dimensions in pixels is the only consideration. 72 dpi is not a “baseline.” DPI setting makes *zero* difference in the sharpness of the image, zero difference in the file size, and zero difference in bandwidth.

    If you are going to print an image, dpi is a critical setting to determine the printed output. That is it’s use. Take a 1000 x 1000 px image, set the dpi to 15,000 if the software will allow you. On your screen it’s the exact same image with the exact same sharpness as the same image set at 10 dpi.

    Continue to waste your own time checking dpi for web if you don’t want to simply test it for yourself, but don’t continue to confuse others by proclaiming the dpi setting makes any difference whatsoever on a web page.

26. I feel as if I almost understand this – sorry, not my area of expertise. If someone could please help me understand . . . I have two of the same picture but with different resolutions and I am confused. Picture 1 is 3899 x 3967 x 96 dpi showing as 30″ x 42″. Picture 2 is 6042 x 8421 x 300 dpi showing as 20″ x 28″. My confusion comes when I review print preview (at 100%/actual size which matches the inches noted above) – picture 1 is actually more clear on screen than picture 2, but picture 2 obviously has the greater ppi. How can this be? I am trying to determine which will print out as a better, more detailed picture. I don’t care about the difference in actual printed size so much as the detail/clarity in the printed result. Thank you!

27. This was incredibly helpful. Thank you! So I have one other question that may or may not be a no brainer–I seem to be missing some brain cells today so indulge me please!

    Given your final example: “So, a logo that’s 300px across normally should be saved at 600px. Then, when that image is presented at 300px as originally intended, it’ll look nice and crisp on retina screens since the image has double the number of pixels and so does the screen. The DPI/PPI setting in Photoshop is still irrelevant because you’re not printing it out.”

    Does that mean then that images I’m using in 72 DPI now need to be 144 dpi for retina screens? Or is 72 still ok for photos on retina? I ask because when I uploaded my header photo the my theme developer suggests doubling the size–as you did in your logo example. And it does makea HUGE difference.

28. Hi Dara,
    What about scanning TEXTS. Sometimes we need send forms, several documents through email, which is also important issue, for example if I am applying for a job. If my recruiter/interviewer can not open a 10MB file (just example) he can just discard me.
    The same if the document (that could be a JPG image or PDF) is not legible or readable enough and looks too “choppy” or “pixeled”, he mau just delete my sent files :)

    Any tips you can give when we have to scan text documents, to make it readable enough but at the same time, not so heavy?

    Personally, on this case I think that 72 dpi is not enough, maybe 150? or 300? Can you still state that dpi doesn’t matter even on scanned texts? Of course they are built just to be readable on screen (enough size and resolution is important), not for printing. And usually is not to be shown or display ion a webpage but for email on corporate environment. I will really appreciate your opinion. Thanks.

29. Sorry I have to post this… I know that images resolution is a complex subject but it does not help when terminology is wrong from the first post – dpi has nothing to do with image resolution – other that it affects the ppi of an image for print.
    All images resolutions are described using ppi ( the number of pixels in a given inch) and not dpi!
    In print dpi describes the dots per inch that a printer can generate and has nothing to do with image resolution other than determining the lpi (line per inch) which will set then the ppi for print. (lpi – dpi divided into a grid to allow different dots sizes for tonal reproduction – different percentages of colour)
    For print you generally multiple the lpi x 2 to give you maximum ppi for an image at 100% – the accepted standard of 300ppi for high quality print. I might add this is not an absolute and can be flexible to a point.

30. Thank you for clearing that up. I’ve scratching my balls for a week trying to figure it out!

31. nice explaination here u wrote Dara, tysm,
    keep up your good work!

32. In a scientific journal, they wants images of minimum 1200 dpi. Although I am setting the dpi and uploading the file, in the final pdf it is showing 600*600 dpi. What does it mean? Are they same?

33. The order of the cats’ dpi is incorrect.
    Where you say “Remember the three images I showed you above with different DPI values that look exactly the same on the web? Here’s what they’d look like printed:” – the cats are in 72, 300, and 1000. It should be reversed.

34. Some of this is wrong and some of this is right. DPI is an incorrect use of the term for monitors (screens are actually technically different it can be confusing). Like you said it should be PPI (Pixels Per Inch) MOST print items print at 300 DPI (Dots Per Inch) because the human eye has a hard time seeing more detail than that. It is a description to how much information is in a physical inch.
    It used to be 72 ppi (roughly, not all monitors are made the same) was what was required because the monitor cant display more pixels per square inch so anything more is removed. To use less, you either use more pixels to make a dot on the screen (pixelation) or you make the image smaller. Now we have monitors that have a higher PPI (usually in the high 200 ppi range) and we can fit more information per inch, gradients get less choppy, hard edges can be a little smoother etc without taking any more physical space.
    Of course as other people have said the higher the density (PPI) the more information, the bigger the file, which isn’t great for web.
    This is why we optimize images for the best experience. 72 ppi for most monitors, 144(ish) for higher ppi monitors, 300 dpi for most print, 90-150 dpi for large format items (you don’t stand close to them to view them, your ppi and dpi change based on how far away you are from the item)
    so in summary, DPI does matter on print. PPI does matter on web, you just have to know what your building for to optimize your images to make sure they come out the best that they can.

35. This completely false and dated information. DPI does matter and there’s is huge difference between the examples you provided, particularly when you view them on high-resolution or retina displays.

    • lol nope. I have multiple retina displays, and have viewed my post on all of them. The examples are all identical.

36. Alrighty, y’all, this has been fun, but after about 70 comments I’m turning them off for this post. Go forth and forget about DPI for web-only images ;) And if you really wanted to leave an angry comment, go look at some pictures of kittens instead.

37. Pingback: Gestion des Images HiDPI (Retina) dans WordPress | Grégoire Noyelle

38. Pingback: Photoshop Basics – K/600/8297 3.2 – Kieran Collins Apprenticeship Blog

39. Pingback: Article B1: Resolutions, Raws and the Working with Layers | Jacqueline Herrera

40. Pingback: How to Reduce the Size on an Image File

41. Pingback: UXD Inspired Reads 2018.02.09 | Mohit SantRam

42. Pingback: Web vs. Print Basics: Resolution | Flannel Creative

43. Pingback: Here's How You Can Reduce the Size on an Image File - 2shorte

44. Pingback: Technical Terms to Know for Images – Sarita's Design Blog

45. Pingback: 3. Technical Terms Necessary for an Overview of Images – Project One

46. Pingback: 【 Cómo reducir el tamaño de un archivo de imagen 】

47. Pingback: How to Reduce the Size on an Image File – Tech Blog

48. Pingback: Cara Mengurangi Ukuran pada File Gambar – Tech Blog

49. Pingback: Bir Görüntü Dosyasındaki Boyut Nasıl Küçültülür | Tech Blog

50. Pingback: Как уменьшить размер файла изображения | Tech Blog

51. Pingback: 画像ファイルのサイズを小さくする方法 | Tech Blog

52. Pingback: How to Reduce the Size on an Image File | Tech Blog

53. Pingback: छवि फ़ाइल पर आकार कैसे कम करें | Tech Blog

54. Pingback: কিভাবে একটি ইমেজ ফাইলের সাইজ কমানো যায় | Tech Blog

55. Pingback: ஒரு படக் கோப்பில் அளவை எவ்வாறு குறைப்பது | Tech Blog

56. Pingback: इमेज फाइलवरील आकार कसा कमी करावा | Tech Blog

57. Pingback: ઇમેજ ફાઇલ પરનું કદ કેવી રીતે ઘટાડવું | Tech Blog

58. Pingback: Yadda ake Rage Girman akan Fayil ɗin Hoto | Tech Blog

59. Pingback: What is a Domain? What is Hosting? | Autumn Lane Paperie

60. Pingback: Web Design ou Design Gráfico: diferenças e semelhanças - Criar Portfolio

61. Pingback: Does DPI matter for digital art? - About The Mark

Comments are closed.