Read the article again. In the example you gave, where we just communicate in pixel dimensions, my client asks me what size images… if I say x pixels for an image, there is a big difference in size between x x 72 dpi and x x dpi.
If she uploads x dpi, her site is going to drag. Pixels are the fundamental measure, but DPI is the multiplier. For a long time, it was So for retina, instead of asking for x , I would ask for x 72 dpi.
Or x dpi. On the web, x at dpi and x at 72 dpi are two completely different things. I am not disputing the math. I am talking about communication. Nothing is stopping them from uploading a dpi image to their home page if I tell them it needs to be x In fact, I am dealing with this issue today. So, it does matter, especially to those who are not so technical. 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.
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.
I was thinking more about what you said, and I wondered, why should dpi affect file size in any way? I just regenerated the 72, , and dpi examples without closing the original file between saves and now the file sizes are identical. 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. And for retina, its just 2x as many pixels. It also turns out that the issue I mentioned before, about dealing with a 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.
I should have known better! Thanks, Tim! 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. Thank you!!! This whole 72 vs dpi thing has always confused me!!!!
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. 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. You can set your image to 1 DPI or 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. 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. 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. I cannot believe I just read this kind of comment on ! Dona, congrats! You did a great job here! 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. 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.
My sample images are the same pixel sizes but different DPIs. If you size an image to px for a px container, you are effectively increasing the resolution, or the dpi or ppi or whatever we want to call it.
Or am I misunderstanding that? I know that the retina displays actually vary in ppi…. I know that gets confusing because people use DPI and PPI interchangeably, but know that they have nothing to do with each other.
Plus, remember point 1, which is that the DPI setting in an image is entirely unrelated to pixel density anyway. SVG for your images. Oh, and one more thing to clarify: I would never suggest taking a px image and then sizing that up to px.
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? When printing the image, you are free to over-ride it and print at a different DPI. Those are all different DPI values basically.
Notice how setting different DPI values 72, , to this image does not change the file size at all, no photographic information is changed at all. Again, only pixel dimensions matter. The larger your images are, the larger the prints you can get at a specific DPI. For example, to maintain a dpi quality level when printing, a 12PM image at x pixels can be printed at And even then, you can manually scale the image as needed for the print, basically ignoring the embedded PPI value:.
With everything related to your photography website, only image pixel dimensions matter. Read my full story to see who I am and what I stand for. Get the best of ForegroundWeb in a single weekly email, along with access to all my resource downloads and weeks of free email training - all about photography websites.
You'll get a free eBook on photo website mistakes , many checklists and guides about improving your site's design and SEO, video recordings of website reviews, podcast interviews, and more. There is no unit of measure to put more into. Outlook must be able to see the metadata of PPI and then it makes adjustments to a background image based on that.
That one will just fill the background area that is set to the same dimensions. Your email address will not be published.
Search for:. Neither is relevant to web images. Image credit: Maxime De Ruyck Visit daraskolnick. Kris says:. January 14, at pm. Lukasz says:.
0コメント