Optimizing Images for SEO and User Experience

Home/Online Marketing/Optimizing Images for SEO and User Experience

 

Optimizing Images for better quality

 

When we talk about site speed, one of the items we always point at is images. We say, optimize your images! or watch the size of your images!

But what does that really mean? How do you optimize images to have better SEO, and what does it do for user experience?

In today’s post, we’ll show you what image optimization really means -from the creation of the image to the live site- , and provide a few tips to do it. 

Image Optimization: For More than SEO

We’re marketers with a focus on organic SEO and social media, which means we don’t look exclusively at actions from the point of view of the search engine. We know your visitors matter… and you should, too.

As you create images, especially product images, consider your visitors. What angles give the best view? Should you take more than one product shot? What size of image will provide the best clarity without sacrificing bandwidth? Remember that some of your visitors may be coming from mobile phones, and larger images take more bandwidth to view. Larger images cost your mobile visitors money and minutes.

With the user in mind, let’s get started.

7 Tips for Optimizing Images

1. Reduce White Space

How much of your images are taken up with white space? Rather than waste space with empty space, have the product take up the whole area (see example of rings below).

Image optimization includes reducing unnecessary white space

Left: product with too much white space, image width of 250px;
Right: product with white space cropped, better image of product and width of 250px

2. Choose the Proper Format

Jpg? Png? Gif? These are all image formats, and it might seem hard to figure out which to use. However, there’s a simple rule of thumb to follow:

  • If the image has no movement and no transparencies, save it as a jpg.
  • If the image is a logo or has no movement, and has transparencies, save it as a png.
  • If the image is a moving image or very simple, save it as a gif.

Is this an oversimplified checklist? You bet. -But for the most part, it works well to make sure you save it properly.

3. Reduce File Size

File size is a big deal – the bigger the file size, the more bandwidth the image takes to load. Remember, we mentioned this above when talking about images on mobile phones. Ideally, you want the smallest file size for the best resolution (resolution being how clear the image is). If at all possible, keep image files below 70kb.

For many image modifying programs, this isn’t a problem. For example, Photoshop offers up a quality selector when saving as a jpg.

Image quality selector

Make sure you’re seeing the image at full size, then select the lowest quality you can before the image starts to deteriorate.

If you don’t have Photoshop, there are some free image editors that do a bang-up job. PicMonkey, GIMP, and Pixlr, to name a few.

4. Reduce Image Size

As we’ve mentioned in previous posts about site speed, there’s files size, and then there’s the actual size of the image. Again, make sure you’re viewing the image at 100%. Tweak the image size until it’s as big or small as you want it to be online. Far too many business owners upload everything at maximum file size. A 2000 x 4350 image is way too big for online.

5. Save Images with Proper Filenames

All too often, we see images with file names like DX572343.jpg or shutterstock_3925235.png. These aren’t proper, helpful file names. Saving images with relevant file names can help in the Universal Search Results (Universal: Search results that include images, videos, pdfs and other digital assets).

Examples from the post: image-quality-selector.jpg, image-optimization-white-space.jpg

6. Add Proper Alternative Text

Alternative text, or ALT text, serves more than one purpose. One, it provides search engines with an idea of what the image is about. Two, if the image is broken, readers can still tell what the image was supposed to be about. Three, if a visitor is blind, their screen readers will read the ALT text and, in that way, find out what the image is about.

Notice the common theme: what the image is about. This is not a place to only put key terms. This is a place to describe how the image is relevant to the rest of the content on the page. If it’s not relevant, you might choose a different sight.

7. Use Image Sitemaps

Just like a sitemap you might upload that has your pages listed, an image sitemap can make it more possible for search engines to find your images. Create an image sitemap and upload to Google Search Console. This doesn’t make the file any easier to load, or for search engines and computers to understand the image,  but it does make it easier for them to find them.

Bonus: Link to the Post

If you’re using images in blog posts and using a Content Management System (CMS) like WordPress, your images are probably being automatically linked to the media post. This isn’t the best place to link to. If linking is something you feel that your images must do, set them to link to the post. In this way, you draw people to the content rather than just the image.

Final Thoughts

Whether you’re running a business website, e-commerce site or blog, images can make a big difference in how your content is received. Properly optimizing your image so they load smoothly, are just the right size and work like they’re supposed to is a great way to keep visitors coming back for more.

By | 2017-05-29T04:58:18+00:00 April 10th, 2017|Online Marketing|0 Comments

About the Author:

This account is where everyone involved with Level343's content marketing efforts shows up. You can say there is no "I" in this team. Sometimes we will chat about a certain topic with a variation of ideas, suggestions, even opinions. Then one of us will start writing the post, hand it over to someone else who will continue the diatribe. Eventually it ends up on our editor's desk who either chops the hell out of it, or you're reading it right now.

Optimizing Images for SEO and User Experience