First impressions are very important when it comes to most things and websites are no exception to that rule. 64% of an average website’s content is comprised of images and most online users respond more to visuals rather than words.
Reducing the size of these images without reducing the quality provides a positive impact on page load times as well as the user experience. 47% of users expect a page to load in under 2 seconds and if a page takes more than 3 seconds to load, almost 40% of visitors tend to leave the site.
Image optimization is the best solution to page load issues while maintaining a visually engaging site.
What Is Image Optimization?
Image optimization can be done in a number of ways, be it resizing the image, deleting it’s metadata, or compressing its size. Optimizing web images is a process of delivering high-quality images in the right format, dimension, and resolution while keeping the smallest possible size.
How To Optimize an Image
When setting out to best optimize your images for your site, you first have to consider how to process your visuals. One aspect is how you manipulate your images to fit the general layout of your site. Responsive images can be coded to resize to adapt to a user’s device.
Optimization is both an art and a science: an art because there is no definitive answer for how best to compress an individual image and a science because there are many well-developed techniques and algorithms to achieve optimal compression.
There are 4 common image formats that respond best to being optimized:
JPEG: These images are used for visuals containing complexities like many colors, gradients, etc.
PNG: Typically used for non-animated images like logos and symbols.
GIF: Used for animated contents, although for better load times many websites are now using looping videos in place of gifs.
SVG: These images are vector-based. This non-pixel format is useful for responsive web pages, allowing images to be scaled to any dimension without quality loss.
Image formats can fall under two categories:
Vector graphics: Use lines, points, and polygons to represent and image.
Raster graphics: Represent an image by encoding the individual values of each pixel within a rectangular grid.
Vector formats (SVG) are ideally suited for images that consist of geometric shapes such as logos, text, and icons. Ideal for high res screens and assets that need to be displayed at varying sizes.
Raster formats (PNG, JPEG, WebP) are good for photo realism. When raster images are zoomed in or scaled, they lose resolution. A raster image is simply a 2D grid of individual pixels. Each pixel stores “RGBA” values: ( R ) red channels, ( G ) green channels, ( B ) blue channels, and ( A ) alpha (transparency). The browser allocates 256 values (shades) for each channel, which translates to 8 bits per channel and 4 bytes per pixel. As a result, if you know the dimensions of the grid you can easily calculate the file size.
Regardless of the image format used, each pixel always occupies 4 bytes of memory.
A simple strategy to reduce size is to reduce the “bit-depth” of the image from 8 bits per channel to a smaller color palette.
My Process
Original Image
Optimized Image
I was given a large image to best optimize for website use. Using Adobe Photoshop, I chose the option to export and save the image for the web. I set the export settings to JPEG and High to maintain the quality of the image. Touching back on optimization being an art and not a science, I experimented with quality settings to decrease the file size but not the quality. I settled on about 60%. These little tweaks decreased the image size from 983 KB to 252 KB.
TinyPNG reduced the image to 307.9 KB
Out of curiosity, I also tried out the site TinyPNG. A simple upload reduced the file size by 69%! Photoshop yielded better results but this was definitely a faster option.
As you can see, there are a number of lengths to which you can go and applications you can use to optimize an image.
The goal is to optimize for search engines and user experience. Every factor to website performance matters, and smart image optimization is capable of boosting your conversion rates and revenue numbers.
Comments