Optimize Images for Web

When it comes to marketing your website, there are lots of different aspects to consider. These include, but aren’t limited to, speed, Search Engine Optimization (SEO), conversation rates, bounce rates, and others.

Though we usually write about how to optimize performance, today, we’re diving into alternate image optimization techniques for the web. SEO and social media play an important role in helping your website’s performance and conversions skyrocket.

Let’s jump into the top three image optimization domains for the web.

Below we will discuss the three areas in which you can better optimize images for web:

1. Optimize images for better web performance.
2. Optimize images for SEO to rank and index better in search engines.
3. Optimize images for social media for better engagement and Click-Through Rate (CTR).

1. Optimize images for performance

When it comes to optimizing images for performance, we have many options at our disposal. We can utilize scaling, compression, responsive images, Content Delivery Networks (CDNs), and choosing the best file format.

Image scaling

You may have seen the following Google PageSpeed Insights optimization suggestion at one point or another when running a speed test:

By compressing and adjusting the size of ... you can save 14.2 KB (54%).

This recommendation refers to your images being scaled down from the original dimensions, either through CSS or an HTML attribute. For example, this would occur if an image being served has an original width of 1460 pixels but is being served at 730 pixels to fit in the container that it has been placed in. This can be a problem in a lot of content management systems such as WordPress or Magento, because theme developers tend to scale images down in responsive themes using CSS.

It is usually recommended that you upload images at scale. In other words, cropping images before uploading, which saves resources and keeps you compliant with the PageSpeed Insight guidelines. Alternatively, you can upload multiple resolutions of your images and serve the right resolution for the right media, as defined in custom CSS stylesheets.

Image compression

Just how much of a website is made up of images? Well, according to the HTTP Archive, as of March 1, 2022, the median size of a Desktop page is 2,165.5 KB and the average mobile page is 1,974.1 KB. This means 44% of the average bytes per page, whether on desktop or mobile, are solely made up of images. In our in-house deep dive study, we found that 46% of the experts said that the number one priority should be image optimization.

Our integrated image processing tool on our network is a great way to compress pictures for the web. It allows comprehensive on the fly image transformation and optimization. Images are compressed with simple query parameters and will then be delivered by our CDN.

Alternatively, you can take advantage of smart image compression with the Optimus image optimizer. This is a powerful WordPress plugin that can reduce the size of images without any visible loss in quality. WebP conversion is supported with a paid license. Optimus allows images to be optimized and then stored. This is useful if you want to store optimized images instead of using a real-time image processing service.

Depending on the image and format, reductions in size of up to 70% are possible. Optimus can be installed on any WordPress website.

By using Optimus you can also fix the following PageSpeed Insights optimization suggestion:

By compressing ... you could save 4.7 KB (30%) without losses.

Responsive images

Responsive image techniques, such as the srcset, sizes, and media HTML attributes, allow different scaled images to be delivered based on the size and resolution of the accessing device. This allows you to further optimize your image delivery to improve the overall performance of your website or application.

For example, below is the markup for an image that would not be responsive:

<img src="/img/blog/responsive-images.png" alt="responsive images">

Now, adding the responsive attributes would allow the browser to select and serve the defined image when certain conditions are met:

<img sizes="(min-width: 1200px) 730w,
            (max-width: 1199px) 610w,
            (max-width: 380px) 350w"
     srcset="/img/blog/responsive-images-lg.png 730w,
             /img/blog/responsive-images-md.png 610w,
             /img/blog/responsive-images-sm.png 350w"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">

If you are running WordPress, these are now part of the core since WordPress 4.4, so you don't have to worry about adding them. KeyCDN's Cache Enabler plugin is fully compatible with the HTML attributes that make images responsive.

Image CDN

Using a Content Delivery Network like KeyCDN, or what we also call an image CDN, is one of the easiest and fastest ways to speed up delivery of images. It decreases the latency to the user where they are located by serving your images from a POP physically closest to them. It also allows for additional control over the caching of your images as well as hotlink protection.

We ran some image CDN tests and the results were that the total download times on our image assets with a CDN enabled decreased by 65% on average! The TTFB and the content download times were the two greatest factors improved by implementing a CDN.

File formats - PNG, JPEG, WebP, and SVG

To effectively optimize images for web performance is to have a good strategy for the file formats you use. PNG and JPEG are the most commonly used image file formats on the web. However, there are two other formats that you should also be considering, and those are WebP and SVG. These are typically by far the smallest in size and can do wonders to reduce your total web page size.

WebP

WebP is an image format developed by Google to ensure superior compression of photos. In fact they even use WebP themselves on websites like YouTube. We ran a test in WordPress with 5 large JPEG images to demonstrate how much compression actually takes place when converted to the WebP format and the significant size difference between the two formats. We are using lossless compression with Optimus to optimize the images and also convert to WebP format upon upload to the media library. The Cache Enabler plugin then delivers WebP images based to supported browsers.

We then ran a page comparison test with GTmetrix, JPEG vs WebP, and you can see the total difference in page size. WebP resulted in a 77% decrease in page size.

SVG

Scalable Vector Graphics (SVG) allows vector graphics to be displayed in the browser. They are commonly used for company logos, such as the KeyCDN logo you see at the top of this website. SVG files have a very small file size, can be scaled losslessly without increasing the file size, and can be animated or altered with JavaScript. Another advantage of SVG images is that they can be compressed by Brotli or Gzip.

When it comes to using SVGs you can include them just like you would any other image, for example:

<img src="/img/blog/example.svg">

However, this can get a little trickier if you are using a Content Management System (CMS) like WordPress, as this type of file is often not permitted for security reasons.

You can use a free plugin like SVG Support or Add Full SVG Support to allow you to be able to upload SVGs into the WordPress media library.

2. Optimize images for SEO

When it comes to optimizing images for SEO, there are a lot of things you can do, such as naming images strategically, using right alt text, image sitemaps, and ensuring that they are indexing properly with search engines.

Image file names

When you name your images you should always keep in mind that search engine bots and crawlers see them. You can't expect a computer algorithm to perfectly guess your images’ content, so we recommend naming your image file names something similar to your post's content and or keyword you are focusing on.

For example, in this article, our featured image is named "optimize-images-for-web" because that is the topic of this article. Always use hyphens when there are multiple words. Search engines, such as Google, sees hyphens as a separator. Don't use underscores, otherwise Google will read everything as one word.

Image alt text

Alt text, also known as alt tags, describe the image on the page. It should be short, yet descriptive. Below, check out our featured image and the alt text we chose. A lot of times, this ends up being similar to the file name.

<img src="/img/blog/optimize-images-for-web.png" alt="optimize images for web">

The alt text is also used by screen readers, the browsers used by blind and visually impaired people, to tell them what is on the image. Every image on a page should have alt text. Google also places a high value on them to determine how your image ranks and is related to the content on your page. If you are using a CMS like WordPress, there is a field to input the alt text when you upload your image. Otherwise, you can simply include them in your HTML as seen above.

Image title tags

The image title attribute, also referred to as title tags, are not required by Google. However there has been some debate about this recently over on "Search Engine Roundtable" in a post called Google Does Index & Rank Images Title Attribute Tags. A tester ran a test with the word "plinkyploppitypippity" in the title attribute field and left the alt text empty. A few days later she found that Google had indexed her image for that term.

Now there are a few more things to consider here before going back and adding title tags to all your images. First, Google most likely puts higher priority on the alt text anyways, so even if you had both, the title attribute might not matter. A second thing to consider is that she used the term "plinkyploppitypippity" in her the body content of the post, which means it's possible Google may have associated her post content with the image and indexed it.

If in doubt, you can add the title tag, as it won't hurt anything.

Image sitemap

Image sitemaps provide information that helps Google discover images that they might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate images on your site that you want Google to crawl and index. Sitemaps aren't necessarily required if your website is set up properly, but using them can also help you diagnose problems and dig deeper into data.

For example, you can check if your images are indexed by looking at the sitemap data in Google Search Console or by using the site search operator in Google. In this example we are using WordPress and the Yoast SEO plugin to create and submit our sitemaps. You can also use a third party tool like xml-sitemaps.com.

1. In Google Search Console click into "Crawl" and then "Sitemaps".
2. Click into your "Images" tab and you can see the number of images indexed out of the total submitted, within each of your sitemaps.

Indexing images

When it comes to Google finding your images, make sure they are indexing properly. One way to help troubleshoot is to use a sitemap file like we described above. Another is to ensure that the settings on your server and/or CDN are set up correctly. Search engines check for a robots.txt file at the root of a site. If the file is present, they will follow the instructions. If no file is present, they will scan everything.

Here is a typical robots.txt file that allows everything.

User-agent: *
Disallow:

1. The first line defines the crawler the rule applies to. User-agent: * would apply for all bots, such as Googlebot, Bingbot, etc.
2. The next line defines what path can be indexed. Disallow: tells the search engine to index everything by essentially "not allowing" nothing, or in other words, allowing everything.

When you throw a CDN into the mix there are a few additional things you have to enable. Since a CDN copies your assets you need to tell Google that. You can do that by adding a canonical header which lets the Google crawler know that the content from the CDN is a copy. Once you add rel="canonical" to the HTTP header, your images will index normally.

If you are using WordPress and your CDN images start to get de-indexed from your Google Search Console account, this is likely a sitemap structure issue. Assuming you are using the Yoast SEO WordPress plugin, you may need to add a snippet at the top of your functions.php file.

Another thing to consider if you are using Yoast is sometimes your image attachment pages might start indexing. Each image you upload to WordPress is housed on its own attachment page URL. You definitely don't want people seeing those, especially Google. One way to quickly fix this is to simply go into the Advanced Yoast SEO settings and enable the "Redirect" for attachment URLs.

3. Optimize images for social media

When it comes to optimizing images for social media, you can do a good bit to improve your CTR and engagement. Such as setting up Facebook open graph META tags, Twitter cards, Pinterest rich pins, and Google Snippets.

Facebook Open Graph meta tags

Facebook Open Graph meta tags control how your content appears on Facebook. When you share a post to Facebook the tags tell Facebook what to set for your URL, title, description, and one of the most important parts, your image. See example below of a post on our Facebook page from our blog.

There are a lot of different meta properties that you can use but these below are the most important ones.

<meta property="og:url" content="https://www.keycdn.com/blog/resource-hints">
<meta property="og:type" content="article">
<meta property="og:title" content="Resource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN">
<meta property="og:description" content="Check out how you can use resource hints and directives such as preload, prefetch, and preconnect, to speed up delivery of assets on your websites.">

These can easily be added to any static site manually or if you are on a content management system like WordPress, Yoast is a great free plugin that can add these tags for you automatically. Just make sure they are enabled under the Social settings of the plugin.

Recommended image size

A recommended image size that works well for Facebook is 1200 x 630 pixels. With the Yoast plugin in WordPress, you can manually set the OG properties. This is useful if your WordPress theme uses one size for a featured image, but you still want your Facebook image to look pixel-perfect.

Twitter cards

Twitter cards work very similarly to Facebook Open Graph meta tags. They show the preview portion of a tweet. There are four primary types of Twitter cards:

• Summary Card: Title, description, thumbnail, and Twitter account attribution.
• Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
• App Card: Details a mobile app with direct download.
• Player Card: Provides video/audio/media.

Below is an example with a tweeted URL from our blog where Twitter had to rely on our card to pull the large image and summary.

KeyCDN Launches POP in Helsinki https://t.co/4douVdrk8M #webperf

— KeyCDN (@KeyCDN) October 25, 2018

There are different meta name properties that depend on which Twitter card type it is. Below is an example of the code for a Summary Card with Large Image.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@KeyCDN">
<meta name="twitter:creator" content="@KeyCDN">
<meta property="og:url" content="https://www.keycdn.com/blog/pop-in-helsinki">
<meta property="og:type" content="article">
<meta property="og:title" content="KeyCDN Launches POP in Helsinki - KeyCDN">
<meta property="og:description" content="KeyCDN is dedicated to global expansion and development. We're excited to announce that we're establishing our presence in Finland with a POP in Helsinki.">

These can easily be added to any static site manually or if you are on a CMS like WordPress, Yoast can add these tags for you automatically. Ensure they are enabled under the Social settings of the plugin.

Recommended image size

A recommended image size that works well for Twitter is 1,024 x 512 pixels. Again, in the Yoast plugin in WordPress you can actually manually set the meta name properties.

Pinterest rich pins

Pinterest has so-called "rich pins". There are currently 6 different types of rich pins: app, movie, recipe, article, product and place. They use Open Graph metadata just like Facebook. If you have those tags on your site already, you should be good to go.

1. Go to the Pinterest URL validator (Pinterest account sign in required).
2. Validate a URL from your site. Any URL that has the Open Graph metadata on it.
3. Click on "Apply" if everything is setup correctly.

Once you click "Apply", you should get an email within a few minutes. Then rich pin data will start to show up on Pinterest. Check out all these cool pins from our site below.

Summary

There are nearly infinite ways you can optimize images for the web. It's not always just about web performance, even though we are usually a little biased on that front. But when it comes to marketing the speed, SEO, and social media all play an important role in your brand and site’s success. Have other image optimization tips that perhaps we missed? Feel free to comment below.