Image Guides for SEO Optimization
- Catherine Foss (Unlicensed)
- Yesenia Gutierrez (Unlicensed)
Naming
Name your images descriptively and in plain language.
Think about how your customers/users search for products on your website. What naming patterns do they use when they search?
For example above, Dentist looking for a publication may search terms like:
Clinical Journal
July Publication
CDA Publication
Alt Attributes
Optimize your alt attributes carefully.
Alt attributes are the text alternative to images when a browser can't properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your products to show up in Google image and web search.
ALT Attribute Example:
<img src=”July-2021-CDA-Journal-Publication.png” alt=”July 2021 CDA Journal Publication.png”>
The number one priority when it comes to image optimization is to fill out each alt attribute for each product image on your site.
Here are some simple rules for alt attributes:
Describe your images in plain language, just like you did for your image file names.
If you sell products that have model numbers or serial numbers, use them in your alt attributes.
Don’t stuff your alt attributes full of keywords (e.g. alt="ford mustang muscle car buy now cheap best price on sale").
Don't use alt attributes for decorative images. Search engines may penalize you for over optimization.
Image File Size
Reduce the file size of your images.
Consider this:
won’t even wait 3 seconds for an ecommerce site to load.
...and, globally, the average page load time is actually increasing.
Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.
Google uses page load time as a ranking factor in their algorithm.
So, if you have images that slowly "drool" down the screen and take over 15 seconds to load? Well, you can kiss that prospective customer goodbye!
So, what can you do?
When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load.
If you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away.
One way you can reduce image file size is by using the "Save for Web" command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye out for image quality.
How large should image files be?
A good rule of thumb is to try to keep your image file size below 70 kb.
Optimize images in Photoshop
Quality: Find this in the top, right-hand corner (i.e. 70).
File format: Find this in the top, right-hand corner (i.e. JPEG).
Optimization: Find this checkbox in the top, right-hand corner (i.e. Optimized).
Color: Find this checkbox in the top, right-hand corner (i.e. Convert to sRBG).
Downsizing and sharpening: Find this in the bottom, right-hand corner (i.e. W: and H:).
Expected file size: Find this in the bottom, left-hand corner (i.e. 136.7K).
You can also opt to use "Export As".
How to optimize images without Photoshop
If you don't have Adobe Photoshop, there are numerous online tools you can use for image editing. Adobe even has a free image editing application for smartphones and tablets, Photoshop Express. This tool doesn't have all of the capabilities of the desktop version of Adobe Photoshop, but it covers all the basics of image editing and doesn't cost an arm and a leg.
Other impressive online image editing tools are:
has been described by experts as a "staggeringly great photo editing tool".
is super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
is another fairly advanced online image editor.
Finally, there is always GIMP. GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. It can do everything Photoshop can do, but tends to be a bit clunkier. But for a free image editing application, you can't beat it.
Image File Type
Choose the right file type.
There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.
Let's look at the three file types and how they affect the same image:
JPEG (or .jpg) images are somewhat of an old file type. JPEG has become the de facto standard image of the Internet. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
GIF (.gif) images are lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation, as I'm sure you know.
Regarding image optimization, GIFs are great for those plain, simple images on a webpage (which include just a few colors). But for complex images and photos, GIFs are not always as attractive. This is especially true for large images.
We can get away with using GIF in the MacBook image above because the photo is small enough that a GIF works well.
PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs and they don't degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images.
Notice how the PNG-24 image is over three times larger in file size than the PNG-8. This is why you need to be very careful with PNGs.
Here's an extreme example, where the image file size has been held constant at 24 kb for all three file types:
As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to remain at the same low file size.
Here are some tips to remember when choosing file types:
In most cases in ecommerce, JPEGs will be your best bet. They provide the best quality for the smallest file size.
Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.
Most image editing software can save images to any of the file formats discussed above.
Thumbnail Images
Optimize your thumbnails.
Thumbnails are great, but be careful; they can be a silent killer. The victim? Your page load speeds. If they are preventing your category pages from loading quickly, you could lose a potential customer.
So, what can you do?
Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file size here. Remember, the cumulative impact of your thumbnails will have a huge impact on your page load time.
Vary your alt attribute text as to not duplicate text that you would use for the bigger versions of the same image. As a matter of fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the larger image. A case could be made to leave out the alt text entirely.
Background Images
Beware of decorative images.
Websites often have an assortment of decorative images, such as background images, buttons and borders. Anything non-product related can likely be considered a decorative image.
Although decorative images can add a lot of aesthetic appeal to a webpage, they can result in a large combined file size and slow load times. Therefore, you might want to consider taking a closer look at your decorative images so they won't impair your website's ability to convert visitors into customers.
You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes.
Here are some tips for reducing the file sizes of your decorative images:
For images that make up borders or simple patterns, make them PNG-8 or GIFs. You can create good looking images that are only a few hundred bytes in size.
If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.
One trick you can use to eat away at your background image size is to cut out the middle of the background image, and make it a flat color or even transparent. This can decrease the file size substantially.