Optimizing Images for Search

Optimizing Images for Search


Images on the web are used for everything from education to ecommerce. And as image-based search evolves, images are critical to stay competitive.

Image optimization falls into two categories: search-friendliness and page speed which, when properly implemented together, have the greatest opportunity to improve overall site reach and engagement.

Image Optimization Workflow

Managing File Sizes

Images, on average, make up 21% of a webpage’s total weight and are a core component of many sites.

Optimizing images reduces file sizes which can improve overall website performance. Image optimization can be done prior to uploading to the web but automated image optimization features can continue to improve page speed.

Image Formats

Not all image formats are created equally, some are more suitable for specific applications and have optimization limitations so it is important to pick the right image format for your needs.

  • JPEG – When images that don’t require transparency or animation, JPEG images can be heavily optimized while preserving quality and support a wide range of colors and gradients. JPEG images are the most common image format on the web.
  • PNG – PNG images support transparency and can be compressed without degrading image quality but even after optimization PNG file sizes are larger than ideal.
  • GIF – Primarily used for animated images, GIFs support transparency but have a limited range of colors which can significantly degrade quality.
  • WebP – Still in its infancy, WebP is a modern image format with superior compression capabilities and, on average, a 25% smaller file size than other image formats. At this time WebP is not compatible with all browsers limiting its use until fully supported.

Scale Images

Digital camera technology continues to advance, even the default images produced by smartphones are much larger than what is needed for web applications. This is even more impactful for mobile users with smaller viewports and limited network speeds. For example, an image in its original form may be 4500 x 3500 pixels but displays at 450 x 350 pixels. The entire file needs to be loaded and then resized to fit the display.

Using responsive images generates multiple versions of an image and specifies what version to use dependant on media queries and viewport dimensions within HTML or CSS.

When responsive image usage is not feasible, resizing images to under 1200 pixels at the longest edge preserves display quality on larger screens while reducing total file size. In ecommerce applications, especially those with on-page zoom, the longest length should be between 2000 and 2500 pixels.

When resizing images make sure to preserve the original aspect ratio to prevent image distortion.

Compression Options

Compressing images removes extra information that the human eye cannot see. Compression can degrade image quality so it is important to double check the results to ensure the image quality is still sufficient for your site’s needs. There are two types of compression algorithms: lossy and lossless.

  • Lossy compression modifies the source code that cannot be restored when decompressed. As compression levels increase image quality can quickly degrade.
  • Lossless compression reduces file size by removing unnecessary metadata from the file. File size reduction is generally less with lossless compression but image quality is maintained.

Lossy and lossless compression both have unique benefits and what method to use comes down to what is best for your website and visitors.

In addition to photo editing software like Adobe Photoshop there are a wide variety of both free and paid image compression tools on the web like Kraken.io and Compressor.io.

Image Compression Options & Features by Format

Compression Lossless Lossy Transparency Animation
JPEG Good Yes Yes No No
PNG Good Yes No Full No
GIF Okay Yes Yes Binary Yes
WebP Great Yes Yes Full Yes

Search Friendly Images

File Names

Files names not only help make it easier to identify an image you are looking for, they also inform Google and other search engines about the subject of the image. The file name should still be as short as possible and use dashes to separate words instead of underscores, %20, or running words together.

Alt Text

Similar to files names, alt text describes the contents of an image file which are displayed when the browser can’t properly render an image. Alt text can help websites achieve better rankings by associating keywords with images and improves the changes of an image being included in the image-based search results.

Alt text should be relevant to the image and in context with the on-page content that is both informational and uses appropriate keywords.

Alt Text Quality Why Example
Bad Alt text is missing or stuffed full of keywords without context Kitchen remodel kitchen faucets kitchen sink kohler kitchen sink
Better Alt text is included but minimal Kohler kitchen sink
Best Alt text succinctly describes the image while referencing the primary keyword Rustic kitchen with chrome faucets and farmhouse sink

Shareability

Great content can inspire users to share it on social media. Ensuring that image details are part of Open Graph (OG) and Twitter Cards guarantees that the appropriate image appears on social platforms when shared.

Image Sitemaps

Image sitemaps help web crawlers more effectively find and process images, especially those that may not be easily found otherwise, while providing more control to indicate what images to crawl and index.

Image information can be in a separate sitemap or added to an existing sitemap. Within any sitemap images are associated with the main URL they are featured on, each can have up to 1,000 images associated with it.

At a minimum image sitemaps include a <image:image> tag which contains all the image information and a <image:loc> tag with is the URL of the image itself. Images hosted on an alternate domains, such as a content delivery network, are acceptable but both the main website and alternate domain must be verified in Search Console and the robots.txt file should not prevent Google from crawling the content.

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlsetxmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>

<url>

<loc>http://example.com/sample.html</loc>

<image:image>

<image:loc>http://example.com/image.jpg</image:loc>

</image:image>

<image:image>

<image:loc>http://example.com/photo.jpg</image:loc>

</image:image>

</url>

</urlset>

 

An example of a sitemap with image data included for a sample page with two images.