Optimizing Website Images for SEO
Best Practices for Search Engine Optimization on Website Images & Photos
Modern website platforms like WordPress and Squarespace make it incredibly easy to upload and use photos and images on your website. This means that many website owners and admins have been empowered to upload and edit website images themselves, without the need for a traditional “webmaster” to help. Unfortunately, one element that is often lost in the transition to DIY website management is technical SEO optimization for images. It is convenient to just upload an image and move on with your page creation, but spending a tiny amount of extra time on your images can have a big impact on search optimization.
There are 3 important factors to keep in mind when it comes to photos/images and search engine optimization. If a page includes optimized images, the page overall will be more search friendly and keyword optimized, increasing the chances of that page being ranked favorably by search engines.
Optimized images are also more likely to display in Google image searches, and lead visitors to your website based solely on the images used on your pages. According to research from Moz, searches on Google Images account for ~26% of all searches on web properties.
The first two factors must be considered before the image is uploaded to your website – if done right, you should spend a few extra minutes properly preparing each image before upload to maximize your SEO.
1. Optimize Image Sizes
One factor search engines use to grade a website’s user friendliness is how quickly pages load. One factor in measuring page load speed is the page’s overall download size. If a page is loaded up with a variety of large images, it will take longer to complete the entire page download, and it can be considered less user friendly (especially for mobile users). The ideal scenario for any website page is to have images sized down to their optimum size for their specific use. This can mean adjusting the pixel dimensions on an image (resizing), as well as compressing an image to lower overall file size.
A good rule of thumb to follow when uploading your own images is to scale them down to the widest width for which the image will be displayed. For example, a full width “hero” image will likely need to span from one edge of a browser to the other – meaning it needs to be larger. Typically, these edge-to-edge images should be around 2000 pixels wide. A default photo copied straight off of a digital camera might have a width larger than 4000 pixels, meaning it is vastly oversized for even the widest use case on your website.
An image that will be displayed in a gallery overlay might only be displayed at its maximum at 1200 pixels wide. An image embedded in a page or page column may be even smaller.
By measuring the width of an area where an image will be displayed, you can better understand what size to make the image before uploading. You can use a browser add-on called “Measure-it” for an easy way to measure pixel dimensions on any website.
A related factor is file size – which is partially determined by image dimensions, but is also determined by the compression rate on the image. Most image editing tools allow you to save a JPG image at varying qualities. Somewhere between 70-80% is ideal for web images. The lower the quality setting goes, the more compression is being used, and the smaller the file size of the image will be. Lowering image quality introduces small imperfections in the image, but in the 70-80% quality range, these are not usually detectable.
For PNG images, we recommend saving your file and then having it compressed and optimized by a secondary tool like TinyPNG – this software will use a lossy compression technique to drastically reduce the size of PNG images.
2. Customize Image File Names
Image file names are often overlooked. Because search engines will analyze an image’s file name for clues about what the image portrays, it can be a valuable and important step to change a default image name to be more descriptive, and if possible, include target keywords.
A default image might have a nonsense name, or a sequential name from a camera:
We recommend changing an image’s file name to use descriptive words and target keywords to describe the image. It is also a best practice to not include spaces in file names, so we use a “dash” in place of any spaces. For example:
Naming images requires some creativity, as well as knowledge of the target keywords for your intended page. When in doubt, just describe the image, and try not to “stuff” the image name full of keywords – if you’re able to naturally include one target keyword in your file name, then you’re on the right track.
3. Complete and Optimize Alt Text
The “alt tag” or “alt attribute” on an image is a string of text describing the image. Alt text is something that only shows up in your page’s source code. This means that a user doesn’t usually see the alt text attached to an image. The alt text was originally meant to be an accessibility feature – anyone visiting your website who has visual impairments will likely be using a screen reader, which will read an image’s alt text out loud rather than displaying the image in a visual browser.
In addition to its use for improving web browsing for visually impaired users, search engines have historically looked at the alt text for clues about what an image portrays. Because of this, it is also a best practice for SEO to attach descriptive alt text containing target keywords (where possible) to images.
Alt text is similar to image file naming in that you should try to describe the image first, and if you’re able to naturally include a target keyword, that is ideal.
Setting alt text will vary by platform, but it is often an available option after uploading an image to your website. For example, the media library is WordPress has a field labeled “Alt Text” you can complete after uploading an image:
By taking a few extra minutes to optimize your website’s images before and after uploading them, you will increase the overall search friendliness of your website, and help search engines better understand and rank your pages.