Not is only a site's load time factored into its search-engine rankings, the longer it takes to load the more likely it will lose visitors. A large percentage of bandwidth usage — especially for ecommerce sites — comes from images. As such, image size is an important component of a site's speed. This article will explain ways to optimize images for improved load times.
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
There are other images formats like TIF, GIF, and SVG that can be used. But the majority of web graphics is JPG and PNG. A basic rule of thumb is to use JPGs for anything photographic and PNGs for everything else. If you’re in doubt about which file type to use, try saving the same images as both a JPG and PNG and then compare quality and file size.
Saving Methods
Another important consideration for image optimization is the method of saving it. Many applications provide optimization options like compression, metadata (i.e., size, resolution, and date created), and color profiles when you save images. If you use Adobe software for image editing, use the “Save for Web & Devices” dialogue box when optimizing your images.
When using that “Save for Web & Devices” dialogue box, you can preview what images will look like once they are compressed, edit metadata, adjust image size, and preview the file size of the image. This allows you to easily compare how large of a file will be created if you save as a PNG-8, PNG-24, or JPG file type.
Connect with us