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 поддерживает уже
лучше б в винду поддержку heic прикрутили. Ибо рвёт он webp по всем параметрам
Да как бы уже AVIF прикручивают (это можно сказать аналог HEIC), а JPEG XL на подходе. А WebP сжимает не сильно лучше хорошо оптимзированных старых форматов, а также имеет проблемы вроде размытия красного цвета.
Скажем так: на смену допотопным алгоритмам сжатия для картинок пришли видеокодеки. И новые форматы (хотя какие они новые, тому же WebP больше 10 лет) намного эффективнее старых.
Беда в том, что HEIC не поддерживается Виндой, а WebP - Safari. Учитывая, что в рамках SEO выхлопа от новых форматов реально нету, тратить на это ресурсы лично я не буду.
*полез на антресоли за стопкой jpeg, gif, png и svg*
Видеокодеки хороши для сжатия динамический изображений на низком битрейте. Это значит, что им не сильно требуется мелкие детали, потому что их не будет никто рассматривать на быстро меняющейся картинке. Так, браузеры уже внедряют AVIF — это аналог HEIC, только свободный от патентов. Но в плане будущего формата изображений особенно интересно выглядит JPEG XL — он добавляет кучу новых фич, обратно совместим со старым jpeg (есть режим, из которого можно перекодировать в старый jpeg без потерь с побайтовой точностью). Но на низком битрейте AVIF рвёт всех. WebP2 тоже планируют развивать примерно в ту же сторону.
видеокодеков вроде 2 типа - одни для таймлайна, другие работающие покадрово?
И насколько я знаю, heic/heif - уже заточка под 4k и 8k.
Я не знаю, зачем такое для веб, но судя по тестовым картинкам - мазни там намного меньше, чем в webp, и никаких особых артефактов
Все не так трагично. Webp можно и не использовать, если картинки сжаты.
Скачиваете себе на комп FileOptimizer, чуть разбираетесь в настройках и можно пересжать хоть миллион картинок.
Естественно, на хосте нужно будет заменить содержимое папок, где они лежат.
Ошибок по pagespeed Insights изображения больше не покажут.
Но... Миниатюры для мобильников тоже нужно сжимать! То есть, все картинки на хостинге нужно сжать.
Это самый простой и наименее затратный способ увеличения скорости вашего магазина (вообще сайта) за счёт оптимизации изображений.
Пока что нельзя загружать чистый WEBP. На Сафари будет куча битых картинок. С айфонов и всей продукции Эпл. Но скоро они тоже будут поддерживать.
Там слишком сложностей много сейчас. Вы пишете "скоро", обещают уже давно. Пока нужно писать условие if, подменять изображения. Я с этим геммором связываться не люблю, проще картинки пачкой пересжать, и хер с ними, ошибка исчезает, скорость увеличивается.
Ну, у вас просто нет сафари, чтобы понять это.
А тег picture всю проблему решает.
Он то решает, но, допустим, я (вы, они) не знаю как это сделать. Гуглить желания нет. Решение - сжать картинки пачкой без потери качества. Это для ленивых.
На wp есть short pixel, который решает вопрос с заменой изображений для браузеров с webp. Можно и самому написать это решение для любой cms, или без cms, но это ж морочиться нужно. Или искать. А тут все быстро. jpeg поддерживается всеми браузерами, сжал картинки и мороки нет.
Когда пишете про lazy load, не приводите иллюстрацию к атрибуту loading="lazy". Это разные технологии.
И проблема с WebP и Safari решается элементарно - с помощью тега picture
До сих пор по старинки сжимаю фото в фотошопе переходя на "Сохранить для Вэб..." и уже там подбираю вес/качество файла.
Это уже не лучший способ в ряде случаев.
а) cms или внешний сервис картинку может дополнительно пережать, а артефакты в том же jpeg только накапливаются;
б) всё те же встроенные ресайзеры. А если их нет, то качество масштабированной картинки всё равно отличается от исходной.
Это неплохо для сохранения, но такие картинки можно ужать ещё больше. Так, утилиты вроде jpegtran и mozjpeg могут ужать jpeg где-то на 10% без потерь (можно и ещё больше с извращениями). PNG вообще часто можно оптимизировать на десятки процентов. Например, pingo это умеет делать с хорошим балансом скорости работы и качества. А вот гифки фотошоп сжимает на удивление хорошо. Но они устарели и не нужны примерно никогда.
Если не ошибаюсь, то расширение для сервера pagespeed от гугл решает проблему с WebP на устройствах не поддерживающих его. Благо наш хостинг его поддерживает. Включил - и все хорошо.
Lazyload древняя тема, в каком году он первый раз появился? В 2010?
Конечно желательно юзать, но многие ли его используют?
Пережатие - факт для разработчика, плюс большинство CMS это поддерживают. Размер изображения генерируется согласно размерам области отображения.
А теперь накинем на вентилятор :)
Одна проблема: насколько все это влияет на ранжирование? (вы же с какой-то целью оптимизируете изображения?)
Часто сталкиваюсь с негодованием SEO специалистов о скорости загрузки и онанизмом на Google PageSpeed Insights (далее GPSI), но насколько все это реально влияет на выдачу?
Тут мы не говорим об оверсайзе изображений в формате BMP по 10мб, не говорим о сайтах на темах и page builders с хламом в CSS и JS, где переопределяются стили и функции по 3 раза. Рассмотрим обычный сайт с кастомной темой с ранком GPSI 50-80.
По моему личному опыту доведение до 100/100 это утопия. Реального прироста не почувствовал.
Хотя бы взять внедрение сторонних метрик и аналитик - внешние скрипты это плохо по мнению GPSI, но подключение их со своего сервера и добавление Cron для обновления файлов - это же жесть.
Да, можно подключить CDN, но на практике это дополнительная прокладка, которая по пузомеркам выдала бОльшую оценку, но на деле сайт стал дольше загружаться для пользователя.
Мой личный вывод: можно использовать и JPG, но стараться оптимизировать все по максимуму, но без фанатизма.
Очень интересно было бы услышать мнение коллег.
Вы частично правы. Да можно оптимизировать другие факторы - сделать отложенную загрузку Метрики, виджетов ВК. И тогда даже с несжатым jpg получить 96. Все индивидуально для каждого сайта.
Насчёт позиций - важно ускорять реальную скорость загрузки. А то есть умельцы, которые за 50$ "повышают" пейджспид - делают подмену для бота lighthouse. У сайта 100 баллов, а страница загружается 3,5 сёк.
Недавно исправлял одному клиенту. Ему "по знакомству" такое начудили
Потому что не пузомерками нужно оценивать скорость загрузки 😂
Webp уже устарел. Новый фаворит - avif
кодек то тот же, что и у webp. И проблемы те же.
Нет.
Спасибо за полезную информацию.
Кстати, в Тильде уже есть эти функции по умолчанию .
Тильда автоматически конвертирует все фотографии на сайте в WebP. Дополнительно переводить картинки не нужно.
А почему на вашем сайте autodrive.ru или на autodrive-agency.ru не используется WEBP?
то есть отсутствие активной ссылки на Google Partners и Яндекс партнер (не уверен что у второго есть) вас не смутило? :)
Мне кажется на этом можно уже заканчивать.
Я бы дальше не смотрел. :)
Мда, я не обратил внимание на ссылки.)
А как сжимаете изображение, если нужно сохранить информацию о месте съемки?
а чего не exif использовать?
спасибо, посмотрю
Не ставил себе таких задач. Попробуйте https://www.iloveimg.com/
А exif не теряется при сжатии. Если его не удалять.
У webp два основных недостатка:
1. Он не поддерживается нативно в ОС (для mac OS нужно ставить webpquicklook, а для windows "Расширения для изображений Webp")
2. Невозможно загрузить webp файлы в соцсети, потому что этот формат практически никто не поддерживает
Я может быть немного не в тему вот тут https://johnmorris.substack.com/p/how-to-use-ai-for-content-creation мужик дал ссылки на два генератора изображений, которые используют ИИ. Может быть полезно для тех, кому нужно уникальное изображение.
Какие-то опять статьи ради статей.
Ваши сайты, о которых вы писали в прошлой статье, почему они в красной зоне PageSpeed Insights? Почему сайт загружается 16 секунд?
Показатели, прямо скажем, не очень у ваших проектов.
А есть примеры у вас, где PageSpeed в зеленой зоне?