Website performance is one of those items that I have been talking about for years. It is a game that is constantly changing, but some items have been issues since the beginning of time, and yet they are still some of the biggest culprits when it comes to website performance. This post I'll dive in a bit on images, compression, and the steps you can take to optimize your site for the best performance possible, even if it is a large legacy site.
The Basics
Fundamentally when it comes to images we have two key pieces of understanding that relate to images that we use on our websites. The type of image used, jpg or png, as well as the size & compression status of the image. Let's explore this a bit more!
Image Type
I get asked this question quite often, and the answer is not 100% clear-cut, however, at a high level we can use basic image attributes to determine if we need to use a particular format. Our default is to use a jpg image whenever possible and only use a different type if the situation requires it.
Jpg images are compressed by default, resulting in smaller file sizes and you can optimize their delivery to make them smaller. However, certain image features are not supported by this format. If you need an image with transparency, for example, you will need to use a png format. The key being use jpg, unless it doesn't do what you want!
Image Size & Compression
One other area that we typically see individuals having issues with images is in the proper selection of a size for the image, or compression settings. When displaying content on the web and image should ONLY be as large as it needs to be for the largest display. Responsive design patterns seem to have added to the confusion for site editors. However, the best rule of thumb is to ensure that if an image is displayed in a 200px x 200px area, the source image should be no larger than the displayed area.
For web display, images can be compressed quite easily greatly reducing the file size. We will talk more about this later!
Catching Issues
We train all of our clients on these best practices, but often we find that the rules are not followed as well as they should be. After turning over a site for client management, it can be hard to monitor activity, so we will start to leverage some tools to help us find images that are incorrect.
Google Pagespeed Insights
My go-to tool for initial review is Google PageSpeed Insights, you can provide this tool with a single URL and it will look at a number of performance metrics. The key that we are looking for here would be any recommendations for images that are not properly sized, or not compressed. The advantage here is that it will provide you an optimized copy of the image(s) in question for use. Other recommendations from this tool are great as well, but outside the scope of this article.
GT Metrix
Another tool that I rely on quite often is GTMetrix which is simply an automated tool that will run Google Pagespeed Insights as well as the Yahoo YSlow component and provide a blended result.
Starting Off Right
With all of this said, not all of our end users are going to be familiar with the image processing tools and options for compression. Thankfully there are many free systems out there that we recommend to site administrators looking to quickly validate an image at least for compression before uploading to their sites. Our top recommendations at this time are CompressPng.com and Compressjpg.com as they are free systems that make image resizing easy.
Our guidance to customers includes getting the images sized properly regarding dimensions, and then to leverage a tool such as these to properly compress for web display. Taking the resulting image and uploading to the website.
Cleaning Up Existing Sites
Knowing this information now is amazing, but updating an old site could be a daunting process. We have been working on methods to optimize this process, and it is quite simple to complete. We will take an existing site that we know has uncompressed images and simply download all image files in a directory. We can then use the bulk processing features of CompressPng.com to minify all of the files which will provide us a handy zip file.
This process at a minimum gets compressed files and saves on bandwidth, often we see improvements of 40-75% with this process. One small gotcha is that with this process they will append a -min to the name of the file, making the replacement on the site a bit more complicated. Thankfully we can quickly fix this.
Removing -min From Filenames
The process of bulk renaming files in a directory to remove the "-min" portion of the file name is quite simple. If you create a file called Rename.bat with the following code inside in the directory with your minified files, you can simply double-click it to rename the files.
SETLOCAL EnableDelayedExpansion
for %%a in (*.png *.jpg) do (
set a=%%a
if "!a:~-8,-4!"=="-min" ren "%%a" "!a:~0,-8!!a:~-4!"
)With properly named files you can then bulk replace images with the resized counterparts and not need to edit all of your website content. When doing this be sure to keep copies of the original files just in case something goes wrong!
Keep It Going
If you follow this advice you can limit the administrative burden involved in keeping your website images managed. Website performance is often impacted by some things; this is one bit of low hanging fruit that is easy to manage! Hope this helps!