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…
- 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).
- 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.
- 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).
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
