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>
