Best Image Size

There's nothing like adding a colorful, interesting graphic to a web page to make it more engaging. When publishing images on your web page or blog, however, avoid publishing your digital camera image or other graphic file 'as is' because the image file will be too large and your visitor will leave instead of waiting around for the page to load. What you need to do is 'optimize' your image. When you optimize an image, you are making the file smaller.

There are a number of reasons to optimize your images. From your reader's point of view, using smaller images means that your web page is going to load a lot faster. When considering your server, using smaller graphic files will reduce the server load necessary to transmit the file. Finally, smaller image files are going to save on broadband because they create less traffic on the Internet.

Before grabbing the first free image optimizer you can find online, it helps to understand the different types of image formats that can be read on the Internet, and which ones may be best for you to use.

JPEG (JPG) Images.

As a general rule of thumb, JPEG image formats are best to use with photographs. Most digital cameras will automatically store images in the JPEG format. The JPG format is also used as the image compression algorithm in many Adobe PDF files. JPEG images are optimized by compressing them. The best way to explain this is to provide a visual: Most of us at some point in our lives have jumped into our garbage cans and smashed the contents down so that we could fit another bag in before pickup day. By jumping up and down on what is already in the bin, we are 'compressing' the contents. Compressing a JPEG image is a similar concept.

GIF Graphic Formats.

Generally, GIF images are best to use when you have a limited amount of color. Banners, buttons and logos are examples of the types of images that you will probably want to store in a GIF graphic format. GIF files are optimized by reducing the number of colors in the color palette. Again, using a visual example, imagine that you are painting the upstairs bedroom. You could mix white and an off blue to make a wintery white color. However, if your budget is short, you would skip the blue and use white paint only. This is a simplistic example of how GIF optimization works. When reading a GIF file, your computer (and web browser) assumes that there are 256 colors to read. If you reduce the color pallet to 128 when you are optimizing your image, you should see a significant decrease in size.

PNG Image Files.

This image file format was intended to replace the GIF format, and supports 16 million colors (as opposed to the 256 colors that are read in GIF formats). These are very good for photos, but JPG files are usually smaller. Considering the fact that PNG is not read by older browsers and that JPEG files are smaller anyway, you might want to stick with JPEG. The good news is that Internet Explorer and other contemporary web browsers now support PNG, so you might be able to use this format to create clearer images than you might otherwise be able to display by optimizing your JPEG file. If you have a large GIF file, converting it to PNG might dramatically reduce the file size while maintaining a visually appealing graphic.

The Best Image Size to Use.

Image file sizes are typically reported in megabytes (or MB). Back in the old days when we were all accessing the Internet with dialup modems, the standard was to keep your image file size to 10,000 MB or less. Nowadays, with satellite, wireless, DSL and cable access, the recommended standard is 30,000 MB or less. 20,000 MB is a good size to go for, considering the fact that many Internet users, particularly those in rural areas, are still limited to dialup access.

Some Other Tips to Reduce Image Size.

Obviously, one thing that you can do to reduce your file size is to crop your image or make the dimensions smaller. Along this line of thinking, you can create a thumbnail image that people can click on to access the larger view. Many online newspapers employ this thumbnail strategy.

If you are using the thumbnail approach, you can speed up the download time for the enlarged view by adding the large image to the bottom of your web page, but changing the dimensions to 1px x 1 px. With the 1px by 1px size, you are basically preloading the larger image. If placed at the very bottom of your web page, your visitor will probably not see the tiny 'preload' image. In doing this, by the time your reader clicks to view the full-sized graphic, the image file will have already been loaded and stored in the user's cache.

Another thing you might want to do is to adjust the resolution of your image by reducing the pixels per inch to 72. By default, many graphics software programs automatically set the pixels per inch to 96.

Play around with your image optimizations and find what size and resolution looks the best to you.