Создание картинок: сайт и его изображения — это два разных дела: сначала картинку нужно получить — снять, нарисовать, сгенерировать, — а потом подготовить её для сайта: выбрать формат, размер, подпись и способ загрузки. Поиск почти целиком про первое: 23 страницы из 30 — нейросети-генераторы и их рейтинги. О втором, от которого зависят скорость сайта и его место в поиске, пишет одна страница.
Ниже — откуда брать картинки для сайта и что с ними можно делать по закону, какой формат выбрать для какой картинки, как подготовить изображение под разные экраны, как устроены загрузка, просмотр и управление изображениями на сайте и что такое интерактивные изображения. В статье три помощника: выбор формата, генератор кода адаптивной картинки и пример интерактивного изображения.
Нужен сайт, где много фотографий, но страницы грузятся быстро? Создание сайтов под ключ: визитка — от 25 000 ₽, корпоративный сайт — от 40 000 ₽, магазин — от 60 000 ₽. Форматы AVIF и WebP, адаптивные размеры и ленивая загрузка — в работе по умолчанию.
Тридцать страниц поиска: 23 о нейросетях, 1 о картинках на сайте
Я просмотрел тридцать страниц, которые поиск показывает по запросам о создании картинок для сайтов, и разложил их по темам.
Шестнадцать страниц — сами нейросети, которые рисуют по описанию, семь — их рейтинги и подборки. Пять — онлайн-редакторы для открыток, баннеров и постов, одна — генератор карточек для маркетплейсов. И только одна страница объясняет, как подготовить изображения для сайта: форматы, размеры, редакторы.
При этом владельцу сайта важнее не то, как получить картинку, а то, что с ней будет на сайте: не замедлит ли она страницу, будет ли видна в поиске, не придёт ли претензия от автора. Об этом статья.
Откуда брать картинки для сайта
Фотки для создания сайтов — или, как пишут в поиске, «фотки создание сайтов» — берут из пяти источников, и у каждого свои правила.
- Свои фото. Работы, товары, команда, офис. Самый убедительный вариант: посетитель видит реальную компанию. Достаточно современного телефона, дневного света и чистого фона.
- Фотограф. Для каталога товаров и страницы команды. Права на снимки и разрешение публиковать их на сайте стоит закрепить в договоре с фотографом.
- Фотобанки. Для иллюстраций, которые невозможно снять самим. Проверяйте лицензию: разрешено ли коммерческое использование и нужна ли подпись автора.
- Нейросети. Для иллюстраций, фонов и декоративных изображений. Условия использования зависят от сервиса — читайте их. И не выдавайте сгенерированные картинки за фото своих работ.
- Иллюстрации и иконки. Создание красивых картинок для сайта в векторе — иконок, схем, простых иллюстраций — часть дизайна сайта.
Чего делать нельзя: брать картинки из поиска по изображениям и с чужих сайтов. Найденная в поиске картинка почти всегда кому-то принадлежит, и претензия правообладателя к сайту компании — реальная история, а не страшилка.
Совет вебмастера: для сайта услуг одна честная фотография вашей работы стоит десяти красивых стоковых. Стоковых улыбающихся людей посетители узнают сразу — и перестают верить и остальным фото на странице.
Создание сайтов: формат картинок
Создание сайтов и формат картинок связаны напрямую: формат определяет, сколько весит изображение и как оно выглядит. Для разных картинок нужны разные форматы.
Какой формат выбрать для вашей картинки
AVIF, запасной WebP или JPEG. Фото в AVIF весит в разы меньше JPEG при том же виде. Браузер, который не понимает AVIF, получит запасной вариант. Качество сжатия — около 60–80 по шкале редактора.
Подготовка изображений для создания сайта
Фото с телефона весит несколько мегабайт и имеет ширину четыре тысячи пикселей. На сайте оно отображается в блоке шириной, скажем, 800 пикселей. Всё остальное — лишний вес, который посетитель скачивает зря. Подготовка изображений для создания сайта — это пять шагов.
- Обрезка. Убрать лишнее и привести к нужным пропорциям: квадрат для карточки товара, широкий кадр для обложки.
- Размер. Ширина — по размеру блока на сайте, умноженному на два для экранов высокой чёткости.
- Формат и сжатие. AVIF или WebP для фото, SVG для логотипов.
- Имя файла. Латиницей и по смыслу: remont-kuhni-01.avif, а не IMG_4583.jpg.
- Подпись. Атрибут alt: что на картинке, коротко и по делу. Его читают поисковики и программы для незрячих.
Код адаптивной картинки
Чтобы телефон не скачивал картинку для широкого монитора, на сайте используют несколько размеров одного изображения. Укажите ширину блока — генератор посчитает нужные размеры и соберёт код.
Нужные размеры файла: 400, 800, 1600 px
Ширина и высота в коде нужны, чтобы браузер заранее оставил место под картинку и текст не прыгал при загрузке. Атрибут sizes подсказывает, какой из файлов скачать: телефону — маленький, компьютеру — средний, экрану высокой чёткости — большой. Если сайт сделан на системе управления, большую часть этой работы она выполняет сама при загрузке изображения — нужно только правильно её настроить.
Перед публикацией каждой новой фотографии полезно пройти короткую проверку: обрезана ли она до нужной области, не шире ли блока больше чем вдвое, сохранена ли в лёгком формате, понятно ли называется файл и есть ли подпись. Пять вопросов занимают полминуты, а через год работы сайта это разница между страницами по пятьсот килобайт и по двадцать мегабайт. Если на сайте несколько человек загружают фото, этот список стоит повесить прямо в админке или настроить систему так, чтобы большая часть проверок выполнялась автоматически.
Сайт, где много картинок: загрузка, просмотр и управление
Создание сайта: много картинок — портфолио, каталог, фотограф, интерьеры — требует продумать не только сами изображения, но и как они попадают на сайт и как их смотрят.
- Загрузка изображений. Владелец загружает фото с телефона как есть, а сайт сам уменьшает его до нужных размеров, переводит в лёгкий формат и создаёт уменьшенные копии. Создание сайтов: загрузка изображений без такой обработки приводит к страницам по 20–30 мегабайт.
- Просмотр изображений. Галерея с превью и полноэкранным просмотром по нажатию, листание свайпом на телефоне. Создание сайта: просмотр фотографий без отдельной страницы на каждое фото — стандартное решение, а создание сайтов: просмотр изображений через галерею — экономит место на странице.
- Управление изображениями. Альбомы, порядок, подписи, замена фото без поиска по всему сайту. Создание сайтов: управление изображениями — задача системы управления, а не ручной правки кода.
- Ссылки на картинки. Создание ссылок картинок для сайтов — кликабельная картинка ведёт на страницу товара или услуги. Подпись в alt здесь особенно важна: она описывает ссылку.
Интерактивные изображения
Отдельный вид картинок — интерактивные: на изображении есть точки, при нажатии на которые появляется подпись. Так показывают, из чего состоит товар, что входит в ремонт, где что находится в помещении. Сайты для создания интерактивного изображения — онлайн-сервисы с редактором точек, но на сайте такую картинку можно сделать и без внешнего сервиса. Создание картинок на сайтах с такими точками не требует программирования каждый раз — достаточно шаблона. Нажмите на точки:
Нажмите на точку на картинке.
Это условная схема кухни, нарисованная прямо в коде страницы, но принцип тот же для реальной фотографии: точки ставятся поверх изображения, подписи хранятся в тексте страницы. Поисковики читают такие подписи как обычный текст, поэтому интерактивная картинка помогает и посетителю, и поиску. Главное — не перегружать: три-пять точек на изображение, иначе подсказки начинают мешать самой картинке. И проверьте, что точки удобно нажимать пальцем на телефоне: маленькая точка в углу фотографии превращается в игру на меткость.
Создание сайтов: изображения и поиск
Картинки приводят посетителей и сами по себе — через поиск по изображениям. Создание сайтов, изображения на которых находятся в поиске, требует четырёх простых вещей.
- Понятное имя файла. remont-kuhni-01.avif говорит поисковику больше, чем IMG_4583.
- Подпись alt. Что на картинке — так, как это описал бы человек.
- Текст рядом. Картинка внутри абзаца о ремонте кухни понятнее поиску, чем картинка без текста.
- Скорость. Тяжёлые изображения ухудшают показатели страницы, а с ними и позиции.
Создание сайты с изображениями, которые работают на поиск, — это не отдельная услуга, а аккуратность при загрузке каждой картинки. Её закладывают в шаблоны сайта один раз, чтобы потом владелец не думал о ней при каждом новом фото.
Создание картинок на сайтах для соцсетей и мессенджеров
Есть картинки, которые на самом сайте не видны, но видны везде, куда отправляют ссылку на него. Когда ссылку пересылают в мессенджер или публикуют в соцсети, рядом с ней появляется обложка, заголовок и описание. Их задают в коде страницы отдельно.
Если обложку не задать, мессенджер возьмёт первую попавшуюся картинку со страницы — иногда иконку или кусок баннера. Поэтому создание картинок для сайтов включает и обложки для ссылок: одну общую для сайта и отдельные для ключевых страниц — услуг, статей, акций. Размер обложки обычно горизонтальный, с запасом по краям, чтобы её не обрезали разные площадки.
Программы для создания изображений и нейросети
Программа создания изображений для сайтов может быть любой: от встроенного редактора телефона до графических пакетов и онлайн-редакторов. Программа: создание картинок для сайта требует трёх операций — обрезать, уменьшить, сохранить в нужном формате, — и с ними справляется почти любая. Создание картинок онлайн для сайтов в браузерных редакторах удобно для баннеров и обложек по шаблону.
Нейросети, которым посвящена большая часть выдачи, хороши для фонов, иллюстраций и идей. Но готовая картинка от генератора — это всё ещё сырьё: её нужно обрезать, сжать, подписать и проверить на странные детали. И ещё раз: сгенерированная картинка не заменит фото вашей настоящей работы там, где клиент хочет увидеть результат. Генераторы удобны и для подготовки: убрать фон с фото товара, дорисовать край кадра под нужные пропорции, увеличить старую маленькую картинку.
Когда сайт тормозит, я в первую очередь открываю картинки. Почти всегда там фото прямо с телефона по пять мегабайт, загруженные в блок шириной в пол-экрана. Переход на AVIF и правильные размеры часто ускоряет сайт сильнее любых других доработок — и не меняет в дизайне ни одного пикселя.
— Александр Рожков
Сайт с большим количеством фото тормозит или нужен новый — с галереей, загрузкой и правильными форматами? Опишите задачу — назову цену до начала работ. Ориентир — в калькуляторе, условия — на странице создания сайтов. Оптимизацию изображений на работающем сайте можно заказать в рамках поддержки.
Итог
Создание картинок для сайта — это источник и подготовка. Источник — свои фото, фотограф, фотобанки с понятной лицензией или нейросети для иллюстраций, но не чужие картинки из поиска. Подготовка — обрезка, размер под блок, формат AVIF или WebP для фото и SVG для логотипов, понятное имя файла и подпись. На сайте с большим числом фото нужны автоматическая обработка при загрузке, галерея с просмотром и удобное управление.
Если нужен сайт, где изображения работают и не замедляют страницы, условия — на странице создания сайтов.
Опрос
Откуда картинки на вашем сайте?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Какой формат картинок использовать на сайте?
Для фотографий — AVIF с запасным WebP или JPEG, для логотипов и иконок — SVG, для скриншотов с мелким текстом — PNG или WebP без потерь. GIF-анимацию разумнее заменить коротким видео.
Какого размера должна быть картинка для сайта?
По ширине блока, в котором она показывается, плюс версия вдвое шире для экранов высокой чёткости и вдвое уже для телефонов. Фото с телефона в исходном размере на сайт загружать не стоит.
Можно ли брать картинки из поиска для сайта?
Нет: у найденных изображений почти всегда есть правообладатель. Используйте свои фото, фотографа, фотобанки с лицензией на коммерческое использование или нейросети с учётом их условий.
Зачем картинке подпись alt?
Она описывает изображение для поисковиков и программ чтения с экрана и показывается, если картинка не загрузилась. Пишите коротко, что изображено.
Как сделать галерею с просмотром фотографий?
Превью в сетке и полноэкранный просмотр по нажатию с листанием свайпом. В системах управления это делается модулем галереи, который сам создаёт уменьшенные копии.
Что такое интерактивное изображение?
Картинка с точками, при нажатии на которые появляются подписи: из чего состоит товар, что где находится. Подписи остаются текстом страницы и видны поисковикам.
Можно ли использовать картинки от нейросетей на сайте?
Да, для иллюстраций и фонов, если условия сервиса это разрешают. Но там, где клиент хочет увидеть реальный результат работы, нужны настоящие фото.
