Visual content dominates the web nowadays. There is almost no website that doesn’t leverage the power of images and videos to attract and engage visitors. However, if those images are not optimized, images can slow the page load speed, causing exactly the opposite effect. Therefore, having visual content is much a matter of format and size as is of the creative and attractive such images are.
Image optimization techniques and tools help solve the problem of reducing the image size without losing quality In this article, we will explain what is image optimization, its methods, and tips for optimizing their web images.
What Is Image Optimization?
Image optimization refers to the process of delivering images for the web in the smallest possible size without losing quality. It is not that simple, as the point here is to keep the quality of resolution as much as possible while minimizing the almost unavoidable image degradation that comes with compression.
This technique is essential for website performance, as one of the main causes of a slow loading website is the excess weight of images and videos. Keeping the images light reduces page load times, retaining visitors to your website.
Moreover, Google started counting page speed as a ranking variable, therefore penalizing slow sites with low rankings. Optimizing your images is one simple way to quickly improve page speed.
Image Optimization Methods
The three main methods for image optimization are: resizing, compressing or caching.
Involves reducing the dimensions of the image while striving to keep the highest possible quality. One way to reduce the image size is by changing the format. For example, changing a high-quality PNG image into a JPEG file keeps the quality but reduces the size in half.
This method may seem unrelated at first, but storing the images insider the user’s browser cache effectively reduces loading time. Since the images are already in the browser, it reduces application requests and the page loads faster.
Most images are made out of bitmaps, which in turn are made out of pixels. Those pixels can be compressed to reduce the file size by removing redundancy. For example, if you have a picture of a dog running on the beach, the compression software groups all the blue pixels for the sky and compares them for identical pixels. Next, when finding two nearly identical pixels, eliminates one, thus reducing the size.
This process reduces small differences in color that are not noticeable for the human eye. The most common formats for compressing images are .png, .jpg and .gif. However, this compression almost always degrades image quality. There are two types of image compression: lossy or lossless.
- Lossless compression—reduces the file size while keeping the picture quality, allowing to restore the original image if needed.
- Lossy compression—reduces the size by permanently removing the redundant data, degrading the image which cannot be restored to the original quality.
Tips and tricks to Help Your Images Look Good and Load Faster
Choose the right size and format
A mix of formats on the website is a good rule of thumb to keep the loading speed low. For that matter, using vector images for logos or icons is a best practice, due to its small size and simple design. However, it has a limited choice of colors.
How large should my image be?
Well, it depends on the use you are going to give it. Here are some examples:
- Hi-res photo gallery full-width—1920×1280 pixels, or 1200×800
- Full-width blog header—1600×1060 pixels.
- A full-width image in the blog content area with no sidebar—960×640
- A full-width image in the blog content area with sidebar—800×533.
The most common image file types include:
- PNG is designed for high-quality images—usually featuring a transparent background. Since it is the largest type, it should be used sparingly.
- JPG is the most popular image format—allows for relatively high-quality images while keeping a low weight.
- GIFS are limited to 256 colors—therefore it is best used for simple images and animations without much detail.
Edit the image
Besides tweaking the dimensions and format, sometimes you need to use editing to optimize the images for web. Especially for e-commerce sites, you may need to edit the background of product images to present a clean look. There is the option to do it with Microsoft Office “Remove Background” tool. However, for a more professional look, check this blog post about how to automatically change an image background.
You can use a Content Delivery Network (CDN)
This aims to the same goal to caching, which is to shorten loading times by delivering the image from nearer the user. A CDN retrieves the images on demand from the server that is closest to the user location.
Most CDNs feature:
- A user friendly interface—to define proxy cache policies, thus eliminating the need for application requests for new visitors..
- Automatic compression—you can choose the degree of compression, and the software will automatically compress the images according to your instructions.
- Progressive rendering—the software loads the image first in a low-quality version, then replacing it progressively by higher-quality versions until achieving the target quality.
Use lazy loading
This method loads only the section required by the user, delaying loading the remaining until requested. However, to implement this technique successfully you need to index the images using image sitemaps.
Control your thumbnails
eCommerce sites use thumbnail images on category pages. While apparently “innocent” due to their small size, having hundreds of thumbnails add up to a heavy load. Thus, optimizing your thumbnails can reduce the aggregated impact those product images can have on the page speed.
- Other best practices include:
- Use lossy compression when possible
- Use vector images whenever possible
- Crop white space and recreate it.
- Use raster (jpeg) only for detailed images
- Remove any unnecessary image metadata
When you have formatted your images for better performance, your website will load faster, retaining visitors. As such, popular websites with returning and staying visitors attract the attention of search engines, which in turn helps the website ranking higher.
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Samsung NEXT, NetApp and Imperva, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership.