Image Sizes and Optimizing for the Web
June 28th, 2011Are you confused when it comes to photo/image dpi, kbs, ppi and pixel size? Do the words Image Optimization mean nothing to you? You are not alone.
Have you uploaded photos to the web to display to family and friends on such sites as Facebook and Flickr to find that it takes forever to upload or the page freezes before the upload finishes? Have you sent emails with image attachments that take a long time to send. If so, it is important to know the basics about image sizes for the web. If you are displaying images on your own website or blog you will need to understand in more detail.
Images that are slow to send, upload or load have large file sizes. In general this also equates to the actual size of the image but two photos that look the same size can have very different file sizes depending on their quality.
Although faster internet speeds mean that you can now use larger file sizes than a few years ago you still have to cater for those people using dial up connections and for those whose speeds have been reduced because they have used up their allotted allowance of bandwidth. Even with faster connections large size image files can take too long to load on a web page. You are likely to lose your reader’s interest if they have to wait too long to view your image.
What does image file size mean?
Here I am talking about the size in bytes, kilobytes (kb) or megabytes (mb). To get an idea of the file size of images stored on your computer:
- Windows users can open windows explorer (not internet explorer) to view their files. If you are in thumbnail (large icon) view, hover over an image and its size in kb or mb will show up in a pop up box. If you are in detail view you will see the kb size in the size column.
- How to view image sizes on a MAC if they are not already showing; Select list view from a Finder window, then open “View Options” from the View menu (or hit Command+J). Select the checkbox next to “Calculate all sizes”.
Photos taken with my camera have a file size of about 3-6 mb or roughly 3000-6000kb (1024kb=1mb) whereas the 125×125 square images in my right sidebar are all under 20bytes (0.020kb) The original file size of the photo below was 4044kb but the reduced size shown here is only 33.3kb. A huge difference isn’t it? The quality of the image as seen on the web has not suffered at all.
Why can you reduce image file sizes so much for the web
A computer screen is still incapable of displaying images at the same quality as your camera saves or your printer prints. Your camera may save an image at over 300dpi (dots per inch) or higher but your monitor just cannot display it at this resolution.
Pixel Size
For monitors it is the pixel (px) size that counts when displaying images and the pixel size depends on what resolution your monitor is capable of displaying. Pixels are the tiny square or rectangular dots that your monitor uses to display text and pictures. PPI refers to the number of pixels per inch. On a higher resolution monitor, the pixels are more numerous and smaller, so what you see on the screen also appears smaller and more items fit on the screen. According to a January 2011 survey by w3schools http://www.w3schools.com/browsers/browsers_display.asp 85.1% of computer users now use screens with a resolution higher than 1024×768 pixels . If your webpage content is larger than this scrolling is needed.
Although you can now display images with many more pixels than a few years ago you still have to be concerned about upload time and webpage loading times. Here is an example of three images (click thumbnails to see full size ) all the same pixel size, but they have been saved at different quality.
100% file size 553kb
50% file size 91.7kb
25% file size 61.6kb
As you can see the image saved at 50% quality still displays very well, when it is saved at 25% it is not good enough (see all the waves in the sky). The file size saving is also much less between the 25% and 50% images than between the 50% and 100%. The 50% image looks fine on my screen and I would consider that it is optimized for the web.
For a website I suggest you use images of lower pixel size than the 91.7kb I have used here, as it still takes a while to load (far too long if you have a number of images on the same page). As I have done here, you can display a smaller size image or a thumbnail on the main page which links to the larger image. Keep in mind that the better quality your image the more likely people are to copy it, even if you have a copyright notice on your site as the images will print out better. I would not normally use images of this pixel size in a post as they would be too wide for this blog column which is only 515px wide.
Here are close ups of the images – (click on the thumbnails for the larger images). You can clearly see the pixels here. Again at 50% there is not much difference, at 25% the colors start to smudge.
100% quality
50% quality
25% quality
When you are deciding what pixel size to use for your image you need to consider the issue of displaying information “above the fold” (within the area you see without scrolling). Information (text, image , video etc) that you want to be noticed the most should, where possible, appear above the fold. This way they are likely to stay on your page longer and to click on any buttons or links you have placed there.
Tools to check web page loading speeds
Free online tool – Web Page Test
Page Speed online or use with browser extensions for chrome and Firefox
There are many programs that can reduce your image sizes for you and I will cover that in a future article.
For Photos 
