Главное Свежее Вакансии Образование
1 414 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как конвертировать все картинки в WebP и ускорить сайт?

В этой статье мы коснемся такого формата графики, как WebP и основ работы с ним. Расскажем, почему стоит перенести все картинки на интернет-ресурсе в данный вид и чем это полезно для повышения уровня продаж.

Формат WebP появился сравнительно недавно — в 2010 году, но уже успел завоевать горячую любовь интернет пользователей и веб-мастеров со всего мира. По поводу эффективности его применения существует немало устойчивых мифов, с которыми мы постараемся разобраться в данной статье.

Что такое WebP ?


Данный формат сжатия, изобретенный компанией Google почти 10 лет назад, представляет собой уменьшенную графику в интернете без потери качества. Такие файлы меньшего размера, чем предшественники (png, jpg, jpeg, gif) и по своим характеристикам относятся к растровым изображениям.

На данный момент картинку webp могут корректно открыть несколько популярных интернет-браузеров: Google Chrome, Mozilla Firefox, Яндекс.Браузер и Opera. Если графическое изображение было сохранено на компьютер, то для его просмотра понадобится отдельный софт, например, Adobe Photoshop, GIMP, IrfanView, ImageMagick и аналогичных программ.

Чем Webp отличается от Jpeg или Png ?


  • в сравнении с jpg (jpeg) webp прекрасно сжимается до минимального размера без существенной потери качества;
  • webp лучше передает плавные градиенты их их границы, а вот jpg сильно уступает в этом;
  • размер файлов WebP в среднем на 30% меньше;
  • WebP в отличии от png поддерживает анимацию;
  • WebP картинка может иметь прозрачный вид.


сравнение уровня сжатия

Файлы рассматриваемого формата изображений прекрасно себя чувствую при отсутствии большого количества мелких деталей. Файл WebP наилучшим образом раскрывается, если на картинке много одноцветных областей и крупных объектов. А вот нечеткие детали, наоборот, теряют фактуру и при обилии маленьких деталей границы размываются.

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

Как автоматизировать конвертацию ?


Для наиболее удовлетворительного результата мы рекомендуем автоматизировать конвертацию всей графики с помощью дополнительных плагинов к вашей CMS. Тем самым Вы освободите себя от рутинных задач конвертации всей графики на сайте.


Если для Вашей CMS нет модулей для конвертации или у Вас самописный сайт, можно воспользоваться виртуальным хостингом ASKO.host, который помогает веб-мастерам разгонять свой сайт эффективно и не тратя при этом кучу времени.

Какие это дает преимущества:

  • нет необходимости заниматься настройкой вручную — все делает наш сервер;
  • картинки и графика в WebP весят меньше файлов jpeg\png, а значит страницы сайта прогружаются быстрее, что существенно снижает показатели «Отказов» на сайте (когда пользователь не стал дожидаться загрузки страницы и покинул ее) и положительно влияет на ранжирование в поисковой выдаче;
  • ускоренная загрузка изображений также способствует комфорту пользователей во время посещения сайта, что подталкивает их на совершение целевого действия на ресурсе;
  • нет нужды в сложной и тонкой настройке, изменении кода сайта и т.д. — оптимизация файлов автоматическая.


Хостинг с авто-оптимизацией WebP

ASKO.host позволяет конвертировать WebP картинки в автоматическом режиме, без необходимости прямого участия в этом процессе. Не имеет значения, поддерживает ли конкретный браузер данный формат. На серверах ASKO.host установлено ПО, которое конвертирует графику в файлы WebP качественно и быстро.

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

Переход на WebP


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

Владельцы своего бизнеса теряют некоторый процент прибыли всего лишь упуская этот важный момент. К 2020 году 3 из 5 открывающихся коммерческих организаций имеют либо частичное, либо абсолютное представительство в интернете в виде собственного сайта. И, судя по текущей динамике и актуальной статистике, эти цифры будут продолжать расти и дальше. А значит эффективная и работоспособная площадка в режиме онлайн, открывающая потенциальным покупателям доступ к услугам и товарам 24\7, никому не помешает. Ускорение загрузки страниц безусловно позитивно скажется на желании людей тратить деньги именно на этом сайте.

Наш канал на Дзен

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Alex Beglov
У WebP есть такой нюанс - не все браузеры его поддерживают. К примеру, iOS Safari, обычный Safari, IE - не поддерживают WebP. https://caniuse.com/#feat=webp Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти И отдавать нужную версию в зависимости от браузера. А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла. У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку. https://optipic.io/ru/cdn/ Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp. Получается совсем все просто и красиво, да и недорого))
Ответить
Выбрать файл
Не пропустите публикацию!
WeboMax
Веб-студия
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.