Как оптимизировать картинки для сайта
Изображения на сайте не просто иллюстрируют текст, но и влияют на трафик. Если картинки долго загружаются или залиты в плохом качестве, это негативно скажется на поведении пользователей. Правильная оптимизация поможет этого избежать — пользователь часто не вчитывается в текст, а скроллит страницу, и качественная иллюстрация привлекает его внимание.
Оптимизировать изображения нужно, чтобы они меньше весили и быстрее загружались.
Как оптимизировать изображения
Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Формат
Google индексирует картинки в форматах JPEG, PNG, GIF, BMP, SVG и WebP. Яндекс — JPEG, PNG и GIF. Подробнее о том, как Яндекс индексирует изображения, можно узнать в справке.
JPEG — подходит для портретных и пейзажных фотографий, где важна цветопередача.
Есть также JPEG 2000 и JPEG XR. Они сжимают изображения ещё сильнее, чем обычный JPEG, но пока эти форматы поддерживаются не всеми браузерами;
PNG — для сложных графических элементов, в которых нужно сохранить прозрачность и тени;
GIF — для анимации и мелких элементов: иконок, кнопок и так далее;
BMP — для растровых изображений;
SVG — для векторной графики в логотипах и значках;
WebP — сохраняет высокое качество изображений небольшого размера.
Качество
Чем качественнее будет картинка, тем больше пользователей обратит на неё внимание и тем лучше она проиндексируется.
Следите, чтобы при сжатии графика не испортилась и изображение было привлекательным и чётким.
Размер
От того, какого размера иллюстрация и сколько она весит, зависит скорость загрузки и индексация страницы.
Укажите ширину и высоту изображения в CSS, чтобы поисковик быстрее проиндексировал страницу.
Оптимальный размер внутри страницы — в районе 300 px. Если изображение нужно растянуть на всю ширину экрана — 1920 px.
Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.
Узнать размер и вес иллюстраций можно благодаря аудиту сайта от Serpstat:
Атрибуты alt и title
Название атрибута alt — сокращение от alternative. Это название изображения, которое покажется на месте картинки, если она не прогрузится. То есть это альтернативная, исходя из названия, информация, которую пользователь узнает об изображении.
Именно благодаря alt картинки попадают в выдачу поисковиков. Название должно содержать в себе три-четыре слова и соответствовать тому, что изображено. Желательно, чтобы в него входили ключевые слова.
Alt — это не то же самое, что название файла. Атрибут прописывается уже в коде, а название — перед загрузкой на сайт. Но назвать изображение тоже нужно правильно.
Например, если на иллюстрации — аэропорт Шереметьево, назовите файл SVO-airport.jpg, а не именем, которое присвоила система.
Так alt выглядит в коде изображения
Второй атрибут — title — показывается, если просто навести курсор на изображение, даже если оно прогрузилось. Эта настройка не так обязательна, как alt, но всё же с её помощью картинка может косвенно продвигаться — на изображении с текстом пользователи останавливают внимание чуть дольше.
Так title выглядит на сайте
Подписи
Если alt и title — подписи, которые появляются при каком-то действии, то обычная подпись сопровождает изображение всегда.
Изображение с подписью. Кстати, текст, который вы сейчас читаете — тоже пример подписи
Подписи помогают оптимизировать картинку по двум причинам:
- даже если пользователю лень читать полный текст, при скролле страницы он задержит взгляд на подписях;
- в подпись можно добавить ключевые слова, которые заметит поисковик.
Чтобы подпись помогла не только оптимизации, но и читателю, напишите в ней что-нибудь полезное и не противоречащее иллюстрации.
Sitemap-файл
Sitemap — это карта сайта в виде кода, по которому можно читать, где находятся те или иные объекты. Чтобы поисковики проиндексировали труднодоступные изображения (например, загруженные с помощью JavaScript), их нужно прописать в sitemap-файле в формате XML.
В коде это выглядит так:
Подробнее о том, как настроить sitemap-файл, можно узнать в справках Яндекса и Google.
Разметка OpenGraph
Материалы, опубликованные на сайте, можно продвигать также с помощью соцсетей. Чтобы на него обратили внимание в новостной ленте, пост со статьёй нужно красиво оформить. В этом помогает разметка OpenGraph.
Если OpenGraph есть на сайте, то при публикации в соцсетях автоматически заливается изображение нужного размера, а также правильные заголовок и ссылка. Это повышает привлекательность поста.
Пост со статьёй на OpenGraph
Материал не на OpenGraph опубликуется в соцсети в сжатом виде — если нажать на изображение, оно будет вести на сайт, и картинку не получится посмотреть полностью, не перейдя по ссылке.
Подробная инструкция, как настроить OpenGraph, есть у Яндекс.Помощи.
CDN
Если страница медленно загружается, это может привести к потере аудитории и, как следствие — убыткам. Кроме веса контента, на скорость загрузки влияет географическая удалённость сервера. Чтобы сайт открывался одинаково быстро в любой точке мира, можно использовать сети доставки контента (Content Delivery Networks), которые распределяют нагрузку на один сервер.
Кроме того, CDN улучшает вертикальные поиски — к ним относится поиск по картинкам и видео. Однако поисковик может индексировать страницу с изображением не на вашем сайте, а на том сервере, который закэшировал картинку. Это означает, что фактически изображение расположено не у вас и из-за этого вы теряете трафик.
Чтобы этого не произошло, стоит создать поддомен для CDN и размещать изображения на нём.
Где сжать изображение и не потерять качество
Есть много онлайн-сервисов, которые качественно оптимизируют изображения.
Расскажем о нескольких из них.
I love image
Сжимает картинки форматов JPG, PNG и GIF.
Image Compressor
Сжимает одновременно до 20 изображений форматов JPEG и PNG.
EzGIF
Как понятно из названия, этот сервис оптимизирует гифки.
Imagifiy
Позволяет оптимизировать все картинки на сайте сразу.
Compressor
Сервис, в котором можно выбрать — нужно ли искажать качество изображения или нет. Сжимает картинки на 90%.
Вывод
Изображения не просто делают контент разнообразнее, но и помогают сайту ранжироваться. Для этого нужны качественные, нетяжёлые по весу и небольшие по размеру картинки.
Оптимизируя изображения, не забудьте настроить формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Сжать иллюстрации можно с помощью сервисов, которые специализируются на разных форматах или расположениях изображений.
как оптимизировать картинки — Дмитрий Лашманов на vc.
ruИзображения на страницах сайта способствуют повышению качества веб-страницы в глазах поисковых систем и реальных пользователей, увеличивают релевантность страницы, улучшают восприятие и положительно сказываются на поведенческих факторах и ранжировании сайта в поисковых системах.
506 просмотров
Для чего нужна оптимизация изображений на сайте
Оптимизация изображений на сайте позволяет снизить общий вес страниц и увеличить скорость загрузки страницы, что является важным фактором как для пользователей, так и для поисковых систем.
Низкая скорость загрузки страниц приводит к отказам (уходам пользователей с сайта). А поисковые системы при низкой скорости загрузки страниц могут не проиндексировать часть контента, что снижает релевантность страницы и, соответственно, её положение в поисковой выдаче.
Кроме того, низкая скорость загрузки страницы может негативно сказаться на аналитике, так как при низкой скорости загрузки страницы, данные о пользователях могут не загрузиться в системы аналитики.
Оцените количество картинок на сайте и их необходимость
Перед тем как приступить к оптимизации изображений на сайте оцените количество картинок на вашем сайте.
Изображения необходимо размещать там, где они уместны. Картинки на страницах должны соответствовать содержанию страницы и интенту запросов пользователей. Картинки должны дополнять текстовый контент.
На страницах может использоваться слишком много изображений, при этом они никак не помогают пользователям в решении их вопроса.
В таких случаях будет более правильным решением удаление картинок, а не их оптимизация.
Используйте векторные изображения
Для некоторых элементов веб-страницы можно использовать векторные изображения в формате svg.
Векторная графика подходит для оформления значков, логотипов и других элементов, которые позволяют разбавить контент страницы, например преимущества или этапы работ.
Графические элементы в формате svg адаптивны, они остаются четкими при любом масштабировании.
Оптимизировать и уменьшить вес svg графики можно с помощью решения SVGO.
SVGO (SVG Optimizer) – это консольное приложение для оптимизации векторной графики svg, которое очищает файлы svg от лишнего кода без ущерба отрисовки графики.
Оптимизируйте растровые изображения
Растровые изображения – это изображения, состоящие из сетки пикселей (цветных точек).
Растровые изображения имеют следующие характеристики:
- Размер в пикселях
- Количество цветов и оттенков (глубина цвета)
- Цветовое пространство (цветовая модель, например RGB, XYZ и т.д.)
- Разрешение (количество точек в изображении)
Каждый пиксель растрового изображения содержит в себе информацию о цвете и прозрачности (оттенок).
Такие картинки используются в случае, когда необходимо разместить более детализированное изображение, для которого не подходит векторная графика.
Как рассчитывается вес растровых изображений?
В браузере 256 оттенков на каждый канал цвета. Один канал занимает 8 бит. Пиксель состоит из 4 каналов и весит 32 бита или 4 байта.
Таким образом можно легко рассчитать вес файла.
Например, изображение размером 100*100 пикселей состоит из 100 000 пикселей.
1 пиксель весит 4 байта, соответственно изображение из 100 000 пикселей будет весить 400 000 байт или 390 кб (400 000 / 1024).
Детализированные изображения состоят из большого количества пикселей. В связи с этим такие изображения имеют большой вес.
Снижение разрешения (уменьшение количества пикселей) приведет к снижению качества изображения, так как картинка распадется на пиксели и будет выглядеть нечетко и размыто.
Как снизить вес растрового изображения без потери качества?
Снизить глубину цвета
Если изображение не требует широкой палитры оттенков, например 256 оттенков на каждый канал, сократите количество цветов до 256.
Таким образом вес изображения будет уменьшен в 2 раза.
Применить дельта-кодирование пикселей
Соседние пиксели в изображении могут состоять из похожих цветов. Глаз человека не всегда может уловить разницу, между цветами и оттенками пикселей. В связи с этим можно указать разницу между соседними пикселями. В случае, если пиксели будут иметь схожие значения, дельта между пикселями будет равна нулю. Это означает, что пиксель будет весить всего один бит.
Уменьшить масштаб картинок
Размер исходного файла может отличаться от того, который отображается в браузере. Проверьте, совпадает ли исходный размер файла с тем, что отображается в браузере. Если исходный размер значительно больше, замените изображение.
Как выбрать формат растрового изображения?
PNG – не сжимается с потерей данных. Изображения в формате PNG всегда весят много. В связи с этим рекомендуем использовать изображения в формате PNG в случаях, когда необходимо показать мелкие детали.
Если картинка не содержит мелких деталей и не подразумевает увеличение и масштабирование, используйте форматы JPG или JPEG.
Формат GIF, как правило, используется для анимированных изображений.
WebP – формат изображений, разработанный Google. Такой формат использует алгоритм сжатия изображений, что позволяет снизить размер файла без потери качества.
WebP считается более современным и прогрессивным форматом изображений, чем другие форматы.
Недостатком данного формата является то, что некоторые браузеры и приложения не умеют поддерживать данный формат.
Оптимальный вес изображений
Чем меньше вес изображения на сайте, тем быстрее оно загрузится. В связи с этим необходимо стремиться максимально сжать изображения. При этом картинки должны оставаться в хорошем качестве даже при масштабировании изображения.
Оптимальный вес изображения – 100-200 кб. Большие изображения в высоком разрешении могут быть весом 500-1 000 кб.
В некоторых случаях картинки необходимо размещать в высоком разрешении, например фото товаров, где требуется увеличение изображения. Оптимальный вес таких файлов – до 3 мб.
Изображения весом более 3,5 мб не рекомендуется размещать на сайте. Наличие таких изображений может значительно снизить скорость загрузки страниц.
Как найти тяжелые изображения на сайте?
Проверить оптимизацию изображений и найти тяжелые изображения на сайте можно с помощью софта Screaming Frog.
Необходимо спарсить сайт через софт, перейти в навигационном меню справа во вкладку Images – All, отсортировать изображения по уменьшению размера.
Таким образом мы получим список всех изображений с сайта и их вес.
Заполните метаданные для изображений
Оптимизируйте название файла изображения
Перед загрузкой файла с картинкой на сайт рекомендуем оптимизировать название файла изображения.
Название необходимо прописать латиницей, а в качестве разделителя использовать тире.
Название необходимо прописать транслитом (можно использовать сервис «Транслит».
Заполните атрибут Title
Содержимое атрибута title отображается при наведении курсора на изображение.
Правила заполнения атрибута title у изображений:
- Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
- Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
- Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.
Что такое атрибут alt у картинок
Атрибут alt у изображений – это атрибут html-тега <img>, который описывает содержания картинки. Атрибут alt становится отображается на странице сайта в том случае, если картинка не загрузилась.
Пример оформления атрибута в html-коде:
<img src=»image.png» alt=»Описание изображения»>
Как заполнить атрибут alt в html-коде
Изображения в html-коде размечаются тегом <img>.
После открытого тега указывается ссылка на изображение: src=»image.png»
Далее необходимо указать атрибут alt: alt=»Описание изображения»
<img src=»image.png» alt=»Описание изображения»>
Для повышения релевантности страницы, рекомендуем указывать в атрибутах alt основные ключевые слова, по которым ранжируется страница. Описание изображения должно отражать суть картинки.
Точных параметров по количеству символов в атрибуте alt нет. При этом рекомендуется использовать 3-5 слов, а общая длина атрибута – 75-80 символов. Это оптимальный размер описания изображения.
При автоматической генерации заполнения атрибута alt для изображений можно подтягивать в качестве описания заголовок h2. При этом содержание alt в ряде случаев будет не точно передавать содержание картинки.
В связи с этим рекомендуем, по возможности, заполнять атрибут вручную, подбирая наиболее точное описание картинки.
Как атрибут alt отображается на странице
Если атрибут alt заполнено, то в случаях, когда изображения не загружаются, содержимое атрибута alt выводится вместо изображения в текстовом виде (изображение 1).
Если атрибут отсутствует, либо поле атрибута пустое, соответственно текстовое описание не выводится.
Как атрибут alt влияет на ранжирование
Поисковые системы и другие сервисы активно развивают поиск по картинкам. Оптимизация изображений и заполнение атрибута alt может улучшить ранжирование сайта в поиске по картинкам и привлечь дополнительный трафик.
Создайте карту sitemap.xml для изображений
Sitemap.xml – это файл, который сообщает поисковым системам о структуре сайта и о том, какие страницы и ссылки необходимо проиндексировать.
Sitemap.xml содержит в себе ссылки на актуальные страницы сайта, которые доступны для индексации и отдают 200 код ответа сервера.
Сгенерируйте отдельный файл Sitemap.xml для изображений, который позволит улучшить индексацию картинок и улучшить ранжирование сайта в поиске по картинкам.
При создании xml-карты для картинок рекомендуем настроить автоматическую генерацию карты сайта (чтобы при добавлении на сайт новых изображений они добавлялись в карту сайта). Также рекомендуем автоматически обновлять карту сайта раз в неделю, что позволит ускорить индексацию новых картинок.
Более подробно ознакомиться с форматом можно в Документации Google и Яндекс Справке.
Пример кода xml-карты сайта для картинок:
<?xml version=»1.0″ encoding=»UTF-8″?> <urlset xmlns=»http://www.sitemaps.org/schemas/sitemap/0.9″> <url> <loc>https://site.ru/page/kartinka.png</loc> <lastmod>2022-08-01</lastmod> </url> </urlset>
Сервисы для оптимизации изображений
Compressor.io →
Сервис позволяет снизить вес картинки до 90%.
Данный инструмент работает со всеми современными форматами, в том числе и WebP. С помощью сервиса можно сжать изображения без потери качества. В работе можно использовать ручные настройки.
Imagecompressor →
Бесплатный онлайн сервис, с помощью которого можно изменить разрешение изображения.
Tinyjpg →
Бесплатный оптимизатор изображений, который позволяет сжимать картинки без потери качества. Сервис преобразовывает PNG изображения из 24 битных в 8 битные. Такой способ позволяет снизить вес картинки без потери качества.
Compressjpeg →
Простой онлайн редактор, который позволяет оптимизировать до 20 файлов за раз. С помощью сервиса можно сжать картинки в формате JPEG и преобразовать PNG документы в JPEG, JPG в PNG и SVG в PNG.
WebP Converter →
С помощью инструмента можно преобразовать картинки в форма WebP. WebP Converter позволяет снизить вес файла до 30% без потери качества.
Оптимизация изображений позволит улучшить ранжирование сайта в поисковых системах, участвовать в поиске по картинкам, выводить изображения в сниппет и улучшит поведенческие факторы.
Оптимизировать изображения | Cloudinary
Оптимизация изображений важна для повышения производительности вашего веб-сайта или приложения.
На этой странице представлен обзор соображений, которые могут повлиять на оптимизацию изображений, и рассматриваются различные функции и параметры оптимизации Cloudinary, которые вы можете использовать, чтобы убедиться, что ваши изображения доставляются вашим пользователям максимально быстро и наилучшим образом, что является ключевым компонентом в улучшении показателей Core Web Vitals.
См. также- Core Web Vitals
- Оптимизация видео
- Оптимизация звука
- Что такое оптимизация изображения?
- Оптимизация по умолчанию
- Как оптимизировать качество изображения
- Как оптимизировать формат изображения
- Как оптимизировать размер изображения
- Дополнительные советы по оптимизации изображений
Оптимизация изображения включает доставку изображений в формате, размерах, разрешении и качестве, обеспечивающих наименьший возможный размер файла, при этом гарантируя, что полученное изображение соответствует конкретному содержанию, общему дизайну страницы, запрашивающему устройству и ожиданиям посетителей вашего сайта.
В следующей таблице приведены основные элементы, влияющие на размер файла изображения, и возможные решения для решения этих проблем. Однако во многих случаях внедрение решений самостоятельно может занять очень много времени или труда. Щелкните ссылку для каждой проблемы, чтобы узнать, как использовать функциональность Cloudinary для реализации этих решений с минимальным кодированием или без него.
| Выпуск | Проблема | Возможные решения |
|---|---|---|
| Качество изображения | Часто фотографии доставляются в исходном сверхвысоком разрешении из-за боязни слишком большой потери визуального качества или для того, чтобы пользователи устройств с высоким разрешением (дисплеи Retina и DPR 2+) получили ожидаемое качество. Результатом является огромный файл и низкая скорость доставки. | В большинстве случаев можно значительно понизить качество без существенного визуального воздействия . Учитывайте цель вашего изображения и аудиторию и используйте минимально возможное качество, приемлемое для содержания изображения, аудитории и цели. Когда важно обеспечить высокое качество изображения для устройств с высоким разрешением, используйте элемент и его атрибут srcset для предоставления разных разрешений для разных устройств. |
| Формат изображения |
|
|
| Метаданные изображения | По умолчанию изображения содержат много метаданных, сохраняемых камерами и графическими приложениями, но эти данные совершенно не нужны в доставляемых изображениях. | Рекомендуется сохранять метаданные в исходной копии графики, но удалять их из поставляемых изображений. |
| Размер изображения и изменение размера | Если вам нужно отобразить изображение меньшего размера, чем исходное, и вы полагаетесь на браузер для изменения размера изображений, то вы отправляете излишне большие файлы. Это относится как к стандартному изменению размера изображения, так и к адаптивному дизайну, для которого требуется несколько разных размеров изображений. | Требуемые размеры могут быть определены на стороне сервера (перед доставкой в браузер). Для адаптивного дизайна используйте элемент и его атрибут srcset, чтобы доставлять изображения разного размера в разные контрольные точки. Даже при изменении размера на стороне сервера помните, что вы можете кадрировать, чтобы сосредоточиться на важном содержимом, а не просто уменьшать изображения. |
Эти типы изображений плохо выглядят в форматах с потерями, но доставка их в формате PNG приводит к большому совокупному размеру этих изображений, что может замедлить время загрузки страницы.
Всякий раз, когда вы применяете какое-либо преобразование к изображению, Cloudinary по умолчанию выполняет следующие оптимизации:
Удаляет все связанные метаданные из файла преобразованного изображения, кроме следующих:
- JFIFВерсия
- Блок разрешения
- XРазрешение
- YРешение
- Цветовое пространство
- точек на дюйм
Чтобы переопределить это поведение и доставить преобразованное изображение со всеми неповрежденными метаданными, добавьте флаг fl_keep_iptc.
Кроме того, вы можете использовать флаг fl_keep_attribution, чтобы сохранить метаданные, связанные с авторскими правами, в преобразованном изображении, но при этом удалить другое содержимое метаданных, которое удаляется по умолчанию.Применяет автоматическую оптимизацию и настройку качества к сгенерированным изображениям. Чтобы переопределить настройки по умолчанию, установите параметр качества в преобразовании.
Кроме того, вы можете использовать флаг fl_keep_attribution, чтобы сохранить метаданные, связанные с авторскими правами, в преобразованном изображении, но при этом удалить другое содержимое метаданных, которое удаляется по умолчанию.Настройка качества изображения определяет уровень сжатия, применяемый к изображению, в виде значения от 1 (наименьший размер файла) до 100 (наилучшее визуальное качество).
Выбранная вами настройка влечет за собой компромисс между качеством изображения и размером файла: чем ниже значение качества, тем больше файл сжимается до меньшего размера и тем больше данных теряется в процессе, результатом чего является потеря визуального качества. На более высоких уровнях качества потеря визуального качества едва заметна для человеческого глаза.
Конечный результат визуального качества также зависит от других факторов, таких как размер исходного изображения и разрешение монитора пользователя или мобильного экрана.
Регулировка качества ваших изображений до уровня, обеспечивающего хороший визуальный вывод, является одним из самых мощных инструментов оптимизации изображений. Часто вы можете доставлять изображения размером менее половины исходного файла с незначительной визуально заметной разницей или без нее. Оптимизация качества изображения также может помочь улучшить ваш показатель Core Web Vitals.
Существует несколько способов управления качеством изображений, доставляемых из Cloudinary:
- Установка качества по умолчанию для среды вашего продукта
- Установить качество при доставке изображения
- Использовать автоматический выбор качества (q_auto)
Установите качество по умолчанию для среды вашего продукта
Как упоминалось выше, когда вы доставляете изображение с любым примененным преобразованием, оно также применяет уровень качества по умолчанию.
В зависимости от содержания, цели и аудитории большинства ваших изображений может потребоваться изменить уровень качества изображения по умолчанию в настройках оптимизации 9.0055 для среды вашего продукта.
Вы можете выбрать фиксированный уровень качества или использовать один из параметров q_auto по умолчанию.
Если вы хотите, чтобы определенные преобразования изображений использовали настройку качества, отличную от установленной по умолчанию для среды вашего продукта, или если вы не выполняете какие-либо другие преобразования изображения, которое вы доставляете, вы можете указать уровень качества в качестве преобразования.
Например, параметр q_60 ниже уменьшает размер доставляемого файла с 118 КБ от до 73 КБ :
Установка качества при доставке изображения
Управление визуальным качеством и уровнем сжатия изображений с помощью параметра качества ( q в URL-адресах).
Этот параметр представляет уровень сжатия, применяемый к изображению, в виде значения от 1 (наименьший возможный размер файла) до 100 (наилучшее визуальное качество). Снижение качества — это компромисс между визуальным качеством и размером файла: чем ниже значение качества, тем больше файл сжимается до меньшего размера, тем больше данных теряется в процессе, что приводит к потере визуального качества. Потеря визуального качества едва заметна для человеческого глаза на более высоких уровнях качества, а конечное визуальное качество также зависит от других факторов, таких как размер изображения и разрешение монитора пользователя или мобильного экрана.
Например, снижение качества загруженного изображения JPEG с именем sample до 60 приводит к размеру файла 73 КБ по сравнению с исходным размером файла 245 КБ с едва заметным ухудшением визуального качества:
Параметр качества также автоматически применяется при доставке изображений с любым другим примененным преобразованием.
То есть, если исходное загруженное изображение не запрашивается, то к преобразованному изображению также автоматически применяется значение качества по умолчанию 80.
Интерактивная демонстрация: уровни качества изображения
В приведенном ниже примере интерактивного изображения показано влияние различных настроек качества на визуальное качество изображения. Изображение уменьшено до ширины 600 пикселей и первоначально отображается с настройкой качества 100. Нажмите на кнопки качества под изображением, чтобы увидеть, как различные настройки качества влияют на качество изображения.
- Изображения в формате WebP передаются без потерь при указании качества 100 и с потерями при указании качества ниже 100. Дополнительные сведения о формате WebP см.
- Изображения в формате WebP являются без потерь, если качество не указано и исходный формат изображения без потерь (например, PNG).
- Анимированные GIF игнорируют настройку качества, если не добавлен флаг
с потерями. Дополнительную информацию см. в статье «Сжатие с потерями для оптимизации анимированных GIF-файлов». - Надстройка JPEGmini автоматически применяет наилучшее возможное сжатие к изображениям JPEG, сохраняя при этом высокое визуальное качество.
Дополнительную информацию см. в статье «Сжатие с потерями для оптимизации анимированных GIF-файлов».Включение субдискретизации цветности
Субдискретизация цветности — это метод кодирования изображений путем реализации меньшего разрешения для информации о цветности (цвета), чем для информации о яркости (яркости), используя более низкую остроту зрительной системы человека для цветовых различий, чем для яркости. Чтобы переопределить поведение по умолчанию о том, следует ли выполнять субдискретизацию цветности, к параметру качества можно добавить отдельное значение следующим образом:
-
444можно добавить для предотвращения субдискретизации. Например:q_80:444 -
420можно добавить для принудительной подвыборки. Например:q_95:420.
Автоматический выбор качества (q_auto)
Интеллектуальный алгоритм качества и кодирования Cloudinary анализирует изображение, чтобы найти наилучший уровень сжатия и оптимальные настройки кодирования на основе содержимого изображения и браузера для просмотра, чтобы создать изображение с хорошим визуальным качеством при минимальном размере файла. Cloudinary автоматизирует принятие решения о соотношении размера файла и качества на лету, используя метрики восприятия и эвристики, которые настраивают параметры качества в зависимости от содержимого и формата конкретного изображения. Индивидуальный анализ каждого изображения для определения оптимального уровня сжатия и параметров кодирования изображения позволяет точно настроить уровень сжатия, дополненный тонкой настройкой параметров кодирования, и может значительно уменьшить размер файла без какого-либо ухудшения, заметного человеческому глазу.
Чтобы выполнить автоматический выбор качества и регулировку кодирования изображения, задайте для параметра преобразования качество значение auto ( q_auto в URL-адресах) или примените один из параметров Automatic в качестве настройки качества изображения по умолчанию для среды вашего продукта.
Вы можете дополнительно настроить автоматический выбор качества следующим образом:
-
q_auto: Оптимальный баланс между размером файла и визуальным качеством. По умолчанию это то же самое, что иq_auto:good, при этом он может автоматически переключаться в более агрессивный режимq_auto:eco(см. примечание о поддержке сохранения данных ниже). -
q_auto:best: Менее агрессивный алгоритм. Создает файлы большего размера с потенциально лучшим визуальным качеством. Пример целевой аудитории: сайты с фотографиями, которые отображают изображения с высоким визуальным качеством. -
q_auto:good: Обеспечение относительно небольшого размера файла с хорошим визуальным качеством. q_auto:eco: Более агрессивный алгоритм, который приводит к меньшим файлам с немного более низким визуальным качеством. Пример целевой аудитории: популярные сайты и социальные сети с огромным трафиком.-
q_auto:low: Самый агрессивный алгоритм, в результате которого самые маленькие файлы имеют низкое визуальное качество. Пример целевой аудитории: сайты, использующие уменьшенные изображения, которые ссылаются на изображения более высокого качества.
Примеры результирующего размера файла при кодировании фотографии с использованием различных стандартных и автоматических значений параметра качества:
Оригинал (569 КБ) q_80 (80,3 КБ) q_auto: лучший (65,9 КБ) q_auto: хорошо (56,9 КБ) q_auto:eco (45,0 КБ) q_auto: низкий (35,0 КБ)Примеры результирующего размера файла при кодировании чертежа с использованием обычных и автоматических значений качества:
Исходный (296 КБ) q_80 (223 КБ) q_auto: лучший (226 КБ) q_auto: хорошо (156 КБ) q_auto:eco (97,5 КБ) q_auto: низкий (87,5 КБ)Поддержка сохранения данных
Поддержка сохранения данных — это функция, включенная в стандарт Client-Hints, которая уже поддерживается браузерами Chrome и Opera.
Браузеры отправляют специальный заголовок запроса с именем Save-Data , если пользователь включил режим сохранения данных. Когда указано q_auto и заголовок Save-Data: on достигает уровня CDN Cloudinary, сжатие и кодирование изображений автоматически переключаются на 9Режим 0056 eco ( q_auto:eco ) вместо стандартного режима качества good ( q_auto:good ). Эта функция влияет на использование q_auto в именованных преобразованиях.
Интерактивная демонстрация: автоматическое качество изображения
В приведенном ниже примере интерактивного изображения показано влияние различных настроек качества auto на визуальное качество изображения пляжа. Первоначально изображение отображается с настройкой качества 100, и нажатие одной из кнопок под изображением отобразит изображение с этой конкретной настройкой качества.
См. также : q_auto для видео
Форматы изображений могут быть с потерями или без потерь, каждый со своим собственным алгоритмом сжатия.
И, как уже упоминалось, каждый тип дает лучшие результаты для одних типов содержимого изображений и худшие результаты для других типов. Кроме того, некоторые из новых форматов поддерживаются только некоторыми браузерами. Оптимизация формата изображения также может помочь улучшить ваш показатель Core Web Vitals.
Выбор правильного формата для доставки каждого изображения может привести к значительной экономии размера файла без ущерба для качества.
Есть несколько вариантов Cloudinary, которые можно использовать для решения этих проблем.
- Даже если ваши пользователи загружают изображения в формате, который не идеально подходит для контента, вы можете легко предоставить им другой тип, просто изменив расширение типа файла в URL-адресе доставки.
- Используйте параметр преобразования автоматического выбора формата (f_auto), чтобы позволить Cloudinary проанализировать содержимое изображения и выбрать наилучший формат для доставки. Например, он может автоматически доставлять изображения в формате WebP, AVIF или JPEG-2000 в браузеры, поддерживающие эти форматы, а во все остальные браузеры — в исходном формате. Эта опция также может доставлять анимированные GIF-файлы в виде анимированного AVIF или анимированного WebP в браузерах, поддерживающих эти форматы.
- Вы также можете доставлять анимированные GIF-файлы в виде GIF-файлов с потерями, что позволяет значительно сократить размер файла при сохранении приемлемого качества.
Эта опция также может доставлять анимированные GIF-файлы в виде анимированного AVIF или анимированного WebP в браузерах, поддерживающих эти форматы.Этот анимированный GIF с потерями имеет размер всего 2,5 МБ по сравнению с исходным 6,3 МБ :
Еще один способ снизить стоимость анимированной графики — предоставлять анимированные GIF в виде видео. Вы можете сделать это, просто изменив расширение типа файла на .mp4 (или webm для Chrome, Android и Opera) в URL-адресе доставки.
Например, этот mp4 на 95% меньше оригинального анимированного GIF ( 319 КБ вместо 6,3 МБ ):
Дополнительные сведения о работе с анимированными GIF-файлами см. в разделе Управление анимированными GIF-файлами.
Автоматический выбор формата (f_auto)
Существует много форматов для кодирования изображений, причем некоторые форматы лучше других сжимаются и уменьшают размер файла без ухудшения визуального качества. Поскольку разные браузеры поддерживают разные форматы изображений, лучшим решением для оптимизации времени доставки и экономии полосы пропускания является предоставление наилучшего формата в соответствии с браузером, используемым каждым из ваших посетителей.
Для параметра fetch_format можно установить значение auto ( f_auto в URL-адресах), чтобы выполнять автоматический выбор формата на основе запрашивающего браузера. В зависимости от браузера и того, какие форматы включены для f_auto в среде вашего продукта, изображение может быть доставлено, например, как AVIF, WebP или JPEG-2000 (или анимированный AVIF или анимированный WebP, если это анимированное изображение). Если браузер не поддерживает ни один из оптимизированных форматов, f_auto включен для возврата, тогда изображение доставляется в формате, указанном расширением файла.
Например, вместо исходного формата JPEG (33,5 КБ) для этого уменьшенного изображения в зависимости от браузера может быть предоставлен AVIF (14,6 КБ), WebP (16,1 КБ) или JPEG-2000 (21,0 КБ). В таблице приведены другие форматы для сравнения:
| Формат | Размер |
|---|---|
| АВИФ | 14,6 КБ |
| GIF | 98,0 КБ |
| JPEG | 33,5 КБ |
| JPEG-2000 | 21,0 КБ |
| JPEG-XR | 17,3 КБ |
| PNG | 190,0 КБ |
| WebP | 16,1 КБ |
Советы и рекомендации по использованию f_auto
См. также : f_auto для видео
Художественный дизайн веб-сайта обычно требует отображения изображений различных размеров, часто намного меньших, чем оригинал.
Если вы предоставляете полноразмерные изображения и полагаетесь на изменение размера на стороне браузера (с использованием атрибутов ширины и высоты CSS или HTML), пользователи вынуждены без необходимости загружать большие изображения.
Поэтому изображения всегда должны доставляться с сервера в их окончательном размере.
При использовании любых преобразований размера Cloudinary изменение размера (масштабирование/обрезка) выполняется на стороне сервера, и изображение всегда доставляется в браузер в запрошенном размере.
Подробнее о преобразовании размера см. в разделе Изменение размера и обрезка изображений.
Как правило, время изменения размера изображения на лету (при первой его доставке через CDN) незначительно, но если вы изменяете размер очень большого изображения или видео и даже для этих первых пользователей на счету каждая миллисекунда, подумайте о том, чтобы выполнить активное или явное преобразование для предварительного создания преобразованного изображения.
Адаптивный размер изображения
Важность изменения размера на стороне сервера становится еще более важной, если ваш веб-сайт является адаптивным и вам необходимо выбрать размер изображения на основе текущего размера вашего браузера или разрешения вашего устройства.
Воспользовавшись преимуществами Cloudinary dpr_auto , w_auto и другими функциями адаптивных изображений, вы можете гарантировать, что вы доставляете большие изображения или изображения с высоким разрешением только тем пользователям, чье разрешение устройства или размер браузера требуют этого, и вы можете создавать множество требуемых изображений различных размеров, используя простые преобразования.
Например, чтобы предоставить изображение sample , обрезанное до соотношения сторон 4:3 с использованием метода заполнения кадрирования, а затем автоматически масштабированное до ширины, доступной для изображения в адаптивном макете, и со значением DPR, подходящим для устройства пользователя, используйте следующий оператор:
Приведенный выше пример даст файл 318 КБ на устройстве DPR 2.0 и 115 КБ на устройстве DPR 1.0.
Дополнительные сведения о функциях адаптивного дизайна Cloudinary см.
в разделе Адаптивные изображения.
Спрайты
Спрайт — это отдельное изображение, состоящее из множества меньших изображений. Веб-страница модифицируется таким образом, чтобы с сервера загружалось только одно изображение, а в HTML-коде страницы используются альтернативные имена классов CSS, указывающие на маленькие изображения в большом изображении.
Это сводит к минимуму количество загружаемых изображений и, следовательно, количество необходимых соединений с сервером, что приводит к более быстрой доставке изображений.
Вы можете быстро создать одно изображение спрайта и соответствующий файл CSS, содержащий все изображения с определенным тегом.
Убедившись, что все соответствующие изображения имеют необходимые размеры и теги, укажите URL-адреса: https://res.cloudinary.com/demo/image/sprite/mytag.css https://res.cloudinary.com/demo/image/sprite/mytag.png
Дополнительные сведения см. в разделе Генерация спрайтов.
Аналитика
Даже после использования как можно большего количества решений для автоматической оптимизации вы можете обнаружить, что некоторые изображения и форматы по-прежнему потребляют особенно много трафика.
Взгляните на страницу Отчеты о доставке консоли Cloudinary. Отсюда вы можете просмотреть подробную информацию о различных точках данных, которая поможет вам понять, где можно внести улучшения.
Например, проверьте 9В разделах 0054 Top Assets и Top Delivered Assets можно применить оптимизацию для этих ресурсов для конкретных файлов. Кроме того, прокрутите вниз до лучших браузеров , чтобы получить представление о том, насколько важен каждый браузер для ваших пользователей. Это может дать вам представление об относительной ценности использования новых форматов, которые поддерживаются только некоторыми браузерами.
Что такое оптимизация изображения? | Справочные руководства Fastly
Оптимизация изображений — это процесс создания и доставки высококачественных изображений в нужном формате, размере и разрешении для любого устройства, к которому они обращаются, при сохранении минимально возможного размера файла.
Звучит как невыполнимая задача? Это то, что трудно обойти, к сожалению. Сегодня пользователи посещают ваш сайт из самых разных источников, от мобильных устройств до персональных компьютеров. Их всех объединяет то, что они хотят как можно быстрее просмотреть лучшую версию вашего сайта. Оптимизация изображений влияет как на скорость доставки, так и на то, как ваш сайт работает в поиске.
Как минимум, вы должны отформатировать свои изображения, чтобы они отображались корректно независимо от устройства, на котором они просматриваются. Кроме того, вы должны учитывать такие вещи, как разрешение и кодировка изображения, которые влияют на качество и размер ваших изображений. Помимо преобразования ваших изображений, вы также должны учитывать такие вещи, как имя файла, теги ALT и метаданные изображения, чтобы улучшить поисковую оптимизацию (SEO).
Хотя вы можете выполнить эту задачу самостоятельно с помощью внешних инструментов, она становится более сложной, дорогостоящей и трудоемкой, когда вам нужно масштабировать.
Решение для оптимизации изображений, особенно на основе периферийных устройств, может помочь вам автоматизировать и масштабировать часть работы, необходимой для оптимизации изображений на вашем веб-сайте, а также сократить или исключить затраты на вычисления. В сочетании со службой CDN вы также можете кэшировать оптимизированные изображения и ускорять их доставку.
Прежде чем начать
Мы рекомендуем прочитать Что такое CDN? Essentials, чтобы понять некоторые ключевые понятия и термины, которые мы будем использовать в этом руководстве.
Как работают решения по оптимизации изображений
Решения по оптимизации изображений доступны в виде плагинов или расширений для вашей системы управления контентом или автономных служб. Эти решения позволяют указать параметры преобразования, а затем применить эти параметры на стороне сервера перед доставкой изображения.
Некоторые общие параметры включают такие вещи, как:
- обрезка : удаление пикселей из изображения
- ширина : изменение размера изображения по ширине
- качество : установить уровень сжатия для изображения
Вы можете определить различные настройки для разных размеров экрана, которые могут использовать посетители вашего сайта.
При загрузке вашего веб-сайта и отправке запроса на изображение веб-клиент пользователя будет использовать CSS веб-сайта, чтобы определить, какая версия изображения подходит для устройства. Он отправит запрос на ваши серверы для изображения с этими параметрами, и решение по оптимизации изображения применит преобразование к ответу изображения.
Вместо того, чтобы пытаться предсказать каждое устройство, которое может получить доступ к вашему сайту, и определять параметры для каждого из этих сценариев, вы можете использовать API-интерфейсы JavaScript для программного определения сведений о браузере клиента и запроса правильного преобразования соответственно.
СОВЕТ
Ознакомьтесь с нашим практическим учебным пособием, в котором вы узнаете, как использовать технологию адаптивных изображений для преобразования ваших изображений с помощью Fastly Image Optimizer.
Вы можете объединить решение для оптимизации изображений со службой CDN, чтобы еще больше ускорить доставку оптимизированных изображений.
После подачи первого запроса на изображение как исходное, так и преобразованное изображение кэшируются на сервере CDN, а будущие запросы на те же преобразования обслуживаются непосредственно из кэша. Запросы на другое преобразование обслуживаются с использованием исходного изображения в кеше, что сокращает количество обращений к вашему источнику.
Преимущества решений по оптимизации изображений
Использование решения по оптимизации изображений поможет вам сэкономить время, снизить затраты на инфраструктуру, улучшить взаимодействие с пользователем и улучшить SEO.
В зависимости от количества изображений на вашем сайте оптимизация и поддержка изображений может занять очень много времени. В современном Интернете одно изображение обычно необходимо оптимизировать в 10 или более версиях, каждая из которых приводит к созданию отдельного файла для наиболее популярных разрешений экрана. Решение для оптимизации изображений экономит ваше время, создавая нужные изображения из одного высококачественного исходного файла.
Включив решение для оптимизации изображений в свой рабочий процесс, вы можете добиться этого автоматически. Больше не нужно вручную создавать несколько файлов изображений или использовать сценарии предварительной обработки!
Использование решения для оптимизации изображений также помогает сократить затраты на инфраструктуру, поскольку вам не нужно хранить несколько версий каждого файла на сервере или тратить деньги на вычислительные ресурсы для выполнения преобразований. Использование службы CDN позволяет сэкономить еще больше, помогая сократить расходы на исходящий трафик за счет предоставления изображений из кеша и масштабирования по мере роста ваших потребностей.
Наибольшее преимущество использования решения для оптимизации изображений с CDN заключается в скорости доставки. CDN позволяет вам доставлять изображения из кеша, ближе к вашему пользователю, чем к вашему источнику, ускоряя время доставки и, следовательно, время загрузки вашего сайта.
Время доставки важно не только для взаимодействия с пользователем, но и для SEO вашего сайта.
Поисковые системы, такие как Google, сканируют ваш сайт и учитывают скорость загрузки как один из факторов ранжирования вашего сайта в результатах поиска. Если ваши изображения замедляют загрузку вашего сайта, поисковая система может понизить приоритет вашего сайта из-за этого. Оптимизация изображений дает вашему пользователю правильное изображение для его устройства, которое отображается быстрее и, таким образом, улучшает вашу поисковую оптимизацию.
Почему быстро
Оптимизатор изображений Fastly (Fastly IO) предоставляет вам все описанные выше преимущества, а также полную интеграцию с нашей современной сетью CDN.
Как и другие службы оптимизации изображений, Fastly IO извлекает исходный файл изображения из вашего источника и преобразует его с использованием указанных вами параметров. Однако преобразование в Fastly IO происходит на границе между вашими серверами и клиентом, что ускоряет доставку образа.
Fastly IO работает вместе с экранирование , которое назначает одну точку присутствия для извлечения контента из вашего источника и распространения его на другие серверы кэширования.
После применения преобразования как исходное изображение, так и преобразованное изображение кэшируются в POP экрана. Если точка присутствия в сети получает запрос на преобразование изображения не в кеше, запрос будет переадресован на точку присутствия щита (вместо вашего источника), и преобразование произойдет на щите. Это сокращает время, необходимое для извлечения изображения, предотвращает обращения к вашему источнику и, что наиболее важно, позволяет этому изображению быть доступным для точек присутствия по всей сети, чтобы вы могли обслуживать больше из кэша.
Вы можете дополнительно настроить свои преобразования и использовать автоматизацию, используя параметры строки запроса. Fastly IO определил несколько параметров, которые поддерживают различные форматы изображений. Кроме того, Fastly IO использует предварительно составленные запросы ввода-вывода, называемые классами преобразования. Классы преобразования автоматически определяют несколько параметров в одном запросе.