Images are important to your website because they are content — the kind of content that has a huge impact on people. While it doesn't take long to read a short paragraph, images can be processed in 13 milliseconds — 60,000 times faster than text alone.
Images along with text to help drive home a point and is extremely effective. Additionally, textual information can become even more powerful when combined into an image by creating infographics. In fact, web content containing visuals, such as images and videos, can receive up to 94% more views than text-only websites.
It has also been shown that email newsletters with visuals get more clicks and engagement. Images also increase dwell time on a page.
Images Improve Search Results
Image searches create 27% of all queries generated across the top 10 U.S. web search sites. In fact, an increase in website visits from image searches has significantly increased since Google updated its “View Image” button from Image Search to “Visit [Page].”
Images make your website more visually appealing
A well-designed website will integrate strong images and logos with text. When posting content throughout your website, you should make sure that the images you use look their best and this is best done by image optimization.
The Content Marketing Institute states that SEO image optimization is the process of creating and delivering high-quality images in the ideal size, format and resolution to increase user engagement. You should also label images correctly so that search engine crawlers can find them and understand what they are.
How to optimize images for the web in 7 steps
Even through images are so important to a company’s brand and online presence, it’s surprising that more people aren’t well versed in incorporating image optimization into their SEO strategy.
Here is a seven step approach to succeed with images:
- How to choose the right images.
- Consider the text associated with your images.
- Adjust your image size and format.
- Take into consideration lazy loading.
- Enable browser caching.
- Don’t forget to add image metadata.
- Finally, create an image sitemap.
1. How to choose the right images
Search engines function is to deliver the most relevant content to users, including images. So, you want to select images that are relevant to what you’re talking about. For example, if you’re focused on social media content marketing, don’t start throwing around pictures of famous movie stars just to get attention — unless your business is legitimately connected to that person (and you have their permission).
Don't add images to a post for the sake of having images. You should include images in your posts that match the content, break up long blocks of text, and help your audience better understand the concept at hand.
It is always best to use your own images instead of stock photos. An original image is unique and better represents the point you’re trying to get across. Nor are you just limited to photos. Images can also include graphs, charts and infographics, as well as other visual aids.
When you don’t have an image of your own that matches what you’re writing about and you’re using the image more as an illustration (instead of an example of the product you’re selling), it’s perfectly fine to use stock photos — with the proper licenses. Understanding image licensing is incredibly important, because the photos are considered intellectual property.
Licenses can be obtained by either hiring a photographer and commissioning new work or by drawing from work that already exists. Images that are already published online can be free, but often you will need to pay for usage rights.
2. Consider the text associated with your images
When you're uploading a photo to your website, you might recall being prompted to add Attachment Details. Because most people don’t know how these details impact SEO image optimization, they don't bother to fill in this information.
Don't skip this, as the information is essential to improving your SEO image optimization. Let's look at what should be included when adding text to your images:
The Image Title
When you upload a photo, you should give it a file name that accurately describes the picture. The file name should incorporate keywords that the image could rank for in a Google search. Be sure to separate the keywords with hyphens — not underscores — as search engines do not recognize these.
The Image Alt Text
Search engines gather information by having “spiders” crawl through websites, recording information as they go. However, these spiders are not capable of seeing an image and understanding it — they only read code, so they need some associated text (including keywords) to describe them. The alt text helps search engines understand what the image is. This is also useful for users accessing a webpage with screen readers or using browsers that can’t process images.
The Image Caption
Captions are the descriptive text below an image that is visible to all users. It provides additional information about an image that might not be obvious to users, such as the date the picture was taken, where it was taken and who is in it. If you are using the same image for several posts, changing the caption you use with the image can be helpful for SEO, as well as user engagement.
The Image Description
Image descriptions are often said to be one of the best-kept secrets of the attachment post. This is because once you enter a description, it is stored as content for the attachment post. So, if someone clicks on the attachment post, they will be sent to a separate page showing the image, image title, caption and the image description as post content.
3. Adjust your image size and format
There are several factors to be aware when you optimize your images for SEO. If done poorly, it can lead to potential clients seeking out a different product or service provider. Here is how to make sure you do it right.
First, resize your images
The average website contains about 1.8MB of images, which represents 60% of a site’s size. Though it is important to include high-quality, high-resolution photos on your website, they often can result in slow page loading speeds.
The problem is made worse when users access your site via mobile devices — a big deal as more than half of all searches happen on mobile devices. Remember that when it comes to online access, speed is nearly everything.
You can get your site to load faster by making image sizes smaller, which also helps contribute to SEO. Thankfully, it’s possible to limit the size of the images you’re using without severely impacting image quality or aspect ratio.
Optimizing your images will maintain the image size while reducing the image size - thus reducing the time it take to load the image.
Second, choose the right image file types
Choosing the right file type can help with image optimization. The most common web image file types are JPEG, GIF and PNG, because they represent the smallest image size and download time. Let's examine each.
JPEG
Joint Photographic Experts Group — better known as JPG/JPEG — is one of the oldest file types. It works best for photographs because it allows the user to balance file size and image quality. One of the significant advantages of JPEGs is that they are easily compressible, which makes them even smaller. However, over time, image colors can degrade.
GIF
Graphics Interchange Format, GIF, was made famous due to its ability to do animated graphics files. It is best to use the GIF format when there are large areas of uniform color and the total number of colors is fewer than 256. (If you used a JPEG for a similar image, it would be a huge file.) GIF formatting should be your go-to for animated images and small icons.
PNG
Portable Network Graphics, PNG, is supported by most browsers, has a smaller file size and more colors than GIF, and its colors do not degrade as easily as JPEG. But, transparent background PNG images run into a bug when used on Internet Explorer, so it’s best to use PNG format when you aren’t dealing with transparent images and GIF when you are.
Third, choose the right compression rate
If you’ve chosen the image file type, but it’s still too big, you might want to manually compress the image. But be careful, if you compress an image too much, you’ll reduce not only the file size but also the quality.
A 60% to 75% compression will keep your image quality decent. However, it’s best to use that range as a starting point and then experiment with different file sizes and ratios to see which one works best for your site.
Now, if you don’t want to mess around with adjusting them manually, you can always use Photoshop to modify your images. To do this, use the “save for web” option, which minimizes file size while optimizing quality.
More tips for dealing with large image file sizes
If you’re relying on stock images, try downloading smaller files. If it looks fine to you in the size-specific preview before you download it, it’s going to similar on your website. Another tip is to create responsive images. Such images will grow or shrink depending on the browser size and device used.
4. Take into consideration lazy loading
This happens when the browser defers loading images until they need to be shown on screen. This means that images further down on the website won’t be loaded until a user gets to that part of the website. Lazy loading can greatly increase your website’s speed, especially on long pages that include many images below the fold.
There is an ongoing debate on the impacts of lazy loading for SEO, but Google’s PageSpeed Insights tool recommends doing it — and Google is in charge of the search world. There are several ways to implement lazy loading. However, most of them involve manual coding.
5. Enable browser caching
Browser caching is when your files, including images, get stored in visitors’ browsers so that these files load faster when they revisit the site in the future. You can enable browser caching through the use of plugins like W3 Total Cache or enable browser caching manually by adding this code to your .htaccess file:
<IfModule mod_expires.c> 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" </IfModule>
Modify the “1 year” in the code for any time frame that seems suitable to your needs (ask yourself how often you’re updating content), such as “1 month” or “1 week.”
6. Don’t forget to add image metadata
Metadata is any extra information stored within a file, including when the file was created or last edited. It can account for up to 15% of a JPEG image’s total size.
Other image metadata can include thumbnails, copyright information and color profiles. This type of information is considered structured data, as it resides in a fixed field within a record or file. By adding structured data to your images, you can help search engines display your image as rich results. To create such structured data, you’re best off following Google’s structured data guidelines.
7. Finally, create an image sitemap
A sitemap is important because it tells search engines about all the pages on your site.
Google allows image sitemaps to contain URLs from other domains, unlike regular sitemaps, which enforce cross-domain restrictions. This means you can use content delivery networks to host images, which can improve your website’s performance.
Building an image sitemap isn’t something you’ll have to do manually.
If you’re using a Content Management System, you can use a plugin like Yoast SEO to automatically add your content — including photos, videos, thumbnails and posts — to a sitemap. However, Yoast does not include any captions you have with your pictures in the sitemap.
Wrapping it up
While Images are essential to your website, image files can also slow your website down to the point that you’re limiting who can see your site and losing clients. To control your speed, as well as increase your SEO, it’s necessary to optimize your images for the web.
Image optimization can seem like a lot of work. Even when you understand how to choose the right images, associated data and image size for your website — it’s easy to feel overwhelmed.