Как уменьшить вес изображения в 8 раз без потери качества

Как уменьшить размер изображения в 8 раз без потери качества

Коротко суть: используйте формат изображений webp. В статье я покажу разницу между png и webp. Расскажу, как и чем можно открывать изображения webp. В чем редактировать и как конвертировать. В также будет пара слов о совместимости с wordpress.

Пока делал себе в портфолио кейс столкнулся с тем, что скриншоты целой страницы сайта могу весить больше мегабайта. Иногда и около 2-3 мегабайт. Это очень много, а соответственно — очень плохо для сайта. 

Если на всем сайте изображения не оптимизированы и весят слишком много, он будет медленно грузится. Такие сайты не любит Google и может занижать их позиции в поисковой выдаче. 

Поэтому нужно следить за картинками на сайте — найти баланс качества и размера изображений. 

Конечно, можно использовать специальные программы оптимизаторы, как-то уменьшать размер в фоторедакторе. Но это все не то. Предлагаю просто отказаться от устаревших форматов jpg и png. Вместо них использовать webp. 

Пример

Слева png, справа webp — никакой разницы

На скриншоте я показал одно и то же изображение разрешением 800х1873 px, но в разных форматах. Открыл я их в браузере Gogole Chrome. Слева — png, справа — webp. Визуально разница абсолютно не ощутима, но что по весу? На На сриншоте ниже видно, что файлы webp весят около 100 кб, а png — 800 кб. 

Файлы png весят почти в 8 раз больше webp

Браузер Firefox поддерживает отображение webp. Доказательство ниже↓

Открыл изображение в Firefox

Opera тоже понимает ↓

Открыл изображение в Opera

Кроме того, этот формат используют все крупные уомпании, начиная с prom.ua и rozetka, заканчивая Google и Aliexpress. Это что-то да значит, правда?

Как сохранять фотографии в формате webp

Когда я работал на Windows и пользовался Photoshop, столкнулся с проблемой — фотошоп не понимал формат webp. Может сейчас все изменилось, но тогда я не хотел особо углубляться в этот вопрос и просто пользовался старым добрым Gimp. Он отлично открывает и работает с изображениями webp.

GIMP для работы с webp изображениями

Также через Гимп можно и конвертировать png, jpg и другие форматы в webp. Делается это через экспорт. Достаточно просто написать в конце имени файла .webp

Экспорт изображения в Gimp

Я пишу эту заметку в Google Docs и под каждый написанный блок текста иду делать скриншот, после чего сразу вставляю его в документ. Так вот сейчас я понял, что все скриншоты сделаны в формате png. В другом мой инструмент для снятия снимков с экрана не умеет. Думаю, надо это быстренько исправить. 

Для этого я не буду далеко ходить. Просто пишу «png to webp» в посиковой строке Google. И сразу нахожу нужные онлайн сервисы. Попробуем 2 первых.

Поиск решения в Google

Чтобы быстро забрать все изображения из Google Документа, скачаю его как веб страницу. Жму Файл → Скачать → Веб-страница (HTML, ZIP-архив).

Как скачать все изображения из Google Документа

И там будет папочка images

Скачанный архив с документом и изображениями

Первый сервис не захотел за бесплатно конвертировать сразу все изображения одним махом. Второй на бесплатном тарифе разрешает одновременно конвертировать два изображения за раз. Что ж, лучше, чем первый. 

Конвертация изображений через онлайн сервис

Результат конвертации

Результат конвертации

Итоговая разница — было 8 изображений в формате PNG общим весом 3Мб. После конвертации их в webp, общий вес снизился до 1.4Мб.

Изображения стали меньше весить

Думаю, Гимп с этим справится лучше. Давайте проверим. 

Сделал то же самое руками в Gimp, стало еще лучше

Так и есть. Теперь эти изображения весят 542 Кб. В 4 раза меньше, чем в начале. Единственный минус, этот формат не поддерживается Google Документами и вставить эти скриншоты в текст здесь не получится. Зато на сайт загрузить — самое оно. 

WordPress по умолчанию не дает загрузить webp изображение

WordPress ошибка с загрузкой webp-изображений

Узнал об этом уже после того, как написал эту статью. Ну ничего, все решается. В данном случае, мне хватило просто плагина. Кстати, есть огромное количество плагинов для wordpress, которые позволяют конвертировать изображения в webp формат. Но это уже совсем другая история. Сейчас нужно просто загрузить уже готовое изображение на сайт. Для этого нужно просто установить и активировать этот плагин → https://ru.wordpress.org/plugins/allow-webp-image/