{"id":513983,"date":"2019-08-21T02:42:45","date_gmt":"2019-08-21T07:42:45","guid":{"rendered":"http:\/\/smashdigital.com\/?p=513983"},"modified":"2020-09-28T20:56:17","modified_gmt":"2020-09-29T01:56:17","slug":"the-definitive-guide-to-image-optimization","status":"publish","type":"post","link":"https:\/\/smashdigital.com\/image-optimization-guide\/","title":{"rendered":"The Ultimate SEO Guide to Image Optimization"},"content":{"rendered":"

The Ultimate SEO Guide to Image Optimization<\/h1>\n

\u201cGet your on-page in order. Optimize the titles, write unique meta descriptions, ensure you\u2019re using all your keywords, and optimize your images.\u201c<\/em><\/p>\n

I\u2019m sure you\u2019ve heard this a million times.<\/p>\n

Well, how the heck do you do it? What is image optimization and how does it work?<\/p>\n

That\u2019s what you\u2019re going to learn today.<\/p>\n

The Basics<\/h2>\n

“A picture is worth a thousand words.”<\/em><\/p>\n

The old English proverb is more true than ever when it comes to digital content.<\/p>\n

No one wants to read through a 5,000-word guide that is simply a wall of text.<\/p>\n

Images are great for illustrating your points, explaining complex concepts, or just entertainment value.<\/p>\n

*Insert silly meme*<\/em><\/p>\n

We probably don’t have to convince you to start using images in your content as the benefits are obvious.<\/p>\n

Just one small issue…<\/p>\n

Google cannot see images the way we do and thus generally have no idea what’s on them.<\/p>\n

That’s why we need image optimization.<\/p>\n

(Editors Note:<\/strong> Thanks to AI and machine learning, Google now does have technology<\/a> that can understand images. However, the accuracy is nowhere close to where it needs to be so the following is still critical for optimal results.)<\/em><\/p>\n

\"testing <\/picture>
This is not a horse, Google.<\/figcaption><\/figure>\n

Here are the key ways we can optimize images:<\/strong>
\n\n

Optimizing Images With Text<\/h2>\n

There are some super easy ways to give Google (and your visitors) additional context about your images. These help you rank better in Google Images and also create additional keyword relevance for the pages you have the images on.<\/p>\n

Alt Tags and Title Tags<\/h3>\n

The HTML “alt” attribute is the alternate text for an image in the event that it cannot be displayed. This could be due to a browser configuration, accessibility reasons (e.g. blind users), or other technical faults.<\/p>\n

It allows the user to understand what the image would’ve been about.<\/p>\n

Tech has gotten far enough where images not loading aren’t a major concern so users don’t have a lot to benefit from this but search engines use it as a way to understand what the image is about.<\/p>\n

The tag is implemented within the image as such:<\/p>\n

<img src=”optimizing-images-for-search-engines.png” alt=”How to create proper alt text for images”<\/strong> \/><\/em><\/p>\n

The image title tag is another way to tell Google what your image is about. It’s also what you see when you hover over an image for more than two seconds.<\/p>\n

It’s best practice for this to be slightly different than the alt text as this may allow you to target more keywords.<\/p>\n

What Do You Write as the Alt Text?<\/h3>\n

You’ll want to write 3-7 words describing the image and using a relevant keyword within that.<\/p>\n

Please note that this should NOT be the main keyword of your post, but one relevant to the image. You also do NOT want to stuff this full of keywords.<\/p>\n

“Image SEO guide – optimizing images” is not okay.<\/p>\n

Let’s use an SEO-related example here.<\/p>\n

Pretend we have an article about keyword research.<\/a><\/p>\n

The first image will likely be the “header” image with the blog post title and it’d be great to add the alt text of that as something that contains your main keyword “The Ultimate Guide to Keyword Research<\/strong>“.<\/p>\n

Next up we’ll have a photo of us analyzing some keywords in a section of the article about buyer intent. We might set the alt text to “How to use Ahrefs to identify buyer intent keywords”<\/a><\/p>\n

And so on and so forth.<\/p>\n

Each image is supposed to supplement the content around it and the alt text supports those long-tail keywords and topics.<\/p>\n

Optimizing Image File Names<\/h3>\n

File names are just another way of letting Google know what the image is about.<\/p>\n

As per their Webmaster Guidelines<\/a>:<\/strong>
\n“The filename can give Google clues about the subject matter of the image. For example, my-new-black-kitten.jpg is better than IMG00023.JPG.”<\/em><\/p>\n

Keep it simple, utilize keywords, and keep them short.<\/p>\n

Generally, we keep all three – alt tags, titles, and the file name – quite similar and rewritten versions of each other.<\/p>\n

Surrounding Text<\/h3>\n

The content around your image is a great indication of what it is about.<\/p>\n

If your file name, alt text, and title indicate that the image is about SEO but the surrounding text is about the best restaurants in New York – what do you reckon Google is going to think?<\/p>\n

This is a great tactic to utilize to rank in Google Images.<\/p>\n

We had a client who was ranking number one with a “blood sugar chart” and raking in tens of thousands of visitors a month just from one image that was well optimized for that exact term.<\/p>\n

Captions<\/h3>\n
\"optimizing <\/picture>
Keep em’ funny<\/em><\/figcaption><\/figure>\n

Captions are generally the best example of “surrounding text” for images but here’s one place where we urge you to actually ignore search engines.<\/p>\n

Sure, having a keyword in there would be great but captions are one of the best ways to try and engage with your readers.<\/p>\n

Get creative and toss a joke in there instead.<\/p>\n

Image Speed Optimizations<\/h2>\n

Images are one of the biggest contributors to how long your website takes to load.<\/p>\n

Site speed<\/a> is not only an important ranking factor but it is also critical for conversions.<\/p>\n

According to Kissmetrics<\/a>, a 1-second delay in page response can result in a 7% reduction in conversions.<\/p>\n

The Best Image Size for Blog Posts<\/h3>\n

Even though my computer runs at a high resolution and I have a big 32-inch screen, websites generally load a lot smaller than that.<\/p>\n

As you can see on the image below – the total width of my screen is 2670 pixels but the content from our blog is only displayed across 770 for the sake of people with smaller screens as well as readability.<\/p>\n

\"images <\/picture>
Browser width VS blog display size<\/em><\/figcaption><\/figure>\n

The same goes for images. Since our blog can only display things at a maximum width of 770 pixels, we should resize every image larger than that before uploading it.<\/p>\n

Otherwise, we might upload an image that’s 4,000 pixels wide and has a file size of 5,3 MB. Not only will it take a lot longer to load for the user but your CMS will have to change the display to 770 pixels anyway.<\/p>\n

Resizing your images to the size they’re actually going to be displayed at is one of the best ways to increase your site speed.<\/p>\n

The Best Image File Formats for Web<\/h3>\n

The three most common file types for saving images are JPEG, PNG, and GIF, and the file size differences them can be huge.<\/p>\n

Here’s an example:<\/strong><\/p>\n

\"JPEG <\/picture>
Can you see a big difference in quality?<\/em><\/figcaption><\/figure>\n

As you can see, the comparative file size differences are quite significant and they can be even bigger depending on the image type. You’ll also notice small quality differences.<\/p>\n

So which one should you use?<\/p>\n

Here’s the mini reference list we use for our team.<\/p>\n

Pros and Cons of JPEG Images<\/h4>\n