TLRD Key Takeaways
- Make your website as unique as possible
- Leverage lazy loading, browser caching and a CDN network
- Resize, compress and define your images
Introduction
Image optimization is an essential step to having all-around good SEO. Doing it properly and efficiently can advance your SEO and business significantly. And who wouldn’t want that?
At Upgrow our SEO strategies have helped companies drastically improve their traffic and online presence. Making sure that we create quality content, boost their domain authority, and optimize everything, including images, is a big part of it and our success.
The same ability to increase highly qualified traffic is just at your fingertips. The opportunity to expand your business is so close yet often can feel out of reach. We put together this guide to image optimization so that no matter how small your knowledge of SEO is you can implement these practices and hopefully help you get one step closer to your goals.
Tip 1 – Choosing the Right Format
When it comes to image formatting it is essential to pick the right one.
JPEGs are a lossy compressed file format, this means that it is compressed and takes up less space which is why it is liked so much on the internet. They are best used for photographs or realistic images.
PNGs produce a higher quality image, but with the hassle of a larger file. It is a lossless compression file format, which is what makes it so appealing to use online. These are typically used when it comes to line drawings, text, and graphics because of the need for them to have clean lines.
Similar to PNGs, GIFs are also a lossless compression file format but they are limited to 256 colors. They are commonly used when animation is present or to store images that a PNG would typically store but at smaller file sizes.
A good rule of thumb is to use a JPEG unless it is an image that would benefit from one of the other formats. It is best to use your own judgment when it comes to deciding which one to use and it can often change on a case by case basis.
This image really says it all:
Tip 2 – Watch Out for Copyright
I am not trying to scare you away, sometimes using a stock image is necessary depending on the situation. But the laws and lawsuits that surround stock images are something you must be aware of. The Postal Service is paying $3.5 million in an image copyright lawsuit and Skechers got sued for $2.5 million.
I’m assuming you do not want to end up like The Postal Service or Sketchers.
The good news is, you have options, and when following them correctly you should not have even the slightest worry that an expensive lawsuit might show up on your desk.
Your first option is to use a subscription service. There are a handful of ways you can go about this. Most websites have either monthly or annual subscriptions. Depending on the website/subscription plan you choose you may or may not have a limit on the number of images you can download or the quality of the image.
Another way to go about it is by buying a single image at a time. This option allows you to keep track of your budget, not overspend, and it gives you the ability to make sure you always get your money’s worth. With a subscription, there is a possibility that you will pay for it and not get the most out of it every month.
Third, you can either take or hire someone to take the pictures yourself. This varies in price since there are so many different factors to take into consideration. If you are wanting genuinely high quality and individual pictures this is the best, but the most time-consuming option, by far.
Here are 41 places to find free images online.
Tip 3 – Think About Image File Structure
In 2018 Google updated their image guidelines. One of the major updates they revealed is that the file path and name are taken into account when ranking images.
This means that if you want to rank higher, which I am assuming you do because who would not want to rank higher, you need to create structured and unique subfolders for your images.
For instance, if you are an eCommerce brand most likely your folders and subfolders are pretty generic maybe something along the lines of media/clothing/ or possibly not even that specific.
What you should do instead is make them geared towards different category related topics. For instance, you could get really precise and have /denim/ or /pants/. This may seem silly or even a bit elementary but it came straight from Google so there is no reason not to believe it or follow it to at least some extent.
Tip 4 – Make Your Images More Interesting
To go along with tip number two. Even if you are using stock images make sure they are as unique as possible.
Try your hardest to not fill your website to the brim with stock images that everyone has seen before. Nowadays it seems like no matter what the website is, what they are selling, or what the brand is you end up seeing pictures of the same three people over and over again.
The same generic businessman smiling with his arms crossed, or group of people all sitting around a desk. I can almost guarantee that you have seen something that looks like this:
No matter how much time or effort you put into optimizing stock images it will not have the same impact or potential SEO benefits as an original, high-quality image.
The more unique pictures you have, the better experience for the user, and it improves your SEO which means that your odds are better for ranking on relevant searches.
Tip 5 – Consider Using Vector Graphics
Vector graphics are computer graphics images that use mathematical equations to draw out your designs. They are defined in terms of points on a Cartesian plane, which are connected by lines and curves to form an image.
These definitely should not be used for every single image on your website. They are often used for logos or simple on-site elements. Here is what Google says about vector graphics:
“Vector graphics use lines, points, and polygons to represent an image. [They are] ideally suited for images that consist of simple geometric shapes (for example, logos, text, icons, and so on), and deliver sharp results at every resolution and zoom setting, which makes them an ideal format for high-resolution screens and assets that need to be displayed at varying sizes.” Scalable Vector Graphics are the most popular format on the web. They are used mostly for logos and other simple on-site elements.”
SVGs (Scalable Vector Graphics) is the most popular vector format. The World Wide Web Consortium (W3C) developed them and they are based on XML and all modern web browsers should support them.
The thing that makes SVGs so fantastic is that they do not lose an ounce of quality based on device or screen resolution. You heard me right not a single ounce.
Here is what Google suggests when optimizing SVGs:
- SVG files should be minified to reduce their size.
- SVG files should be compressed with GZIP.
Resources:
- Read this if you want to learn how to create SVGs
- Tool Google suggests minifying SVGs
- If you are not comfortable using a command-line interface you can use either this web app or this Mac app
- Tool to check if GZIP is enabled on your server
- Tutorial to enable GZIP
Tip 6 – Do Not Forget About Schema Markup
Schema markup is extremely relevant for recipes, products, and videos. This is what Google says about it:
“If you have images on your site, you can help users identify the type of content associated with the image by using appropriate structured data on your pages. This helps users find relevant content quickly, and sends better-targeted traffic to your site.”
You are probably familiar with schema markup, it looks like this in regular search results:
But it is very relevant for image SEO as well, this is because Google shows badges on certain images when it deems them to be relevant. For example, here is what the recipe badge looks like on a picture of a cupcake:
Ensuring that your images show these badges in Google image search is surprisingly easy and extremely beneficial. You simply need to add the proper schema markup to the page.
Follow this to learn how to add recipe markup to recipe pages.
Follow this to learn how to add product markup to product pages.
Follow this to learn how to add video markup to videos.
Note that GIFs do not require any additional markup since Google already knows they are gifs.
Tip 7 – Leverage Lazy Loading
If you are not familiar with lazy loading, it is where the browser delays the loading of images until they need to be shown on screen. Here is what Google says about lazy-loading:
“Lazy loading can significantly speed up loading on long pages that include many images below the fold by loading them either as needed or when the primary content has finished loading and rendering.”
Google explains how to implement lazy-loading here. Keep in mind that there are quite a few different methods but they all involve Javascript. If you are unfamiliar or not confident with Javascript we would suggest either hiring or getting advice from a web developer before executing it. It can be a bit of a hassle at times, and you would not want to mess something up.
If you are using WordPress there are a few different plugins that you can use, but the quality of them can be a bit questionable at times. The one that we suggest using is A3 Lazy Load but it can vary depending on your website, you may need to explore a handful of plugins to find the one that works best for you.
Tip 8 – Implement Browser Caching
Browser caching is where images and other files get stored in your visitors’ browsers. This means that it will load quicker for them when/if they visit your website in the future. Since everything is already downloaded it speeds up the page loading significantly and makes for an improved user experience.
Here is what Google has to say about browser caching:
”HTTP caching can speed up your page load time on repeat visits. When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store or “cache” the resource. For any subsequent request for that resource, the browser uses its local copy, rather than going to the network to get it.”
The process of implementing browser cashing for your images on WordPress is pretty straightforward. All you need to do is install a plugin like W3 Total Cache. Although, if you are not using WordPress, you will need to manually enter the code below to your .htaccess file:
<ifmodule mod_expires.c=””></ifmodule>
ExpiresActive On
# Images
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
You can change the “1 year” to 1 month, 1 day, 1 hour, etc. based on what you prefer. Make sure that you check that the code is compatible with your server before implementing, it can be quite bothersome at times.
Read more about browser caching and how it works here. If you are not familiar with .htaccess files you can read more about them here.
Tip 9 – Use Content Delivery Networks
Most websites serve all of their files from a single server in a single location, this can cause a major delay when people from out of the country or state are accessing the website. CDNs solve this problem by caching your files across a global network of servers. That way when someone visits your website the images are loaded from the server that is closest to them.
There are two different types of CDNs, push and pull ones. A push CDN gives you more control and you are the one that pushes the new content to the server. This means that you direct every aspect of the CDN, have a lot more options, and the ability to customize the CDN to your liking. A pull CDN pulls data directly from your server. This gets rid of some extra work but takes away a lot of the customization making options that make a push CDN so appealing.
It is up to you to decide who CDN is best for you, there are plenty of them out there. Here are a few different options:
- Cloudflare (free tier available)
- KeyCDN
- Amazon CloudFront (free tier available)
- Google Cloud CDN (free trial available)
If you are using WordPress all you need to do is sign up for your chosen CDN, follow the instructions, then use a plugin like W3 Total Cache, CDN Enabler, or WP Rocket to enable the CDN on your site. Similar to the lazy loading you may need to do some experimenting to figure out which plugin works best for you and your website/server.
One thing to note is that your CDN will have a URL like xyz.cdnprovider.com which is not great for SEO.
If someone were to embed one of your images on their website and link back to you there is a possibility they will like to your CDN instead of your website. This means you will be missing out on a valuable link. It can also cause problems if you wish to change your CDN provider in the future.
We would recommend setting up a CNAME record. This is like an alias that can be used instead of the URL that gets assigned to you by the CDN provider. So instead of xyz.cdnprovider.com, your CDN can be cdn.yourdomain.com.
Image CDNs are also a thing. Google recommends either Cloudinary or imgix for this.
They can help to automate the process of image optimization. If you have a big website they are extremely useful. They are usually not free but they do save a lot of time and are often worth it.
Read this guide to learn how to set this up a CNAME up and more about CDNs in general.
Tip 10 – Resize Your Images & Define Your Dimensions
Have you ever been on a website and there is a lot of white/blank space on either side of the main content in the middle. This is because there is a maximum width, we suggest this because a browser always has to load the full-sized image. Meaning, if you have a 5000px wide image, the browser would still need to load the whole thing even if it displays at 720px.
Making everything much slower.
The solution is to upload images with the maximum width you need. The exact number depends on your website. You can figure this out by digging into your CSS. Be extremely careful and confident with the number you choose especially if using a responsive design.
This is a great tool for resizing your images. Make sure you do your JPEGs and PNGs in different batches if you decide to try it out. When using it, it is only the width that matters so all you will have to do is upload the images and then adjust in the max-width option.
Even if you are not required to define your image dimensions in the source code, we still suggest doing it to provide a better user experience. This also allows the browsers to size the images before the CSS is loaded which stops the page from jumping when it loads.
Tip 11 – Compress Your Images
According to HTTP Archive, images make up on average 21% of a total webpage’s weight. Compressing images increases site speed.
We recommend using ImageOptim for JPEGs. It is a fantastic free tool that allows you to compress images in bulk. It automatically strips EXIF data by default, which is a setting that you may want to change. The data makes the file size larger but Google has stated that EXIF data may be a ranking factor in Google Images.
A good tool for compressing PNGs is TingPNG, they also have a WordPress plugin that you can use.
There are a ton of other options as well if you are not a fan of the tools mentioned above. Here is how each of them did in terms of average file size reduction:
- Imageoptim: 69% (JPEG). 40% (PNG)
- Shortpixel: 42% (JPEG). 59% (PNG)
- Kraken.io: 13% (JPEG). 63% (PNG)
- TinyPNG: 27% (JPEG). 65% (PNG)
- Optimizilla: 27% (JPEG). 60% (PNG
- Imagify.io: 6% (JPEG). 1% (PNG)
- ompressor.io: 42% (JPEG). 58% (PNG)
Tip 12 – Add Images Up To Your Sitemap
Whether you add them to your existing sitemap or create a new one for images, you want images on a sitemap.
Here is what Google says about image sitemaps:
“Images are an important source of information about the content on your site. You can give Google additional details about your images, and provide the URL of images we might not otherwise discover by adding information to an image sitemap.”
This increases the chances of search engines crawling and indexing your images. Which only benefits your SEO performance.
To link in tip 9 Google also states that:
“Image sitemaps can contain URLs from other domains, unlike regular sitemaps, which enforce cross-domain restrictions. This allows webmasters to use CDNs (content delivery networks) to host images. We encourage you to verify the CDN’s domain name in Search Console so that we can inform you of any crawl errors that we may find.”
These are the tags that you can use in image sitemaps.
If you are using WordPress and Yoast SEO your images are added to your sitemap automatically. Although if you add captions to your images in WordPress, Yoast does not add these and you will need to manually include those yourself.
Conclusion
We hope that you have found this to be helpful and have learned something from it.
Of course, this is just the tip of the iceberg when it comes to SEO. If you are interested in improving your SEO you are in it for the long haul. Unfortunately, you may not see results instantly but you will end up getting some amazing outcomes as long as you stick with it.
Worried you don’t have time to implement these strategies or doubt your SEO abilities? Feel free to book a consultation with us and we would be happy to set you up with a free audit. We will give you information that you benefit from even if you do not end up working with us!
