How Do You Optimize Images for Web Use?

Hand selecting from portrait grid on laptop screen
Dimitri Otis/Photographer's Choice RF/Getty Images

Web images take up the majority of the download time in most web pages. But if you optimize your web images you will have a faster loading website. There are lots of ways to optimize a web page. The one way that will improve your speed the most is by making your graphics as small as possible.

A good rule of thumb is to try to keep individual images no larger than 12KB and the total size of your web page including all images, HTML, CSS, and JavaScript should be no larger than 100KB, and optimally no more than 50KB.

In order to make your graphics as small as possible, you need to have graphics software to edit your images. You can get a graphics editor or use an online tool like Photoshop Express Editor.

Here are some tips for evaluating your images and making them smaller:

Is the image in the right format?

There are only three image formats for the web: GIF, JPG, and PNG. And they each have a specific purpose.

  • GIF—Use the GIF format for flat color images. These are images with just a few colors.
  • JPG—Use the JPG format for photographic images. These are images with millions of colors.
  • PNG—Use the PNG format if you don't need your images to display on mobile devices. They are good for both flat color and photographic images. It's best to save your images as both PNG and either JPG or GIF and then use the version that is smaller.

What are the image dimensions?

An easy way to make your images smaller is to do just that, make them smaller. Most cameras take photos that are way bigger than the average web page can display. By changing the dimensions to somewhere around 500 x 500 pixels or smaller, you will create a smaller image.

Is the image cropped?

The next thing you should do is make sure that the image is cropped as tightly as you can. The more you crop off the image the smaller it will be. Cropping also helps define the subject of the image by removing extraneous backgrounds.

How many colors does your GIF use?

GIFs are flat color images, and they include an index of the colors that are present in the image. However, a GIF index can include more colors than are actually displayed. By reducing the index to only the colors in the image, you can reduce the file size.

What quality setting is your JPG set to?

JPGs have a quality setting from 100% down to 0%. The smaller that quality setting is, the smaller the file will be. But be careful. The quality affects how the image looks. So choose a quality setting that isn't too ugly, while still keeping the file size low.