Images make any content more interesting and appealing by helping readers understand your content better. Plus, images add value to your SEO efforts by increasing user engagement and accessibility of your website. There are a number of important factors that can be optimized to help improve image SEO on your site.
Let’s walk through some of the best practices for optimizing images on your website to help you rank higher in organic search.
Improve Image SEO with Tools
Since having images is crucial to image SEO, finding and using the right type of image for your website is an essential step towards success. If you can use your own images, DO it. However, if this isn’t a possibility, there are some tools, like Canva, iStockphotos, Google Images, and Flickr, to name a few, that will help you find and create images for your content.
Image Format & Compression
How do you determine the best image file format to use on your website? There are many options, including JPEG, PNG, GIF, and others. Each have their own benefits and downsides with file size, compression, and quality.
Here are the pros and cons of these popular file formats:
JPEG
Most commonly used, JPEGs or JPGs are full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that incorporate 16.8 million colors. These file type of formats are great for photographs and for making smaller size files.
JPEG does, however, use lossy data compression, which is a con for this format. This means that depending on your settings, the image quality can suffer a bit. Some other cons include not being good for text images, or images with sharp edges, cannot be animated, and they do not support transparency.
GIF
A bitmap image format is used display indexed-color graphics and images in HTML documents.
One major benefit for using GIFs is the fact that they preserve transparency. This allows you to put a GIF over a colored background without getting that undesired border around the image like other formats do. GIFs are also great for small file size and simple art, like logos, and for animations.
File size for GIFs can be quite large. They are not good for photographs and are not good for images with more than 256 colors.
PNG
Referred to the modern alternative to JPEGs and GIFs, a PNG image is used when editing or downloading files from Adobe Photoshop. They support more colors than GIFs and don’t lessen over time with each resave like JPEGs do. They can be used for logos and small images, and they can handle transparency very well.
Some cons include not being able to be animated, it’s not supported by all web browsers, and it’s not great for large images in comparison to JPEGs.
Scaling Images to Improve Page Load Times
Page load time is an important factor to consider when weighing the SEO value of your site. Using large images as it affects the user experience and image SEO, and it will cause Google to penalize your website ranking. Let’s face it, your users will get frustrated if pages on your site take too long to load.
A one-second delay in page load time has been shown to cause a 7 percent loss in conversion and 11 percent fewer page views. – BigCommerce
Sizing an image not only refers to the width and height of an image but also the resolution quality. Low quality images will appear fuzzy, which will make your site look less polished. With image sizing, be sure that the display size and the actual size of the image are very close—you could be damaging your site speed if you upload images that are unnecessarily large. You can get an in depth look at image optimization from Google’s perspective here.
Image Title Tags, Alt Text, ARIA Tags Best Practices & ADA Compliance
Image Title Tags
Image title attributes are not a requirement, but there are some benefits of using them. They should concisely describe the image and include relevant, targeted keywords.
In some browsers title tags are shown as a guide when hovering over the image. So in the case of an image that is linked to a survey, the image could contain a call-to-action, like “Click here to take our Survey”.
Alt text
Alt text, or alt tags, should describe the image to search engines and visitors using a screen reader. This tag should be more descriptive than the title, while still using targeted keywords when relevant.
Google places a high value on alt tags to determine what is on the image, but also to determine the topic of the content surrounding it. Also, one of the most important uses for alt tags is to provide a visual for blind and visually impaired people that otherwise won’t know what the image is for. In order to be ADA compliant, alt tags must be in place for all relevant graphic elements on a webpage.
ADA Compliance and ARIA Attributes
If you’re making sure your website is ADA Compliant, alt text on images is a must. Like previously mentioned in the post What You Need to Know About Website ADA Compliance, ensuring your website is compliant with Americans with Disabilities Act standards ensures that people with disabilities will have equal access to the content you’ve published on your site. This includes the ability to function correctly with or on tools designed to assist persons with disabilities interpret the site’s content.
When there is a relevant image on a site that is unable to receive alt text, like a CSS background image, ARIA tags can be used as an alt tag substitute. In this example, you would assign the CSS element a role=”img” and add your relevant text within the aria-label attribute. You can see a demo of using ARIA attributes as an alternative to alt text on CSS background images here.
Implemented in most browsers and screen readers, ARIA (Accessible Rich Internet Applications) is a W3C specification that is a set of special accessibility attributes suited to HTML. ARIA define ways to make web content and applications more accessible to people with disabilities like navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
Want to learn more about ADA compliance on your site? We can help you audit and correct existing errors. Contact us using the form below to get started.
Image Sitemaps
Web crawlers can’t crawl images that are not called out specifically in the webpage source code, so having an image sitemap for JavaScript galleries or image pop-ups, for example, gives Google’s search engine more information about the images available on your website.
If you already have an XML sitemap for your site, you can add image information to it or create a separate XML sitemap just for your images. When creating an image sitemap, you can add additional information about images for each URL you list in your sitemap including image location, a title, caption, and more.
Conclusions for Image SEO
Optimizing your images is a great place to start when you want to improve image SEO efforts and user experience. Use these steps to help you get started. If you need a bit more help contact us, and let’s set a plan to improve your overall SEO.
Hey.. really informative post. Came to know about many interesting things about social media here.
keep sharing
Thanks
Worthwhile post. I need to take a look at my website again and re-calibrate though.
Thanks for the tips. I am switching to high-resolution images as a default when making posts. I think if all of your images are on point, the resolution won’t really matter too much, but it’s important in any case to have a polished look to boost your brand image.
Interesting post , I didn’t know the importance of using image titles, I only used alt texts. So thank you for the great share.