назад к блогу

Jpeg, jpeg progressive или webp? Что выбрать?

Изображения — то, без чего невозможно представить современную страницу в интернете. Картинки делают сайты живыми, понятными и эмоциональными. От размера и качества графических материалов напрямую зависит: 

  1. скорость загрузки и уровень конверсии
  2. количество свободного места на сервере
  3. позиция сайта в поисковой выдаче

Какой формат картинки на сайте считается оптимальным? По мнению наших разработчиков оптимальными можно считать такие форматы изображений: 

  • progressive jpeg — формат, который позволяет браузеру загружать изображение постепенно, постоянно отображая картинку с различным качеством от 0 до 100 процентов.
  • webp (произносится как weppy) — современный формат сжатия изображений, разработанный компанией Google в 2010 году. Помогает уменьшить «вес» изображения, но при этом сохранить высокое качество. 
На примерах ниже можно увидеть разницу между загрузкой изображения в формате jpeg, progressive jpeg, webp. 

Jpeg-изображение появляется на экране постепенно. Сначала небольшой кусочек картинки сверху, потом еще больше. Каждый кусок отображается в максимальном разрешении.



Progressive jpeg появляется весь сразу. Сначала картинка представляет собой набор огромных пикселей, в которых проглядывается силуэт загружаемого изображения. По ходу загрузки страницы разрешение картинки увеличивается. Разница между jpeg и progressive jpeg может быть незаметна на компьютерах с хорошим интернетом (более 100 Мбит/с), где изображения загружаются быстро. При слабом соединении разница между jpeg и progressive jpeg будет очевидна. 



Webp хорошо передает графику и фото, поддерживает прозрачность и анимацию. Первое изображение в формате jpeg весит 132 КБ. Этот же зимний лес в формате webp весит уже 96,5 КБ, качество при этом не меняется.


Как самостоятельно перевести jpeg в progressive jpeg и webp?

  1. Через https://convertio.co/ru/jpeg-webp/ , https://ezgif.com/jpg-to-webp
  2. Через онлайн-сервис https://www.jpeg.io/



Чтобы было понятно. У нас есть фотография готического собора в Милане. В формате jpeg изображение весит 3,16 МБ.


  • Пробуем преобразовать фотографию в webp через конвертатор https://convertio.co/ru/jpeg-webp/ . Разрешение остается таким же, размер уменьшается на 1МБ.

  • С помощью конвертации через https://ezgif.com/ можно оптимизировать изображение до 100 Кб с тем же разрешением. Первичная конвертация в webp выглядит так:


Оптимизируем до 100 КБ:



Смотрим итоговый размер и разрешение файла:



  • Переводим jpeg в progressive jpeg. Переходим на https://www.jpeg.io/. Загружаем изображение собора размером 4,50 МБ, скачиваем конвертированный файл в ZIP-формате.


Формат остается тем же jpeg, при этом размер файла уменьшается примерно на 500 КБ без потери качества.



Это несколько рабочих способов преобразования графических элементов. Чтобы загрузка картинок на сайте была быстрой и пользователи чаще совершали целевые действия, попробуйте поработать с изображениями. Используйте оптимальные форматы, значительно уменьшайте вес сайта и сокращайте расходы на хранение информации. Теперь вы знаете, как можно изменять форматы самостоятельно.





Вас может заинтересовать
16 февраля 2024
Хочется открыть службу доставки готовой еды, но есть сомнения?
разработка сайтов
16 февраля 2024
Хочется открыть службу доставки готовой еды, но есть сомнения?
e-commerce
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
дизайн
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
разработка сайтов
16 февраля 2024
8 секунд на размышление
разработка сайтов
16 февраля 2024
С чем интегрируется Гуляш?
e-commerce
15 февраля 2024
Как понять, что сайт устарел?
разработка сайтов
15 февраля 2024
4 приема для создания интересного контента
разработка сайтов
17 февраля 2024
Как правильно выбрать CMS? Чем они отличаются?
разработка сайтов
7 марта 2024
Кейс Level Up
дизайн
7 марта 2024
Кейс Level Up
разработка сайтов
1 марта 2024
Разработка корпоративного сайта AthleticsFit, сервиса автоматизации процессов доставки
разработка сайтов
1 марта 2024
Разработка корпоративного сайта AthleticsFit, сервиса автоматизации процессов доставки
e-commerce
26 февраля 2024
Умное управление доставкой с помощью модуля “Маршрутизация”
e-commerce
29 февраля 2024
От заявки до доставки
e-commerce
16 февраля 2024
Надёжная ИТ-система, где всё в одном месте
e-commerce
16 февраля 2024
Про нашу техподдержку
разработка сайтов
14 марта 2024
Автоматизация кухни с помощью планшета повара
e-commerce
18 марта 2024
Собственное исследование рынка разработки
дизайн
18 марта 2024
Собственное исследование рынка разработки
разработка сайтов
18 марта 2024
Собственное исследование рынка разработки
e-commerce
21 марта 2024
Всё, что нужно знать заказчику
разработка сайтов
25 марта 2024
Мобильное приложение для компании «Сибуголь»
дизайн
25 марта 2024
Мобильное приложение для компании «Сибуголь»
разработка сайтов
4 марта 2024
Модуль "Мобильное приложение курьера"
e-commerce
1 апреля 2024
Переход на систему “Гуляш”. Какое оборудование необходимо для подключения?
e-commerce
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
дизайн
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
разработка сайтов
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
e-commerce
15 апреля 2024
Прототип сайта и графический редактор Figma. Инструкция пользователя.
дизайн
15 апреля 2024
Прототип сайта и графический редактор Figma. Инструкция пользователя.
разработка сайтов
12 апреля 2024
Один год вместе с Goulash.tech
e-commerce
20 апреля 2024
Человек или робот: кто быстрее?
e-commerce
26 марта 2024
Дашборд — лучшее решение для собственника службы доставки
e-commerce
25 апреля 2024
Учимся принимать прототип вместе
дизайн
25 апреля 2024
Учимся принимать прототип вместе
разработка сайтов
25 апреля 2024
Учимся принимать прототип вместе
e-commerce
2 мая 2024
Главное про нашу техподдержку
разработка сайтов
13 мая 2024
Команда техподдержки: как устроена обработка заявок?
разработка сайтов
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
дизайн
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
разработка сайтов
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
дизайн
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
разработка сайтов
20 мая 2024
Goulash.tech и персонал
e-commerce
22 мая 2024
Почему важно поддерживать сайт компании в рабочем состоянии?
дизайн
22 мая 2024
Почему важно поддерживать сайт компании в рабочем состоянии?
разработка сайтов
24 мая 2024
Нужен новый баннер? Но, вы не можете позволить работу с дизайнером?
дизайн
3 июня 2024
Какие ошибки мешают зарабатывать с сайта?
разработка сайтов
3 июня 2024
Какие ошибки мешают зарабатывать с сайта?
e-commerce
5 июня 2024
Почему «Гуляш» лучше?
e-commerce
7 июня 2024
Как автоматизация влияет на увеличение скорости доставки?
e-commerce
7 июня 2024
Зачем веб-студия «Кибер-Невод» ходит по выставкам?
разработка сайтов
7 июня 2024
Зачем веб-студия «Кибер-Невод» ходит по выставкам?
e-commerce
11 июня 2024
Как модификаторы в «Гуляш» влияют на лояльность клиентов?
e-commerce
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Ваша заявка успешно отправлена!

Мы получили Вашу заявку и свяжемся с Вами в ближайшее время.