Importance of image optimization in SEO
Don’t Forget Image Optimization
It is so crucial that you achieve the highest level of success in Search Engine Optimization. Therefore, we have compiled these articles to assist you in that endeavor.
Importance of image optimization in SEO
[1]They say, “a picture is worth a thousand words,” which is undoubtedly true. We love to interact with visuals rather than words. The importance of images on e-commerce, travel, and media websites has been increasing over time. According to HTTP Archive, on average, around 64% of a website’s weight is comprised of images. Suppose we can reduce the size of these images without reducing the image quality. In that case, it will have a direct and positive impact on page load speeds and the user experience of visitors to your websites.
As per Gomez and akamai.com, half of the users love sites that load in less than 2 seconds. However, if the page takes more than 3 seconds to load, almost 40% of visitors leave that site, thus increasing the bounce rate. Image optimization is the only solution for this problem.
What is Image Optimization?
Optimizing web images is a process of delivering high-quality images in the proper format, dimension, size, and resolution while keeping the smallest possible size.
Image optimization can be done differently, be it by resizing the images, caching, or compressing the size. Enter ImageKit, an intelligent Image Optimization tool, which optimizes images using an intelligent compression algorithm. Combined with a global content delivery network (CDN) for faster delivery, it can improve your website performance significantly.
Importance of Optimizing Images on Website
The importance of images in connecting users to your products has been proven. If your website takes more than 3 seconds to load, users are more likely to abandon it, which will drastically increase your bounce rate and eventually affect your conversions.
Why is image optimization important?
Here are the answers – Image optimization helps in improving page load speed, boosts websites’ SEO ranking, and improves user experience.
Let’s study the importance of optimizing web images in detail:
Improves Page Load Speed
Page load speed is the amount of time taken by a web page to load completely. It depends on many factors ranging from your website host to website layout and design. However, the websites having less than 2 seconds load speed are most loved by their users. So, if you are optimizing 64% of your website’s weight, which is images, you will be improving your website speed.
This gives your website visitors a faster experience. Thus more users would interact with your product and services. Many tools can help you analyze your page load speed, such as Google’s PageSpeed Insights, Web Page Test, and ImageKit’s Website Analyzer, which will give you complete insights about your web page.
Click here to download the infographic illustrating 20+ stats on how speed affects your website. The Hosting Tribunal made this infographic, and the original blog on Hosting Tribunal talks in detail about the impact of the load speed on your website.
[2]Why images are important
Well-designed images and their optimization for search engines are invaluable. Not only do pictures command more attention than plain text, but they have also become a driving force for web traffic to websites. Organic visitors generated from image clicks are growing. These image clicks are primarily through Google Images. A user may click one image then is suggest other possibly related ideas by Google’s indexing. Gaining exposure this way through indirect searching is a significant driver of web traffic.
According to a 2018 Jumpshot study, over 20% of all searches online were generated through Google Images. Thus, a potentially large number of users a web page may miss out on if their images are not optimized for search engine discovery and indexing.
How images drive traffic
We may click on an image, and additional photos are displayed that we can potentially click. This is a significant driving force that all started with just one search.
Optimize images for discovery
Search engines do not arbitrarily see the actual image from a web page we search for and fetch it.
Crawlers and Indexing
A search engine’s function is to retrieve relevant matches for the user’s input. This is made possible due to a method called crawling. Crawling is a method where bots search through a list of known websites that have links.
These bots follow these links further and further, creating a database or Index. For our images to be optimized for search engines, they need to be discovered by these crawlers. This points to the importance of alt text. Alt-text is a tag we can image in the code itself, so it is identifiable to search engine crawlers. These crawlers then take these alt text tags and link to them. This link is then stored in this Index, which is then returnable to a search engine user.
The Importance of Alt Text
A user may or may not know what they are looking for. Giving an image of a relevant name will help match the user with your idea. Providing alt text for your photos will further allow search engines to identify your shot correctly. Choosing which words to use for an image may be easier said than done. We want our alt text to represent our image accurately, but being too specific may limit our index exposure. Being too general may give exposure, but it may be overshadowed by the millions of other generally alt text labeled images.
[3]Correctly naming and describing images for SEO
One of the easiest and often overlooked optimization opportunities is the actual image file names themselves. Those should use a few carefully chosen keywords – ideally, keywords the image could rank for – while omitting stop words (a the, in, etc.) and separating keywords by hyphens (e.g., IMG-458752.jpg would become Brooklyn-bridge-night.jpg).
Image alt and title attributes (of the <img> HTML tag) are the most specific settings that help images rank higher in search and build the page’s relevancy and improve user experience, eventually ranking factors. In image links, those attributes also provide context to search engines regarding the destination page, further helping it rank. However, unlike file names, write those attributes grammatically, coherently, and concisely: alt attributes are played out loud by accessibility software. Screen readers and title attributes appear when visitors hover over images, so do not stuff keywords there and vary it up!
For e-commerce and product images, it’s often good to add SKUs, ISBNs, or model numbers to alt attributes as we sometimes look for particular products. Note that on-page image captions and keywords in the surrounding text area also help search engines derive more context for images and improve their ranking ability.
Note that the host page’s HTML title tags are also now displayed in image search results, so you should ensure that those are somewhat relevant to the image as well if possible (see above screenshot).
Choosing the correct image formats, sizes, and dimensions
Image file size can disproportionally affect page load time, so it’s essential to get it right. JPEGs are usually more SEO-friendly than PNGs, especially if you do not need transparent backgrounds, as they offer better compression levels. Logos and other high-resolution, computer-generated graphics can typically also use the vector-based SVG file format (make sure that your server caches, minifies, and compresses that format as well). The GIF format should be reserved for simple animations that don’t require broad color scales (limited to 256 colors). It may be best to use a true video format for large and lengthy animated images instead, as it allows for video sitemaps and schema.
What matters most is the actual file size (in Kb) of the images themselves: always strive to save them under 100Kb or less whenever possible. Suppose a larger file size must be used above the fold (for hero or banner images). In that case, it can help to save images as progressive JPGs where photos can start progressively displaying as they are being loaded (a blurry version of the entire image first appears and gradually sharpens as more bytes are downloaded). So start by selecting the best format for your needs and then select the best settings for those!
Although Google Lighthouse and PageSpeed Insights audit tools recommend even more specific compression formats (Next-Gen formats such as JPEG 2000, JPEG XR, and WebP), those are not necessarily compatible with all; some CDN providers do, however, offer WebP conversion when visitors use applicable browsers.
As for dimensions (image height and width), ensure that images are not more comprehensive than the most popular most prominent desktop screen resolutions (which is typically 2,560 pixels in width at most. Otherwise, browsers will unnecessarily scale them down) and that your CSS makes your images responsive (images adjust automatically to screen or window size). Depending on the visual needs of your website, this might mean saving different versions of the same idea in various dimensions to only dynamically serve the most optimized image based on the user’s screen (mobile, tablet, expanded or resized desktop window, etc.). This can be done automatically through the use of plugins or by using the <picture> and <srcset> elements.
A few popular image compression tools:
- GIMP: cross-platform, downloadable image editor
- TinyPNG: uses smart lossy compression techniques to reduce the file size of your PNG and JPG files
- Smush: image compression and optimization plugin for WordPress
- MinifyWeb: free service for compacting web files online:
Note that Google does not use EXIF metadata at this time but may use IPTC metadata, particularly for copyright information.
Properly hosting and caching images
Not only can images significantly increase page load times based on file size, but they can also dramatically increase the number of requests made to the server before the browser can finish loading the page, competing with other critical resources and further slowing down the page.
In the past, we used “image sprites” (multiple images saved as a single one and relying on CSS to be displayed) and hosted photos on a cookie-less subdomain to speed up the process of retrieving and loading images (commonly referred to as domain sharding). Today, however, with HTTP/2 now allowing for multiple concurrent server requests, this is no longer critical. Depending on your specific setup, it may be faster to host images on the same host as your HTML files.
As previously mentioned, Google Images (until last year) directly linked to the image locations themselves, so many webmasters and SEOs felt that it was then even more critical to host images on their domains to capture any potential link equity from anyone “hot-linking” or embedding your photos into their content.
Additional benefits of hosting images on your domain or subdomain include cache control, branding, and control of redirects. There are few benefits (if any) in exclusively hosting images on third-party sites unless it is on a content delivery network (CDN) which can speed up load times by serving images closer to the user location. When using a CDN, make sure to link a custom subdomain you own (CNAME DNS) to your CDN endpoint (in other words pointing one of your custom subdomains to your CDN provider’s server so that fd5dfs4sdf69.cdnprovider.com becomes images.yourdomain.com). This makes things much easier when changing the CDN provider because you will not have to update and redirect your image URLs and provide obvious branding benefits.
In any case, ensure HTTP/2 is enabled for your subdomains or your third-party CDN.
When it comes to caching, also make sure that server expirations are set for all image types. This is because images should be some of the resources with the longest caching times (usually many weeks).
Conclusion:
If you need help in optimizing your images, give hughesagency.ca a call today.
Article compiled by hughesagency.ca
Article reference links here:
