Статья готова, осталось «добавить картинки» — и здесь обычно начинается спешка. Разбираем подготовку изображений как отдельный этап со своим порядком.
Коротко
- Сначала список мест, потом файлы.
- Одинаковые пропорции у всей серии.
- Имя файла осмысленное.
- Подпись и alt — разные вещи.
Какие изображения статье нужны
Пройти по разделам
Отметить места, где нужна наглядность.
Записать задачу каждой картинки
Одной фразой.
Определить тип
Фото, схема, скриншот, таблица.
Отметить, чего нет
Что придётся снять или нарисовать.
Добавить обложку
Она нужна почти всегда.
Список мест до подбора файлов экономит больше всего времени. Иначе порядок обратный: нашли подходящую картинку — придумали, куда её вставить. Так в статье появляются изображения без задачи.
Требования к файлам
| Параметр | Как решать |
|---|---|
| Ширина | Не больше, чем место на странице |
| Пропорции | Одинаковые у всей серии |
| Формат | По задаче: фото и схемы разные |
| Вес | Сжать перед загрузкой |
| Имя файла | Осмысленное, латиницей |
| Ретина | Схемы делать с запасом |
Вторая строка влияет на аккуратность всей статьи. Разные пропорции заставляют текст прыгать при прокрутке, и материал выглядит собранным из кусков. Про формат и вес — в статьях о том, как сжимать изображения и стоит ли переводить сайт на WebP и AVIF.
Подписи и alt
Подпись под картинкой
- Для читателя
- Добавляет то, чего нет в картинке
- Может содержать источник
- Не обязательна
Атрибут alt
- Для тех, кто не видит изображение
- Описывает содержание
- Нужен и для картиночного поиска
- Заполняется всегда
Их часто путают и дублируют одно в другое. Подпись «Схема работы воронки» под схемой воронки не сообщает ничего; полезная подпись говорит то, чего на картинке не видно. Подробно — в статье про alt и title у изображений.
Единый вид у серии
| Что унифицировать | Почему |
|---|---|
| Пропорции | Ровная сетка при прокрутке |
| Толщина линий в схемах | Иначе выглядят чужими |
| Набор цветов | Узнаваемость материалов |
| Шрифт подписей | То же |
| Отступы внутри картинки | Схемы не «слипаются» с текстом |
Один раз зафиксированные правила экономят время на каждой следующей статье. Достаточно записать в файл ширину, пропорции, цвета и шрифт — и подготовка изображений перестаёт быть каждый раз новым решением.
Откуда берутся файлы
| Источник | Что проверить |
|---|---|
| Своя съёмка | Согласие людей в кадре |
| Свои схемы | Ничего |
| Скриншоты своих систем | Скрыты ли данные |
| Бесплатные банки | Условия лицензии |
| Платные банки | Тип лицензии и срок |
| Чужой сайт | Как правило, нельзя |
Последняя строка — самая частая причина претензий. «Нашёл в поиске по картинкам» не даёт никаких прав: у изображения есть автор, даже если на нём нет подписи. Что именно проверять в бесплатных банках — в статье о том, где брать бесплатные изображения легально.
Проверка перед публикацией
Открыть статью на телефоне
Все ли картинки читаются.
Проверить alt у каждой
Пустых не осталось.
Посмотреть вес страницы
Не выросла ли вдвое.
Проверить обложку в превью
Что видно при пересылке.
Убедиться, что права есть
На каждый файл.
Третий шаг легко пропустить и потом долго искать причину. Несжатые изображения — обычная причина того, что быстрая страница внезапно стала медленной; как это связано с продвижением — в статье про скорость загрузки сайта.
Частые вопросы
С чего начинать подготовку изображений?
Со списка мест в статье, где нужна наглядность, и задачи каждой картинки. Подбор файлов — потом, иначе появляются изображения без задачи.
Чем подпись отличается от alt?
Подпись — для читателя и добавляет то, чего на картинке не видно. Alt — описание содержания для тех, кто изображение не видит, и для картиночного поиска.
Что унифицировать в серии картинок?
Пропорции, толщину линий, набор цветов, шрифт подписей и отступы. Записанные один раз правила экономят время на каждой статье.
Можно ли взять картинку из поиска по картинкам?
Нет. Отсутствие подписи не означает отсутствия автора: это самая частая причина претензий.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
