Whether you are a journalist, blogging, or writing articles for an online magazine or newspaper, you will most likely find yourself sooner or later ask yourself if your article needs images or not. The answer is always yes. Images enliven the article and can also contribute to your site's SEO . This section explains how to fully optimize your image for SEO, and gives some tips on using images for a better user experience.

<img src="/path/image.jpg" alt="Alternative text" title="Tooltip" >

Always use images

Modern content consumption on the Internet is largely related to images . Nobody likes to read a lot of text, everyone wants to scroll through the article and cling to images. Images in this case will help readers better understand your article. The old saying in a new way, “ One time to see what to read a hundred times, ” begins to play with new colors when you need to spell out the text in 1000 boring words.

Camera roll

Thus, the first and simplest recommendation: you necessarily have to add images to each article that you write on the Internet to make it more attractive . Moreover, since visual search is becoming more and more important, it can provide you with good organic traffic. If your site is based on visual content, then it definitely makes sense to put SEO image optimization a little higher on the list of your site development plans.

Use quality images

It is always better to use the original images - those that you made yourself - than stock photos. For example, the contact page needs photos of real people, not white-toothed actors, and it’s better to place a real photo of the product from different angles, etc. on the product card.

Spring bloom

Your article needs an image corresponding to its subject. If you choose a random photo just to get a green marker in the content analysis, then you do it wrong. The image should reflect the theme of the post or have illustrative purposes within the article, of course. Be sure to place the image next to the appropriate text . For all this, there is a simple SEO-cause: an image with the corresponding text is ranked higher for the keyword than without it.

Note for attentive readers smiley

It should immediately be said that the images for this site are not the source of the traffic , so the photos were taken from a photo station and may not fully correspond to the context of the story and some recommendations in terms of naming. Their main task here is a logical pause and switching of attention.

We continue!

Preparation of images for use in the article

Once you have decided on the choice of the image - whether it be a photo of your beloved cat or a screenshot of a scientific chart - the next step will be to optimize it for effective use on your website. There are a few things you need to think about:

Choose the correct file name

The image for SEO begins with the file name . In order for Google and Yandex to know what the image is about, even without looking at it, it is important to use the key phrase already in the image file name. It's simple: if your image shows the sunrise over the beach, the file name should not be DSC1234.jpg, a sunrise-over-the-beach.jpg. The main key phrase will be "sunrise", as this is the main theme of the photo, so it is located at the beginning of the file name.

Sunrise over the beach

Use the correct format.

There is no such thing as the “only true” format for an image: it all depends on the type of image and how you want to use it. General recommendations are:

  • Use JPEG for large multi-color photographs or illustrations: it will give you good results in terms of color and clarity with relatively small file size;
  • embed PNG , if you want to preserve the transparency of the background and the clarity of the contours without blurring - recommended for small images for which the palette does not have a large number of colors;
  • use SVG for logos and icons . Using CSS or JavaScript, you can manage images in SVG format, for example, scale them without losing quality.

When you have the right name and format, it's time to resize and optimize the image!

SEO image size

Load time is important for achieving user goals ( UX ) and SEO. The faster the site, the easier it is to visit the person and index the page to the robot. Images can have a big impact on download time, especially when you load a huge image and then display it very small — for example, an image of 3000 × 1500 pixels displayed with a size of 300 × 150 pixels. Thus, the following advice: consider the scale of the image and optimize its resolution for a specific insert block on the page.

Compression

File size optimization

The next step in image search optimization is to ensure that the scaled image is as compressed as possible and displayed in the smallest file size .

Of course, you can simply upload an image to any graphic editor, such as Photoshop, and experiment with quality percentages, but this is all a long time and not entirely effective. Today, there are many tools for optimizing image files without losing quality. One of them - tinypng - performs effective compression of graphic files without loss of quality , so that their size decreases by 2-3 times compared to the original!

 

ALT and TITLE attributes

The Alt attribute is added to the image in order to display alternative replacement text in place of the picture if it cannot be loaded for any reason (for example, loading images is disabled, or it is not available, or the viewer is a program that downloads text only). Be sure to add alternate text to each image used and make sure it includes the key phrase.for this page (if necessary). Most importantly, describe what is on the image so that both the search engines and people can understand it. The more relevant information surrounding the image, the more search engines find this image important. This tag is involved in indexing images from the search engines. It is very important to fill this tag, so that the search robot will understand what is shown on it and include it in the index.

Typing

The Title attribute displays a pop-up hint and is intended to increase user conversion by introducing interactivity to the page and revitalizing its behavior. You can add a bit longer text to this tag than for ALT, but you can also duplicate it, it will not be considered a violation. Use this property if you want to attract additional visitor attention to the image, but not to the detriment of the main content. All important information should be placed as a separate explanatory text in the body of the document.

Final image checklist

► Use the highest quality images that match the context.

► Watch for proportional display scale and actual resolution.

► Optimize the file size so that it is minimal

► Be sure to prescribe the unique Alt attribute for all images

► Fill in the explanatory Title attribute to create interface interactivity.

► Use keywords when writing Alt and Title

Check page