4 основных совета по оптимизации изображений

4 основных совета по оптимизации изображений

От автора: неважно, делаете вы полноразмерные eCommerce сайты или просто онлайн домик для своего портфолио по дизайну, в этой статье вы узнаете пару советов из книги Addy о том, как делается оптимизация изображения.

Будьте избирательны и предварительно загружайте критические изображения

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

Здесь нам поможет resource hint «preload». Preload – способ дать подсказку клиенту, что данный файл необходимо загрузить еще до того, как парсер обнаружит его. Его можно использовать почти для чего угодно, и он отлично подходит для предварительной загрузки критических изображений. Ниже представлен пример использования в теге с предварительной загрузкой изображения баннера:

<link rel="preload" href="/img/logo.svg" as="image">

Preload также можно использовать в HTTP заголовке:

Link: </img/logo.svg>; rel=preload; as=image

Ниже представлено 2 скриншота с загрузкой одной страницы в Chrome. Первый сценарий использует preload для загрузки баннера, второй – нет.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В примере с preload баннер появляется в окне браузера на полсекунды быстрее. Все из-за одной строки, которая дала браузеру преимущество.

Автоматически упрощайте SVG

Оптимизация SVG отличается от оптимизации других типов изображений. В отличие от JPEG или PNG, SVG состоит из текста, в частности из XML разметки. То есть к ним можно и нужно применить текстовую оптимизацию (например, минификацию, сжатие gzip/Brotli). Помимо этого, сбить вес SVG можно с помощью оптимизаторов типа SVGO.

А что если вы не просто потребляете векторную графику, а создаете ее? Если вы пользуетесь Illustrator, то вы можете автоматически упрощать изображения (т.е. уменьшать количество точек в путях в диалоговом окне Simplify).

Данное диалоговое окно можно найти в меню Illustrator CC Object>Path>Simplify. Удалить дополнительные точки в путях можно, уменьшив Curve Precision (и настроив Angle Threshold – необязательно). В нашем случае вы заметите, что уменьшение Curve Precision всего на 6% удаляет 54 точки. Если использовать инструмент разумно, можно даже улучшить внешний вид изображения.

Но умный человек сразу поймет, что не стоит злоупотреблять данным инструментом. Уменьшите Curve Precision слишком сильно, и ваша аккуратно созданная работа превратится в кляксу. Найдите золотую середину и получите преимущество.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Конвертируйте анимированные GIF в видео

Всем нравятся хорошо анимированные GIF. Они эффективно передают любое настроение, но могут весить очень много. Оптимизаторы изображений типа gifsicle помогут срезать лишние килобайты. Но лучше GIF конвертировать в видео и вставлять их в HTML5 тег video. Для этой задачи хорошо подходит утилита командной строки ffmpeg:

ffmpeg -i animated.gif -b:v 512K animated.webm
ffmpeg -i animated.gif -b:v 512K animated.ogv
ffmpeg -i animated.gif -b:v 512K animated.mp4

Команды выше принимают исходный GIF (animated.gif) как входной параметр в аргументе –I и создают видео с переменным битрейтом (максимум 512Кбит/с). Мы провели тест с GIF весом 989Кб и уменьшили его до MP4 весом 155Кб, OGV весом 109Кб и WebM весом 85Кб. Все видео файлы сравнимы по качеству с оригинальным GIF. Благодаря широкой поддержке тега video в браузерах, можно использовать все 3 формата:

<video preload="none">
  <source src="/videos/animated.webm" type="video/webm">
  <source src="/videos/animated.ogv" type="video/ogg">
  <source src="/videos/animated.mp4" type="video/mp4">
</video>

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

Если у вас нет FFmpeg, или вы не знаете, что это, попробуйте. Он легко устанавливается почти через все пакетные менеджеры типа Homebrew или Chocolatey операционной системы.

Используйте ленивую загрузку с помощью IntersectionObserver

Вы должны уже были использовать ленивую загрузку изображений. Однако множество скриптов ленивой загрузки используют тяжелые для CPU обработчики события scroll. Такие методы замедляют взаимодействие на странице. Старое оборудование с меньшими вычислительными мощностями еще больше подвержено болезненным последствиям такого кода. Уменьшение количества выполнений действительно помогает в определенной степени, но решение так и остается беспорядочным и неэффективным для определения, находится ли элемент в области просмотра.

К счастью, Intersection Observer API дает нам упрощенный и намного более эффективный способ определения, попадает элемент в область просмотра или нет. Пример базовой разметки для ленивой загрузки изображения:

<img class="lazy" data-src="/images/lazy-loaded-image.jpg" src="/images/placeholder.jpg" alt="I'm lazy." width="320" height="240">

Мы загружаем плейсхолдер изображение в атрибут src и храним URL на изображение, которое хотим лениво загрузить в атрибуте data-src. В довершение всего, мы присваиваем тегу img класс ленивой загрузки для простого доступа через querySelectorAll. Дальше просто используем код ниже:

document.addEventListener("DOMContentLoaded", function(){
  if("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in  window.IntersectionObserverEntry.prototype){
 elements = document.querySelectorAll("img.lazy");

 var imageObserver = new IntersectionObserver(function(entries, observer){
 entries.forEach(function(entry){
 if(entry.isIntersecting){
 entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
 entry.target.classList.remove("lazy");
 imageObserver.unobserve(entry.target);
 }
 });
 });

 elements.forEach(function(image){
 imageObserver.observe(image);
 });
  }
});

Код привязан к событию DOMContentLoaded объекта document. Код проверяет поддержку Intersection Observer в текущем браузере. Если она есть, мы берем все теги img с классом lazy с помощью querySelectorAll и прикрепляем к ним observers.

Observer хранит ссылки на элементы, за которыми мы наблюдаем (entries) и на самого себя. Код зависит от значений isIntersecting во всех observer entry. Пока наблюдаемый элемент за пределами области просмотра isIntersecting будет возвращать 0. Как только элемент входит в область видимости, значение будет больше 0. Именно в этот момент мы берем контент атрибута data-src и подставляем его в атрибут src и удаляем класс lazy. После ленивой загрузки observer удаляется с изображения с помощью метода unobserve.

Процесс намного проще, чем возиться с обработчиками scroll. Но так как у Intersection Observer нет универсальной поддержки, необходимо добавлять фолбек. Если хотите взять этот скрипт, мы написали ленивый загрузчик, который использует Intersection Observer и старые методы в качестве фолбека. Можете посмотреть здесь.

Автор: Jeremy Wagner

Источник: https://www.creativebloq.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree