Regardless of where you live on the love-hate spectrum with regard to Search Engine Optimization (SEO), it’s an important factor in making your website discoverable and attractive to users. Effective SEO requires decisions about your site, from the underlying platform to user-facing content like text and images, and there are many ways to approach it depending on the complexity of your system.
imgix can help reduce that complexity and increase the likelihood of people finding your site in search results. We’ll discuss general best practices for images, and specifics of SEO implementation for two use cases: how to improve rankings for pages by optimizing images for faster page load speeds, and how to improve rankings for the images themselves.
General Best Practices 1 2
The most important factors for image SEO are metadata and context. Because images don’t carry keywords along in their native metadata (e.g. EXIF info), search engines rely on other clues to determine the content of images and rank them accordingly.
Tell Search Engines What the Image Shows
Here are a few things you can do to ensure that your images have enough relevant context for search engines to accurately identify their content.
- Name images descriptively. It’s common to name files programmatically within an overall asset management system, or in the case of user-generated content, to pass through the filename from the uploaded file. If possible, however, it’s best to rename the images to indicate what they show, e.g.
ford-cargo-van-white-side-view.jpgrather thanDSC10003.jpg. - Include relevant alt tags. Similarly, using alt tags on your pages and populating them with human-readable information about the image contents helps both people and machines understand what’s there, e.g.
alt="man and woman sitting on a picnic blanket"instead ofalt="picnic stock photo". For products, include any relevant model number, color, size, or other characteristics important to your customers. Doing this also helps accessibility, because screen readers use alt tags to provide descriptions of images for blind and visually impaired users. - Keep localization in mind. If you’re localizing your site for multiple locales, another way to improve SEO for each locale is to make sure your alt tags are translated along with the site content. This ensures that these descriptions will be picked up for all languages that you support.
- Put images near the text that’s related to them. Proximity is another way that search engines determine relevancy, so as you design your page, keep the images near the text they reference or are referenced by.
Only Keep One Master Copy Per Image
If you have more than one copy of the same image on your site, search engines don’t always know which is the master and which are derivative. This can slow down the indexing of your images because they have to be de-duped by the search engine. imgix helps solve this problem by creating any needed derivatives (like thumbnails) on the fly and caching them for later, so you don't need to generate or store multiple copies.
Improving SEO via Page Load Time Reduction
Image size is a big contributor to page load speed (specifically Time to First Byte), which in turn is a key metric in determining search result rankings for your pages.3 Reducing image size can go a long way toward improving your rankings, especially if you can get the full page load below the threshold where many users start to drop away out of impatience.4
Many factors affect the file size of an image. imgix can improve all of them, for an average file size savings of 80% compared to the source image.
Image Size and Cropping
Serving the correct image dimensions for a given device (or as close as possible) is the best way to make sure that images aren’t adversely affecting your page load times. Even small differences between the actual and desired sizes of an image can increase the file size dramatically.5
imgix’s most basic feature is the ability to resize images on the fly to fit any device as needed. Our customers generally do this either by generating downsized images for specific breakpoints and resizing to the exact size from the closest cached size, or by using the imgix.js library to generate exact-sized images in real time. In addition, we offer powerful size and cropping features to further redefine the image to just the areas of interest, so every pixel counts.
Given the following image, here's how resizing and cropping can reduce its file size:
- Original
- Dimensions (pixels): 3600×2400
- File Size (kB): 6820 (6.82MB)
h=800- Dimensions (pixels): 1200×800
- File Size (kB): 233.6
- File Size Savings from Original: 96.53%
- Notes:
q=75is quality default if unset
h=800&w=800&fit=crop- Dimensions (pixels): 800×800
- File Size (kB): 184.15
- File Size Savings from Original: 97.29%
File Format and Quality
The next aspect of reducing image size is supplying the best format for the user, which takes into consideration their device, client/browser, and device pixel resolution (DPR). These parameters can reduce the file size even more with no visible loss in quality. Automatic content negotiation (the auto parameter) is the easiest way to make sure that the best format is served. It checks the user agent, and if supported, will convert the image to newer formats like WebP and JPEG XR that offer superior compression over their predecessors. It can also be combined with the fm parameter to define a fallback for clients that don't support the newer formats.
Given the following image, here's how changing the format and quality can reduce its file size:
- Original
- Dimensions (pixels): 2455×3600
- File Size: (kB): 786.78
auto=format- Dimensions (pixels): 2455×3600
- File Size (kB): 210.58
- File Size Savings from Original: 73.23% (with no change in dimensions)
- Notes: Only applies to clients that support WebP (Chrome in this example)
auto=format&fm=jpg- Dimensions (pixels): 2455×3600
- File Size (kB): 521.68
- File Size Savings from Original: 33.69%
- Notes: Fallback example; still significant savings even without WebP support (
autois ignored in this case)
auto=format&q=40- Dimensions (pixels): 2455×3600
- File Size (kB): 144.11
- File Size Savings from Original: 81.68%
- Notes: Default is
q=75if unset, but many images can go lower without visible loss of image quality
- Auto parameter
- Format and quality parameters
For browsers that support them, imgix also supports Client Hints, which pass information about the DPR, viewport size, and container width to the service. This will serve the exact right size to the user without requiring JavaScript.
Tips for Maintaining Image SEO
For a new site or a site where images are not the primary content, using the default imgix Source URL (domain.imgix.net) is the best option; you’ll start off with great compression and page load times for images, which improve search rankings. There is no difference in the ranking of domain.imgix.net vs. www.domain.com or domain.com/images for these cases.6
In cases where you’re switching your image content to an imgix Source from your domain or from another CDN, there may be a temporary decrease in search ranking for your images, as it will take some time for Google to re-index your site and register the imgix Source. If a high ranking for the images themselves (as opposed to the pages that include them) is important to your SEO strategy, there are few things you can do to minimize this temporary dip.
- Set up your imgix Source using a custom subdomain of your site’s domain. The default URL structure for an imgix Source is xxxx.imgix.net, but you can use a CNAME record to link that to a subdomain and then reference the subdomain in your image request URLs. In the example below, the actual source that imgix is fetching from could be on your domain or an external source like an Amazon S3 bucket.
- CNAME entry:
images.domain.com. CNAME domain.imgix.net. - Request:
<img src="http://images.domain.com/image.jpg"> - Verify the subdomain in Google Webmaster Tools and Bing Webmaster Tools if it’s new. This will ensure that the search engines are aware of the new location and that it belongs to the same site.
- Update all image references in your site content. It’s best to do this directly by rewriting the image URLs in the content to point to your imgix Source (or the subdomain if using the method above). If possible, also keep the directory structure and filenames the same except for the domain change. And if you have an image sitemap, make sure to update it as well.
- Avoid using 301 redirects. Though they do provide an extra level of assurance that the image request will go through (e.g. from an external link directly to one of your images), it will increase the load time and provides an inferior user experience.
- Consider serving your image traffic via SSL/TLS. Google currently considers https to be a lightweight quality signal, and may give it more emphasis over time. All standard imgix sources include SSL/TLS by default, but to do this for a custom subdomain, you’ll need to purchase an SSL certificate for your imgix source—contact our sales team if you’d like to explore this option.
A Few Final Notes
It’s important to keep in mind that even with all of the factors and tips listed above, the consistent message from all of the search engines is that quality content is still the primary way they determine how your site and individual pages rank. Start with great content and images, remove your duplicates by resizing with imgix on the fly, and you’ll be well on your way to improving your position.