Сжать фото для сайта онлайн: уменьшить размер и перевести в WebP

  • Бесплатно
  • Без регистрации
  • Всё остаётся в браузере

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

Сожмите фото

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

Формат

Обычно легче JPEG. Такой формат rillo и сохраняет у себя.

Потери есть: мелкие детали и плавные переходы цвета немного упрощаются. Столько же ставит rillo при загрузке.

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

Пример: так выглядит результат

  • Пример tort-na-zakaz.jpg

    4000 × 3000 → 2400 × 1800

    5,8 МБ → 412 КБ, на 93 % меньше

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

Какой вес нормален для фото на сайте?

Единого нормального веса нет: он зависит от снимка. Ровный фон сжимается сильнее, мелкая листва и ткань тянут вес вверх. Поэтому у rillo нет веса в килобайтах, к которому он стремится.

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

Размеры «Первый экран: 1920», «Карточка: 1200» и «Портрет: 800» в инструменте — наши круглые числа, чтобы не набирать их руками. Это не правило ни rillo, ни поисковиков. Число «Как в rillo: 2400» взято из кода загрузки.

Зачем переводить фото в WebP?

Обычно затем, чтобы файл весил меньше. MDN, справочник для веб-разработчиков, пишет, что WebP со сжатием с потерями в среднем на 25–35 % легче JPEG при визуально похожем уровне сжатия. Это среднее: у вашего снимка цифра будет другой, её покажет инструмент выше.

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

Качество 85 из 100 — это сжатие с потерями. Файл легче потому, что мелкие детали и плавные переходы цвета немного упрощаются. Столько же ставит rillo при загрузке. Если на крупном снимке видны квадраты, поднимите ползунок, файл станет тяжелее.

Бывает и наоборот: уже хорошо сжатый JPEG после пересохранения может потяжелеть. Инструмент скажет об этом прямо и предложит скачать оригинал.

  • MDN: Image file type and format guide

    Раздел «WebP image»: про разницу в весе с JPEG и про поддержку в браузерах. Источник: developer.mozilla.org

Что rillo делает с фото при загрузке сам?

Принимает файл до 10 МБ, поворачивает снимок по метке ориентации и сохраняет как WebP не шире 2400 пикселей с качеством 85. Маленький снимок не увеличивается.

Рядом он кладёт копии шириной 480, 960 и 1600 пикселей, но только если снимок шире копии. Страница перечисляет их в атрибуте srcset, и браузер сам берёт ту, что подходит экрану.

Отказывает rillo в трёх случаях: файл тяжелее 10 МБ, в снимке больше 30 миллионов пикселей или формат не из списка JPEG, PNG, WebP, AVIF и SVG. Под этот случай попадает и HEIC, в котором телефон может сохранять снимки.

Поэтому снимок до 10 МБ в подходящем формате сжимать заранее не нужно. Инструмент пригодится, когда файл тяжелее, когда нужен JPEG вместо HEIC или когда те же фото нужны ещё и не на rillo.

Что почитать и открыть дальше?

Про рамки для фото в шаблонах, про съёмку на телефон и про соседние инструменты.

Собрать страницу с этими фото

Справка, на которую мы опираемся: MDN: Image file type and format guide.

Пригодилось? Отправьте тому, кому тоже нужно.

TelegramMAXВКонтакте

Коротко о сжатии фото.

Фото загружаются на сервер?

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

Сжатое фото теряет в качестве?

Немного, да: WebP и JPEG здесь сжимают с потерями. При качестве 85 мелкие детали и плавные переходы цвета упрощаются. Хотите меньше потерь, поднимите ползунок, но файл станет тяжелее.

Почему файл получился тяжелее оригинала?

Так бывает, когда исходный JPEG уже хорошо сжат, а качество стоит высокое. Инструмент пишет об этом и предлагает скачать оригинал. Можно снизить качество или выбрать WebP.

Что делать, если браузер не открывает снимок с телефона?

Такое бывает со снимками в формате HEIC. Сохраните на телефоне копию в JPEG: в настройках камеры или при экспорте из галереи, пункты у телефонов называются по-разному. rillo HEIC тоже не принимает.

Нужно ли сжимать фото перед загрузкой в rillo?

Если файл до 10 МБ и в подходящем формате, не нужно: rillo сам сохранит WebP не шире 2400 пикселей с качеством 85 и сделает копии для разных экранов.

Фото готовы. Нужна страница?

0 ₽ навсегда · карта не нужна