Optimizating Images

Activity Directions

Estimated Time: 15 minutes

We love images in websites. They make them more interesting and appealing, they can also make them slow. A typical mobile phone camera will take an image that is over 2000px wide and 1-3MB in size. Just to put that into perspective a typical resolution for a 23" monitor is about 2000px and on a typical cellular connection 2 MB will take 5-10 seconds to download! Imagine taking several such images and placing them in your site...its load speed would quickly become unacceptable.

We can easily use CSS and adjust the sizes at which those images appear, but the browser will still have to download the whole image before it can shrink it. A better solution is to use an image editing program and change its size to just what we need.

Optimizing images online is necessary and easy, even if you do not have photoshop. If you have ever tried to load an image-heavy website and it took forever, you will be able to see how optimizing your images to get the best quality for the website, but the smallest size will still give you the effect you desire.

This video explains the benefits of optimizing your images before uploading to your website and shows you how to use the free online resource picresize.com

If you have never resized an image before you should definitely go check it out.

Another resource to look at if you want a little more flexibility would be pixlr.com. This is a free online image editor that would have many of the features of Photoshop as shown in the first part of that video.

After you are done optimizing your images they should be no larger than they absolutely need to be (refer to your wireframe to get an idea about what that size should be), saved in an appropriate format (usually .jpg for images and .png for logos or icons), and no larger than 100kB except in rare occasions (20-30kB is even better).

Other great sources for optimizing images are:

• Optimizing Images
• Ultimate Optimization Guide