Have you ever gone to a website and noticed that either the entire page or specific parts of the pages are taking forever to load? This is one of the largest turn offs for potential customers visiting your website. On average you have around ten seconds to draw them into your website. If something is running slow, or taking forever to load; you risk the potential of losing what could be a potential client.

Optimizing your website and all other assets to make sure that it loads is critical to maintaining a great online experience for new and existing clients. Just as important as the content that is within your pages, a poorly optimized website will not only deter people from viewing your website, but it can also deter search engines from referencing your website.

Images

One of the largest contributors to a slow website are images. This is because images can become large in size very fast. There are many factors that contribute to your images causing your website to degrade in performance, they are:

1. The actual file sizes
2. The physical size of the image (Pixels)
3. The caching of images and cache refresh of images

File Size

Images get large as a file. If you have a high-resolution image, the file size can be anywhere between 4MB to 20MB. Although that doesn’t seem all that big, if you have 100 website visitors accessing your website at the same time that one single image must download 100 times at the same time making the image more than 2GB. This sometimes is not a problem for users on a computer, however, trying to pull a 20MB file from the internet over a cell network is brutally slow.

Pixel Size

You can get some images that are a great size physically for web, but another consideration is the dimensions of the image itself. On a computer the image will load as its normal size, but on a tablet or phone the image needs to be resized. Having to have the page load then wait for the image to compress down to fit the screen can take some time, depending of the service signal as well the actual device. Mobile devices are becoming more and more advanced; however, they still are not as powerful as a computer so they take a bit longer to process the compression.

Caching and Cache Refresh

Utilizing caching of your images is a great way to deliver them at high speeds, this is because the browser will not try to re-read the image each time the page loads, it will just take what is waiting in the cache to display it. Setting up expiries properly will allow the image to only expire after so much time has passed, forcing the browsers to re-read the image on the page to make sure it is current. If you set your caching too short, the browser will keep re-reading it too often eliminating the advantages of utilizing caching.

Recommendations

There are many factors that contribute to image size, so what would be the recommendations that I give to keep your website running smooth with images?

File Size

It is usually recommended to keep an image at 1MB or lower with regards to file sizes, this allows most devices to load the image faster, you can go higher but keep in mind the larger the image the slower the page will load.

Pixel Size

Images on the web should not exceed 2500px in width or height. If going larger than this, it is recommended to have a section or area of your website that loads the image at a different size for mobile devices; I personally have seen the effects of images that are too high or wide, upwards of 4000px which take up to 15 minutes to load on a cell phone, whether connected to Wi-Fi or not.

Caching

Caching is a great way to deliver static content on your website that doesn’t change often faster than just a standard delivery. This is because the server does not need to read into the page and locate the file, it delivers the cached copy of the image itself. Setting the cache expiry allows the server to “refresh” its cache. Depending on the website caching should be set anywhere between 7 and 14 days. For sites with fewer changes to images and static content this could be set even longer, as with frequent changes this can be set less.

Compression

Compression can be done before or after the image is placed on your website. Using compression can be tricky because you want to maintain the quality of the image but still have it reduce in size. For WordPress users, there are many plugins out there that automatically compress your images optimizing them for web. They do this as you add in new media to your website. For non-WordPress users there are a variety of scripts and server-based compression applications that can be used in order to simulate the same process.

Images are a great way to really give your website the personal touch that you wanted. But they can be quite problematic when implemented wrong. These are just a few tips to help you ensure that your website it performing to high standards well still looking beautiful and unique by using graphical content.

Keep an eye on our blog for more posts about Performance Optimization as well, signup for our mailing list to receive updates directly to your inbox on the latest blog releases.