7 Steps For Optimizing Images
Everybody knows how important images are on webpages. Visual content continues to get more and more popular, making pages that have large blocks of text without any images or video appear ever more outdated. Not to mention, image posts on social media tend to get much more engagement and traffic.
But while you’ve been adding images to your site to enhance user experience, you may have overlooked the SEO advantages that images can provide. Luckily, optimizing images for search engines is simple and it can have a noticeable effect on traffic and rank.
1. Reduce File Size
One of the most well-known search engine ranking factors is page load time. Simply put, if your images take too long to load, you’ll be ranked lower in the results pages. More importantly, users that do find their way to your site may end up bouncing simply because your images take longer than three seconds to load.
To avoid this, make sure your image files are as small as possible without losing resolution. Using the “Save for Web” feature in Adobe Photoshop is a common way to choose the smallest file size without sacrificing quality. Many other image editing programs offer similar features, including free, open-source options like Gimp. Factors like file type (gif, png, jpg) can largely affect size, and it’s a good idea to try keeping all images below 70 kb.
2. Scale Image to Displayed Size
Along the same lines as reducing file size, it’s important to make sure that your image files have the same width and height as they’re displayed on your site. For example, you could have an image in your library or server that’s 1200 x 1200 pixels, but you’re using HTML width and height commands to display the image at 200 x 200. In this situation, browsers will still have to take time to load that large image even though it’s being displayed smaller on your page. Instead, improve your load times by editing the image down to the displayed size and saving it that way.
3. Alt Tags
Using alt tags may be the most SEO-friendly step when optimizing images. Alt tags are short bits of text that a browser will display if it cannot render an image properly. They allow you to describe exactly what an image represents while also providing keyword opportunities. For example, if you were writing a blog post and you wanted to optimize it for the keyword phrase, “Kong dog toy,” you could use the code:
img src=”/images/kong-dog-toy.jpg” alt=”Kong dog toy”
Contained with the quotes of the HTML command alt=”” is the alt tag, which tells a search engine that the photo is of a Kong dog toy and that the whole post is probably related to Kong dog toys. Content management systems like WordPress often allow you to enter an alt text when you add an image to a page, without needing to know anything about HTML or coding. Being sure to never skip this step can seriously benefit your keyword strategies.
4. Title Tags
Title tags are similar to alt tags in that they provide a description of an image. However, title tags are visible when a user hovers over an image, so they present a good opportunity for providing additional information. Using the same dog toy example, your image could use the following code:
img src=”/images/kong-dog-toy.jpg” alt=”Kong dog toy” title=”Kong Dog Toys are the Most Popular in the World”
Of course, many webmasters use title tags as a place to put keywords as well, but watch out for keyword stuffing. A page with 50 images that all have the same keyword for both their alt and title tags might end up getting penalized for stuffing.
5. Image Filename
This one seems like a no-brainer, but it’s becoming more and more overlooked as content management systems get easier to use. Images taken on a camera or downloaded from a stock photography site often have filenames that are just long strings of numbers and letters. Instead of uploading a file with a meaningless filename, change the filename to provide an accurate description of the image itself. Search engines definitely look at keywords located in image filenames.
6. Open Graph Meta Tag
While not technically a search engine, (although it could be soon) Facebook is likely one of the main channels you use to get some exposure for your content. Using Open Graph meta tags will allow you to designate a specific image to be used whenever your content is posted or shared. The Open Graph Protocol can be implemented in WordPress by using the SEO Yoast Plugin. Once the plugin is installed, you’ll be able to add Open Graph Meta Data by clicking on “Social” in the “SEO” menu in your WordPress settings. To add the code manually, check out this informative post.
Once the protocol is implemented, you can add the Open Graph image code to your post. It looks like this (using the same dog toy example):
meta property=”og:image” content=”http://yourdomainname/images/kong-dog-toy.jpg”
One of the most important steps when optimizing images is testing. Different file types and different content management systems can end up causing images to render differently on various browsers and devices, potentially causing your site visitors to bounce due to poor design or photos that don’t load. Make sure your images are displayed correctly in Chrome, Firefox, Safari and Internet Explorer, as well as mobile devices and desktops of different screen sizes.