Web sites usually contain one or more images and each one has to be downloaded to fully view the web page. If the image files are too large it will take a while for the page to load and often times that could be the difference between someone staying on your page or going to a competing web page.
When creating an image for the web on of the first things to think about is do you need text in your image or would it be better suited as a part of the web content. Having text in an image takes away the selectability of text in an image. If the images don’t need text to communicate a message then it is not necessary to add to the image.
There are two type main types of images, vector and raster. Each type is good for different types of images. Vector images use points, lines, and polygons to create the images, so when you zoom in on the image you will have clean cut edges. On raster images, the image is essentially on a grid and each pixel contains part of the image. When you zoom in on a raster image the edges are jagged because it is made of pixels. The main difference between the two is when to use them. For designs that are logos and scaled either larger or smaller, it is best to use vector. Raster images work best pictures.
Both types of images have to be optimized because we want smaller file sizes associated with the images. When compressing images one or two things happen, we can have lossy images or lossless images. A lossy image happens when compressing an image and some of the pixel data is lost. While a lossless image happens when the image is compressed it happens without losing pixel data. Choosing which one really depends on the picture. If it can lose some pixel data and the there isn’t a visible difference then it is better to lose some pixels for file size. If the image needs all the pixel then compress it so it doesn’t lose any pixels. Most images can be compressed into lossy images and it would be difficult to tell the difference.
There are different formats to save an image. The most common are GIF, JPEG, and PNG. An image should be saved as a GIF if there is animation in the image because GIF is the only format that supports animation. Deciding between a JPEG and a PNG is based mostly upon the image. PNGs will keep the fine details and resolution of the images, whereas a JPEG walks a fine line between a lossy image and a lossless image to create the desired image.
Understanding the importance of image optimization will help to create websites that provide good speed and visuals at the same time. Nobody likes to just read on the web and images provide a better experience to the users when the are optimized correctly.
This blog post is based upon information from the link below.