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

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

Что нужно делать (если совсем кратко):

1. Определите, какую задачу решает изображение на странице.
2. Проверьте исходник и при необходимости улучшите качество.
3. Уберите лишние предметы и детали фона.
4. Обрежьте изображение под нужный блок.
5. Выберите подходящий формат и размер в пикселях.
6. Сожмите файл без заметной потери качества.
7. Дайте файлу понятное имя и заполните alt.

Этого достаточно, чтобы самостоятельно подготовить фото товара, обложку статьи, баннер, скриншот или портрет сотрудника. В статье разберем подробнее.

Что значит «подготовить изображение для сайта»

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

Содержание. Картинка должна помогать человеку понять страницу. На карточке товара нужен сам товар и его детали. В инструкции — понятный скриншот нужного действия. Декоративное фото, которое не связано с текстом, занимает место, но ничего не объясняет.

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

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

После этого остаются имя файла и alt-текст. Они помогают поддерживать порядок в медиатеке, дают поисковым системам контекст и делают содержимое понятнее людям, которые не видят изображение.

Шаг 1. Выберите изображение под задачу страницы

Начните с вопроса: что человек должен увидеть и понять? Один и тот же кадр редко одинаково хорошо работает на главной странице, в карточке товара и в статье.

Для главной страницы и лендинга

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

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

Для карточки товара или услуги

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

Для услуги вместо безликого стокового кадра лучше работает результат: готовый интерьер, фрагмент отчета, снимок процесса или фотография специалиста за работой.

Для статьи в блоге

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

Для кейса, инструкции или скриншота

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

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

Шаг 2. Проверьте качество и улучшите фото

Откройте изображение в масштабе 100%. Так легче заметить размытие, следы сильного сжатия и неровные контуры. Затем посмотрите на него в приблизительном размере блока на сайте. Небольшие дефекты исходника иногда исчезают после уменьшения, поэтому чинить каждый пиксель не нужно.

Когда изображение стоит улучшить

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

1. старое фото команды;
2. снимок товара, который нельзя быстро переснять;
3. иллюстрация из нейросети;
4. обложка статьи, взятая из небольшого исходника;
5. фотография после нескольких пересылок в мессенджерах.

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

А когда лучше заменить исходник

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

Замените изображение и тогда, когда оно не подходит по смыслу. Резкость не исправит неверный ракурс, устаревшую упаковку или фотографию чужого продукта.

Шаг 3. Уберите лишние объекты и визуальный шум

Иногда хороший кадр портит одна деталь: провод рядом с товаром, случайный человек за спиной сотрудника, пятно на стене, мусор на столе. Пересъемка в таком случае не всегда нужна.

Лишние объекты лучше искать до обрезки. Посмотрите на края кадра, отражения в стекле и зеркалах, пространство вокруг главного предмета. На небольшом экране контрастная мелочь может оказаться заметнее, чем на мониторе.

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

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

Не стоит доводить фотографию до стерильности. Рабочее место может оставаться рабочим, а интерьер — жилым. Убирайте только то, что мешает смыслу или выглядит как случайная ошибка.

Шаг 4. Обрежьте изображение под блок сайта

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

Сначала узнайте размеры или хотя бы пропорции блока в шаблоне. Затем сделайте отдельные версии изображения. Типовые варианты:

1. широкий баннер — 16:9, 3:1 или пропорция из макета;
2. обложка статьи — 16:9 или 3:2;
3. карточка товара — 1:1, 4:5 или единый формат каталога;
4. портрет сотрудника — 1:1 или 4:5;
5. превью кейса — формат, заданный сеткой сайта.

При обрезке оставляйте немного свободного пространства вокруг лица или товара. Не режьте кадр ровно по макушке, пальцам, обуви и краям предмета. Если поверх фотографии будет текст, заранее оставьте под него область.

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

Шаг 5. Выберите формат изображения

Формат зависит от содержимого файла и возможностей сайта.

JPEG — для обычных фотографий

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

PNG — для прозрачности и четкой графики

PNG пригодится для скриншотов, элементов интерфейса и изображений с прозрачным фоном. Фотография в PNG весит заметно больше, чем тот же кадр в JPEG, WebP или AVIF.

WebP — универсальный вариант

WebP подходит для фотографий, иллюстраций и прозрачного фона. Он дает меньший файл, чем JPEG или PNG, без заметной разницы при обычном просмотре.

SVG — для логотипов и иконок

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

AVIF — когда нужен небольшой вес

AVIF хорошо сжимает фотографии, но не во всех редакторах и CMS с ним удобно работать. Проверьте загрузку, автоматическое создание копий и отображение на устройствах вашей аудитории. Если процесс начинает ломаться, лучше выбрать WebP или JPEG.

Шаг 6. Уменьшите размер и вес файла

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

Как отправная точка подойдут такие размеры:

1. широкая обложка или баннер — 1600-2000 пикселей по ширине;
2. изображение внутри статьи — 800-1200 пикселей;
3. карточка товара — по размеру, который требует шаблон каталога;
4. аватар или небольшое превью — по реальному размеру блока с запасом для четкого экрана.

После изменения размеров сожмите файл. Для обычной фотографии в статье разумно стремиться к нескольким сотням килобайт, а не к нескольким мегабайтам. Жесткий лимит для всех изображений вводить не стоит: большой баннер и маленькая иконка решают разные задачи.

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

Не сжимайте один и тот же JPEG много раз. Каждое повторное сохранение с потерями добавляет артефакты. Храните исходник отдельно, а версии для сайта создавайте из него.

Шаг 7. Назовите файл и заполните alt-текст

Имя IMG_8472-final-new2.jpg ничего не говорит о содержимом. Переименуйте файл до загрузки: используйте латиницу, строчные буквы и дефисы между словами. Хорошие варианты:

1. krasnye-krossovki-nike.webp;
2. komanda-otdela-prodazh.jpg;
3. nastroyka-celi-v-analitike.png.

Но не нужно превращать имя в строку поисковых запросов. Достаточно кратко назвать то, что действительно находится в кадре.

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

Пишите так, будто кратко объясняете изображение человеку, который его не видит:

1. хорошо: Красные беговые кроссовки, вид сбоку;
2. плохо: кроссовки купить кроссовки цена интернет-магазин;
3. хорошо: Окно выбора цели в настройках аналитики;
4. плохо: Скриншот.

Если изображение служит ссылкой или кнопкой, alt должен передавать действие. Для чисто декоративной картинки оставляют пустой атрибут alt="", чтобы программа чтения с экрана могла ее пропустить. Не дублируйте в alt соседний заголовок слово в слово и не начинайте описание с фразы «изображение с».

Чек-лист перед загрузкой изображения на сайт

1. Изображение помогает понять страницу, товар или действие.
2. Главный объект хорошо виден и не потеряется после обрезки.
3. Качества хватает для выбранного размера.
4. В кадре нет случайных предметов и открытых персональных данных.
5. Пропорции соответствуют блоку сайта.
6. Подготовлена мобильная версия, если обычная обрезается неудачно.
7. Формат поддерживается сайтом и подходит содержимому.
8. Размер в пикселях не превышает нужный без причины.
9. После сжатия нет заметных артефактов.
10. Файл назван понятно, латиницей и через дефис.
11. Alt описывает изображение без списка ключевых слов.
12. Страница проверена на компьютере и телефоне.

Частые ошибки

Загружать фото прямо с телефона

Снимок с камеры может иметь ширину в несколько тысяч пикселей и весить больше 5-10 МБ. Сначала сделайте копию, обрежьте ее и уменьшите под сайт. Оригинал сохраните отдельно.

Использовать огромный файл в маленьком блоке

Браузер умеет визуально уменьшить изображение, но перед этим ему приходится загрузить исходный файл. Для карточки шириной 400 пикселей не нужен снимок шириной 4000 пикселей.

Сжимать до появления дефектов

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

Оставлять случайные названия

Через несколько месяцев десятки файлов image1, photo-final и DSC0045 будет сложно различать даже в собственной медиатеке. Понятные имена экономят время при замене и повторном использовании материалов.

Заполнять alt ключевыми словами

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

Использовать одну версию везде

Широкий баннер плохо помещается в квадратную карточку, а квадратное фото приходится растягивать на первом экране. Готовьте несколько вариантов из одного исходника, если блоки заметно различаются.

FAQ

Какой размер изображения лучше для сайта?

Ориентируйтесь на фактическую ширину блока. Для широких баннеров часто хватает 1600-2000 пикселей, для изображений внутри статьи — 800-1200 пикселей. Точный размер зависит от шаблона и того, использует ли сайт отдельные версии для экранов с высокой плотностью пикселей.

Какой формат выбрать для фото?

Начните с WebP, если сайт его принимает. JPEG подойдет как простой и совместимый вариант. AVIF можно использовать, если CMS правильно его обрабатывает и уменьшение веса оправдывает более сложный рабочий процесс.

Нужно ли указывать DPI для сайта?

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

Можно ли использовать изображения из нейросетей?

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

Что важнее: качество или маленький вес?

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