Привет, читатели!
Фотография хорошо выглядит на экране, но весит несколько мегабайт и долго загружается на сайте. Чтобы сделать файл легче, не обязательно превращать его в размытую картинку. Сначала стоит подобрать нужный размер, затем настроить сжатие и проверить результат.
Разберём порядок на примере онлайн-оптимизатора изображений. Цель здесь не самый маленький файл любой ценой, а подходящий баланс между весом и детализацией.
Вес файла и размер фотографии: в чём разница
Размер в пикселях, например 3000 × 2000, показывает ширину и высоту изображения. Вес в килобайтах или мегабайтах показывает, сколько места занимает файл. Две фотографии одинакового размера могут весить по-разному: на результат влияют детали, шум и настройки сохранения.
Поэтому есть два основных способа облегчить JPG: уменьшить количество пикселей или сильнее сжать изображение при сохранении. Иногда достаточно одного, иногда полезно совместить оба.
Можно ли сжать JPG совсем без потери качества
При обычном повторном сохранении JPG с понижением качества часть информации теряется. Изменения могут быть почти незаметны в нужном размере, но исходный файл и результат уже не идентичны. Именно поэтому корректнее говорить «без заметной потери качества».
Не ориентируйтесь только на процент в настройках. Значение 80 не означает, что фотография сохранит ровно 80% исходного качества. Это параметр выбранного способа кодирования, и в разных программах результат может отличаться.
Сначала определите, где будет показано фото
Для небольшой иллюстрации в статье обычно не нужен исходник с камеры шириной 6000 пикселей. Но слишком маленький файл при растягивании станет нечётким. Посмотрите ширину блока на сайте и проверьте изображение на обычном экране и телефоне.
Например, для блока шириной около 600 пикселей можно сравнить варианты шириной 600 и 1200 пикселей. Второй может выглядеть чётче на экране с высокой плотностью пикселей, но будет тяжелее. Это отправная точка для проверки, а не универсальное требование.
Оригинал сохраните отдельно. Все действия выполняйте с копией, особенно если фотография ещё понадобится для печати или крупного просмотра.
Как уменьшить вес JPG онлайн
- Откройте оптимизатор изображений и нажмите «Загрузить изображения». Для начала выберите один файл.
- В поле «Формат» оставьте JPG. Если нужно сохранить прозрачность, этот формат не подходит.
- Укажите максимальную ширину и высоту. Если менять размер не нужно, в обоих полях можно поставить 0. Оставьте включённым пункт «Не увеличивать маленькие изображения».
- Начните с установленного в сервисе качества 82. Это пробная настройка: для конкретного снимка её может понадобиться повысить или понизить.
- Нажмите «Сжать изображения». Сравните исходный и новый вес, затем скачайте файл.
- Откройте результат и проверьте детали. Если появились заметные дефекты, повторите обработку исходника с более высоким качеством.
Если в файле важны служебные сведения, например данные об авторе, отдельно проверьте настройку удаления метаданных и сохранённый результат. Не удаляйте нужные сведения автоматически.
Реальный пример: насколько уменьшился файл
Для проверки взяли уже подготовленную JPG-обложку размером 630 × 450 пикселей. В оптимизаторе выбрали JPG и качество 82. Ограничения ширины и высоты оставили 1920 пикселей, а увеличение небольших изображений было отключено, поэтому размеры кадра не изменились.
- До обработки: 94,7 КБ.
- После обработки: 77,7 КБ.
- Размер результата: 630 × 450 пикселей.
- Экономия по показаниям сервиса: 18%.
Это результат одного конкретного файла, а не обещание для всех изображений. Обложка уже была оптимизирована, поэтому дополнительное уменьшение оказалось умеренным. Фотография с камеры и многократно сохранённый JPG могут дать совсем другие результаты.
Что проверить после сжатия
Сравнивайте исходник и результат при одинаковом масштабе. Сначала посмотрите на изображение в размере, в котором его увидит посетитель, затем увеличьте важные участки до 100%.
- Мелкие детали: волосы, ткань, листья и фактура товара не должны превращаться в однородные пятна.
- Контрастные края: вокруг надписей и предметов не должно быть бросающихся в глаза ореолов и квадратиков.
- Плавные переходы: на небе, стенах и тенях проверьте появление полос и пятен.
- Текст и логотипы: убедитесь, что мелкие буквы читаются.
Если дефекты заметны, увеличьте качество. Если файл всё ещё слишком тяжёлый, проверьте, действительно ли странице нужна такая ширина изображения. Не пытайтесь решить любую задачу одним движением ползунка.
Нужно ли уменьшать каждую фотографию до 100 КБ
Единого правильного веса нет. Небольшая миниатюра, обложка статьи и подробная фотография товара решают разные задачи. Для изображения с большим количеством деталей допустимый вес может быть выше, чем для простого фона.
Если у сайта есть ограничение, например 230 КБ, подбирайте размер и качество под него. Но не жертвуйте читаемостью схемы или деталями товара только ради красивой цифры. Также учитывайте, сколько картинок загружается на одной странице.
Частые ошибки при уменьшении веса
- Сжимать уже сжатую копию снова и снова. Для каждого нового варианта возвращайтесь к исходнику.
- Уменьшать фото перед кадрированием. Сначала выберите нужную область кадра, затем окончательный размер.
- Сохранять скриншот вместо фотографии. Так легко потерять разрешение и получить лишние элементы интерфейса.
- Считать переименование PNG в JPG преобразованием. Расширение в имени не меняет формат содержимого.
- Ставить качество на минимум для всей серии. Сначала проверьте несколько разных кадров: портрет, фактурный предмет и фото с плавным фоном.
Когда стоит выбрать другой формат
JPG удобен для фотографий без прозрачного фона. Для логотипа с прозрачностью и некоторых схем может подойти PNG. WEBP тоже стоит сравнить с JPG, если ваш сайт принимает этот формат. Выбирайте по фактическому результату, а не по одному названию расширения.
Уменьшение веса изображений сокращает объём данных для загрузки. Но скорость страницы зависит также от количества файлов, скриптов, сети и работы сайта. Одно сжатие картинок не гарантирует высокие позиции в поиске.
Короткий порядок перед загрузкой на сайт
Сохраните оригинал, обрежьте лишнее, выберите нужный размер, сделайте пробное сжатие и проверьте результат. После загрузки откройте саму страницу: конструктор сайта может дополнительно обработать фотографию.
Уменьшить вес фотографии в оптимизаторе
Если нужно подписать снимки перед публикацией, прочитайте: как поставить водяной знак на фото и как добавить логотип на серию фотографий.
