STm Login

My few advertisers are companies I use myself and highly recommend for all my visitors.
Photoshop Tip 3: Sizing Images For Web E-mail
Written by Dean Neitman   
Tuesday, 23 June 2009 00:00
Bookmark and Share

If you are like me, you probably just listen to advice when it comes to subjects without fully researching it or questioning its validity, especially if it came from a reliable source. For this reason, many years went by with me making all my web images 72dpi. I did this to make sure I was saving as much bytes per image as possible because on the web... optimization is really important. Little did I know I was being anal about something that really made no difference.

I know, many of you are thinking... maybe we should be questioning this tip rather just taking my word at this point because many of us have been brainwashed into believing that 72dpi is the resolution that all monitors display images at and no need to go higher unless you want to add bytes to the file size of the image. This is somewhat true.

Ok... first... the actual "PPI" (pixels per inch) of any monitor can vary just slightly. PPI is the term that should be used with regards to monitors and web images technically because they rely solely on pixels as form of measurement. DPI (dots per inch) is a term for measuring resolution in the print world. DPI often relates to the printer and the resolution of images for print. Most monitors are below 100 PPI with many hover around the 72 PPI range.

What's this mean for us when sizing images for the web to show on the monitor? Not a lot really. What concerns us more than the PPI is the physical dimensions of our web images. Sizing our images in pixels is pretty common for anyone working on the internet or for on screen displays. Often we are told or given our total dimensions of the project in pixels and must relate our art sizes to this.

For example, if we are building a web page and have a header at the top, we look to see what the max width of the web layout is. Let's use 800 pixels wide for example. So, we know that header image needs to be 800px wide too or smaller if we are using margins etc. As long as we make that header image exactly 800px wide or less... there is no need to worry about the resolution setting. Seriously, forget about it. It just doesn't matter.

Test this for yourself. Create an image exactly 800px wide and 200px deep and make the DPI something rediculous like 500dpi. Save this image as a .jpg to your desktop and use compression of 5. Compression setting for .jpg is not important... you can use any setting you want as long as you use same setting for the second image. So now create your second image the exact same size as first, 800px by 200px, but this time use 72dpi for the resolution. Save this image as .jpg with same compression ratio as the first image which I suggested 5. Now get info on both of those saved .jpg's and compare the file size. If both have same content or fill... I bet both of those images will be the same file size. Its because technically.... on the screen... they are exactly the same. The DPI difference meant nothing.

If they differ... I think you may have filled both of the images differently. A texture for example saved as .jpg will be a larger file size than an image of same dimensions filled with a solid color and saved at same .jpg compression ratio. The more detail in an image... the more info or file size it will take. Considering this... if you are saving an image to use for a background on the web and want to get the file as small as possible... consider blurring the image a bit. The sharper the image... the more bytes it will require.

Dean Neitman Written on Tuesday, 23 June 2009 00:00 by Dean Neitman

Viewed 3791 times so far.

Rate this article

(0 votes)

Latest articles from Dean Neitman

blog comments powered by Disqus


STm Social Media

STm Host

1and1.com Green Hosting

STm Photography Agent

Royalty Free Images

STm Affiliates