В большинстве случае основная и первостепенная проблема долгой загрузки сайта связана с большим размером изображений. Используя советы ниже вы сможете увеличить скорость сайта за несколько минут.
Каждый клиент хочет видеть свой сайт очень привлекательным. Без больших и ярких изображений этого добиться сложно, а поскольку на анимацию у клиента часто не хватает либо денег, либо фантазии, на сайте появляются нерационально тяжелые изображения.
Хотели бы чтобы ваши большие фотографии на самом деле быстро грузились и занимали мало места на хостинге? Уменьшение размера ваших изображений возможно до 70%!
Что такое WebP
Первый раз WebP анонсировала команда Google в 2010 году, представив новый формат изображений. Youtube и eBay сразу начали использовать такой формат WebP на своих сайтах.
Воспользуясь DevTools мы увидим уже на главной странице интернет-магазина eBay изображения в этом формате.
Если взглянуть на статистику, то по последним данным на httparchive.org (октябрь 2017) больше всего объём страницы увеличивают изображения. Соответственно, чтобы ваш сайт грузился очень быстро, надо с этим что-то делать. И формат изображений WebP оптимально подходит для этого.
Поддержка WebP браузерами
Не все современные браузеры поддерживают формат WebP. Например, Firefox до сих пор не знает, что это такое и как работает, ещё проблемы могут быть в Safari. Правда, есть вариант показывать обычный jpg тем браузерам, которые на поддерживают этот формат и ждать.
Согласно сайту caniuse.com мы посмотрим поддержку современными браузерами WebP:
Но, если вы разрабатываете сайт или хотите создать сайт для своего бизнеса, не стоит расстраиваться, потому что браузер Chrome, хотим мы этого или нет, монополист на рынке по данный w3schools.com
Так что, если вы хотите идти в ногу со временем и технологиями, используйте то, что бежит впереди и задаёт темп.
Недавно мы столкнулись с тем, что внедрив на сайт клиента формат WebP, некоторые из его посетителей совсем не видели изображений, потому что заходили на сайт с IPhone. Пришлось искать решение, чтобы всем было удобно и красиво.
Зайдём в аналитику и увидим, что на одном из наших проектов немного другая ситуация с браузерами. Но, если Yandex Browser ещё и можно не брать в расчёт, потому что он использует базу хрома, то, если мы переведём все картинки этого проекта в WebP без учёта Safari, у нас могут быть проблемы с отображением и потерей потенциальных клиентов.
Всегда смотрите аналитику того проекта, который вы хотите перевести на новую технологию.
Конвертер WebP
Для теста сжатия ваших больших и красивых изображений рекомендую воспользоваться сайтом shortpixel.com
Мой тест ужал изображение jpg в webp с уменьшением размера в 92% с 0.98мб до 77 кб. При всём при том качество изображения осталось неизменным.
Кстати, на этом сайте выходное изображение выдаётся в формате jpg, поэтому проблем с отображением на таких браузерах как Firefox или Safari быть не должно.
Проверьте ваш сайт
..может вам WebP и не надо.
Откройте в вашем браузере DevTools и выберите вкладку Audits (Аудиты). Браузер просканирует ваш сайт и покажет текущие проблемы.
На примере нашего сайта мы увидим, что конвертирование изображений в WebP позволит увеличить скорость загрузки на 3 секунды.
Будем работать с WebP теснее.
Если вам не хочется настраивать сжатие, можно сжимать фотографии с помощью online-сервисов.
Онлайн-сервисы конвертации в WebP
Если вы работаете с сайтами и познали удовольствие в работе с форматом WebP, вам надо уметь сохранять файлы в таком формате.
Используя конвертацию в webp с помощью онлайн-сервисов вы обязательно столкнётесь с разнообразными изощрёнными ограничениями для бесплатной конвертации:
- ограничение между конвертациями
- максимальное количество конвертаций за один раз
и другие не очень приятные вещи, за которые вам предложат заплатить.
WebP плагин для фотошопа
На гитхабе есть решение для конвертации: https://github.com/webmproject/WebPShop/releases
Инструкция установки плагина
- Переходим по ссылке выше
- Скачиваем файл WebPShop.8bi
- Копируем файл в папку с плагином вашего фотошопа, например: Program FilesAdobe Photoshop CC 2019Plug-ins
- Запускаем фотошоп
Теперь при нажатии на кнопки Ctrl + Shift + S для сохранения файла в формате WebP, вы увидите в списке нужный нам формат.
Для подтверждения того, что сжатие очень хорошее, я взял изображение в формате png и получил следующий результат:
[one_half]Исходник в PNG: 264 кб.
[/one_half]
[one_half] После сохранения в формат WebP: 13 кб
[/one_half]
Как можно увидеть, качество изображения не ухудшилось, не смотря на значительное уменьшение размера файла.
Наши другие полезные статьи
- Эффект «сарафанного радио» в продвижении интернет-ресурса (крауд-маркетинг)
- Чеклист 2020 по оценке производительности вашего сайта
- Юзабилити аудит сайта «Необычные экскурсии Парижа»
- Важные функции для интернет-магазина
- Проблема дублирующих страниц
- Юзабилити аудит интернет-магазина Цифровой техники
- Как очистить кэш браузера
- Как написать эффективное объявление для контекстной рекламы
- Поведенческие факторы, инструменты влияния на ПС
- Юзабилити аудит сайта Сантехника