Привет, читатели!
Одна и та же фотография может хорошо выглядеть в галерее и плохо в карточке статьи: лицо обрезается, надпись становится мелкой, а файл загружается слишком долго. Обычно проблема не в качестве съёмки, а в том, что изображение подготовили без учёта места на странице.
Ниже порядок, который поможет подготовить фотографии для блога, портфолио или каталога. Начинаем с задачи и кадрирования, а сжатие оставляем ближе к концу.
Сначала решите, для какого блока нужна фотография
Перед обработкой откройте страницу в редакторе и посмотрите, куда попадёт изображение. Для широкой обложки, вертикальной карточки товара и иллюстрации внутри статьи нужны разные пропорции. Не стоит подгонять все файлы под один квадрат только ради удобства хранения.
- Обложка статьи. Главный объект должен читаться в небольшой миниатюре. Если есть надпись, оставьте запас по краям и проверьте её на телефоне.
- Фотография товара. Важны целый силуэт, детали и одинаковый масштаб товаров в соседних карточках.
- Портфолио. Подберите общий вид и несколько деталей, которые помогают оценить работу. Не загружайте десяток почти одинаковых кадров.
- Иллюстрация в тексте. Покажите именно то, о чём говорится рядом: результат, этап работы или пример ошибки.
Выберите пропорции до уменьшения размера
Пропорции показывают отношение ширины к высоте. Например, 630 × 450 и 1260 × 900 относятся к одному формату 7:5. Разрешение разное, но форма кадра одинаковая.
Если в блоге уже есть единое оформление, используйте его как образец. Для наших последних обложек выбран размер 630 × 450 пикселей. Это решение для конкретного макета, а не обязательный стандарт для всех сайтов.
Сначала обрежьте лишнее и разместите главный объект внутри кадра, затем уменьшайте изображение. При обратном порядке может не хватить пикселей для нужного фрагмента. Не растягивайте фото отдельно по ширине или высоте: люди и предметы изменят форму.
Как определить размер в пикселях
Начните с ширины блока, в котором посетитель увидит фотографию. Если изображение занимает около 600 пикселей, исходник шириной 6000 пикселей обычно избыточен для такого показа. Но файл шириной 300 пикселей при увеличении может выглядеть нечётко.
Для блока около 600 пикселей можно сравнить версии шириной 600 и 1200 пикселей. Более крупная версия бывает полезна для экранов с высокой плотностью пикселей и просмотра с увеличением, но требует больше данных. Смотрите на результат в своём макете, а не выбирайте размер по случайной рекомендации.
Параметр DPI сам по себе не делает картинку легче или чётче в браузере. Для размещения на странице ориентируйтесь прежде всего на ширину и высоту в пикселях. Требования для печати проверяют отдельно.
Какой формат выбрать
- JPG. Подходит для фотографий без прозрачности: интерьеров, людей, товаров на фоне. При сохранении можно настроить качество и вес.
- PNG. Полезен, когда нужна прозрачность или важно сохранить чёткую графику. Фотография в PNG может оказаться значительно тяжелее версии JPG.
- WEBP. Стоит сравнить с JPG, если ваш конструктор принимает этот формат. Проверьте получившийся файл и его отображение после загрузки.
Не меняйте формат простым переименованием расширения. Чтобы получить JPG из PNG, изображение нужно преобразовать и сохранить в нужном формате. При этом прозрачный фон для JPG придётся заменить непрозрачным.
Уменьшите вес и проверьте детали
Когда кадрирование и размер готовы, откройте оптимизатор изображений. Выберите формат, задайте нужные ограничения размеров и сделайте пробное сжатие одного файла.
Не задавайте минимальное качество сразу всей папке. Сначала проверьте несколько разных фотографий: кадр с мелкими деталями, плавным фоном и надписью. Настройка, которая подходит спокойному пейзажу, может заметно испортить мелкий текст.
В предыдущей статье подробно разобрали как уменьшить вес JPG без заметной потери качества. Здесь достаточно помнить: оценивать нужно одновременно вес файла и его внешний вид в нужном размере.
Жёсткого правила «любое фото до 100 КБ» нет. Для своих обложек можно установить рабочий предел, например 230 КБ, и проверять, укладывается ли файл без заметных дефектов. Большая фотография с увеличением может потребовать другого подхода.
Дайте файлу понятное название и заполните alt
Название вроде vystavochnyy-stend-obschiy-vid.jpg удобнее для поиска в папке, чем IMG_8042-final-new.jpg. Оно должно описывать содержание, а не содержать длинный перечень запросов.
Alt-текст помогает передать смысл изображения тем, кто его не видит. Пишите по существу: «Угловой выставочный стенд с переговорной зоной» вместо «стенд выставка купить заказать недорого». Описание должно соответствовать именно этому кадру.
Краткие понятные имена файлов, содержательные alt-тексты и размещение изображения рядом с подходящим текстом рекомендует Google Search Central. Это полезная часть оформления, но не гарантия выхода в топ.
Миниатюра и фотография внутри статьи: проверяйте обе
Один файл может использоваться в нескольких местах, но обрезаться по-разному. Миниатюра в списке статей, крупная картинка в тексте и изображение рядом со ссылкой в соцсетях могут иметь разные настройки.
После загрузки откройте список статей и сам пост. Убедитесь, что на миниатюре не пропали важные части кадра, а внутри статьи картинка не растянулась на неудобную ширину. Если у конструктора есть отдельное кадрирование миниатюры, настройте его отдельно.
Текст на обложке лучше делать коротким. Длинная фраза, которая выглядит крупно в редакторе, может стать нечитаемой в карточке на телефоне. Важную информацию обязательно повторите обычным текстом на странице.
Пример подготовки обложки для блога
Допустим, у вас есть горизонтальный снимок рабочего места, а все карточки блога оформлены в пропорции 7:5. Порядок будет таким:
- Сохранить оригинал в отдельной папке.
- Выбрать кадр 7:5 так, чтобы основной предмет оставался целым.
- Подготовить версию 630 × 450 пикселей под этот макет.
- Сохранить JPG и проверить вес. При необходимости настроить сжатие.
- Дать понятное имя файлу, загрузить обложку и добавить alt-текст.
- Проверить карточку блога и страницу статьи на компьютере и телефоне.
Если нужны снимки товара с увеличением, не копируйте эти размеры автоматически. Подготовьте отдельную версию с учётом просмотра деталей.
Что проверить перед публикацией
- Фотография относится к тексту и помогает понять его.
- Главный объект не обрезан, пропорции не искажены.
- Соседние карточки выглядят единообразно.
- На снимке нет лишних личных данных или случайных деталей.
- Надписи читаются на небольшом экране.
- Файл не тяжелее, чем требуется для его задачи.
- Alt-текст описывает изображение без повторения ключевых слов.
- Оригинал сохранён отдельно.
После загрузки проверяйте именно готовую страницу. Конструктор может создавать уменьшенные версии, менять формат или кадрировать изображения. По одному исходному файлу нельзя оценить, что в итоге увидит посетитель.
Подготовить изображения в оптимизаторе
Если фотографии нужно подписать, пригодится инструкция по добавлению логотипа на серию снимков.
