Каждый пользователь не любит, когда сайт тормозит и если сайт будет медленно загружаться. Кому ж это понравиться? На каждом веб-сайте есть изображения и, чтобы они быстро грузились, необходимо использовать современные форматы. К примеру PNG, JPG появились в 1992–1995 годах.
Технологии развивались и в 2010 году Google выпустила формат изображения Webp, который весит на 26% меньше1, а в 2019 разработали AVIF2 формат. Они имеют поддержку во всех современных браузерах3.
Сейчас лучше использовать изображения для сайта в WebP и AVIF, так как они меньше весят и имеют лучшее сжатие.
Наглядное сравнение изображений в форматах AVIF, WebP, PNG, JPG (JPEG)
У нас есть замечательный кот, сгенерированной нейросетью. На нём и будем смотреть разницу.
На изображениях сверху справа вывел информацию о его весе.
2,1 МБ — довольно большой размер файла изображения. Однако его можно значительно уменьшить, воспользовавшись сервисом оптимизации изображений.
А вы заметили разницу в качестве изображений? Да, небольшая есть. Но на сколько это критично? Если конечно, вы не фотограф и вам нужно лучшее качество, то это, конечно, PNG, во всех остальных случаях можно использовать современные форматы и не раздражать пользователей сайта долгой загрузкой. А если у них плохой интернет? Все их нервные клетки и ваш лид потеряны!
Нужна помощь в оптимизации изображений?
Комплексная оптимизация сайта
Позволит увиличить посещаемость сайта из поисковых систем, благодаря технической SEO оптимизации.
Таблица сравнения форматов изображений
Характеристика | JPG | PNG | WebP | AVIF |
---|---|---|---|---|
Размер файла | Средний | Большой | Меньше JPG и PNG | Меньше всех |
Поддержка прозрачности фона | Нет | Да | Да | Да |
Максимальное разрешение (пикселей) | 65535 x 65535 | 32767 x 32767 | 16383 x 16383 | 65536 x 65536 |
Поддержка браузерами | Высокая | Высокая | Высокая, но ниже чем JPG/PNG 4 | Высокая, но ниже чем JPG/PNG/Webp5 |
Качество изображения | Среднее | Высокое | Высокое | Очень высокое |
Таблица с размерами изображений в процентном соотношении
Формат | Размер файла | Размер в % от PNG |
---|---|---|
PNG | 2100 КБ | 100% |
Оптимизированный PNG | 494 КБ | 23.5% |
JPG | 254 КБ | 12.1% |
WebP | 106 КБ | 5.0% |
AVIF | 82 КБ | 3.9% |
Основные выводы
- Новые форматы WebP и AVIF обеспечивают значительно более высокую степень сжатия по сравнению с исходными форматами PNG и JPEG.
- Формат изображений AVIF демонстрирует наибольшую эффективность сжатия, занимая всего 3.9% от размера исходного PNG и 51.0% от размера исходного JPEG.
- WebP также показывает хорошие результаты, занимая 5.0% от размера исходного PNG и 68.6% от размера исходного JPEG.
- Оптимизированный PNG с помощью сервиса Tiny PNG занимает 23.5% от размера исходного PNG, что также является значительным улучшением, если у вас нет возможности подключить Webp, AVIF.
Таким образом, новые форматы WebP и AVIF позволяют достичь существенно меньших размеров файлов по сравнению с традиционными PNG и JPEG.
Посмотрим разницу в весе изображений на реальном сайте
За пример для сравнения в весе изображений на реальном сайте возьмем один из недавних кейсов по проекту E‑bee. На данном сайте мы использовали для всех изображений форматы PNG, JPG и конечно WebP, AVIF.
Как это работает? При разработке сайта мы прописали условия, если браузер пользователя поддерживает данные форматы, то изображение загружается в них.
Отключаем поддержку WebP, AVIF и получаем вес картинок 146КБ.
Теперь смотрим сколько весит сайт, если браузер пользователя поддерживает WebP. Вес картинок 83.4 КБ.
Настало время AVIF, вес в этом случае 46 КБ
Делайте выводы. В данном примере картинок на сайте не так много, а что если их будет больше? Возьмём для примера сайт где 400 изображений.
А сколько можно было бы сэкономить нервов пользователей на этом сайте? Изменилось ли количество лидов? Решайте сами.
Нужна помощь в оптимизации изображений?
Комплексная оптизация сайта
Позволит увиличить посещаемость сайта из поисковых систем, благодаря технической SEO оптимизации.