Что такое оптимизация фотографий

Что такое оптимизация изображений?

Дата публикации: 2017-05-22

От автора: оптимизация изображений – один из простейших способов ускорить сайт и повысить баллы в PageSpeed и YSlow. Несжатые и большие изображения много весят и вынуждают загружать пользователей ненужные данные. Оптимизация изображений снижает общий вес страницы, из-за чего страница грузится быстрее.

Зачем оптимизировать изображения?

Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

По большей части, эти изображения весят больше, чем нужно.

Что будет, если использовать неоптимизированные изображения

Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:

Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся

Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!

В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.

Браузер рендерит масштабированное изображение на странице.

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

Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.

Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.

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

Если эти шаги повторяются для нескольких изображений, то все накладывается и приводит к замедлению работы веб-страницы.

Что такое оптимизация изображений?

В практических целях мы сосредоточимся на проблемах, связанных с размером неоптимизированных изображений. Однако оптимизация изображений затрагивает и другие области (например, перестройку в браузере).

Проще говоря, меньше размер файла = меньше время загрузки = быстрее загружается страница. Основные концепции оптимизации изображений сводятся к размерам изображения (визуальный размер, ширина и высота) и сжатию (качество изображения и т.д.).

Разрешение сильно влияет на размер файла

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

Сжатие

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше

Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.

Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов

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

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

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

Еще больше оптимизации

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

Пользователи не видят метаданные, поэтому их нужно вырезать

В файле изображения есть слои данных, невидимые обычному пользователю. К таким данным относятся EXIF, информация о цветовом профиле, а также дата/положение.

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

Что будет, если использовать оптимизированные изображения

Уменьшенные и сжатые изображения быстрее загружаются и рендерятся

Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!

HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.

В результате изображения на сайте намного быстрее загружаются и рендерятся.

«Работа с масштабированными изображениями» и адаптивный веб

У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»

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

Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.

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

В адаптивном дизайне тоже придется масштабировать изображения

Так вы получите максимальную гибкость и адаптивный дизайн, а также оптимальное качество на дисплеях с высокой плотностью пикселей. GTmetrix позволяет увеличивать изображения в два раза относительно рендера на экране перед вычетом очков (страницы анализировались на вьюпорте 1024 х 768).

Также существует атрибут srcset, а также обработка адаптивных изображений в CMS. Эти темы стоит обсудить более подробно, но мы лучше напишем для этого отдельную статью.

А как вы оптимизируете изображения?

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Верстка-Мастер. Полное руководство

Овладейте современной адаптивной версткой с нуля

Источник

Как быстро сжать изображения на сайте

Текст от нашего партнера — OptiPic.

Ускорение сайта улучшает поведенческие факторы и поднимает конверсию. Для примера — график зависимости конверсии от времени загрузки, который основан на исследовании Walmart:

На графике видно: чем больше времени загружается страница, тем меньше клиентов совершают целевые действия на сайте. Ускорение сайта позволит улучшить конверсию и за счет этого получить больше потенциальных клиентов и увеличить выручку.

Как оптимизация изображений ускоряет сайт

Страница сайта обычно состоит из:

Если посмотреть в среднем картину в разрезе и сравнить объем в байтах всех этих типов ресурсов на странице, то можно увидеть, что изображения на страницах — это самая большая часть:

Оптимизация изображений позволяет значительно ускорить загрузку сайта. Сжатие уменьшает объем изображений на 70-98% без визуальной потери качества:

Что такое оптимизация изображения

Оптимизация изображений — это обработка файла с целью уменьшить его «вес», желательно без потери качества.

Для этого существует множество сложных алгоритмов. Суть их примерно одинакова — из файла удаляются все служебные данные, например, название программы, в котором сохранялся файл, а также специальным образом объединяются/сглаживаются похожие цвета. На выходе получается то же самое изображение, и невооруженным глазом даже не видно, что в нем что-то изменилось, но размер такого оптимизированного изображения будет в разы меньше оригинала.

При правильной обработке можно добиться уменьшения файла на 70-98% без видимой потери качества.

В результате оптимизации изображений вы получите

Как оптимизировать изображения

Первый способ — вручную оптимизировать каждое изображение на сайте. Для этого можно использовать Photoshop или другой инструмент. Обычно при сохранении изображения в редакторе есть пункт «сохранить для web».

Но это море потраченного времени, особенно если у вас не сотни, а тысячи изображений на сайте. Каждое изображение придется пересохранять вручную и заново заливать на сайт.

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

Дешевле и быстрее — автоматизировать процесс

Сервис OptiPic.io специально предназначен для решения этой проблемы.
Буквально за две минуты вы сможете подключить свой сайт к системе, которая просканирует весь сайт, найдет и оптимизирует все найденные изображения.

Оптимизация всех изображений на сайте проходит в на полном автопилоте в фоновом режиме. Сервис сам находит на сайте все изображения и оптимизирует их.

При добавлении новых картинок на сайт или изменении старых все они автоматом ставятся в очередь на оптимизацию. Система сама мониторит эти изменения и реагирует на них.

OptiPic легко подключается к любому сайту практически в 2 клика.
Поддерживаются все CMS и фреймворки, а также самописные сайты на PHP.

Преимущества OptiPic

Оценить эффективность оптимизации можно на сайте OptiPic.io. Это бесплатно и не требует регистрации.

Теги поста или какие разделы почитать еще:

Не читал все, однако спрошу ДАННАЯ ШТУКА ПЛАТНАЯ

Пара вопросов, несмотря на то, что пост проплачен.

Источник

3 шага по оптимизации изображений

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

Сейчас Google всё больше акцентирует внимание на использовании изображений новых форматов: WebP, Jpeg XR, Jpeg 2000.

И здесь нас интересует 2 момента:

Специалисты Google убеждены, что каждый из новых форматов эффективнее не менее 30% относительно устаревших форматов. По поддержке, ответ, и вовсе, мог бы быть неутешительным, т.к. Jpeg XR, Jpeg 2000 поддерживаются несколькими браузерами, оставаясь «невидимыми» для остальных.

Однако, по обоим выше озвученным вопросам есть положительное заключение. Но для этого стоит пристальнее взглянуть на формат WebP:

— Поддерживается, практически, всеми современными браузерами.

— Имеет эффективные характеристики сжатия размера изображений.

На этом моменте мы планомерно подошли к первому пункту нашего плана по оптимизации изображений:

Если у вас небольшой сайт или для продвижения вам важны только некоторые посадочные, воспользуйтесь сервисом squoosh для их ручной оптимизации. Выберите формат WebP и пресет для сжатия. Средний результат сжатия от 85 до 95% от исходного размера изображения.

Lazy-load – позволяет загружать изображения по мере необходимости. Такой подход освобождает ресурсы во время начальной загрузки страницы.

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

Будьте аккуратными в использовании Lazy-load, данные изображения не будут считываться поисковыми системами при загрузке страницы. Однако, вы всегда можете создать дополнительный файл «.xml» со всеми изображениями для попадания в индекс поисковых систем.

Из-за высокой популярности адаптивных сайтов и приоритета mobile-first, растёт запрос на облегчение и ускорение мобильных версий.

Использование одного и того же изображения, и для десктопа, и для мобильных требует большой нагрузки на сеть и ресурсы пользователя. Чтобы этого избежать вам потребуется иметь уже сформированные копии изображений в 3-4 раза меньше по размеру, чем для десктопе.Обеспечить ресайз изображений можно с помощью npm модуля sharp, imagemagick, thumbor и cloudinary.

Комментарий удален по просьбе пользователя

В iOS 14 поддерживает уже

лучше б в винду поддержку heic прикрутили. Ибо рвёт он webp по всем параметрам

Да как бы уже AVIF прикручивают (это можно сказать аналог HEIC), а JPEG XL на подходе. А WebP сжимает не сильно лучше хорошо оптимзированных старых форматов, а также имеет проблемы вроде размытия красного цвета.

Видеокодеки хороши для сжатия динамический изображений на низком битрейте. Это значит, что им не сильно требуется мелкие детали, потому что их не будет никто рассматривать на быстро меняющейся картинке. Так, браузеры уже внедряют AVIF — это аналог HEIC, только свободный от патентов. Но в плане будущего формата изображений особенно интересно выглядит JPEG XL — он добавляет кучу новых фич, обратно совместим со старым jpeg (есть режим, из которого можно перекодировать в старый jpeg без потерь с побайтовой точностью). Но на низком битрейте AVIF рвёт всех. WebP2 тоже планируют развивать примерно в ту же сторону.

Все не так трагично. Webp можно и не использовать, если картинки сжаты.
Скачиваете себе на комп FileOptimizer, чуть разбираетесь в настройках и можно пересжать хоть миллион картинок.
Естественно, на хосте нужно будет заменить содержимое папок, где они лежат.
Ошибок по pagespeed Insights изображения больше не покажут.
Но. Миниатюры для мобильников тоже нужно сжимать! То есть, все картинки на хостинге нужно сжать.
Это самый простой и наименее затратный способ увеличения скорости вашего магазина (вообще сайта) за счёт оптимизации изображений. ред.

Пока что нельзя загружать чистый WEBP. На Сафари будет куча битых картинок. С айфонов и всей продукции Эпл. Но скоро они тоже будут поддерживать.

Там слишком сложностей много сейчас. Вы пишете «скоро», обещают уже давно. Пока нужно писать условие if, подменять изображения. Я с этим геммором связываться не люблю, проще картинки пачкой пересжать, и хер с ними, ошибка исчезает, скорость увеличивается.

Ну, у вас просто нет сафари, чтобы понять это.
А тег picture всю проблему решает.

До сих пор по старинки сжимаю фото в фотошопе переходя на «Сохранить для Вэб. » и уже там подбираю вес/качество файла.

Это уже не лучший способ в ряде случаев.
а) cms или внешний сервис картинку может дополнительно пережать, а артефакты в том же jpeg только накапливаются;
б) всё те же встроенные ресайзеры. А если их нет, то качество масштабированной картинки всё равно отличается от исходной.

Это неплохо для сохранения, но такие картинки можно ужать ещё больше. Так, утилиты вроде jpegtran и mozjpeg могут ужать jpeg где-то на 10% без потерь (можно и ещё больше с извращениями). PNG вообще часто можно оптимизировать на десятки процентов. Например, pingo это умеет делать с хорошим балансом скорости работы и качества. А вот гифки фотошоп сжимает на удивление хорошо. Но они устарели и не нужны примерно никогда.

Lazyload древняя тема, в каком году он первый раз появился? В 2010?
Конечно желательно юзать, но многие ли его используют?

А теперь накинем на вентилятор 🙂

Одна проблема: насколько все это влияет на ранжирование? (вы же с какой-то целью оптимизируете изображения?)

Часто сталкиваюсь с негодованием SEO специалистов о скорости загрузки и онанизмом на Google PageSpeed Insights (далее GPSI), но насколько все это реально влияет на выдачу?

Тут мы не говорим об оверсайзе изображений в формате BMP по 10мб, не говорим о сайтах на темах и page builders с хламом в CSS и JS, где переопределяются стили и функции по 3 раза. Рассмотрим обычный сайт с кастомной темой с ранком GPSI 50-80.

По моему личному опыту доведение до 100/100 это утопия. Реального прироста не почувствовал.

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

Мой личный вывод: можно использовать и JPG, но стараться оптимизировать все по максимуму, но без фанатизма.

Очень интересно было бы услышать мнение коллег.

Источник

Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

В статье:

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

Со стороны поисковиков картинки важны для SEO. Они могут принести дополнительный трафик из Google и Яндекс Картинок.

По мнению специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych), которое он озвучил в вебинаре на канале Михаила Шакина, с технической точки зрения картинки и видео у Google оказывают как минимум равное влияние, как любой другой контент. В статье мы использовали некоторые советы из этого вебинара. Еще полезные видео есть на Youtube-канале DemiMurych.

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

Требования к картинкам: количество, размеры, уникальность

Какие изображения подбирать для размещения на страницах сайта.

Количество: для SEO хватит одной картинки на странице?

Мы не встречали информации, что количество размещенных на странице картинок как-то влияет на позиции сайта. Если вы что-то об этом знаете, поделитесь в комментариях.

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

По мнению Деми Мурыча, исходя из такого понимания изображения, для выхода в топ желательно иметь минимум 12 картинок — точнее 12 вариантов одного изображения. Они показывают одно и то же, но имеют разные форматы и выполняют разные функции:

Проинформировать Google о существовании превью можно двумя способами:

После этого поисковик будет индексировать эти превью и использовать их в поисковой выдаче.

Качество и размеры: какие картинки размещать на сайте?

Когда говорят о качестве изображения, ориентируются на его разрешение. Это не совсем корректно, но сложно обозначить качество как-то по-другому. Обычно изображения с более высоким разрешением намного лучше выглядят и больше нравятся поисковикам.

Качество изображения должно быть выше, чем у конкурентов. Минимальная нижняя граница — 1080 px по высоте. Минимальный размер превью — 640 px в ширину. Стандартный минимальный набор для примера: картинка 1920 px в ширину и три превью для мобильных платформ — 640, 920 и 1220 px.

С другой стороны, если размещать большое количество огромных качественных изображений, можно обнаружить, что страницы падают в выдаче. Как это случилось в эксперименте Деми Мурыча: он разместил на страницах картинки размером около 20 000 px, в итоге все эти страницы начали проседать. Бот, индексирующий картинки, занял весь гигабитный канал, и другой бот для индексирования html не смог пробиться к проекту. Такая ситуация с большей вероятностью угрожает фотостокам, сайтам с портфолио дизайнеров или фотографов.

Уникальность: картинки должны быть своими или можно брать из интернета?

Заказывать фотосессии для каждого нового товара может быть накладно, как и иметь в штате дизайнера для иллюстраций к статьям. Остается использовать картинки из выдачи Яндекса и Google. Может ли это навредить сайту?

С точки зрения SEO

Компания «Reboot Online» провела эксперимент с фотографиями: они предположили, что если оригинальность изображений имеет для Google большую значимость, то при прочих равных сайты с уникальными картинками будут выше в выдаче, чем аналогичные сайты с дублями картинок.

Эксперимент длился три месяца, в результате позиции сайтов с уникальными картинками оказались выше, чем сайтов с дублями. В топе выдачи Google Картинок по выдуманному запросу появились только уникальные фото. Подробнее можно почитать в отдельном материале.

Эксперт по SEO Михаил Шакин считает, что на карточках товара можно использовать неоригинальные фото, поисковик относится к этому лояльно:

«По карточкам товаров совсем не обязательно, чтобы они были полностью уникальными. Часто карточки на многих сайтах наполняются одним и тем же содержимым с сайта производителя. В таких случаях поможет не уникализация, а грамотная внутренняя оптимизация в сочетании с хорошими поведенческими факторами и качественными ссылками».

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

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

По опыту Деми Мурыча, если у вас скопируют такую картинку и не удалят теги, в глазах поисковика вы останетесь источником изображения и даже получите положительный эффект. Даже если теги удалили, вы останетесь источником, ведь у вас теги прописаны.

С точки зрения закона об авторском праве в РФ

Ответ на вопрос, можно ли использовать картинки чужого авторства, зависит от цели использования:

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

Был такой случай: разработчик сайта для мебельного магазина из Перми скачал фото аналогичных товаров у магазина мебели из Екатеринбурга. Владельцы магазина это заметили и подали в суд. Суд по интеллектуальным правам постановил выплатить компенсацию в размере 820 000 рублей за использование 82 фотографий. Компенсацию взыскали с владельца пермского магазина и администратора домена сайта, который выложил фото.

Где брать фото

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

Подробно авторское право на изображения мы разбирали совместно с магистром частного права Дарьей Третьяковой: «Советы юриста: откуда брать картинки, чтобы не попасть под суд, и как защитить свои авторские права на изображения».

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

Портрет, сгенерированный нейросетью

Тематика: как содержание картинки влияет на SEO?

Картинка должна органично вписываться в контент страницы и дополнять его — это важно и пользователям, которые смотрят на иллюстрации, чтобы лучше понять тему, и поисковикам, которые научились распознавать, что находится на изображении.

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

Фото, которое попало в мобильную выдачу

Расположение: важно ли, в каком месте страницы находится картинка?

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

Как оптимизировать картинки правильно

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

Оптимизация картинок для ускорения загрузки — не разовое мероприятие. Если вы закажете сжатие картинок у стороннего фрилансера, он может скачать все картинки с вашего сайта, прогнать через сервисы для оптимизации, сжимающие файл, и закачать их обратно. Это сработает, но до тех пор, пока вы не загрузите новые неоптимизированные картинки, как и делали до этого.

Предлагаем самостоятельно разобраться в оптимизации изображений для сайта.

Как выбрать оптимальный формата файла картинки

От формата изображения зависит, как сильно можно сжать картинку при сохранении ее качества.

Некоторые оптимизаторы советуют отдавать предпочтение векторным форматам, поскольку векторные картинки не зависят от разрешения и масштаба и подходят для отображения в высоком разрешении. Если изображение состоит из геометрических фигур — логотип, схема, значок, текст, стрелка — используйте векторный формат SVG. Для фото и сложных иллюстраций нужно подобрать что-то другое.

Обычно для картинок используют универсальные JPEG, PNG и GIF. По статистике 2019 года JPEG используют намного чаще.

Статистика использования форматов картинок на 2019

Кроме этих форматов есть перспективные, но менее распространенные, на них остановимся подробнее.

Формат JPEG 2000

JPEG 2000 или jp2 представляет собой улучшенный JPEG. При сжатии картинка получается более четкая. Если сравнивать одинаковые по качеству картинки, файл JPEG будет весить больше, чем JPEG 2000. В отличие от JPEG, у нового формата при высоких степенях сжатия не появляются артефакты в виде решетки из блоков 8х8 px.

Тем не менее, из-за требовательности к памяти он не получил широкого распространения. По данным caniuse.com сейчас JPEG 2000 поддерживается небольшим количеством браузеров:

Поддержка JPEG 2000 в браузерах, 2020 год

Есть более распространенные форматы с хорошими показателями по сжимаемости.

Формат картинок WebP

WebP — формат графических изображений, появился в 2010 году как альтернатива PNG и JPEG. Поддерживает прозрачный фон и анимацию. Сжимает лучше — сохраняет такое же качество картинки при меньшем размере.

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

В 2020 году по данным сайта caniuse.com WebP поддерживается такими версиями браузеров:

Поддержка WebP в браузерах, 2020 год

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

Формат картинок AVIF

AVIF (AV1 Still Image File) — формат изображений, основанный на библиотеке для сжатия кадров AV1.

В этом примере при приемлемом качестве фотографии размер файла в формате WebP составляет почти половину размера JPEG, а размер AVIF — меньше половины размера WebP.

Пример сжатия картинок

По данным caniuse.com формат по умолчанию поддерживается в новом Chrome, но остальные браузеры пока с ним не работают:

Поддержка AVIF в браузерах, 2020 год

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

Как настроить выбор формата картинки браузером

Только вам решать, стоит ли создавать несколько версий одной картинки ради экономии. Обычно советуют настраивать через тег picture, к примеру:

В этом случае браузер загрузит первое изображение, которое поддерживает. Если браузер не понимает picture, то по умолчанию для него указан img.

Но по мнению Деми Мурыча, следует забыть про тег picture, если всерьез заниматься технической оптимизацией сайта. Если начать формировать с тегом picture то же самое, что через тег img, это приведет к минимум трехкратному увеличению узлов в DOM-дереве на каждое изображение. Каждый узел DOM-дерева — это расход памяти и замедление скриптов, а у многих сайтов верхняя граница DOM-дерева уже выше оптимального значения в 1500 узлов.

Другие способы настроить выбор формата описаны в статье на примере WebP.

Как сжать изображение

Сделать картинку легче можно, если ее оптимизировать: сжать, уменьшить размер, цветовую палитру, удалить метаданные. Но жертвовать качеством изображения не стоит, нужно найти компромисс между размером файла и артефактами, возникающими при сжатии.

Уменьшить размер

Если на странице размещена маленькая картинка, которая не должна увеличиваться по клику, нет смысла загружать ее в огромном разрешении.

Уменьшить размер можно с помощью инструментов, например:

Уменьшить палитру

Можно обработать изображение, уменьшив количество используемых цветов. Картинка будет хранить меньше битов на пиксель и весить будет тоже меньше.

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

Один из способов — уменьшить «битовую глубину» изображения. Так выглядит изображение PNG с уменьшением палитры:

Слева направо: 32 бита (16 миллионов цветов), 7 бит (128 цветов) и 5 бит (32 цвета)

Конвертировать GIF-файл в видео

Если анимация длинная, она может много весить. Такой GIF-файл есть смысл конвертировать в видео.

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

Поддержка WebM в браузерах, 2020 год

Иногда такая смена формата оправдана: в этом примере файл GIF весил 3,7 МБ, отконвертированный в MP4 стал весить 551 КБ, а версия WebM составила всего 341 КБ.

Сравнение веса разных форматов анимации

Примеры инструментов, чтобы конвертировать GIF в видео — FFmpeg, Online-convert, Convertio, Videotogiflab.

Удалить лишние метаданные

После сохранения картинки в графических редакторах, например, Adobe Illustrator, у нее остается XML-разметка с метаданными. Они не нужны для работы, можно удалить.

У фотографий также можно удалить EXIF — информацию о геоданных, дате съемки, фотокамере.

Сжать файл онлайн

Как настроить отзывчивые адаптивные изображения

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

К тегу src можно указать еще два атрибута: srcset и sizes.

Атрибут srcset содержит массив изображений с описанием их размеров по ширине или плотности пикселей. Браузер встречает такое изображение и сам выбирает, картинку какого размера из предложенных показать пользователю. Это зависит от условий, в которых юзер находится: типа устройства, разрешения экрана, скорости интернета.

Четкое правило, которое работает и для Яндекса, и для Google:

Браузер всегда показывает то, что в srcset, а бот всегда индексирует то, что в src.

Поэтому в атрибут src нужно класть самую большую качественную картинку, а в атрибут srcset несколько небольших превью. Так в индекс попадет хорошая картинка максимального качества. К тому же это дает независимость от java-скриптов.

Как настроить ленивую загрузку изображений

На баллы в PageSpeed Insights влияет не качество и объем изображений, а то, какую они создают нагрузку. Ее можно сгладить с помощью реализации отложенной загрузки — Lazy load.

Отложенная или ленивая загрузка изображений означает, что картинки будут загружаться не сразу как только пользователь зашел на страницу, а по мере надобности — по клику на превью или по доскроллу до картинки, в зависимости от настройки.

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

У тега img есть атрибут decoding. Для реализации отложенной загрузки по умолчанию стоит указывать атрибут decoding=async, он сигнализирует браузеру, что изображение может быть загружено асинхронно и не должно влиять на основной поток рендера страницы.

Пример правильного кода для Lazy load с атрибутом decoding=async:

Тег img на второй строке содержит базовую разметку для правильного lazy load:

Если вы используете отложенную загрузку и хотите получать органический трафик, нужна такая верстка.

Еще один момент: в начале загрузки, пока картинка не появилась на экране, браузер пропускает место, где она должна появиться, и рендерит контент ниже. Он не знает, какого размера область нужно оставить под картинку. Параллельно он подгружает картинку, узнает о размерах и вписывает ее в страницу. Из-за этого верстка может сдвигаться.

Сдвиг макета из-за загрузки баннера сверху

Такие скачки макета во время загрузки измеряет характеристика CLS — Cumulative Layout Shift. Сейчас она интересна Google, поскольку входит в относительно новую метрику Core Web Vitals, оценивающую пользовательский опыт.

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

Проверить скорость загрузки страницы и еще множество параметров можно в Анализе сайта. Сервис проведет аудит сайта по 70+ параметрам, найдет ошибки и даст подсказки. В нем же можно проверить и внутренние страницы сайта, а также следить за позициями в поисковиках.

Фрагмент анализа сайта

Как заполнять SEO-атрибуты изображений

Поисковые системы воспринимают картинку как тег img с атрибутом src, содержащим само изображение, и атрибутом alt, в котором заключено описание картинки. Еще у изображения может быть прописан title с дополнительным описанием.

Не стоит использовать тег figure для картинок, поскольку figure сигнализирует поисковику, что нужно воспринимать этот объект в отрыве от контента страницы.

Атрибут alt

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

Как заполнять alt для картинки?

Каким должен быть alt изображения:

Alt картинки, дублирующий заголовок страницы, сигнализирует поисковым ботам, что картинку нужно проигнорировать, она нужна для декорации. Если это новости и нет цели попасть в Google Картинки, можно так и сделать. Если хочется получить трафик из Google Картинок, лучше сделать изображение частью контента, дать понять ботам, что оно помогает раскрыть смысл.

Неудачные варианты:

Нет текста в alt — img src=»https://pr-cy.ru/news/p/sobaka.jpg»-

Переспам — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак»

Удачный вариант:

Описание картинки, из которого понятно, что на ней происходит — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака породы лабрадор приносит палку хозяину»

Вариант заполнения alt

Что делать для мультиязычных сайтов, советует Джон Мюллер:

«Использовать одну и ту же картинку (с одного URL) мы разрешаем. Что касается атрибута Alt, он должен быть локализован, то есть переведен в соответствии с языком страницы, где будет использоваться изображение».

Атрибут title

Title — тоже описание картинок, но для пользователей. Оно выводится при наведении курсора на изображение. В title лучше писать короткую фразу, поясняющую, что происходит на картинке. Но вообще заполнение этого атрибута не обязательно — на SEO он не влияет, может разве что быть полезным читателям.

Заполненный title

Название файла

В Справке Google написано, что название файла тоже важно, поэтому нужно переименовывать файлы перед загрузкой. Название может выполнять ту же функцию, что и заголовки с подписями, так что вариант sobaka.jpg лучше IMG00023.JPG, поскольку передает содержание картинки.

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

Итак, оптимизированное изображение, которое будет полезно для SEO вашего сайта, должно быть качественным и крупным, для мобильного просмотра нужны отдельные превью. Картинки лучше загружать асинхронно, сжать файл с максимальным сохранением качества и подбирать формат под браузер. Тег alt должен содержать ключевые слова и быть релевантным текстовому фрагменту, который окружает картинку, также важно название файла.

Дополните советы в комментариях: как вы оптимизируете картинки для своих проектов?

Источник