Image Sizes and Optimizing for the Web

Are 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.
 
Rhine Valley, Germany

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.

Venice Canal
100% file size 553kb
Venice Canal medium
50% file size 91.7kb
Venice Canal Small
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.

Venice Close up 100%
100% quality
Venice Close Up 50%
50% quality
Venice Close Up 20%
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.

The following two tabs change content below.
I am Sue Bride, a Professional Blogger, Web Developer and Internet Marketer from the Mornington Peninsula, Australia. Here I talk about tools and resources for Blogging, Social Media, Networking, Wordpress, SEO, Images and Marketing. I create Wordpress sites for charity and small business.
Categories Blogging Tips, Featured, Images

4 Comments

  1. Posted June 30, 2011 at | Permalink

    I always laugh when I see the new cameras that come out with 15+ mega pixels. Since most people consume their digital pictures on a monitor, there isn’t much point to it. I have seen a difference in the last few years in quality of color and contrast with off the shelf cameras, but people need to realize that more mega pixels rarely means a better image. Why would you need that many? The file sizes get huge… and unless you plan to take a picture and blow it up to the size of a billboard, what is the point?

  2. saboma
    Posted July 2, 2011 at | Permalink

    Thank you for this knowledge, Sue. It will come in handy. I have it bookmarked for future reference.

    *Hugs!*

  3. Posted December 1, 2012 at | Permalink

    Do you think that keywords around the picture and keywords in Alt tag will help in Image optimization?Does pixel quality really plays a role in it??
    sarkari naukri recently posted…MBA JobsMy Profile

  4. Posted April 29, 2013 at | Permalink

    Sue,

    One important factor that was left unmentioned, is the use of “progressive jpegs.” The most common type of jpeg on the web is “baseline,” which loads much slower, even if the file is smaller.

    So when saving to the web, make sure the “progressive” box is checked (if you’re using Photoshop).
    Jay Soriano recently posted…Entrepreneurship and the Lost Art of Non-ConformityMy Profile

  • My Passport