You are here

Optimizing Your Images for the Web

 

The Basics

Optimization (or finding the right balance between file size and picture quality) is an essential step if you plan to post your pictures online. The process is not difficult, but it does require some basic knowledge about the various elements that comprise your digital images. Next time you look at a web page, notice that most of its load time comes from embedded images. Your web site will be needlessly slow if the images you post are too large (in terms of bytes or digital data). Also, large images take up valuable space on servers with limited capacity.

There are several ways you can reduce file size by using your image editor. All of them affect the pixels in your image. Pixels are the tiny dots that together make up the lines, shadows and colors in your picture. When you optimize your images, you manipulate the pixels in one or more of the following ways:

1.       Discard some of the pixel information (compression in jpeg format)

2.       Limit the number of colors applied to your pixels (reduced color palette in gif format)

3.       Limit the number of pixels in your image (reducing dimensions, cropping) 

Process

1.       Use your image editor to set the proper dimensions

o   Image dimensions are measured by the number of pixels across by the number of pixels down. How big an image appears on a screen is dependent on both its own dimensions and the screen dimensions or resolution.

o   Figuring out how big your image should be is a function of where you’re going to place it (a PowerPoint presentation, a web site, a photo gallery, etc.) and where it’s going to be displayed (e.g. a computer monitor or a video projector)

o   Typically, the screen resolution (or pixel dimensions) of most monitors is no more than1280 x 1084 and most video projectors have a resolution of 1024x768. This means an image larger than either of these resolutions will extend needlessly beyond the dimensions of the screen. A general rule of thumb is to stay no larger than 1024x768 – images this size should still look good at higher screen resolutions.

o   Usually your images will be much smaller than this so that they fit in a web page, an image viewer, Blackboard page, PowerPoint presentation, etc.

o   Make your image dimensions as small as possible for your purposes.  For images that do not require detailed viewing, you can go with smaller dimensions.

o   DPI or dots per inch is a measurement that primarily applies to images that will be printed. For images that only appear on screen, you should always keep your dpi between 72 and 96. Also, ignore other size measurements you might find in your graphics editor such as size in inches – these are for print only.

o   Some typical guidelines for sizing images are shown below. These values are used by professional web designers. In most cases, they will use the small to medium size images.

Physical Size

Width x Height

File Size

Extremely Large

1200 x 900

80k to 100k

Very Large

800 x 600

60k to 80k

Large

640 x 480

50k to 60k

Medium to Large

400 x ???

25k to 50k

Small to Medium

300 x ???

10k to 25k

 

2.       Use your image editor to crop your image

o   Often photos also contain unnecessary information in the frame. For example if you want to be able to identify an individual through a photograph, you need only their face, not their entire body.

o   Once your image is sized properly, use the crop tool in your image editor to eliminate unneeded information in your photo. This can reduce your file size significantly.

 

3.       Use your image editor to save with the correct file format

o   Web  images should be saved in JPEG, GIF, or PNG format.

o   JPEG (stands for Joint Photographic Group, the engineering group that developed the format)

·         Should be used for photographs and other images that include many colors, shadows and gradations.

·         Puts “compression” on your image to make it smaller. JPEG is called a “lossy” compression scheme because information is always discarded. This is not necessarily a bad thing as JPEG typically achieves 10:1 compression with little perceptible loss in image quality. Nonetheless, there is always a trade-off between file size and picture quality.

·         With the JPEG format, you can control the amount of compression applied to your image (in most image editing software you use a slider that adjusts “quality”).

o   GIF (stands for Graphics Interchange Format) and PNG (stands for Portable Network Graphic)

·         GIF and PNG are similar formats (however, PNG was developed more recently and it allows you to get smaller file sizes with higher color fidelity)

·         GIFs and PNGs are well suited to simpler images with strong lines such as logos, line drawings and illustrations with solid areas of color. This is becasue they only allow a limited color palette (usually around 256 colors) . PNG images allow for a larger color palette and greater color precision, however many older browsers do not support them.

·         They are considered a “los-less” compression because they don’t discard information, just limit the number of colors applied, so you don’t lose detail.

 

Image Editors

You don't need expensive graphics editors to reduce the size of your images. There are plenty of free utilities and shareware that will do the job for you.  You can also use Microsoft Paint (an application that comes with most version of the Windows operating system). Adobe Photoshop is the standard for web designers and other graphics professional.

1.       Paint is a free application that comes with most versions of the Windows operating system. It’s usually found by going to the Start Menu > Programs > Accessories>Paint. Paint allows you to crop and resize your image, add text, draw on your image, and save in gif, png, and jpeg formats. See Using Paint to Optimize Your Images for step-by-step instructions.

2.       Photoshop is a professional graphics application that allows you to edit your images in every conceivable way. You can change the image size, file format, add text, add a host of effects, create transparent areas, cut out parts of your image, etc. Photoshop has a relatively steep learning curve, but simple functions are easy to use.

3.       Web Photo Resizer (www.webresizer.com) is a free online application that lets you to upload your image, resize, crop, make minor exposure and color corrections, and apply jpeg compression settings using their web application. Once finished you download your pictures back to your computer. Sessions on webresizer expire after 60 minutes of inactivity, at which time your image will be automatically deleted from the webresizer server. Webresizer never keeps a copy of your images or give anyone else access to them (see http://webresizer.com/privacy.html)

4.       Lunapic (http://www.lunapic.com/editor/) is another web based application that allows you to resize, add numerous effects and text, and save in jpeg, gif and png formats. It does not have as strong privacy policies as Web Photo Resizer.