WebPerf Optimize Images for Web – Ultimate Guide

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 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

1. Optimize Images for Performance


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.

---

Image Scaling


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 recommendation at one point or another when running a speed test: Optimization suggestion: “By compressing and adjusting the size of … you can save 5.8 KB (51%).”

This recommendation refers to your images being scaled down by the browser with CSS. For example, maybe the image you upload has a 500px width, but the column it was placed in is only 400px wide. This results in your image being scaled down to a minimum of 400px due to CSS so that it matches the column size. This can be a problem in a lot of CMS platforms such as WordPress, because theme developers tend to scale things down in responsive themes using CSS.



It is usually recommended that you upload images at scale. This sometimes means cropping them with Photoshop, Paint, or Gimp before you upload them. This saves resources and also will keep you compliant with Google Pagespeed’s guidelines. Or you can also upload multiple resolutions of your images and serve the right resolution for the right device.

Image Compression


Just how much of a website is made up of images? Well, according to the HTTP Archive, 62% of the average bytes per page are made up of images. One of the best ways to optimize your images is by taking advantage of lossless image compression. Lossless compression refers to compression in which the image is reduced without any quality loss.

46% of the experts said that the number one priority or focus should be on image optimization! – Web Perf Advice
​

KeyCDN developed and maintains Optimus Image Optimizer just for that very reason. It reduces the image’s file size without any loss in quality. And depending on the image and format, reductions in size of up to 70% are possible. We have a WordPress plugin available and If you utilize the API, it can be used with any platform. The PHP library for the Optimus API is available on GitHub. By using Optimus you can also fix the following Google Pagespeed Insights recommendation: Optimization suggestion: “By compressing … you could save 4.7 KB (30%) without losses.“

Responsive Images


Responsive image techniques, such as the HTML srcset and sizes attributes allow us to serve different scaled images based on the size of the display. They extend the img and source elements to provide a list of available image sources and their sizes. Browsers can then use this information to pick the best image source. Both of the attributes are are part of the HTML specification and can used separately or in conjunction with the picture element.”



Here is a typical example of using a non-responsive image.

<img src="responsive-images-car.jpg" alt="responsive images car" width="640" height="434">

Here is an example once you add the new responsive attributes.

<img src="responsive-images-car.jpg" alt="responsive images car"
srcset="responsive-images-car-160.jpg 160w, responsive-images-car-320.jpg 320w, responsive-images-car-640.jpg 640w, responsive-images-car-1280.jpg 1280w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

If you are running WordPress, these are now part of the core since WP 4.4, so you don’t have to worry about adding them. KeyCDN’s cache enabler plugin is fully compatible with the srcset and sizes attributes.

Image CDN


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 75.58% on average! The TTFB and the content download times were the two greatest factors decreased by implementing a CDN.

File Formats – PNG, JPEG, WebP, SVG


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 JPEGs 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

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 JPG images to demonstrate how much compression actually takes place and the significant size difference between .jpg and .webp files. We are using lossless compression with Optimus to optimize the images and also convert to WebP format upon upload to the media library. WordPress Cache Enabler then delivers WebP images based on browser support (Chrome and Opera).

File Name Original Size Compressed JPG WebP Format Size Difference %
jpg-to-webp-1.jpg 480 KB 407 KB 43 KB 89%
jpg-to-webp-2.jpg 659 KB 578 KB 113 KB 80%
jpg-to-webp-3.jpg 787 KB 715 KB 127 KB 82%
jpg-to-webp-4.jpg 617 KB 543 KB 61 KB 88%
jpg-to-webp-5.jpg 605 KB 543 KB 70 KB 87%

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.



SVG

SVG (Scalable Vector Graphics) allows vector graphics to be displayed in the browser. They are commonly used for company logos, such as the KeyCDN SVG logo you see at the top of this site. 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 GZIP.

When it comes to using SVGs you can include them just like you would any other image, see example below.

<img src="circle.svg" width="100" height="100">

However this can get a little trickier if you are using a CMS 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. Note: SVGs might not be compatible though with other 3rd party WordPress plugins.

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 your images strategically, using the 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 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 blog post, our featured image is named: optimize-images-for-web.webp. That is the topic of our post. And always use hyphens when there are multiple words. Googlebot sees hyphens as a separator. Don’t use underscores, otherwise Google will read everything as one word.

Image Alt Text


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="optimize-images-for-web.webp" 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 webpage 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. 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 is, that 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 post’s body content. So it is possible Google might 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 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 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 3rd 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.

Click to view larger

Indexing Images


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. In the example above, the robots.txt applies to every crawler. "User-agent: Google" would only apply for Google bots.
2. The next line defines what path can be indexed. "Disallow: /" tells the search engine to not index anything.

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.



3. Optimize Images for Social Media


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, and Pinterest rich pins. It is also important that you size your images correctly.

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="Resource Hints - What is Preload, Prefetch, and Preconnect?" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Resource Hints - What is Preload, Prefetch, and Preconnect?" />
<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." />
<meta property="og:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2016/03/resource-hints.png" />

These can easily be added to any static site manually or if you are on a CMS 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 1,200 x 630px. 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


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.

CDN SEO: Indexing Images in SERPs CDN SEO: Indexing Images in SERPs via @keycdn

— David Coleman (@havecamera) May 10, 2016
​

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:description" content="Sometimes there is confusion about how a CDN handles images and so in this post we show you the best practices for indexing images in SERPs." />
<meta name="twitter:title" content="CDN SEO: Indexing Images in SERPs" />
<meta name="twitter:site" content="@keycdn" />
<meta name="twitter:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2015/10/cdn-seo-indexing-images.png" />
<meta name="twitter:creator" content="@keycdn" />

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. Just make sure 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 512px. Again, in the Yoast plugin in WordPress you can actually manually set the meta name properties.



Pinterest Rich Pins


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.



Summary


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; 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!

Related Posts

• Convert to WebP Format – The Successor of JPEG
• 
  CDN SEO: Indexing Images in SERPs
  

The post Optimize Images for Web – Ultimate Guide appeared first on KeyCDN Blog.

Continue reading...