Изображения для сайта: оптимизация, форматы и требования

Опубликовано: 09.12.2018

Обновлено: 25.02.2026

Во времена генеративных моделей стало намного проще получить изображения для сайта: уникальные, качественные, и за очень малые деньги. Однако это можно считать и причиной того, что требования к изображениям для веб существенно возросли. В этой статье рассмотрим, что нужно, чтобы попасть в поиск по картинкам, как их оптимизировать и дополнить смысловое содержание текстового контента.

Зачем вообще нужны изображения на сайте

Изображения играют ключевую роль в первом впечатлении пользователя о сайте. Они мгновенно привлекают внимание, разбивают монотонные блоки текста и делают страницу визуально привлекательной и легкой для восприятия. Качественная графика помогает удержать посетителя, мотивируя его изучить контент глубже, в то время как сайт без изображений может показаться скучным и перегруженным информацией.

Помимо эстетической функции, изображения служат мощным инструментом для передачи информации и эмоций. Они способны быстрее и нагляднее слов объяснить сложную концепцию, продемонстрировать товар со всех сторон или показать результат услуги. Правильно подобранные фотографии или иллюстрации формируют доверие к бренду, создают нужную атмосферу и вызывают у пользователя эмоциональный отклик, что гораздо сложнее сделать одним лишь текстом.

Кроме того, грамотное использование визуального контента напрямую влияет на пользовательский опыт и конверсию. Изображения направляют взгляд посетителя, акцентируют внимание на важных элементах, таких как кнопки призыва к действию, и делают навигацию интуитивно понятной. Для интернет-магазинов или сайтов-портфолио качественные фотографии являются решающим фактором, который убеждает пользователя совершить покупку или сделать заказ.

Какие изображения для сайта не годятся

Прежде, чем определять, какие изображения улучшат конверсию сайта, давайте определим, какие изображения конверсию однозначно ухудшат.

1. Банальные. Изображения с фотостоков – это визуальный шум, не просто бесполезный, но и вредящий вашему сайту. Если вы используете стоковое фото, в лучшем случае картинку посетитель просто проигнорирует. В худшем – доверия вам будет меньше: вы используете чужой контент, не имеющий к вам никакого отношения.
2. Ничего не иллюстрирующие, не дополняющие и не добавляющие смысла текстовому контенту.
3. Изображения низкого качества. Далеко не каждый посетитель сайта знает термин «артефакты сжатия», но отличить пережатую картинку низкого разрешения он сможет. То, что было нормой во времена Windows 98, во времена retina карается самым суровым образом.
4. Чрезмерно «тяжёлые». Плохо оптимизированные изображения для сайта не любят поисковики. Причина – такие картинки существенно замедляют загрузку страницы, увеличивая процент отказов. А если речь идёт о мобильном трафике, шанс, что посетитель уйдёт со страницы, так и не дождавшись загрузки «тяжёлых» фотографий, увеличивается многократно.

Как оптимизировать графику для публикации в веб

В конце 90-х и начале 2-к, когда интернет был медленным и дорогим и приходилось воевать буквально за каждый килобайт, эти правила и способы оптимизации картинок знал каждый веб-мастер. Сейчас широкополосный интернет – норма. Но минимум половину всего трафика на сайты составляют мобильные устройства, и значит, правила оптимизации изображений актуальности не теряют.

Сначала – немного теории.

Все цифровые изображения делятся на две категории: растровые и векторные. Векторные изображения в веб используются нечасто, в основном в формате SVG, и в основном для публикации чертежей, графиков, диаграмм. Главное достоинство векторных форматов – масштабируемость при сравнительно малом «весе». Использование векторных форматов в веб – отдельная тема, и углубляться в неё в этой статье мы не будем.

Большинство изображений в Интернет – растровые. Используется преимущественно три формата: GIF, PNG и JPEG. Каждый из этих форматов использует собственный алгоритм сжатия.

Тип	Цвета	Сжатие
GIF, PNG-8	256 (8 бит)	Без потерь (ограничено палитрой)
JPEG	16 000 000+ (24 бит)	С потерями
PNG-24	16 000 000+ (24 бит)	Без потерь

Форматы с индексированными цветами (8 бит)

GIF и PNG-8 – формат изображений с индексируемыми цветами. Это значит, что в таких изображениях цветовая палитра ограничена 256 цветами. Чаще всего GIF и PNG-8 используют для элементов интерфейса сайта, чертежей, контурных изображений, баннеров, плакатов. Они не годятся для сохранения в них фотографий.

Достоинства

• Малый «вес»;
• Высокая чёткость;
• Поддержка альфа-канала (прозрачности фона).

Недостатки

• Изображения с индексируемым цветом нельзя масштабировать: если картинке в формате JPEG средствами HTML можно задать другой размер, и это незначительно скажется на качестве изображения, с GIF и PNG-8 такой номер не пройдёт.
• Ограниченность характера изображения. Индексируемый цвет не может передать градиенты (плавные цветовые переходы), его палитра ограничена 256 цветами. Если вам нужно разместить на страничке изображение с текстом, GIF или PNG-8 подойдут как нельзя лучше. Для фотографий эти форматы не подходят.

Полноцветные изображения для веб (24 бит)

Для публикации фотографий нужно использовать изображения в формате JPEG или PNG-24. PNG-24 стоит использовать в двух случаях:

• Для публикаций в соцсетях. Как правило, любая соцсеть при загрузке изображений сжимает их, что приводит к заметному ухудшению качества изображения. PNG-24 обеспечивает наилучшее качество картинки, и даже при автоматической конвертации изображения шанс получить лучшее качество выше в сравнении с файлом в формате JPEG. При этом вам не нужно беспокоиться о «весе» картинки. Примечание: фотографии в формате PNG-24 значительно «тяжелее» аналогичных изображений в формате JPEG!
• Если используется альфа-канал (прозрачность). Как и файлы в форматах GIF и PNG-8, файлы формата PNG-24 поддерживают прозрачность. Это позволяет вам поместить вырезанный в Photoshop или другом редакторе изображений объект на любой фон.

Во всех остальных случаях нужно использовать формат JPEG. Есть ещё актуальный формат WebP, но в рамках этой статьи мы его не рассматриваем.

Чем JPG отличается от JPEG

JPEG – это стандарт, определяющий способ сжатия алгоритма. У него есть несколько разновидностей:

• JPG
• JPEG
• JPE
• JFIF

и т.п.

Эти форматы подразумевают дополнительные свойства, не определенные основным стандартом.

Ранние версии Windows могли обрабатывать только трехбуквенные расширения файлов. Именно поэтому расширение JPG для файлов формата JPEG использовалось как основное.

В настоящее время никакой проблемы с форматом нет, а JPG – это просто одна из разновидностей алгоритма JPEG.

Несколько правил сохранения фото для интернет

Главное правило сохранения изображений в этом формате для публикации в веб: нужно суметь найти баланс между размером и качеством изображения. Одним из лучших программных средств для поиска такого баланса является программный модуль Adobe Photoshop “Save for web and devices”. В его интерфейсе вы можете в реальном времени выбирать параметры сохранения изображения и видеть результаты. Ниже мы рассмотрим основные параметры, предлагаемые модулем. Однако до окончательного сохранения картинки перед загрузкой её на сайт нужно провести несколько операций.

1. Уменьшаем размеры. Никакое растровое изображение не следует масштабировать в сторону увеличения, это резко ухудшает качество картинки. Уменьшать – можно, однако к такому уменьшению средствами html следует подходить с большой осторожностью. Если можно для превью уменьшить картинку, это нужно сделать. В целом размеры изображения стоит выбирать исходя из конкретного шаблона сайта, ориентируясь на предельную ширину того блока, где будет размещено изображение.

Не следует публиковать в интернет изображения с разрешением более 72 ppi: это то разрешение, с которым работает большинство дисплеев, и если вы будете публиковать изображения с разрешением в 300 ppi, вы получите лишь больший весь фотографии, не получив дополнительного качества.

2. Изображение нужно конвертировать в подходящее цветовое пространство или цветовой профиль. Профессиональный клипарт может иметь цветовой профиль, отличающийся от используемого в бытовых устройствах sRGB-1966. Этот профиль отличается очень узким цветовым охватом, приемлемым для большинства дисплеев. Какое значение этот факт имеет для вас? Если не произвести конвертацию вручную, вы можете столкнуться с непредсказуемым изменением цветовой гаммы опубликованного на сайте изображения.
3. Учитывайте, что цветовая гамма изображений отличается даже в разных операционных системах. Одна и та же картинка будет по-разному смотреться на устройствах Apple и Windows. Ищите золотую середину.
4. Дайте картинке внятное имя в транслите. Между словами используйте дефис, а не нижнее подчеркивание. Хороший стиль: pravilnoe-imja.jpg. Плохой стиль: какое_то_название_283736.jpg

Подробнее о форматах изображений для веб.

Изображения для поисковой оптимизации

В 2025-м году поисковые системы научились значительно лучше понимать, что изображено на картинке благодаря использованию искусственного интеллекта. Тег alt всё ещё используется, но нейросеть способна распознать объекты на изображениях и тексты на них самостоятельно. Современные поисковые алгоритмы, основанные на семантическом поиске, рассматривают иллюстрации не как отдельные файлы, а как неотъемлемую часть общего контекста страницы. Они стремятся понять, что изображено на картинке и какую роль она играет в раскрытии темы.

Уже сейчас поиск по картинкам предлагает вам похожие или аналогичные изображения, снабженные тегами (лейблами) («Возможно, на фотографии – …») на базе того, что алгоритмам удается на картинке распознать. И как бы вы ни старались «уникализировать» чужой снимок, меняя фон или отзеркаливая картинку, обмануть поиск всё сложнее. И тут возникает парадоксальная ситуация: размещая неуникальный контент, уже хорошо проиндексированный и тегированный в поиске, вы размываете собственную семантику. Эти картинки уже связаны для алгоритмов с определенными поисковыми сущностями. Если ваша статья о шампунях проиллюстрирована фото, известным как «девушка в спа-салоне» – неплохо.

Искусственный интеллект начинает понимать, что изображено на картинке, и релевантность этой картинке запросу определяется изображенными объектами, объединенными семантическим графом. То есть и здесь работают всё те же семантические принципы тематически связанных групп слов.

Но вот вам пример, когда чужой контент противоречит семантике статьи, где используется как иллюстрация: статья «Деньги не пахнут» проиллюстрирована фотографией, в которой поиск видит лишь свитер крупной вязки, а вовсе не кошелек с монеткой в руках.

Яндекс и Google, которые по факту сегодня представляют собой поисково-рекламные системы, для поиска по картинкам шаблонизируют результаты поиска, а в поиске по картинке в первую очередь пытаются найти на ней понятные сущности (прежде всего – товары). Чтобы попасть в индекс и быть представленной в результате поиска, картинка должна соответствовать некоторому визуальному шаблону, а сам поисковый запрос – иметь ненулевой спрос. В противном случае попасть в поиск по картинкам у сайта минимальны.

Ключевые требования к иллюстрациям с точки зрения SEO

Контекстуальная и семантическая релевантность

Это главное требование. Изображение должно быть напрямую связано с содержанием окружающего его текста и общей темой страницы. Поисковый робот анализирует абзацы до и после картинки, заголовки H1-H6 и метатеги, чтобы понять, соответствует ли иллюстрация контексту. Например, в статье о преимуществах породы “золотистый ретривер” фотография именно этой собаки будет иметь гораздо большую ценность, чем стоковое изображение любой другой собаки или просто счастливой семьи. Иллюстрация должна дополнять и визуально подтверждать информацию в тексте.

Детальное и осмысленное описание (метаданные)

Поскольку алгоритмы все еще в значительной степени полагаются на текст для понимания изображений, текстовые атрибуты критически важны.

• Атрибут alt (альтернативный текст): это больше не место для спама ключевыми словами. alt должен быть точным, лаконичным и естественным описанием того, что изображено на картинке. Он служит двум целям: помогает поисковикам понять содержание изображения и обеспечивает доступность для пользователей со слабым зрением, использующих скринридеры. Правильно: alt="Черный котенок играет с красным клубком на деревянном полу". Неправильно: alt="котенок кот купить котенка недорого москва".
• Имя файла должно быть понятным человеку и описывать изображение с использованием транслитерации. Вместо IMG_8754.jpg следует использовать chernyy-kotenok-s-klubkom.jpg. Это один из первых сигналов для поисковика о содержании файла.
• Подпись к изображению (<figcaption>): – текст, видимый пользователю прямо под картинкой, также является мощным сигналом. Он дает дополнительный контекст и часто читается пользователями, что положительно сказывается на поведенческих факторах.

Структурированные данные (Schema.org)

Это один из самых мощных инструментов для “объяснения” поисковику содержания вашего контента, включая изображения. Используя микроразметку Schema.org для типа ImageObject, вы можете явно указать поисковой системе, что изображено, кто автор, и как эта картинка связана с другими сущностями на странице (например, с товаром, рецептом или статьей). Это значительно повышает шансы на попадание в расширенные результаты поиска, такие как карусели изображений или карточки товаров.

Уникальность и авторитетность

Алгоритмы отдают предпочтение уникальным, оригинальным фотографиям и иллюстрациям, а не заезженным стоковым изображениям, которые используются на сотнях других сайтов. Уникальный визуальный контент сигнализирует об экспертизе и авторитетности ресурса (принцип E-A-T/E-E-A-T). Если вы продаете товар, используйте собственные качественные фото товара, а не картинки с сайта производителя.

Техническое качество и пользовательский опыт (UX)

Семантический поиск тесно связан с оценкой качества пользовательского опыта.

• Качество и оптимизация: изображение должно быть высокого визуального качества (четкое, не размытое), но при этом оптимизировано по весу для быстрой загрузки. Медленная загрузка картинок негативно влияет на показатели Core Web Vitals (особенно LCP) и, как следствие, на ранжирование. Использование современных форматов, таких как WebP, приветствуется.
• Адаптивность: иллюстрации должны корректно отображаться на всех типах устройств, от больших мониторов до смартфонов. Использование адаптивных изображений (атрибут srcset) является стандартом.

Для семантического поиска идеальная иллюстрация — это уникальное, технически оптимизированное изображение, которое органично вплетено в контент, точно описано с помощью метаданных и микроразметки, и делает страницу более полезной и понятной для конечного пользователя.