Images are everywhere on the web. From the obvious picture, down to the unexpected rounded corner. As bandwidth grows, so will the use of images. With more images on a page, designers can create richer graphic experiences, but no matter how wide the bandwidth, a web site still needs to stay light, or small in size. The smaller the size, the faster the load time, and the better the user experience. Programs like Photoshop can help bring images down in size dramatically, but can also ruin the quality of a picture when used incorrectly. Here are some basic tips for creating a web ready image:

Page Size
First, the size of a page should be taken into consideration. Average page size is up to 312K, an increase of over 300% in the last five years. Even though averages are at 312k, a goal should be to keep pages 50-60k, with a a max of 200k. Again, keeping pages light will help avoid bounces, which is when a viewer leaves a site without spending time on it; often a result from not willing to wait for load times. Just as a comparison, Google's home page weighs in at 12K, though it’s task doesn’t revolve around heavy branding for something like a consumer packaged goods, where visuals are key to creating success.

Image Resolution
So how do you reach these low numbers when trying to incorporate quality photography on a low scale? For starters, all web images should have a resolution of 72DPI (dots per inch). This is maximum resolution that a monitor can display. Anything greater will not create a crisper image, and will increase size. Anything lower will cause the loss of details, and poor image quality. Increasing image size should be avoided, as it produces poor quality and blurriness, though decreasing image size does not harm anything. Photoshop, Photoshop Elements, Gimp, and even your preview program are a few tools that can resize, crop, and adjust images. HTML can also be used to resize an image, though this can cause drastically larger file sizes, as depicted in the screen capture below of an HTML resized image.

Though it looks good, this image is still at it’s original size of 896K.



Image Types
The next step in creating a web ready image is to select the proper image format. JPG, GIF, and PNG are the most common formats for web images. TIFF, RAW images, and PSD are not appropriate for the web, and need to be avoided. The first three file types each have strengths and unique uses. Deciding which file type to go with can be determined based on transparencies and image type. JPG is ideal for photographs, images with gradients, glows, drop shadows, and smooth color changes. GIF is ideal for images with solid areas of color or solid areas of transparency.

Below is a gradient saved as a GIF without dithering. This is an improper use of a GIF, and a JPG would have worked better.




GIF also tends to be smaller than JPG due to it's limitation of color, but not always. Lastly, PNG 24 captures translucency and allows for background images to pass through, though not all browsers support PNG, such as Internet Explorer 6. The image in the footer of Bedford Brown uses a PNG to allow the shadow to float over the background. Often, drop down navigations use PNG to float above the content.

Too Small
The last step in creating web ready images is the process of saving the image down. By eliminating colors, details, and how color fields interact, an image can be drastically cut in file size. Photoshop allows all of these adjustments to be made from it’s “Save for Web Devices” window, found under “File”. Adjustments can be made to an image, as well as file type, until optimal size and quality are achieved. There are some key visual flaws to look for while saving down.

Here is an image that is saved as a GIF. The file size is small at 32K, but the dithering used to smooth the image out is obvious. The small dots that show up in transitional areas make it look poor.



This image, as most pictures, would work best as a JPG. Quality, and blur can be adjusted to reduce JPG size (8K in the case below), though when taken too far, artifacts and a blurry image will result. Artifacts are the miscolored areas that show up around color transitions.

The image below has bad artifacting where the yellow curve of the head meets the black background. Often, non-web-friendly text saved as an image encounters this problem and should be watched out for.



Once the proper size of an image is established, the proper file type is selected. All adjustments are dialed in, and an image can reach perfection. Neither quality nor size are an issue.

Below is the final result of a well saved image that weighs in just under 30K, and has great image quality.