Of all the components on your website, images are the most difficult to work with when your goal is to improve performance. Should you compress them? Which images are the best to use? What’s an optimal size for an image? How should you resize them on a page? Most other component performance tuning is cut and dry, but image optimization is much more difficult. Here are some tips to improve site performance with image optimization.
View the Size of Your Pages
Before you start changing your files, it helps to see the current size of your page to compare it later after image optimization. You can see the size of your pages using Chrome Dev tools. First, open a page that contains some of your images. Go to Developer Tools in Chrome, click the Network tab and then reload the page. You’ll see a list of files with a total transferred in kilobytes.
As a side note, if you want to record your load times for later use, the red record button lets you take a snapshot. Check the “Preserve log” to save it.
If you want to know information about the other controls in this report, Google has a reference guide to help you understand each component. The Load summary is also useful, because you can identify how long it takes to load the page. The downside to testing your site this way is that load times are also dependent on the user’s location and networking environment, so it’s not completely accurate. You can use Google PageSpeed Insights or GTMetrix to get a better idea of load times.
The Network tab in Developer Tools is also useful when you need to reduce HTTP requests on your server. The “requests” summary to the left of the kilobytes transferred shows you the number of requests on the page. By reducing them, you can improve performance.
Shrink Images for Smaller File Sizes
The HTML image tag lets you set dimensions for your images when your page renders. Some developers save an image in its original size and just use HTML to set the width and height. The problem with this styling method is that the server transfers the original file regardless of the dimensions set in the browser.
Instead of using the main, large image, save a smaller file. For instance, if you have an ecommerce store and you have one large image on the product page and one thumbnail image for the listing summary, save two files for both dimensions. This will greatly reduce load times for pages where you show several products as thumbnails on the same page. The server transfers all of those files in the original size when they aren’t reduced, so your products page loads too slow. By loading only the thumbnails, you reduce the amount of data that’s transferred.
Which Image Format Should You Use?
The simple answer to this question is to stick with PNG images when possible. PNG is a lossless compression format, which means that the image is already compressed and you don’t lose quality. GIF images for animations are also lossless and smaller than other formats.
JPEG/JPG was popular years ago, and many websites still use this format. The issue with JPG files is that it’s a lossy compression format, which means you lose quality after compression. However, it’s recommended that JPG images are used for large photos or images that you need to transfer to users such as photography. These files are usually smaller in size than PNGs at larger sizes, and then several tools on the market help you reduce them even more (see next section).
Another option is SVG files. These files are scalable vector files that don’t lose quality as you scale them. They are usually larger in size than the other formats, but they are good for images such as your logo that must be scaled to size on numerous pages.
Image Tools for Reduction
If you have several files on your site, you probably don’t have the time to go through them one-by-one and reduce their sizes. There are a couple of tools on the market to help out.
Since PNG and GIF are already in compressed format, you don’t need to compress them further. As a matter of fact, compressing a PNG can actually increase its size. Some of the tools listed above, however, claim to reduce a PNG’s file size even further, so it’s worth testing some of them out to find out if they can help performance without affecting image quality.
Use a CDN to Host Images
Hosting static content on a CDN greatly increases performance. Instead of having one server transfer several megabytes of files for every visitor, you have the power of data centers across the globe. A CDN caches content when you need it, and then transfers images from a closer geographic location in proximity to the website visitor. This means that someone across the globe gets content faster from their own general location rather than wait for your images to transfer from thousands of miles away.
CDNs offer both caching and close proximity to your users, which speeds up load times even without image optimization. Since images don’t change often, taking advantage of caching even helps when your users are on slower Internet connections than standard broadband. In 2015, 2.1 million people still used AOL dialup.
Check out the rest of CDN.net’s features including a boost in your site performance.