Full guide for optimizing images on the site
Why is it so important to optimize images?
They come down to improving the quality of the content in the search results and satisfying user requests. Therefore, in addition to the availability of images on the site, it is important that the images load quickly, be attractive, informative, and of high quality.
After the extended snippet appeared in SERP Google, it became very easy to get to the first page using pictures. Moreover, there are often situations where the picture is displayed along with the content of a competing site.
There is a chance to increase the visibility and recognition of the site using images. To get into such results, you need to conduct comprehensive image optimization. It is important to help search engines analyze the content of the image correctly.
What are the basic requirements for creating pictures?
JPEG — use this format for photos;
PNG — for graphics, in other words, for everything that the designer painted;
SVG — for vector images.
New formats have also appeared, such as WebP and JPEG-XR. Their advantage is that they really weigh less, but, unfortunately, not all browsers support these formats yet. For example, JPEG-XR only supports IE, and WebP supports Chrome, Opera, Android. In this regard, I do not consider them. But the choice is yours :)
A poor-quality image is also considered a picture that does not correspond to its description or is located near a text that is unrelated in meaning.
Size and weight of images
Images must be created in the size in which they will be presented on the site.
It will be easier for the browser to crawl the content of the pages if you specify the width and height of the image in CSS. For retina displays, add 2x images and adjust the display of different sizes of the same image for different screens. Otherwise, for users who open the image on the retina display, all the pictures will be displayed with a visual loss of quality.
How to reduce the weight of images without losing quality?
The service also offers a number of useful features for optimizing graphics, such as resizing images, APIs for web resources, and plugins for WordPress and Magento platforms.
ImageOptim can apply compression for JPEG, SVG, GIF, and PNG formats. A simple and convenient interface allows you to compress multiple files at once.
The principle of ImageOptim is to delete metadata such as GPS location and camera serial number. So that you can publish images without providing personal information that adds weight to the chart.
PageSpeed: For Nginx and Apache, the PageSpeed module is available for compressing data at the server level. Installation recommendations here.
For tracking and analyzing image size, I recommend using the online tools Pingdom and PageSpeed Insights. It makes sense to use both options, but if you need to focus on one, it's better to rely on Google Pagespeed Insights.
Because Google is the one who crawls content and rates your site. Consider an example using PageSpeed Insights. By analyzing the page, the tool provides a list of recommendations about resources that are worth reducing and how much.
How to optimize images on the page?
It is important to use Latin letters and hyphens in the file name instead of spaces. Avoid such names jzbdfjklJ_KSD5667.jpg, and write in words describing — go-pro.jpg
Note that keywords should be as relevant and describe the essence of the picture as possible.
For example, if you work with an online store and you have a page dedicated to GoPro 5, then the name of the picture should contain a phrase that describes this particular model, and not GoPro as a whole.
In this case, the best file name would be "go-pro-hero-5-black-front.jpg"
For example, site.com/images/clothes/blue-jeans.jpg.
Also, do not place important information on the image, as the browser does not scan text in pictures, and thus does not understand its essence.
Anchor text should match the content of the image.
For example, to build a link to a page with photos of interiors, you can do this:
<a href="https://example.com/ interior/office-design.jpg"> Photo of an office interior design </a>
Alt meta tag
- If, for some reason, the image does not load, an alternative text comes out explaining what the image is.
- Screen readers use the alt tag to explain the contents of images to visually impaired people.
- Search engines use alt text to properly index the image and then, based on this information, determine the best image for the user's request.
Let's prepare an example of alt for this picture with a cake (I hope you are not very hungry) ↓
<img alt = "cake" src = "https://example.com/cake.jpg" width = "947" height = "591">
<img alt = "chocolate cake with cream cheese garnished with berries and chocolate icing" src = "https://example.com/cake.jpg" width = "947" height = "591">
Of course, the second :) He describes the picture as much as possible.
Or you can see if such a picture was previously indexed in search engines. For example:
Where to look for pictures?
The easiest way is to use Google search on images. Please note that Google displays images with and without permission to use.
We filter it like this:
Look for pictures in free photobanks and improve them with photo editors.
- We put sorting by popularity. The default is "Top for all time", I advise you to leave it that way.
- Select a picture.
Learn how to get the most out of Serpstat
Want to get a personal demo, trial period or bunch of successful use cases?
Send a request and our expert will contact you ;)
Cases, lifehacks, researches and useful articles
Don’t you have time to follow the news? No worries!
Our editor Stacy will choose articles that will definitely help you with your work. Join our cozy community :)