Image Optimization Tips – SEO Opportunities and Performance Improvements
Although, images form a substantial part of the webpage content, they often get unnoticed in the search engine optimization (SEO) process. People often get so busy and tangled in the process of building backlinks and marketing that they forget that even images can be optimized. They tend to overlook some of the most basic properties of images and their SEO value. We will discuss apart from SEO value of image optimization, their affect on the webpage load times.
Image optimization for the websites can be of two types:
- For increasing online visibility and traffic through search engines.
- For better performance and decreasing webpage load times.
Let us first talk about the SEO value of images. As search engines are unable to understand the meaning of images, videos, and graphics, unless they have some additional readable information for making them understand the context of those media.
SEO Opportunities in Images
- Title attribute in image tag – The title attribute in the Image Tag is, as it says displays the title of the image, which should be short and precise. You should use important keywords in it, but keyword stuffing is not advisory. Google does not use this attribute in calculating page authority. Web browsers such as Firefox and Opera, display the image title as a tool-tip, when a user hovers the mouse pointer over the image. This title attribute is more useful to the users rather than search engines or user agents.
CODEExample code for ‘title’ attribute in image tag
- Alt attribute in image tag – Alt attribute for Image Tag provides the alternate information about the image in cases where the image fails to load or the user disables images in the web browser for any reason. The text in the alt attribute will be displayed instead of the image in the event of any error. It is also useful for the search engines or user agents (bots) to make them understand the context and meaning of the image. Try to keep the content in the alt between 100–140 characters, which is the optimal length.
CODEExample code for ‘alt’ attribute in image tag
- Image file naming convention – Instead of using default filename of image such as displayed in the image below, you should use the filenames that describe the context of the image and include the targeted keywords in it.
Instead of undescore and space, use hyphen to separate the words in an image file name.
While naming an image file to be used on the web, use hyphen instead of space and underscore as word separator. Using spaces as word separator will insert %20 in the search results which makes it look cryptic and unrecognizable. If you use underscore between the words, it will be impossible for a search engine to realize that those are multiple words, it will consider them as a single long word which is not a good SEO practice.
How to Optimize Image for Better Performance?
Performance optimization for images can make a huge difference to the webpage load times as we discussed in our previous article on ‘Website Performance Optimization Tips‘. Nowadays, there is a huge demand for high quality graphics and images in websites and digital content. To satisfy those needs, you have to use high resolution and large file sized images, which puts strain on server hardware and Internet bandwidth. Everyone can not have such powerful servers and sufficient bandwidth. Instead, you can use following tips for better image load times in webpages.
Use Right Image Format for Right Usage Scenario
Actually, there is no ‘best format’ to use images on the web but there are some ‘best formats for specified usage types’ coupled with good compression techniques. Some of the popular image formats and their usage scenarios are as follows:
- Graphics Interchange Format (GIF) – This image format is best suited for situations that have 1–2 colors such as logos or animated images. These images have transparent background with no color blending.
- Portable Network Graphics (PNG) – This format has good quality but it consumes large file size, which are generally not ideal for web usage. There is one exception, when you are displaying some kind of art such as paintings, which needs extremely high quality images.
- Joint Photographic Experts Group (JPEG) – It is preferred format for images on the web, which can show wide variety of colors and uses less storage size compared to PNG. This format is ideally suited to show any type of gradients or shade blending or photographs.
Use 2D Progressive Images
You should also use 2D Progressive Images instead of normal images. These types of images appear to load faster than normal images due to the way they load, as opposed to interlaced images, which load line by line.
Progressive JPEG Image Loading
Interlaced JPEG Image Loading
Anchor attribute in Image Tag
If you use small images or thumbnails in preview , but larger images when user clicks on the image, you should use image as a hyperlink to the full sized version of images. You can use an image as hyperlink using the anchor attribute in Image Tag as shown in the image below.
Use of Content Delivery Networks (CDNs)
Working of Content Delivery Network
If you are noticing speed lags while loading images in your website, you can use CDN to host all the images in your website. You can observe huge improvements in webpage load times by using CDN to host your images and other heavy elements in the webpage. You can also deliver fast websites to our users in almost any geography around the world using this method. Learn more about Content Delivery Network (CDN) in our previous article.
Making such minor improvements in using the images in your websites, you can increase the speed of the website considerably in addition to the increased SEO value of your website. You can also learn more topics on Search Engine Optimization (SEO) in a series of articles on our blog.