3 шага по оптимизации изображений
Итак, в продолжении статьи о тестировании скорости загрузки разберём самую востребованную меру, реализация которой даст ощутимый прирост к скорости загрузки страниц вашего сайта.
В данной статье я, Поспелов Александр, расскажу о 3 простых шагах оптимизации изображений.
Сейчас Google всё больше акцентирует внимание на использовании изображений новых форматов: WebP, Jpeg XR, Jpeg 2000.
Данная рекомендация не новая и уже долгое время висит в рекомендациях Google для вебмастеров. Как правило, в PageSpeed Insights - это одна из первых и самых эффективных мер по оптимизации скорости загрузки.
И здесь нас интересует 2 момента:
Специалисты Google убеждены, что каждый из новых форматов эффективнее не менее 30% относительно устаревших форматов. По поддержке, ответ, и вовсе, мог бы быть неутешительным, т.к. Jpeg XR, Jpeg 2000 поддерживаются несколькими браузерами, оставаясь "невидимыми" для остальных.
Однако, по обоим выше озвученным вопросам есть положительное заключение. Но для этого стоит пристальнее взглянуть на формат WebP:
- Поддерживается, практически, всеми современными браузерами.
- Имеет эффективные характеристики сжатия размера изображений.
Для примера прикрепляю две фотографии.
Одна из них объёмом 2,79Мб. Вторая - 160Кб.
На этом моменте мы планомерно подошли к первому пункту нашего плана по оптимизации изображений:
I. Использование WebP и сжатие изображений
Если у вас небольшой сайт или для продвижения вам важны только некоторые посадочные, воспользуйтесь сервисом squoosh для их ручной оптимизации. Выберите формат WebP и пресет для сжатия. Средний результат сжатия от 85 до 95% от исходного размера изображения.
В случае, если вы работаете с большим количеством графики на сайте, приемлемый для вас вариант - это сжатие через плагины и сборщики Imagemin для Webpack, Gulp, Grunt.
II. Lazy-load для изображений вне первого экрана
Lazy-load – позволяет загружать изображения по мере необходимости. Такой подход освобождает ресурсы во время начальной загрузки страницы.
Изображения, которые расположены вне первого экрана во время загрузки, это лучшая возможность сэкономить ресурсы для отрисовки страницы.
Будьте аккуратными в использовании Lazy-load, данные изображения не будут считываться поисковыми системами при загрузке страницы. Однако, вы всегда можете создать дополнительный файл ".xml" со всеми изображениями для попадания в индекс поисковых систем.
III. Использование ресайзера
Из-за высокой популярности адаптивных сайтов и приоритета mobile-first, растёт запрос на облегчение и ускорение мобильных версий.
Использование одного и того же изображения, и для десктопа, и для мобильных требует большой нагрузки на сеть и ресурсы пользователя. Чтобы этого избежать вам потребуется иметь уже сформированные копии изображений в 3-4 раза меньше по размеру, чем для десктопе.Обеспечить ресайз изображений можно с помощью npm модуля sharp, imagemagick, thumbor и cloudinary.
Комментарий недоступен
В iOS 14 поддерживает уже
Скажем так: на смену допотопным алгоритмам сжатия для картинок пришли видеокодеки. И новые форматы (хотя какие они новые, тому же WebP больше 10 лет) намного эффективнее старых.
Беда в том, что HEIC не поддерживается Виндой, а WebP - Safari. Учитывая, что в рамках SEO выхлопа от новых форматов реально нету, тратить на это ресурсы лично я не буду.
*полез на антресоли за стопкой jpeg, gif, png и svg*
Видеокодеки хороши для сжатия динамический изображений на низком битрейте. Это значит, что им не сильно требуется мелкие детали, потому что их не будет никто рассматривать на быстро меняющейся картинке. Так, браузеры уже внедряют AVIF — это аналог HEIC, только свободный от патентов. Но в плане будущего формата изображений особенно интересно выглядит JPEG XL — он добавляет кучу новых фич, обратно совместим со старым jpeg (есть режим, из которого можно перекодировать в старый jpeg без потерь с побайтовой точностью). Но на низком битрейте AVIF рвёт всех. WebP2 тоже планируют развивать примерно в ту же сторону.
Все не так трагично. Webp можно и не использовать, если картинки сжаты.
Скачиваете себе на комп FileOptimizer, чуть разбираетесь в настройках и можно пересжать хоть миллион картинок.
Естественно, на хосте нужно будет заменить содержимое папок, где они лежат.
Ошибок по pagespeed Insights изображения больше не покажут.
Но... Миниатюры для мобильников тоже нужно сжимать! То есть, все картинки на хостинге нужно сжать.
Это самый простой и наименее затратный способ увеличения скорости вашего магазина (вообще сайта) за счёт оптимизации изображений.
Пока что нельзя загружать чистый WEBP. На Сафари будет куча битых картинок. С айфонов и всей продукции Эпл. Но скоро они тоже будут поддерживать.
Когда пишете про lazy load, не приводите иллюстрацию к атрибуту loading="lazy". Это разные технологии.
И проблема с WebP и Safari решается элементарно - с помощью тега picture