How to Speed Up Your Website With Image Optimization
As users of the web, many of us are familiar with the feeling you get when you click on a link only to be met with a long load time and a half-baked web page. As the full contents slowly creep into focus, the seconds tick by sometimes trying our patience enough to warrant hitting the Back button in our web browser of choice. We end up feeling like we wasted our time, while the website misses an opportunity to show off its stuff. All in all, long load times can be a problem for everyone involved.
So, how does one improve their page speed? Well, there are a variety of factors that go into how a site performs when it is serving a web page such as the Content Management System you might be using as a foundation, the functionality the page utilizes, or the sheer amount of traffic and activity your site might be managing. We can’t cover every possibility across the web, as sites are often created using different methods and can fulfill a wide range of functions. However, there is one method that helps to improve just about every website out there. This method is image optimization, one of the easiest, yet, most neglected steps you can take to speed up your website.
If you don’t know, optimizing images is a process which involves balancing out visual detail with the file size of an image. The lower the file size is, the quicker the image will load. The quicker the image loads, the less strain there will be on the rest of the page which nets an overall faster page speed. And, the faster the page speed, the less combined weight the site will have to manage which means increased speed across all concurrent users of the site. In other words, a little optimization can go a long way.
So, how do we go about improving the images on our website? Well, the first step is to figure out how much space your image is going to take up. Reducing an image’s dimensions also reduces its file size, so it is best to only use as much size as you need. There’s no use in storing a bunch of detail in an image that will be too small to see the details.
To find the dimensions of the section where our image will go, we can start by adding the image to the site and “inspecting” it in our browsers. Alternatively, you can inspect another image in the section that matches the dimensions you will be utilizing. To inspect an image in the browser, right click on it and press “Inspect” in the menu. You will see a window full of code pop up. If you hover over the highlighted line of code, you’ll see numbers appear near the image you selected. These numbers tell you the width and height of the section respectively.
Next, you’ll want to navigate to your image file and edit it to meet these criteria. You can resize photos in a variety of software, but both Windows and Mac come with their own default options through Microsoft Paint and Apple Preview which both offer resizing functionality. When resizing, you’ll want to maintain the aspect ratio and change the first value to the width you found by using the inspector. Make sure you are resizing with pixels and not percentages so you can match the measurements precisely.
You’ll want to match height too, but an image’s aspect ratio may not always match up with that of the section on the website where it will be placed. In this case, cropping the image a bit to match the dimensions can be useful. Once, the dimensions match that of the section, hit Save in your image editing software, and name the new image something different than the original. You should be able to check the properties of the new and old files. When you do, you’ll notice the new, downsized image will have a significantly smaller file size than the previous rendition.
Although you can stop here and add the image to your website, there is also an additional step you can take to optimize your images further. This step is compression. Compression is a method of reducing an image’s level of detail without changing its size. Optimally, you’ll want to keep almost all images on a site under 1 MB at the most and much smaller than that if possible. A large 1000 px by 300 px banner image can be under 200 KB and still be highly detailed. If you find that your image’s file size is still above 200 KB after resizing, compression can be an additional step to take.
There are a variety of resources you can use to compress images. But the one we recommend is https://imagecompressor.com/. Just drag and drop your images into the box, the web site will compress the images, and you’ll be able to press the Download All button once they’re ready. Next, you’ll be able to download a folder of all of the newly compressed images. This resource can reduce a file by as much as 75% while still ensuring a presentable level of detail.
Combining these two steps for every image you upload to your site will help to shave time off of your pages in a very direct way. Users will seldom have to wait for pictures to load, which means your site spends less time showing white or non-existent image fields and more time looking as it was intended. This is also a great way to optimize your site for mobile devices, as the less powerful hardware of phones and tablets will be able to process the images more quickly. If you own a website, definitely consider taking these steps especially if your images are taking a little bit of time to load in. Reducing the file size reduces the load times, and reducing the load times builds trust in your platform. It’s just that simple.
