На странице фото весит несколько мегабайт, карточка товара требует прозрачного фона, а на баннере осталась старая цена. Каждая задача требует своего действия. Сжатие уменьшает файл, конвертация меняет формат, вырезка сохраняет выбранный объект, удаление фона строит маску, ретушь меняет участок изображения. Если перепутать их, можно получить лёгкий файл с потерянными деталями или аккуратный объект с чужими правами на исходное фото.
Выберите формат по назначению
Фотографии обычно удобно проверять в JPEG или WebP, изображения с прозрачностью — в PNG или WebP, графику с мелким текстом и резкими границами — отдельно на фактическом размере показа. Формат сам по себе не обещает меньший вес: он зависит от содержания, параметров экспорта и реализации браузера. MDN описывает canvas.toBlob() и отмечает обязательную поддержку PNG в браузерах, тогда как JPEG и WebP поддерживаются многими, но требуют проверки. В конвертере изображений сравните скачанный результат с исходником в целевом браузере.
Если формат уже подходит, начните со сжатия фотографий. Сохраните исходник, экспортируйте два-три варианта и сравните не только размер файла, но и текст, контуры предмета, кожу, градиенты и мелкие элементы. На обложке статьи и в товарной карточке цена заметной потери качества разная.
| Задача | Инструмент | Что проверить |
|---|---|---|
| Ускорить загрузку фото | Сжатие изображений | Вес файла и детали в реальном размере |
| Получить нужный формат | Конвертер изображений | Цвет, прозрачность, поддержка на целевой площадке |
| Убрать фон вокруг предмета | Удаление фона | Края волос, стекла, теней и отверстий |
| Взять один объект из кадра | Вырезка объекта | Целостность объекта и прозрачные поля |
| Убрать маленькую надпись или дефект | Ретушь и удаление надписей | Фактура вокруг исправления и право менять изображение |
Фон и объект — разные маски
Автоматическое удаление фона удобно, если главный предмет хорошо отделён от окружения. Но светлый предмет на светлой стене, тонкие волосы или прозрачная упаковка требуют ручной проверки. Просмотрите контур на тёмной и светлой подложке: дефекты, невидимые на исходном фоне, становятся заметны в карточке.
Когда на фото несколько объектов, используйте вырезку объекта и укажите нужный контур. Проверьте, не остались ли куски соседнего предмета, не обрезана ли важная часть и не съехал ли масштаб. Для коллажа лучше сохранить прозрачный PNG и только после этого собирать композицию.
Ретушь подходит для небольшого дефекта на изображении, которым вы вправе распоряжаться. Удаление водяного знака с чужой фотографии не передаёт права на использование: прежде чем менять такой файл, найдите исходник с подходящей лицензией или получите разрешение. Даже на своём изображении проверьте, не удалили ли вы обязательную цену, маркировку или существенную информацию о товаре.
Финальная проверка на странице
Откройте файл в размере, близком к тому, в котором его увидит читатель, и отдельно на телефоне. Назовите файл понятно, сохраните источник и условия использования. Для смыслового изображения напишите alt-текст о том, какую информацию оно передаёт; декоративному изображению достаточно пустого alt. Это соответствует руководству W3C по изображениям.
Проверьте страницу после вставки: кадрирование, подпись, контраст текста поверх картинки и загрузку по мобильной сети. Небольшой файл, который нельзя понять или законно использовать, не решает задачу публикации.
Схемы WiseLab построены на учебных данных и поясняют метод; они не показывают результат клиента.
Источники и дата проверки
- MDN: HTMLCanvasElement.toBlob() — экспорт изображения и поддержка форматов.
- W3C WAI: Images Tutorial — текстовые альтернативы по роли изображения.
Справки и функции инструментов проверены 2 октября 2026 года. Рекомендации о качестве зависят от конкретного изображения и места показа.
Что думаете?
Загружаем комментарии…