Reduce Image File Size
In today's digital age, images are extremely useful for websites to convey a particular message, supplement textual information, etc. However, they're also some of the most data-intensive types of content around. Large file sizes can hinder page access speeds and cripple engagement. It's up to you (the website owner) to provide a more optimal web experience, and this means optimizing your visual content. Here's how to reduce image file size like a pro.
Choose the right image type
Different types of image formats can produce similar aesthetic results with notable differences in file size. Is it worth switching from one variant to another? It all depends on what purpose you're using images for. Most of the images you encounter online are raster images. They store individual points of color, or pixels, in orderly rows and columns to create a larger picture. Common web-ready formats include:
.jpgfiles that store up to 16 million different colors in a lossy, or compressed format..pngfiles that store up to 16 million colors and support transparency..giffiles that store up to 256 colors and support transparency and animations.
Other images, known as vector images, store mathematical curves and color information instead of millions of pixels. On the web, these are most commonly encountered as SVG, or scalable vector graphics, files. They're best for line art and simple graphics that lack color transitions.
Many web designers reduce image size by swapping content like .jpg or .png logos for SVGs. This simple trick only works on a case-by-case basis, but it makes it easier to maintain visual fidelity when you use the same image, such as a trademark, in multiple locations.
Reduce file dimensions
One easy way to reduce the size of a raster image file is to scale it down without changing the format. In other words, you don't need to use 2160 × 1440 background images just because some of your site's visitors have high-end displays that support similar resolutions.
When used selectively, lower resolution files rarely detract from the user experience. Most image size reducer and editing apps include settings for scaling an image's dimensions while maintaining the original aspect ratio.
Reduce the number of colors
Images that include broad regions of similar colors or only a few transitions can benefit from a reduced palette, or range of colors. There are a couple of ways to achieve this.
File format
As you may recall from earlier, formats like .gif automatically limit the maximum number of colors stored in an image. When you convert from a .png or .jpg to a .gif in Photoshop, for instance, you can select different options to see samples of how the result will look and view the colors it will use.
Filters and other tools
Gimp, Photoshop and similar raster-based image editors include color-reduction tools. Features like posterize will go through an image and limit it to the number of colors you specify.
You can also reduce image file size by converting to a grayscale, or colorless, replica to limit the amount of data stored. This technique is commonly used with backgrounds, textures, and other images.
Choose efficient compression
Lossy formats, like JPEG compress images by sampling them and discarding some of the data, which can change the contents of an image. While this clearly demonstrates why it can be important to store the original image format for later reference, this can also be used to your advantage to reduce image file size.
As you're saving a JPEG file in an image editor, just choose a different compression option to see a preview of how much space the file will take. On the other hand, if you don't want to sacrifice quality, consider using a lossless compression image format. In either case, once the compression of your image is done and re-uploaded to your site, use your browser's developer tool console or a site speed test to profile your site and determine whether you've actually made noticeable improvements.
Leave the details to someone else
You don't necessarily have to use your image editing software to resize, compress, and reduce image file size. Below is a small sampling of tools that are quick and easy to use. The tool you choose to use should largely depend upon which is most convenient and easily integrates with your current workflow.
Experiment with the tools above to help you reduce the size of your image files. Doing so will no only provide your visitors with a better viewing experience, however, you (the website owner) will also experience savings in bandwidth usage.