Картинки занимают на сайте больше места, чем кажется. Они первыми бросаются в глаза, задают настроение и при этом чаще всего замедляют загрузку. И почти всегда их собирают в последний момент, когда макет уже готов и под каждый блок срочно нужно «что-нибудь подходящее».
Ниже о том, откуда брать изображения, что проверить с правами и как подготовить файлы, чтобы сайт выглядел аккуратно и открывался быстро.
Свои фото, стоки или ИИ
Лучше всего работают ваши собственные фотографии: команда, офис, процесс работы, готовые проекты. Им доверяют больше, потому что их нельзя увидеть на других сайтах. Даже аккуратные снимки на хороший телефон при нормальном свете часто лучше красивого стока.
- Свои фото подходят для команды, работ, товаров и всего, что должно вызывать доверие
- Стоковые фото годятся для фона и общих иллюстраций, но не для «наших сотрудников»
- Сгенерированные ИИ картинки удобны для обложек и абстрактных иллюстраций, но не должны выдавать себя за реальные товары или людей
Права на изображения
Картинка из поиска не становится бесплатной оттого, что её легко скачать. У каждого изображения есть автор, и использование без разрешения может закончиться претензией. Берите картинки только там, где лицензия прямо разрешает коммерческое использование, и сохраняйте ссылку на источник.
Если фото делал фотограф по заказу, договоритесь письменно, что вы можете использовать снимки на сайте и в рекламе.
Формат и вес файла
Исходник с фотоаппарата или телефона слишком тяжёлый для сайта. Перед публикацией картинку уменьшают до того размера, в котором её реально покажут, и сохраняют в современном формате вроде WebP или AVIF. Визуально разницы обычно не видно, а страница открывается заметно быстрее.
- Фото сохраняют в WebP или AVIF, а не в PNG
- Логотипы и иконки лучше делать в SVG
- Для телефона и компьютера можно отдавать разные размеры одной картинки
- Картинки ниже первого экрана загружаются по мере прокрутки
Почему тяжёлые картинки так сильно сказываются на телефоне, разобрано в тексте про скорость сайта на телефоне.
Подписи и alt
У каждой содержательной картинки должен быть атрибут alt: короткое описание того, что на ней. Его читают программы для незрячих людей, его видит поисковик, и он показывается, если картинка не загрузилась. Декоративным картинкам alt оставляют пустым, чтобы не мешать.
Единый стиль
Сайт выглядит дорого не из-за отдельных красивых фото, а из-за того, что они похожи друг на друга: одинаковые пропорции, похожий свет и цвет, одна манера иллюстраций. Договоритесь о стиле до сбора картинок, и тогда любую новую будет легко вписать.
Картинки, как и тексты, лучше собирать до макета. Об этом подробнее в тексте про тексты для сайта. Если нужна помощь с подготовкой изображений, напишите через контакты.