Design and SEO: Everything You Need to Know About Image SEO

People make lots of mistakes. These are lessons that help us learn and become better every day. But there are mistakes that can easily be avoided by following best practices that are already known.

If you think about design and SEO, you might notice that these spheres are closely connected as they serve a single purpose: they help to solve problems by providing the answers and user-friendly paths to them.

However, designers make so many unintentional mistakes with images, and this is hurting or at least not helping SEO.  After reading this post you will have a better understanding of why images optimization is important; why adding pictures with CSS is almost never a good idea and why those fancy JavaScript websites you find in the inspiration lists are not competitive in the search.

 

 

Common Design Mistakes that are Hurting SEO

1. Using too big images
2. Using only images. And a few images more
3. Using wrong image formats
4. Not compressing the images
5. Ignoring images names and alt tags
6. Adding images via CSS

Let’s dig deeper and see real examples!

Mistake #1: Using too big images

I once worked with a website and noticed one interesting thing: its speed wasn’t that great mostly because of some image used on the pages. But that image wasn’t available directly on the pages, only it’s fragment was:

Well, this fragment, to be exact:

Can you imagine that?!

Yes, the wood texture looks good but it’s not worth valuable milliseconds that are wasted on loading the page.

I just replaced the texture with black colour via CSS, not a big difference (though it would also be possible to add a texture in another way):

Plus a few more tweaks and here is what Google PageSpeed Insights tool shows:

This example is not unique, there are too many websites which are using huge images that they don’t really need.

Tools to check page speed:

• Google PageSpeed Insights
• Pingdom Tools
• GTMetrix

Mistake #2: Using only images. And a few images more

Remember that you need to be heard and understood by search spiders.

Though Googlebot can index images, it is not able to really see them. That is why a page needs some plain text.

“Content is king” has been said and written so many times by the search experts and marketers. And this is really true. But one thing to note here: by “content” we mostly mean plain text. Don’t get me wrong, images are good, they help to grasp the info faster and add some visual satisfaction but they are supplemental when it comes to SEO.

Here are good examples of photographers websites. Such sites usually rely on pictures which totally makes sense. But have a look at this:

Ranks on page #1 of Google:

Ranks on page #100 of Google:

What’s the difference? Content! The first website has photos but they are surrounded by text while the second site entirely relies on an image, even the navigation is added on top of it.

Oh wow! This is eye-opening I would say.

Mistake #3: Using wrong image formats and not compressing images

Saving an image as PNG or JPEG can be (and usually is) a huge difference!

Look at this table. I tested different formats and compression of an image with a cute puppy (you can click on the KBs and see the corresponding images to compare their quality):

And here is a comparison of the lightest and heaviest pics:

21 KB (Compressed JPEG)

144 KB (PNG-24)

The puppy is cute anyway, right?

21 KB vs 144 KB! This may seem not a big difference (though it is). But this is only a single image, think about 10 pics like that, the difference becomes more evident, doesn’t it?

General Rules for image formats and compression

• Logos: SVG or PNG-8
• Images with only text: PNG-8
• Photo-like images: JPEG or PNG
• Save for web (Cmd+Option+Shift+S / Ctrl+Alt+Shift+S – in Photoshop)
• Experiment and see what works best in your particular situation
• Compress. Your. Images

While saving for web, just play with the formats and quality:

Websites to compress the images:

• https://tinypng.com/ 
• https://imagecompressor.com/

Mistake #5: Ignoring images names and alt tags

Look at this picture. That’s what I usually see on many websites: just random characters instead of real names.

Why image name and alt text are important

• Search engines crawl these attributes
• Image name and alt tag show what this image is about
• Names and alt tags add up to the page relevancy
• They will help you get traffic from image search

Here is a bad example of image name and alt text:

Look here, this is how to use those attributes right:

Mistake #6: Adding images via CSS

Google can read only those images that are found in the <img> attribute or within schema markup.

This means that adding images via CSS or with <div> won’t get your images indexed:

So unless this is a background that is not directly relevant to your page content, use simple <img> attributes. And be happy 

JavaScript and SEO

We’ve all seen those fancy websites that are usually added to lists like “15 best designs for inspiration”.

While creating something beautiful is great, you should also make sure that search engines can crawl and index this content to deliver it in their search results and drive people to your website.

This is a good example of how websites that rely on JavaScript too much work.

Googlebot can’t render your JS like it does HTML. This results in delays in indexing or not indexing the website at all. And if you’re not in Google, you just don’t exist (though it’s good if you’re hiding something. Are you?).

So if you need to use JS:

• Don’t rely entirely on it
• Don’t block JS files from indexing
• Make sure Googlebot can crawl, index and render your content correctly.

Here is a really great talk about JavaScript and SEO. It’s quite technical but gives a good understanding of the basics too:

TL;DR: Image SEO Best Practices

• Use the images of actual sizes you need
• Choose the right format
• Compress the images before uploading them to the server
• Use comprehensive names and alt tags
• Combine visual content with text content
• Don’t add images via CSS
• If you’re using JS, make sure Google can actually index and render it

Final Bricks

SEO and design are so close, they should work in a conjunction. By following the simple steps highlighted above, you can make sure that your images are optimized and are not hurting SEO.