Image optimization involves delivering images in a web page with the smallest possible file size while maintaining visual fidelity appropriate for the content delivered.
Image optimization involves delivering images in a web page with the smallest possible file size while maintaining visual fidelity appropriate for the content delivered. Amongst the various web performance recommendations and statistics provided by Google PageSpeed, the level of image optimization remains the key to good web performance for today's visually rich websites. For over 90% of websites, images account for most of the downloaded data on a web page. Hence, optimizing images can deliver the highest web performance improvements. The key to well optimized images in a web page is finding the optimal format and the optimization strategy. Several facets must be considered for image optimization viz. the audience, image selection, the type of image and format, target quality, resolution etc.
Some of the best practices for image optimization are:
1. Smart image selection:
The first and perhaps the best image optimization practice is to gauge the necessity and purpose of the image in the first place. If the matter can be conveyed effectively without the image, it's undoubtedly the best optimization strategy. This strategy can be applied whenever the desired purpose can be met without an image.
2. Choose the right image format and resolution for the purpose:
Selecting the format of the image file can be wisely performed on the basis of support of the requisite features by the format. For animations, the Graphics Interchange Format (GIF) is ubiquitously used. For finer details and lossless compression, the Portable Network Graphics (PNG) format suits best; whereas JPEG provides the best balance of quality and compression for most everyday photos. Formatting JPEG at around 85% quality delivers the best balance of quality and compression for most scenarios. However, for images with geometric shapes, vector image formats are recommended. There are myriad tools for optimizing images for various content requirements. Svgminify.com, compressor.io etc. are some of the online tools for the purpose.
Cropping out white space around the images, and choosing the appropriate resolution for the content is also an inevitable element of image optimization.
3. Prefer vector image formats to raster formats for similar file sizes:
Vector images are composed of lines, points or paths rather than pixels. A raster image, on the other hand, is an array of pixels of various colors, which together form the image. The quality of a raster image like JPEG is dependent on the level of zooming and resolution. The quality of vector images does not degrade with zooming and resolution. Vector formats like SVG, EPS, and Adobe Illustrator files are ideal for geometric shapes like logos and icons where sharp results can be achieved at every resolution and zoom setting. However, for complex scenes like photos, a conventional raster image provides much better compression and quality. Minifying and compressing SVG vector image assets are also recommended to achieve higher data savings and web performance.
4. Strip unnecessary metadata from the images:
Many raster images include a lot of non-essential metadata like geographic information, camera/camcorder information etc. which can be stripped to achieve lower file sizes without compromising image quality.
5. Deploy server-side downsizing:
When an image to be displayed is at a smaller resolution relative to the original image, it is recommended to perform resizing from the server-side before delivering it to the client's browser. If server-side downsizing is not performed, the client browser downloads the original large high resolution file before downsizing it. This can result in significantly higher loading times.
Caveats of poor image optimization:
Low web performance, higher page load times, and higher latency are the consequences of poor image optimization, not to mention the lower levels of user satisfaction and fewer visitors. If the filenames of images are not made effectively optimized for search results, it has a high probability of being scaled down on visibility too.