в каком формате загружать картинки на сайт
Какой формат изображения лучше использовать на сайте 9
Здравствуйте, уважаемые друзья. Сегодня поговорим о том, какой формат изображения лучше использовать на сайте, какие сегодня доступны форматы графических файлов для сайта и нужно ли гнаться за новинками графических форматов.
Таких вопросов я получаю довольно много, многие из моих учеников спрашивают можно ли им использовать новые форматы SVG и WebP, и где лучше применить эти изображения. Разумеется, можно использовать и новые форматы, только нужно понимать какой формат и для чего подходит лучше.
На сегодняшний день изображения на сайте являются неотъемлемой частью. Начиная от графического дизайна и закачивая изображениями в статьях, графика сопровождает большинство сайтов в сети. Но за красоту приходится расплачиваться скоростью загрузки сайта.
Не оптимизированные изображения являются одним из факторов замедления сайта, на что указывают сервисы проверки.
Поэтому вы будете всегда перед выбором, какой формат выбрать для изображения. От этого будет зависеть его размер и качество. А чтобы использовать изображения меньшего размера и без потери качества, вы должны знать некоторые вещи.
Какие изображения для сайтов использую сегодня
Все изображения для сайтов, подразделяются:
Растровые изображения состоят из пикселей, в которых хранится цвет и значение прозрачности. Такими форматами представлены изображения в статьях, кнопками, иконками и элементами дизайна. Эти изображения популярны среди разработчиков и владельцев сайтов. Основной минус растровых изображений – они плохо масштабируются.
То есть при увеличении размера картинки, идёт потеря качества.
Векторные изображения состоят из линий и точек маршрутов. Информация об изображении хранится в математических инструкциях по отрисовке, что позволяет масштабировать такие изображения сколько угодно без потери качества.
Все эти изображения могут и используются на современных сайтах. Только нужно понимать, что перед загрузкой на сайт, изображение нужно оптимизировать!
Описание популярных форматов изображения для сайта
Из описания этих форматов вы поймёте, где и какой формат применять лучше всего на сайте.
JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.
Изображения в этом формате достаточно хорошо оптимизируются практически без потери качества, что позволяет получить файл меньшего размера без визуальной потери качества. Следует помнить, что каждая последующая оптимизация снижает качество.
Файлы этого формата поддерживаются всем устройствами и браузерами, что ещё раз подтверждает его популярность и позволяет не беспокоиться за проблемы с отображением на сайтах.
Большим недостатком этого формата является отсутствие прозрачности. То есть, комбинировать изображения в таком формате не получится. Для таких задач лучше использовать следующий формат.
Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.
8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, css-спрайтов, где необходим эффект прозрачности.
Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.
Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.
По качеству изображения выглядят лучше, чем JPG, но вес файла будет больше. Это нужно учитывать при размещении файлов на сайте.
Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.
Формат не подходит для фотографий и изображений с широким диапазоном цветов.
Зато широко используется при создании GIF-анимаций, баннеров, кнопок, иконок и так далее.
В современных сайтах этот формат используется всё реже.
Далее поговорим об относительно свежих форматах SVG и WebP, которые не так популярны, но набирают популярность и поддержку, и как нельзя лучше подходят под требования скорости загрузки и адаптивности сайтов.
Это формат векторных файлов на основе XML. Формат стал набирать популярность совсем недавно, так как ранее он слабо поддерживался в браузерах. И из-за проблем отображения никто не торопился его использовать.
На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.
Наиболее часто используют этот формат для простых изображений, таких как логотипы, элементы дизайна и так далее. Неприменим для фотографий.
Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.
Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.
Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.
Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.
Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.
Заключение
Друзья, надеюсь, объяснил всё понятно, и вы теперь знаете, какой формат изображений лучше использовать на сайте, и почему я не настаиваю на использовании одного какого-то формата, а рекомендую комплексный подход.
Возможно, когда WebP получит широкую поддержку, мы все перейдём на него и заменим jpg и png на своих сайтах.
Давайте обсудим в комментариях, какие вы используете форматы на своих сайтах, что нравится и что не нравится.
На сегодня у меня всё, жду ваших комментариев.
Форматы изображений для веба
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.
Растровые форматы
Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.
Пример изображения в формате GIF (источник изображения: giphy.com)
Таким образом, формат GIF подходит если:
JPEG (Joint Photographic Experts Group)
Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.
Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.
Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.
Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.
Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.
Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.
Таким образом, формат JPEG лучше подходит для:
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.
Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.
Пример изображения в формате PNG (источник изображения: Wikimedia Commons)
Итак, формат PNG подходит для:
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.
Векторные форматы
GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».
SVG (Scalable Vector Graphics)
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.
Примеры SVG (источники изображений: Roundicons Freebies www.flaticon.com/authors/roundicons-freebies и HTML Academy)
Большое руководство по 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 должен содержать ключевые слова и быть релевантным текстовому фрагменту, который окружает картинку, также важно название файла.
Дополните советы в комментариях: как вы оптимизируете картинки для своих проектов?