Image Optimization for Web
Images are a major component of website design. They bring our content to life and retain visitors’ interest and engagement with a website. However, that interest is immediately lost when those images take too long to load. Images are often the culprit of slow site loading times, as they take up the most download bites and fill up most of our web content’s space. So how do we solve this issue? The answer is image optimization.
Optimizing images include a few important steps: first, identifying the type of file format that best suits your image, then changing the resolution and size, followed by selecting the correct color space and saving the image for web. Let’s go through these steps together with this example below.
Choosing your Format
If you want your images to load properly, you must first identify your file format. This is dependent on what kind of image it is in their first place. These different formats take up varying amounts of space, some larger than others. Here are the types of formats for images:
JPEG - Used for complex images with lots of colors such as photos. JPEGs often take up less space, however they are not compatible with transparent images and can compress your image greatly, reducing the quality at times.
PNG - The most common format across the web. This format is suited well to graphic design elements such as illustrations, logos, and symbols. PNGs do support transparency, maintain image quality well, and are a good alternatives to SVGs if you’re building a site with a CMS, which doesn't accept that format.
GIF - This is best for animations and is compatible across most internet browsers and sites. They are best for simple animations because the format only supports 256 colors. They are not ideal for high-resolution photographs or complex animations.
SVG - This format is used for vector images, most commonly utilized for graphic design work to maintain the crispness and quality of the image since it doesn't use pixels. SVGs are not compatible across the web, as stated before in PNGs.
WebP - This format is a newer image format designed by Google. It supports all kinds of images, from photos to graphics, and takes up less space while maintaining the overall image quality. Unfortunately, this format is not supported by all browsers and CMS.
The image we’re optimizing above is a photograph, so the best format is JPEG!
Resolution, Size, and Color Space
Once you have determined the file type you would like to use, the next step is deciding your size and resolution as well as selecting the correct color space for web. The size of your image is its height and width. Its resolution is its DPI or dots-per-inch. Both are measured in pixels.
Choose the correct size and resolution while optimizing your image to make sure it doesn’t stretch, shrink, or crop and maintains the proper quality for web viewing. The correct color space for web is sRBG, so make sure that is also correct.
For the image we’re using, we can see that its original size is 900 x 1200 pixels, its DPI is 72 pixels/inch and it uses sRGB.
Saving for Web
Finally, let’s open the image Photoshop to optimize it and click Save for Web (Legacy) in the file tab. There, you will see the image in its original size, along with different options for file format, image size, resolution, color profile and more.
Make sure you select the correct format (in this case it’s JPEG), Embed the color profile, and check “Convert to sRGB” if the image you are using is does not use that color profile. I unselected that option because the image is already in sRGB format. I also selected the “Progressive” box to allow progressive loading time, increasing the download speed.
For the “quality” option, this is where you can play around with different amounts and compare. It’s good to keep the quality high enough so that the image detail is not lost. I chose 50 since it was able to maintain the detail and color well while condensing the file as much as possible.
From there, hit “Save” and now the image is ready for the web!
Before and After
Original
Optimized
I was able to compress the file from 983KB to 251KB, which is about 74.5%
The image is now optimized to provide a faster loading time and more enjoyable website experience for all! I hope this tutorial helps you to understand the importance and process of image optimization going forward!