Image Optimization To Improve Website Speed

Another one of the bulkiest files for websites to serve up are image files. These files tend to slow down a website’s load speed as they take such a long time to load.

Say you have a website where you have photos you have taken with your digital camera. If you look at the size of the photo, you’ll see that it is a few megabytes large. For the image to show, all of those megabytes must be downloaded to the user’s computer, tablet, or mobile device, and that can take a long time.

How To Optimize Images On A Website

So how do we optimize these images for better loading speed? We don’t want to have a website just full of text as human visitors like to have images to see. So we have a case of wanting to have a beautiful website with images, but also one that loads quickly.

Images fall into two categories:

• Icons on the website (such as pointers, iconography, very small images)
• Pictures on the website (photos, graphics headers, charts and graphs)

Both of these categories have their own file types that are best suited for them. Icons, tend to perform best as PNGs while photos tend to compress better as JPGs. This is due to the way that photos differ from icons as an icon tend to be more simple while pictures tend to have many gradients of colors and shapes.

When you optimize these images, its important to take into account two items: the size and compression

Let’s take an photo for example. This should be compressed as a JPG image, however, most of the time that compression is not optimized. It is great for viewing on your own camera or computer, however on a website it’s a bit different. It is important before you upload you image to your web server that you compress the image for websites and not regular usage. This will help reduce the file size and speed up the website.

In addition to the file size, you also need to take into affect the physical size of your image. The physical size is the length and width of your image. Most cameras are going to have a very large physical size of the picture to give you the most clarity. For example, an iPhone 6s takes a photo with a physical size of 2049 x 1537. Uploading that photo and placing it on your website will cause a few different issues. You are most likely going to size that photo down to fit on your page (let’s say around 1200 x 1000). But your website can just do that on the fly. The browser itself can through HTML. So the entire image would have to get downloaded, then resized in HTML and then presented on the website itself. 

The best course of action would be before the image even goes on your server to compress it appropriately and then size it to the size that will be presented on the website. That way, the least amount of time would be needed to download the image and to present it on the webpage. 

There are other ways to improve your website loading speed!

Check out our article on the other methods to improve the speed of your website.