Website images and SEO: how to speed up pages and get into image search.

Product photos, diagrams, portfolios, banners - on most commercial websites, images weigh more than all the other code put together. Yet they are rarely remembered when it comes to promotion: texts and meta tags get checked, while pictures are uploaded as they are.

We look at how to prepare graphics so that they help rankings: which format and file size to choose, how to caption images, how to set up their loading and how to get visitors from image search.

Images and SEO: how they are connected

The connection works in two ways. The first is page weight. Heavy images take longer to load, especially on mobile internet, and the largest element on the first screen, which search engines use to assess rendering speed, is very often an image. We covered general website speed principles separately; here we focus on graphics only.

The second is understanding the content. A search crawler does not see an image the way a person does: it relies on the caption, file name, surrounding text and markup. If all of these are filled in meaningfully, the image becomes an extra signal that the page matches the query and may itself appear in image search. That is why working with graphics is a mandatory part of website SEO.

File format and size

The format is the first thing that determines image weight. There is no universal option; each file type suits its own task:

• JPEG - photos and complex images with smooth colour transitions;
• PNG - graphics with transparency and sharp edges, screenshots;
• SVG - logos, icons and simple diagrams that do not lose quality when scaled;
• WebP and AVIF - modern formats that usually weigh noticeably less than JPEG and PNG at the same quality.

Modern browsers support WebP everywhere, so it is a sensible default for photos. Many content management systems can create such versions automatically on upload and keep a fallback in a familiar format for older browsers.

Compression and sizes for each screen

A camera shot weighs several megabytes, while a web page usually needs a file of one or two hundred kilobytes. The difference comes from compression: for photos, a quality level of 70-85 percent is acceptable, and the eye notices no change. It is also worth removing metadata such as camera details, geotags and embedded thumbnails. Automatic compression on the CMS or server side is the most reliable option, as it does not depend on staff remembering the rules.

A common mistake is uploading an image several thousand pixels wide and shrinking it with CSS to the size of a card: the browser still downloads the full file. The right approach is to prepare several widths so that the browser picks the one that fits the screen, and to specify width and height so that text does not jump down while loading. We wrote about how such details affect mobile traffic in our article on the mobile version of a website.

Lazy loading - only below the first screen

Lazy loading means that the browser downloads an image only when the visitor scrolls down to it. For long catalogues and portfolio feeds this is a noticeable gain, and today it is enabled with a single attribute in the code, without third-party scripts.

The main exception is images at the top of the page. If lazy loading is enabled for the main banner or the first product photo, the browser will load it with a delay and the metrics will get worse. Such files, on the contrary, are loaded with high priority. How to measure the result is explained in our article on checking website speed.

Search optimisation of captions: alt, file name and context

The alt attribute is a text description of an image used by screen readers for blind people and by search crawlers. The browser also shows it if the image fails to load. An empty or meaningless alt deprives the page of a useful signal and makes the site less accessible.

The file name matters too. Instead of “IMG_4521.jpg”, give the file a meaningful name in Latin characters, for example “grey-corner-sofa.webp”. The context is equally important: crawlers treat the caption under an image and the neighbouring paragraph as context, so an image in a relevant block ranks better than the same image placed at random.

How to write alt text

A good description conveys what is shown, briefly and specifically: “Grey corner sofa in a living room”, not “buy sofa cheap”. A key phrase can be included if it describes the image naturally, but listing queries separated by commas is pointless and risky - it looks like keyword stuffing. Decorative elements such as dividers get an empty alt.

A simple rule for manual uploads: imagine describing the photo to someone over the phone. How images fit into overall page work is covered in our article on on-page optimisation. A competent SEO specialist checks captions together with headings and text, not separately.

Image search

Yandex Images and Google image search bring visitors in niches where choices are made visually: furniture, clothing, renovation, landscape design. For many of them, promotion in Yandex is incomplete without images, as part of the audience starts with visual results. To get there, an image must be unique, of good quality and placed on an indexable page.

Photos from a supplier’s catalogue that appear on a hundred sites have almost no chance. What helps is original photography, listing images in the sitemap and product and organisation markup - we explained what it gives in our article on Schema.org markup.

Image optimisation in an online store

In a catalogue with thousands of product pages manual work is impossible, so rules are set by template: the file name and alt are generated from the product name, colour and angle, while compression and conversion to WebP happen on upload. The result is then spot-checked, because a template easily produces identical captions for different products.

For promoting an online store, the first photo on a product page is especially important: it appears in the snippet, in product blocks in search and in visual results. If all competitors use a white background and several angles while you have one dark shot, the page loses before anyone clicks.

Checklist and order of work

To quickly assess the state of graphics on a site, go through a short list:

If a site has hundreds or thousands of images, there is no need to tackle everything at once. In projects for clients in Moscow and other cities we usually work in this order:

1. Find the heaviest files and the pages with the most image weight.
2. Enable automatic compression and conversion to a modern format.
3. Set up responsive sizes and lazy loading below the first screen.
4. Fill in alt text and captions on key commercial pages.

The effect of this work shows up in measurements within a few days, and the cost of image optimisation is usually small compared with reworking the engine. Search engine promotion is made up of many details, and images are one of the most visible. If you want SEO to cover not only texts but also the technical side, contact our website promotion specialists - we will run a check and draw up a work plan.