How to use images without slowing down your website?
Visuals are an important, integrating part of a website. There’s no doubt about it. Valuable content attracts a consistent audience but it performs better when paired with relevant images.
84% of marketers are already using visuals in their marketing strategy, especially when it comes to social media. Tweets with visuals, for instance, are reportedly generating 150% more retweets and consequently more traffic than those who are based on just a text message.
A Buzzsumo report also states that blog articles with images, especially those who feature a visual once every 75 or 100 words, receive double the social media shares a traditional text-based article receives. Also, Facebook posts with images receive more than twice the social media engagement generated by similar posts without images.
The importance of speed and what happens when the website is slow
Therefore, it’s important to acknowledge the fact that we need visual imagery on our blogs and website in order to attract the audience and at the same time, to keep them engaged and hope for their return. However, there are several issues that may be directly related to the excessive use of images. The more important issue that has a direct impact on our stats appears when these visuals start slowing down the website.
We know however that Google and other search engines value speed and rank better the websites that load faster. Also, if they take too much time to load, there’s a good possibility that people will choose not to wait and search for alternatives. This is a serious issue that has a huge impact on a marketing campaign and may render it useless unless we do something. What can we do and what issues can we confront with?
Find out where the issue lies and apply the solution
There are many ways a website can fail to load properly. And when I say properly, I am referring to what users and search engines expect from a web page.
According to Maile Ohye from Google, “2 seconds is the threshold for eCommerce website acceptability. At Google, we aim for under a half second.” Also, the same source confirms that page speed is indeed a ranking factor which means that one of the most important things you can do right now in order to improve your overall ranking is to check your website’s speed.
Also, you should commit to improving this speed in case you find out your pages load faster than the average speed. There’s an interesting table posted by Machmetrics.com, that lists the average speed of websites based on their specific industries/targeted audiences:
First, you need to check your website’s speed. If you want to do it thoroughly then, check it page by page.
There are two indispensable tools, both offered by Google. Both allow you to check your website speed.
First, we have Page Speed Insights.
The tool is easy to use. All you have to do is to access the official page and insert your website address into the provided form.
Then, we have another great and easy to use the tool, essential for testing the mobile speed of a page or website.
Let’s, therefore, talk about the main things that can affect this speed and of course, what choices you have in order to solve these issues once and for all:
1. Large images
If you upload a large image and embed it into an article or a blog post, it’s quite obvious that it is going to take a long time for it to be displayed. It may not seem like it if you are on a very fast gigabit network. However, consider the fact that not all your readers will have the same type of connection. Also, a big percentage of your audience will access your pages from a mobile device.
Some of the visuals available as stock images are available in many sizes and resolutions. Some of them come even in print ready sizes, not actually ready for web display.
What can you do?
First, if you don’t need the maximum size image, download a reduced size version. On Dreamstime, for example, various sizes are available for each image. Choose the one that is closer to the actual display resolution on your web page.
Also, if you are using Photoshop, you can save and compress images by using the “Save for Web” option. Similar results you can achieve by using Wordpress plugins like Imagify or via other web dedicated apps such as JpegMini, Shrink O’Matic or Smush.it.
2. Image dimensions undefined or defined incorrectly
Let’s suppose that you are going to embed an image on an article and that the said image will be displayed in a box that only allows a 300 pixels width. If you have a 1200 pixels wide image, that will only be displayed at a third of its size, the browser will still load the entire image and scale it down to the actual displayed size. This is not a good thing if you are looking to speed up your website.
What can you do?
Well, the answer is quite simple to guess: do not let the browser scale images instead of you. If you only need a 600 pixels wide image, for example, load a 600 pixels image and not a full-size stock image. Some CMS’ like Wordpress, are capable of resizing the images for you and create multiple files that are to be loaded as thumbnails, featured images or medium-sized inserts into the posts.
3. Unnecessarily high-quality Jpeg files
Another issue you might be facing with is the upload of an image that is compressed at a higher quality than necessary. Let me explain what I mean in this case.
Jpeg is a file format that has truly revolutionized the World Wide Web. One of the greatest features of a Jpeg file is that you can save it at different quality rates.
How can you adjust the quality of a JPEG file?
Well, most of the image viewers and editors that are available today, even the free ones, allow you to easily resize images and adjust the compression and the quality of jpeg files. Here’s how such a dialogue looks like on FastStone, a free image viewer you can install on a Windows platform:
4. Incorrect use of images’ file types
There are some files formats that are web ready and other file formats that are naturally higher in size such as TIFFs which are used for other purposes. The recommended file types that should be used on web pages are Gifs, Jpegs, and PNGs. However, if you want to really be thorough in choosing the right file type, consider that even PNGs, which are still recommended for web use, in many cases, can be quite larger than their Jpegs counterparts.
5. Deliver images hosted on your server
While for a blog that only displays featured images and maybe a screenshot or two for each of the posted articles this issue may not appear, for a news media website or an eCommerce shop, problems may occur if the images are hosted on the same server as the website.
I am talking about websites that rely on displaying a lot of images on each of their pages.
What can you do?
First of all, you need to learn what is a CDN and how does it work. A CDN will speed up your website by caching its pages to local servers and thus, delivering them locally worldwide. For instance, if you are located in the United States, when someone accesses your website from the UK, they will actually access a cached version of your website stored on a UK based server via a content delivery network.
When it comes to banners and similar visuals, especially animated ones, you can also improve your website speed by choosing to create HTML5 banners instead of Gif or Flash animations.
You can use tools such as Bannersnack that will allow you to create professional designs in just a few minutes with great visuals and cool fonts and even store the files on their servers and display them as embeds on your pages.
We’ve learned together that speed is important for a website and that the search engine ranking may depend on it. While texts, CSS and basic HTML codes are easy to load and display fast on a web page, images may make them heavier and as a consequence, slower. You need visuals however and therefore, the important thing is not to let them go but instead, to adjust them for best use.
Choose always the proper formats, resize if needed and adjust the resolution and the quality as much as you can. Use cache services and HTML5 animations and you will make your pages not only faster than ever but also mobile friendly and SEO ready.
What other issues have you encountered and how did you manage to get passed them?
How to shoot events