4 Ways to Optimize Images for Your Website That Google Loves[content-hex title="Organic, or natural search results" content=" Listings that are displayed because of their relevance to the search query, not because they are paid results or ads."] Images on your website are an important part of the user experience. Adding visual elements helps to increase user engagement on your site as we are naturally drawn to shapes, colours and forms that catch our eye. If you are a photographer or artist, the owner of an online store, or have any other type of image-based website, it is especially important to make sure you are optimizing your photos or other images for both accessibility and SEO. Optimizing your images is often an overlooked aspect of content creation, but it can have a huge impact on how Google and human users understand and rank your website. In this post we will look at a few ways that you can improve the images you are presenting online to increase your ranking in organic search results, which should be your ultimate goal for SEO.
1. Optimize Your (Written) Content
Why don't I see my images in Google search results?First, let's take a second to consider how Google sees the images on your website. It doesn't. ...at least not the same way we see images. What Google sees is the code behind your photos and graphics - the file names, descriptions, captions, page content... do you see the pattern here? That's right, Google is looking at the text associated with your beautiful, colourful, non-text images. So our first step in optimizing your images is to take a look at what words you are correlating with them on your pages and on the files themselves. To start, find keywords that define or are related to not only your image, but your page's main topic. In fact, the page's main topic should be your primary keyword. Come up with a list of variations of this keyword, and related keywords or subtopics on the page. Use terms and phrases that someone would use to find your business, product, service or the information you are presenting. You can also check out what words your competition is using to rank their pages on Google, or perform a search for your keywords and phrases and find out what comes up as related searches. Then make sure you are using these keywords throughout your page; be moderate, Google does penalize for overusing (or stuffing) keywords in your content. [content-hex title="Keyword Tools" content=" Google AdWords Keyword Planning Tool, Keyword Spy and SpyFu" position="left"] There are some great online tools available to see what words you are already ranking for, and to find out what keywords your competition is getting traffic from. A few of my favourites are the Google AdWords Keyword Planning Tool, Keyword Spy and SpyFu.
Where else should I use my keywords?Your keywords should also be included in the URL, page title and headings throughout your page. Stick with using the primary keywords or phrases in headings, and related keywords in the content. Google is good at understanding semantics and can figure out the relationship between keywords on your phrase, so make sure to come up with variations rather than reusing the same words over and over if you can. The length of your content is important too. Studies suggest that articles containing 2000 words or more get more social shares and backlinks. Longer articles tend to be seen as higher quality due to the amount of detail and information provided in them. This length of content can be difficult to create on a regular basis though, especially for photographers and artists whose websites are based primarily around their art. The good news is that Google also really favours unique content that is valuable to your reader. On pages that contain a lot of images like galleries and portfolios, use this opportunity to tell a story. What is the subject of the images? If a gallery showcases a photo shoot, who or what was involved? Tell a story that your audience can relate to and that gives context to the images on the page for search engines. [caption id="attachment_1583" align="alignright" width="300"] "diluted-tortoiseshell-cat-autumn.jpg" is a much more descriptive filename for this image than "DSC_8421.jpg" or "cat.jpg"[/caption] How about file names? Take a look at the name of the file that you want to include on your website. If it is an image you took with your camera, is it named something like "DSC_2468.jpg" or "Photo 2015-10-01 11 14 42 AM.jpg". While these file names might help you file your images for easy retrieval down the road, they aren't very descriptive at all of what the photo is about. This is the perfect place to add some of those keywords and create a more meaningful file name that Google can appreciate. Images that contain the same subject should use different keywords or variations of the keyword. Find something unique in the photo that sets it apart from the others and use that. It could be a colour, angle or lighting. For product images, use the product name and number as identifying keywords. By all means, keep the original files with their original names, but make copies of the images that you can edit and optimize for your website and social media sharing. Which brings us to...
2. Optimize Your Image Size
How big should my images be?Are you frustrated with a slow-loading website? More than likely, your image sizes are to blame. With today's short attention span and high expectations, your visitors don't want to wait for images to load and are likely to leave your site if it is lagging. If you have a website with a lot of large images, you are going to notice an improvement in page speed when you optimize those images properly. Back to the question then: how big should my images be? There is no set answer for this; it really depends on where you are putting them on your site. A full screen background image is obviously going to have different dimensions and file size than a blog post image or photo gallery thumbnail. The easiest way to figure out how big your image should be is to find out the largest size (the pixel dimensions) that it will appear on your website, and scale down your photo to that size. If you are using a CMS like WordPress or Squarespace your images will be regenerated at different sizes for wherever they might appear on your site (blog posts, thumbnails, etc). The physical dimensions of the image aren't the only things that need to be optimized, the file size itself can also be reduced to keep the pictures light. If you have Photoshop you can export your image at a reduced size using the "Save for Web" or "Export As" command. Here you can set the pixel size as well as reduce the file size by adjusting the quality of the image and selecting the proper file type (JPEG, PNG or GIF). If you don't have Photoshop, there are several free image editing software options available including Pixlr, PicMonkey and GIMP. You can also use online tools like Kraken, TinyPNG or JPEGmini to optimize your images without sacrificing their quality. [content-hex title="Free Online Imaging Software" content=" Pixlr, PicMonkey, GIMP, Kraken, TinyPNG, JPEGmini "]
What file format should I use?The file format you use will depend on the type of image you have. JPEG, PNG and GIF are the most common formats for photos, graphics and simple art. JPEG format is great for photos or images that have gradients or varying tones and colour. It supports over 16 million colours and uses a lossy compression method, meaning that the more you save or compress the file, data is stripped out of it resulting in lower quality images. The less you compress, the larger the file. Play around with varying levels of quality to see how much you can compress the file before it starts to degrade the quality (usually around 60% quality or lower). PNG is also great for photos and line art, supporting over 16 million colours like JPEG. PNG however uses lossless compression; less data is discarded when you save a file. This results in larger file sizes than JPEG for photos, but simpler images like line art can end up being smaller than JPEG or GIF. 24 bit PNG supports alpha transparency; pixels can be anywhere from 0% to 100% opaque resulting in smoother blending between transparent and opaque areas. 8-bit PNG supports alpha transparency but only 256 colours, similar to a GIF. GIF is used for simple images like line art and logos. Only 256 colours are supported, so anything without much variation in colour will work well. GIF is a lossless format as well which results in smaller file sizes. Supports multi-image format so it is good for creating animated images. Simple transparency is supported; pixels are either 0% or 100% opaque. This can result in ragged edges on transparent areas. It is almost always better to use a PNG instead of a GIF except for very small files like background images. [gallery type="rectangular" link="file" columns="4" ids="1598,1597,1585,1584"]
3. Optimize Your Image Markup
I'm ready to unleash my optimized images on the world, what's next?!Now that you've created descriptive filenames and reduced your file sizes for faster page loading there are some special bits of markup that you can use to add your keywords to your images and make Google eat them up! This extra step will also help visitors understand the connection between your images and the rest of your content. Captions are the text that accompanies an image, usually displayed below it (like on this post). This little bit of text is great for visitors who are scanning your page before deciding to read the entire article. After headings, images are the 2nd most scanned item on a page, along with their captions. On average, captions are read 300% more than the body copy itself, so make them count! You don't need to add captions to every image on your page, only where it makes sense for the user to add context to your written content. Alt text is shown when the image can't be displayed to the user for various reasons: they could have images turned off in their browser, they could be using an accessibility screen reader due to a visual impairment, or (heaven forbid) your image didn't load. The alt text has a dual purpose here; not only does Google use it along with the filename to figure out how the photo relates to your page, it gives someone who can't see the image an indication of what it is about. The only two attributes an image must have are a source (the file name) and the alt text. Be sure to use it! While your filename should be relatively short (Google mainly looks at the first 3-5 words), you can create a longer description for the alt text. The only case where you don't need to add alt text to your images is when they are used for decorative purposes, such as buttons and other visual or theme-related elements. Title text is usually shown as a tooltip when someone hovers over an image. The title shouldn't be used for crucial information as it isn't visible to the user unless they interact with your photo, and it isn't taken into account for image SEO at all. It is fairly common to just copy the alt text. Like the caption, use it at your own discretion.
<img src="summer-sunset-california-beach.jpg" alt="A colourful summer sunset over the ocean in California" title="The sun sets in the summer over a beach in California">An example of the HTML code that displays an image with the source, alt and title attributes.
4. Add rich data to your images and pagesOpenGraph and Twitter Card tags set the image that should be included in social shares on Facebook, Pinterest and Twitter and can provide much deeper information about the image and the content it is connected to. (CSS-Tricks has a great article on adding rich data to your images specifically for Pinterest.) This is a little more technical to set up if you don’t have a developer or a plugin to help you. WordPress users can add a plugin like Yoast SEO that not only provides tips on each page on how and where to use your keywords, it also gives you the opportunity to connect your social accounts and add OpenGraph meta information to your website. Microdata markup like schema.org also allows you to attach a lot more information about your images that Google can crawl and possibly display in search results. Like the OpenGraph tags, microdata is a little more difficult to add unless you have access to and are comfortable with editing the code of your website. But if you can add it, search engines will be able to gleam that much more information about your website and what you are offering.
<div itemscope itemtype="https://schema.org/ImageObject">
<h2 itemprop="name">California Sunset</h2>
<img src="summer-sunset-california-beach.jpg" alt="A colourful summer sunset over the ocean in California" itemprop="contentUrl" />
By <span itemprop="author">Jane Doe</span>
Photographed in <span itemprop="contentLocation">Laguna Beach, California</span>
Date uploaded: <meta itemprop="datePublished" content="2015-05-25">May 25, 2015
<span itemprop="description">The sunset over the ocean at Laguna Beach was incredible, I was fortunate to have my camera on hand to capture the beautiful colours as they reflected off the water.</span>
</div>An example of the HTML code that displays an image with microdata markup.
SummaryEven the least tech-savvy website owners can make a huge improvement to their SEO efforts by taking a few simple steps:
- Use unique keywords that are relevant to your business and the page topic throughout your written content, and in image markup such as the file name, alt text and caption.
- Make sure your photos are sized correctly for their final home on your website, and reduce the file size for faster loading times to encourage users to stay on your site.
- Use special markup such as OpenGraph and schema.org markup to add even more context for Google.