Optimize Images for Web

When it comes to marketing your website, there are a lot of different aspects to consider, such as speed, SEO, conversation rates, bounce rate, and many others. We normally focus solely on the performance aspect, but today we want to dive into additional ways you can optimize images for the web. The file size of your images of course is very important, but SEO and social media also play an important part in helping your website perform and convert better.

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

1. How to optimize images for better web performance.
2. How to optimize images for SEO to rank and index better in search engines.
3. How to optimize images for social media for better engagement and CTR.

When it comes to optimizing images for performance there are a lot of things you can do, such as scaling, compression, using responsive images, serving from a CDN, and choosing the right file format.

When it comes to working with images, starting from the basics can be very important, and we are referring to how images scale. Most of you have probably 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. This means cropping images before being uploaded, which will save resources and also will keep you compliant with the PageSpeed Insight guidelines. Alternatively, you can upload multiple resolutions of your images and serve the right resolution for the right device.

Just how much of a website is made up of images? Well, according to HTTP Archive, as of June 1, 2019 the average desktop page is 1,896.8 KB and the average mobile page is 1,683.5 KB. This means 51% of the average bytes per page, whether on desktop or mobile, are solely made up of images. We found that 46% of the experts said that the number one priority or focus should be on image optimization!

An easy way to compress images is with our image processing service that happens to also be fully integrated into our existing network. It allows comprehensive on the fly image transformation and optimization. Images can now be compressed in real time with simple query parameters and will then be delivered by our CDN.

Alternatively, take advantage of smart image compression with the Optimus image optimizer. This is a powerful WordPress plugin and image compression API 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 or you can make use of the API to be used on any platform. The PHP library for the API is available on GitHub.

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 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 the HTML attributes that make images responsive.

Using a content delivery network like KeyCDN, or what we also call an image CDN, can be one of the easiest and fastest ways to speed up the delivery of your images. The main reason is because 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 decreased by implementing a CDN.

One of the final ways you can 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 that is WebP and SVG. These are by far the smallest in size and can do wonders to reduce your total web page size.

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, JPG vs WebP, and you can see the total difference in page size. WebP resulted in a 77% decrease in page size.

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 like WordPress, as this type of file is 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.

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

When you name your images you should always keep in mind that search engine bots and crawlers are responsible for seeing them. You can’t expect a computer algorithm to be perfect or guess what your image is, so that is why it is recommended to name your image file names something similiar to your post’s content and or keyword you are focusing on.

For example, on 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.

Alt text, also referred to as alt tags, describe the image and purpose for it on the page. Generally you will want it to be short yet descriptive. See example again below of our featured image and the alt text we chose. A lot of times this might be similiar to the file name you choose.

<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 content management system 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.

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. Dawn 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. But don’t expect to see any gains either.

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 setup properly, but by using them it can also help you diagnosis problems with your site and dig deeper into the 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. Then click into your “Images” tab and you can see the number of images indexed out of the total submitted, within each of your sitemaps.

When it comes to Google finding your images you definitely want to make sure they are indexing properly. One way to help troubleshoot that is to use a sitemap file like we described above. Another is to ensure that the settings on your server and or CDN are setup 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 but if no file is present, they will scan everything.

Here is a typical robots.txt file that allows everything. Typically that is enough to ensure your images are crawl-able.

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.

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 as the crawler will know that they are only a copy and not duplicate content.

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 that sometimes your image attachment pages might start indexing. Each image you upload to WordPress is housed on it’s 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.

When it comes to optimizing images for social media there is a lot you can do to improve your CTR and engagement such as ensuring that you setup Facebook open graph META tags, Twitter cards, Pinterest rich pins, and Google Snippets. It is also important that you size your images correctly.

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.

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

Twitter cards work very similiar to the way Facebook Open META graph tags work. They are used to show the preview part in 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: A Card to detail a mobile app with direct download.
• Player Card: A Card to provide video/audio/media.

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

There are different meta name properties per different Twitter card type. 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 content management system like WordPress, Yoast can add these tags for you automatically. Just make sure they are enabled under the Social settings of the plugin.

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 has what they call rich pins. There are currently 6 different types of rich pins: app, movie, recipe, article, product and place. They actually use Open Graph metadata just like Facebook. So if you have those tags on your site already you should be good to go. However, you do actually have to apply once to use rich pins.

1. Go to the Pinterest URL validator.
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. Here is an example below of different pins people have pinned from our site.

As you can see there are a lot of different ways you can optimize images for 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 how successful your site and or brand is on the web. Have other image optimization tips that perhaps we missed? Feel free to comment below!