How to make your images SEO friendly

• JPEG: for images with many colors or gradients
• GIF: for line art (such as one- or two-color logos), simple drawings, animations, and basically any image that has no gradients or blends
• PNG: PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds of limited-color images

The smaller the image size is, the faster it will download and the happier our users will be. Any resolution higher than 72 dots per inch (or DPI) is wasted on the Web because you’d be making your visitors download more pixels than they can see (and by doing so you would unnecessarily increase the loading time of the page. Which leads to a bad SEO score in the long end.

You can compress image size by using free tools such as Compress JPEG, Optimizilla, TinyPNG (for both PNG and JPEG images).

The file name should describe the image and contain keywords. Each word is separated by a dash, no accents, capital letters or special characters. Image file names alert Google and other search engine crawlers as to the subject matter of the image. This involves a bit of work, depending on how extensive your media library is, but changing the default image name is always a good idea.

Adding alternative text to photos is first and foremost a principle of web accessibility. The alt tag will be displayed instead of an image when an image file cannot be loaded and are a big help for visually impaired users who uses screen readers to better understand on-page images. Tags also provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

A good alt text should follow these principles:

Describe the image as specifically as possible.

Alt-text is, first and foremost, designed to provide text explanations of images for users who are unable to see them. If an image truly doesn’t convey any meaning/value and is just there for design purposes, it should live within the CSS, not HTML.

Keep it (relatively) short.

The most popular screen readers cut off alt text at around 125 characters, so it’s advisable to keep it to that characters count or less.

Use your keywords.

Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image if it makes sense to do so, include your keyword in the alt text of at least one image on the page.

Avoid keyword stuffing.

Google won’t dock you points for poorly written alt text, but you’ll be in trouble if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it. Focus on writing descriptive alt text that provides context to the image and if possible, includes your target keyword, and leave it at that.

Don’t use images as text.

This is less of an alt text-specific best practice and more of a general SEO-friendly web development. Because search engines can’t read text within your images, you should avoid using images in place of words. If you must do so, explain what your photo says within your alt text.

Don’t include “image of,” “picture of,” in your alt text.

It’s already assumed your alt text is referring to an image, so there’s no need to specify it.

Create responsive images! This means the image will scale with the size of the site whether the user is using desktop or mobile. It adjusts to the size of the device. At its worst, mobile-unfriendly images can give you a high bounce rate and low conversions. But, at its best, it can give you more ranking power and better user engagement.

Not so long ago I was introduced to a new concept, Lazy loading. It means that assets aren’t loaded until they are needed. Meaning that the page loads up when a user first lands on it much quicker. And it is not just used for images; assets like JavaScript can also be loaded in this way.

Even Google itself is talking about this tool and has this to say:

“Lazy loading can significantly speed up loading on long pages that include many images below the fold by loading them either as needed or when the primary content has finished loading and rendering”  — Google

You will often see Google PageSpeed Insights recommending you to leverage browser caching. Browser caching is when files are stored by a visitor’s browser, meaning that assets load faster when they next visit the page.

When you visit a page, the images are downloaded and then displayed in the browser. Without browser caching, next time this user visits the page, these will all need to be downloaded again. But with browser caching, the browser will already have these stored, meaning the page loads much faster. Browser caching is noticeably impactful on sites where users frequently revisit the same pages.

You can learn more about how Google recommends using caching here. If you are using WordPress, one of the popular cache plugins can help you to implement this quickly

What are you waiting for?

Go optimize those images on your website! If you want more information about how you can also make your YouTube channel SEO friendly, you can click here

This article was written by Shawn Thielemans, a marketing consultant at 4P Square. With an interest in content and digital advertising, Shawn is your social media whizz-kid. He has worked in both B2B and B2C environments and knows the right approach to your audience. You can find him on LinkedIn or you can contact him personally via our 4P Square contact form.