От автора: неважно, делаете вы полноразмерные 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.
