Images and Animations Weigh Your Website Speed Down

Images and Animations Weigh Your Website Speed Down

During the last couple of decades, the Google algorithm has changed significantly. While keywords were in the near past the most important thing to consider as a marketer, now, it seems that other things are taking the spot line.

One of these things is the website speed.

And, it has become more relevant than ever in today’s marketing context. A study conducted and published by Kissmetrics settles this once for all. According to them, users expect a website will load in less than 2 seconds. If it takes three seconds or more for a page to load, they abandon the website and try to search for an alternative. Moreover, the same source suggests that no less than 79% of the users who are dissatisfied with the website loading time are less likely to buy from the same source again.

Therefore, we can clearly understand that speed is a major issue, one then should not be ignored in today’s context.

Why Are Images and Animations Relevant Here?

Well, just consider how much space a basic text occupies and how big is an image or an animation. Take into account that an average Html page will load almost instantly, while an image of two or three megs will take up a couple of seconds to properly load. What do you think happens when you have two, three or four images and graphics embedded in an article?

Here’s what Google itself says about speed and images on the PageSpeed Tools tutorial page:

“Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render content on the screen”.

Since Google, the main search engine, counts website speed as one of the most important ranking factors, it has become obvious that images should be optimized for speed as well.

How can we do this? What options can we have in order to optimize our images?

Here Are 3 Things that Can Help Boost Your Website’s Speed

Of course, there are numerous ways in which you can boost your website performance and implicitly, its loading time and speed. However, I am going to discuss now the main options you have at your disposal, what you can do and how to do it so that you will solve all your main issues immediately.

1. Optimize the Images

This is obviously, your main and first option. There are several file formats that are recommended for web but even if you choose one of them, optimization is not included, unless you take further actions toward this goal.

So what is image optimization and why is it needed?

Well, first, make sure you have selected a proper file format.

There are several formats that are recommended for web use. It’s no wonder that they are also the most popular file formats. These types are GIFs, JPGs and PNGs.

While Gifs are recommended for animations, PNGs and JPGs are the best option when it comes to static visuals. JPGs, however, should be the main options, since they can be compressed and optimized for web very easily. The compression only can downsize a file sometimes even to half its original size and this is quite impressive considering that some articles need to be paired with not one but several images.

JPG versus PNG

The main difference between these two file types is the way they compress. While PNG preserves its quality, the JPG format is lossy. This means that if you compress to much your image or save it in a smaller size than needed, it will lose in quality and possibly, become unreadable.

What does lossy mean?

Well, things are quite simple to comprehend. As the word suggests, every time you compress a JPG file, some data will be permanently loss. The eye does not typically perceive the loss of quality unless you compress heavily or reduce drastically the size of the image.

So, why doesn’t everybody use only PNGs?

This question is also easy to answer.

Being lossless, PNG file are also larger in size than compressed JPGs. Therefore, the format may be suitable for icons, logos and banners due to its transparency capabilities but when you need more than that, JPG is the best choice.

Then, choose wisely your image size

Some content management systems, such as WordPress, will automatically create copies of different sizes for each image you upload on your server. However, if you need full size galleries or, in case you don’t use WordPress, you should also pay attention to the size of the image you upload online. Make it no bigger than what you actually need. And, if you use stock images, make sure you resize them before upload.

Finally, optimize compression

Images saved as JPGs are easy to compress with a basic image editor or image viewer. You can choose a compression between 99% and 80% for a larger image or, if you only need a smaller image with a width size less than 300 pixels, you can compress even harder. It’s up to you and I recommend you to experiment with different compressions before uploading the file to your server.

2. Choose a CDN

A great choice, if you want your website to be global, is to have a content delivery network (CDN) to boost your loading time.

Yea, I know, it is not free but at the same time, it will give you the opportunity to go worldwide for real. In short, a CDN will allow you to host everything you have on your website in a cloud storage and as a consequence, deliver the information to anyone, anywhere, as if it were hosted locally, on their own country.

There are many web tutorials and database you can use in order to earn everything you need to know about a Content Delivery Network and what it is good for. Therefore, I will not get into details but I will not go any further without giving you a useful piece of advice:

If you want to address a worldwide community, get a CDN.

3. Don’t Host Everything on Your Own Server

A CDN will help you get around if you have a “World Wide” community to address your message to. However, it may not be enough should you base your content on visuals.

What can you do?

The answer is easy to find: Choose not to host your images locally and opt for a cloud based storage or another third party solution.

There are several options to choose in this case and, if you are using WordPress, it can be quite easy to select and use such an service. There are numerous plugins such as WP2Cloud or MediaCloud that will deal with visual images and graphics storage automatically.

Conclusion

Speed is very important when it comes to website marketing, search engine optimization and ranking.

As we have already seen, load speed is directly connected to the visuals we use on our pages and this is why, the optimization of images becomes paramount for a webmaster, marketer, advertiser or website owner.

What do you think about these three options? Do you have any other useful idea you can add to this list in order to help us optimize our visuals better?

You may also like...