10 Ways to Optimize Images to Improve Your Website Performance

by Louis Kingston

“Visuals express ideas in a snackable manner.” – Kim Garst, CEO of Boom Social

Visual imagery on websites is a powerful tool to grab the user’s attention keeping them curious, engaged and interacting on your webpage. Humans are a visual species. Our brains can process an image within 13 milliseconds with over half of the brain devoted to processing the visual information it receives. We show excellent memory capability for remembering pictures that is much higher than retaining text. Over 65% of the population are visual learners. What this means is that our websites must contain a healthy dose of visual images to keep a visitor engaged. Whether it’s on our homepage, service pages, in our blog articles, on our e-commerce sites –images are essential to driving sales, conversions and ultimately company growth.

Are Images Slowing Down Your Load Speed?

However, the images used must be optimized so that they don’t hamper your website’s performance. If they are too large, they are going to slow down your website’s loading speed. The Google algorithm doesn’t like that. More than seven seconds to load and Google’s going to ignore you, and you won’t make it to page one of SERP’s (search engine results page). The search engine’s focus is on organically profiling businesses that offer a great user experience; slow load speed will just have potential visitors clicking away.

Google loves text, and when it crawls your site, it can’t ‘read’ your images unless you have created file names, alt tags, and captions to describe the image. You are losing out on a perfect SEO opportunity if you don’t optimize your images.

Let’s investigate ten ways you can achieve image optimization for your website…

1. Use keywords in the image file name. The file name affords a perfect opportunity to include your primary keywords as well as giving Google enough text, so it knows what it is “looking’ at on your webpage. But make sure you never keyword stuff these descriptions. You don’t have to use descriptions for decorative images (that would be overkill and Google might penalize you).

2. Images must be scaled to fit the size it will be displayed on the site. The mistake many people make is that they think that once they take a large image and put it into a small size display area, it will then not take up so much ‘space.’ But the file size is still enormous and will continue to take a long time to load. The image should first be scaled to the size you want it to be displayed. You can also choose to remove any pictures that are no longer serving your website which will also improve the overall load speed.

3. Always reduce the image file to the lowest possible size without compromising too much quality. Many online tools can assist you to reduce your file size, like JpegMini, io, ImageOptim etc. Aim to keep your image file size below 70kb (if possible).

4. Use responsive Images for a better mobile experience. When you use responsive images plugins that apply the srcset attribute, it allows your pictures to display differently for each device screen width. If you are using WordPress, this function is automated.

5. Add Customer-Centric Captions. According to KissMetric, the captions under images are read 300% more than the body content. Visitors to web pages are scanning information, and a well-captioned image can provide them with a wealth of info at a glance. Remember that the images should always be relevant to the content.

6. Always be visible with alt tags. Proving alt tag text ensures that your images can always be ‘seen.’ If a user is unable to download images or if they are using a screen reader due to being visually impaired, the alt tag will describe the image.

7. Make sure to add image tags to your XML image sitemaps. This helps Google with indexing the images on your site. If you are making use of JavaScript galleries or other flashy pop-ups, let Google know what they are and where they are located on your sitemap so they can crawl these images on the web pages’ source code.

8. Remove metadata from raster images. If you are using raster images, there is often unnecessary info attached to it like geo-location and other information regarding the camera used which only takes up space. You will make the overall file size much smaller when you can get rid of this extra metadata.

9. Where possible use vector images. This format is ideal for multi-device use with high-resolution. Raster should only be used when there are complex scenes with loads of detail and irregular shapes. Then using GIF, PNG, JPEG, JPEG-XR, and WebP will be the right choice. Experiment with the raster settings to reduce the quality to free up more bytes.

10. Scalable Vector Graphics (SVG) should be minified and compressed. Minifying SVG files will reduce their size and GZIP can be used to compress them.

How is Your Website Performing at the Moment?

Of course, these are just ten basic image optimization pointers. You can drill down even further on image optimization to enhance your website performance. If you would like to find out more about your website’s performance, AlertBot can show you what elements are slowing down your site or what bottlenecks are causing user traffic to click away. We also offer a Free 14-day trial (without collecting any billing info). Give us a try!

Louis is a writer, author, and avid film fan. He has been writing professionally for tech blogs and local organizations for over a decade. Louis currently resides in Allentown, PA, with his wife and their German Shepherd Einstein, where he writes articles for InfoGenius, Inc, and overthinks the mythos of his favorite fandoms.

How Much Impact Does an Hour of Website Downtime Have on a Business?

So, your business website is offline again and your IT team has sprung into action, trying to pinpoint the issue and fix it as soon as possible. Sure, it’s good that your IT experts are handling the problem responsibly, but do you know how much money your business may have lost during your website’s downtime? Well, if you are a major player in the ecommerce industry, chances are you could have lost millions of dollars by now. And that is not an overstatement.

Like it or not, even an hour of downtime can do a great deal of damage to your online business. Did you know that in 2014, Google experienced downtime which was caused by a virus and all Gmail, Google+ and Google Drive were affected by it? This downtime lasted for an hour, which decreased Google stocks by 2.4 percent.

But that’s not all! Amazon, the e-shopping giant, experienced 2 hours of downtime, presenting site visitors with cryptic HTTP messages. In just 2 hours, Amazon lost an estimated total of $3.48 million. That’s huge!

So, if you wish to estimate the true cost of an hour of website downtime has to your business, then you’ve come to the right place. Here are some of the more important variables you must consider when calculating this cost:

§  Impact on Business Sales

To figure out exactly how much an episode of website downtime costs in terms of sales lost, you’d need to determine what your average profits per minute are during the time period the downtime occurred. You can then multiply that average profit per minute times the number of downtime minutes to determine your total lost sales profits. If the downtime occurs at 2 in the afternoon, for example, it is most likely going to cost your business more sales than if the outage had happened at, say, 2 in the morning, when web traffic is typically much lighter.

§  Damage Done to Your Business Reputation

Downtime (especially if it’s frequent or at a crucial time) can scar your business’s reputation, losing the trust and loyalty of customers in your brand. Just like many businesses, you too have invested good money and a great deal of time in brand building. Your time and money can go to waste if you experience downtime—even if it is for just an hour. When considering the true cost of your site’s downtime, it is important that you keep in mind the resources you’ll need to spend to repair your tainted brand image going forward.

§  Money Wasted in Marketing Campaigns

Another factor to consider when determining the cost is the money you have invested in your marketing efforts, like PPC (pay-per-click) campaigns. You need to figure out the amount of money that was spent on marketing while your site was experiencing downtime. This is important to calculate, because let’s face it – you literally didn’t reap any benefits from the invested money, because your site was inaccessible when prospects clicked on the PPC link or advertisement.

Prevention is Always Best!

Calculating the cost you might have incurred due to an hour of website downtime is essential, but there are precautions you can take to avoid unplanned downtime and keep your business up and running ’round the clock (and be a hero!). AlertBot is an intuitive web-based website monitoring service that can alert your team about website errors and slowness within seconds, and also help you keep track of your site performance. All of this is much needed to mitigate downtime issues significantly. Start the AlertBot 14-day free trial today!

Neeraj posted screenshots from his personal Android browser that indicated a new red “SLOW” icon branded next to links for YouTube and even a Google search result (scholar.google.co.in, to be exact). Today, we tried to replicate the same result on an iPhone, but were unable to bring up any “Slow” icons on our search results. (And comments on Neeraj’s report page seemed to reflect similar experiences.)

So what does this mean? It’s possible that Neeraj happened to stumble on a brief Google testing of an upcoming new search result feature, and if this is indeed on the horizon for the near future, website owners may want to do all they can to avoid that little dreaded scarlet branding.

Should this feature come to light soon, now would really be the ideal time to find a Website monitoring solution for your business’s website to ensure visitors and new clients aren’t deterred by Google’s little warning.

Click here for a list of solutions and more info on how AlertBot can help.