We live in an era of global speedup, and life`s dynamics set the rhythm, including the world wide web. It’s no secret that when you visit the site, the first thing that users notice is the download speed.
Even if you have an outstanding design site, but it does not load fast enough, visitors can leave before they see the stuffing. So, the optimal time to load a page is one-two seconds.
A site which loads more than three seconds has 22% fewer views, 50% more bounce and 22% less conversion than a site that is loaded for one second.
A slow site can scare away not only users but also search robots. Insufficient fast loading of a site defines it in the bottom positions of search results. Conversely, faster loading leads to higher positions in the search engines, the loyalty of visitors, and in the end – and to an increase in the conversion.
The increasing dominance of visual content on the Internet (site graphics often makes up 80% or more of the total page size) provides new opportunities to increase search traffic, by optimizing video and images. Optimization of images gives the site an additional source of traffic from image search. Moreover, a high-quality image or attractive infographics can become an efficient source of attracting visitors to the site, as well as high-quality text content.
So, what factors need to be taken into account? What keywords to use? In this tutorial, we’ll look at what you need to know about image optimization to rank your SaaS website better.
#1. Image size
The size of the images significantly affect the overall speed of the site (an important factor in ranking in the search), large images are one of the biggest culprits for slowing down the sites, especially on mobile devices.
However, since the images should look good, especially if they are the central part of the site or landings, it is worthwhile finding the right balance between size and acceptable image quality. In Matt Owen’s article “How to Optimise Your Page Images to Increase Site Speed,” the main recommendation was not to upload images in larger amounts than will be displayed on the site.
GIF, JPEG and PNG are the three main types of image files that make up 96% of the image traffic on the Internet.
|PNG gives a good degree of compression and quality and is usually the best choice.||JPEG offers more compression, 10 times more than other formats, but with losses – this means that it reduces image quality as it compresses.
|GIF – does not lead to loss of image quality, but sometimes reduces the color detail, GIF is most suitable for animated images, logos and any other small, simple images.
On SaaS websites there are three main types of images: the main page (hero shot), icons and screenshots. The most important page of the service is the main one, so start all optimization work from here.
Icons clearly demonstrate the functions or features of the product. The format of such images is usually .png, and the weight does not exceed 15 KB.
Screenshots: if the screenshots are as wide as the main image, try to reduce their weight to 250 KB, if not – 100 KB or less. The best format for screenshots is .JPG.
GoogleSphere Insights offers some more tips for optimizing images for the maximum speed of the site.
#2. Image file name
The name of the image file helps search engines understand the content of the image in context. You must give a name to the files with the occurrence of the keyword. File names must be descriptive. For example, do not leave the image like Unnamed-1.jpg. Reflect in the file name the product or service shown in the picture. If you load a screenshot of your SaaS guide, it will be logical to name the file – placeholder.jpg, which will help to get ahead of the file:
File name example: “https://autopilothq.com/images/tour2016/placeholder_02.jpg”
#3. The Alt and Title attributes
The Alt attribute is a textual alternative to the image that will be displayed if the image does not load. Since the search crawlers have not learned to recognize the content of images, using the ALT attribute, they understand what the image is about, which makes this attribute particularly important for SEO.
Thus, text tags alt and title are the best place to put any keywords that are directly related to the image, BUT: do not use your target keywords! It is far from being “SEO Best Practice”, as well as keywords oversampling in the text – it wouldn`t convince users to trust your product/service.
“Alt” is the field in which the image content is described. Alt-text helps search engines understand what’s on the image. Ideally, at least one image on the page should include a keyword, but it is important not to overdo it, it is necessary to write briefly, but meaningfully and naturally. Imagine that you explain to someone what is depicted in the picture, what key details would you single out?
In some manuals it is recommended to fit into 80 or 150 characters, but, briefly, the number of characters must be exactly so that to read it, it became clear what the image. As an example, how we fill the Alt at the SearchEva:
A screenshot of an image attachment in WordPress with the title text and alt text fields filled in. The caption and description fields are blank. The full Alt Text: “Image of a man who lands with a yellow-green parachute” and “Neon emoji image on a dark background”.
Make sure that each image has an appropriate Alt tag in the image code:
<img src=”./img/credit-history-check.png” alt=”history credit check”>
This information will allow the picture to participate in the Google image search.
The text in “Title” is actually the name of the image. The main difference is that it is intended for users and is already secondary to search engine promotion – so use spaces to separate words, not underscores or dashes (or nothing at all).
# 4. Micro-markup for images
The purpose of micro-markup is to make the Internet more understandable, structured and to facilitate the retrieval and processing of information for search engines, including your images.
There are several microdata dictionaries. But Schema.org is the standard for semantic markup of data on the network, accepted by Google, Bing and Yahoo! in 2011. We recommend work with it.
Using the Schema.org image attributes, you can describe the meaning of the pictures (and all the information on the page) contained in certain HTML elements. Such attributes make the content of the pages machine-readable, that is, they allow you to find the necessary data automatically. And this is necessary to get traffic through images on your site.
For example, the micro-markup code of the image that you saw at the beginning of this article looks like this:
Micro-markup is a reliable tool that allows you to make images on your website more structured for search robots and client-oriented for the Internet users.
#5. The content around images
Image optimization does not occur in a vacuum, the text that surrounds the image is also important. The relevance of the content, its quality and the keywords used can affect the ranking in the search.
The most important part is the text that surrounds the image. This could be an introductory sentence that precedes the image (for example, “Below is a graph showing the results of a survey conducted among 500 marketers …”) and/or an inscription under it that complements the context:
Search engines use this text to determine the correspondence of the image to the topic of the page. For example, on the page about plumbing, the tree image is unlikely to have high positions for the keyword “examples of plumbing.”
Similarly, artificial intelligence has made significant progress in the field of image recognition in recent years, although Google still claims that the search algorithm can not yet independently evaluate what is in the image exactly, but most likely it will not last long.
Moreover, the URL of the page on which the image is placed also affects the ranking of images. If the image is put on an optimized page, then high-quality and relevant content certainly increases the chances of success in the promotion. Along with the URL of the page, the domain trust is also a weighty influence.
#6. Stock images
Over the years, it has been debated whether the use of stock photos affects the promotion. Matt Cutts from Google, in far 2013, said that stock photos do not have a negative effect on rankings in the search engines, and therefore there is no difference to use them or unique photos.
However, there are warnings. Stock images by their nature are universal, and therefore they are unlikely to add useful information to the site. Stock images are not shown in the search results because you are hardly the only one who will use them.
Google does not like to display non-unique images that are hosted on many sites. If you use an image that was previously placed on hundreds of other sites, why should your image be displayed first?
If you are writing about hiring new people for startup, you can choose photos of the energetic group of people around the table or take a professional photo of your office with your own team. The second variant is more relevant and interesting, and will give customers an idea of what your company really is.
#7. Interaction and popularity of images
Search engines pay attention to the content with a high level of interaction. This means that if you have high-quality, up-to-date and original content that is popular among users, you are more likely to take higher positions in the search, and this rule applies to both textual and visual content.
Referential promotion is also applicable to image search: the more people refer to the image, the higher the image rating. The popularity of the image, in the long run, makes search engines pay more attention to this.
Let’s sum up:
- Reduce the weight of images, but not at the expense of quality.
- Assign the correct name to the file.
- Alt attributes should describe the picture as clear as possible.
- Pay attention to the text that surrounds the image.
- Try to use original images.
Bonus: Free image editing tools
Free online services
- ImageKit: ImageKit provides real-time URL based image optimization, resizing and cropping with super fast delivery of images. It comes with a free trial.
- TinyPNG. The main value of the resource is in its simplicity. It is enough to transfer the image to the main screen, as its weight decreases;
- Pixlr. The service interface is similar to Photoshop. It also shows the weight of the file with this or that picture quality;
- Picmonkey. The required functions are available, and the interface is intuitive.
Free desktop tools
- GIMP – is a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks;
- Paint.net. The best version of Microsoft Paint. One of the useful functions is unlimited history. You can cancel as many actions as you need;
- Seashore. An open source application for Mac. Known for its bugs, but still can be useful.
SEO professionals often forget to optimize images, underestimating the impact of this process on profits.
Spend enough time and attention to image optimization, and you will uncover further potential for your business growth!