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

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

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

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

Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты 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.

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

Сервисы для оптимизации изображений для сайта

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

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

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

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

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

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

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

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

1. Бесплатный онлайн сервис Optimizilla

Ссылка на сервис: optimizilla. com

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

Но есть некоторые ограничения: исходный размер загружаемого изображения не должен превышать 15 мегабайт или его разрешение – более 6 000 пикселей. Минимальный набор возможных , но для выполнения поставленной перед нами задачи (оптимизировать картинку) вполне хватит. Из минусов — нет возможности уменьшить разрешение изображения и кадрировать изображение.

2. Бесплатный оптимизатор изображений Tinyjpg

Адрес сервиса: tinyjpg.com

Данный сервис по функциональным возможностям практически не отличается от предыдущего: позволяет уменьшить размер без потери качества, работает с PNGи JPG форматами. Разница лишь в том, что tinypng.com ориентирован на изменение формата PNG путем превращения из 24-битного изображения в 8-битное за счет уменьшения количества цветов. Поисковая система заметит разницу, а человеческий глаз – нет.

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

3. Бесплатный онлайн оптимизатор Compressor

Ссылка на сервис: Compressor.io

Compressor — это мощный онлайн-инструмент для значительного уменьшения размера ваших изображений и фотографий при сохранении высокого качества практически без разницы до и после сжатия. Поддерживается 4 формата файла: JPEG, PNG, GIF, SVG. Минимальный размер файла для загрузки: F10 MB

Используется вида сжатия. Поможет сэкономить вам сотни Кб. Из недостатков — не предусмотрена пакетная обработка изображений и нет возможности изменять разрешение изображения

4. Бесплатный оптимизатор изображений Imageoptimizer

Ссылка на сервис: imageoptimizer.net

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

5. Онлайн сервис ImageOptim

Ссылка на сервис: imageoptim.com

Если вам требуется регулярная пакетная обработка изображений, рекомендуем сервис ImageOptim. Он отлично подходит для публикации изображений в Интернете (легко сжимает изображения «Сохранено для Интернета» в Photoshop). ImageOptim API удаляет личные метаданные и преобразует изображения в форматы и размеры, оптимизированные для Интернета. Вы получите быстро загружаемые изображения, которые соответствуют вашим требованиям, не обременяя пользователей техническими возможностями или ограничениями размера файлов.

Это платный сервис. Минимальный платеж $12 в месяц, в рамках этого пакета вы сможете обрабатывать до 2000 изображений в месяц. Так же есть бесплатная пробная версия, которая доступна после регистрации на сайте

Важен не только размер, но и название

Помимо размера изображения, важно уделить внимание названию самого изображения (имя файла). Название файла должно соответствовать содержанию самого изображения. Например, если на изображении ночная дорога, в названии файла так и пишем «doroga-nochnaya.jpg». Нужно это для того, чтобы поисковые системы смогли проиндексировать картинку, и на ваш сайт переходили посетители из раздела «поиск по картинкам». Длина названия не должна превышать 30 символов, в названии желательно использовать только латинские буквы, цифры, вместо пробелов лучше использовать знаки «дефис» и «нижнее подчеркивание».

Оптимизация изображений для Интернета — KeyCDN

Автор Martin Williams

Обновлено 2 апреля 2022 г.

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

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

Давайте перейдем к трем основным доменам оптимизации изображений для Интернета.

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

1. Оптимизация изображений для повышения производительности в Интернете.
2. Оптимизируйте изображения для SEO, чтобы они лучше ранжировались и индексировались в поисковых системах.
3. Оптимизация изображений для социальных сетей для повышения вовлеченности и рейтинга кликов (CTR).

1. Оптимизация изображений для повышения производительности

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

Масштабирование изображения

Возможно, вы видели следующее предложение по оптимизации Google PageSpeed ​​Insights в тот или иной момент при выполнении теста скорости:

Сжимая и регулируя размер . .. вы можете сэкономить 14,2 КБ (54%) .

Эта рекомендация относится к вашим изображениям, уменьшенным по сравнению с исходными размерами либо с помощью CSS, либо с помощью атрибута HTML. Например, это может произойти, если отображаемое изображение имеет исходную ширину 1460 пикселей, но обслуживается с разрешением 730 пикселей, чтобы поместиться в контейнер, в который оно было помещено. Это может быть проблемой во многих системах управления контентом, таких как как WordPress или Magento, потому что разработчики тем склонны уменьшать изображения в адаптивных темах с помощью CSS.

Обычно рекомендуется загружать изображения в масштабе . Другими словами, кадрирование изображений перед загрузкой, что экономит ресурсы и обеспечивает соответствие рекомендациям PageSpeed ​​Insight. Кроме того, вы можете загрузить несколько разрешений ваших изображений и использовать правильное разрешение для нужного носителя, как определено в пользовательских таблицах стилей CSS.

Сжатие изображений

Какая часть веб-сайта состоит из изображений? Что ж, согласно HTTP-архиву, по состоянию на 1 марта 2022 года средний размер страницы рабочего стола составляет 2165,5 КБ, а средний размер мобильной страницы — 1,9 КБ.74,1 КБ. Это означает, что 44% среднего байта на странице, будь то на компьютере или мобильном телефоне, состоят исключительно из изображений. В ходе нашего внутреннего глубокого исследования мы обнаружили, что 46% экспертов заявили, что оптимизация изображений должна быть приоритетом номер один.

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

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

В зависимости от изображения и формата возможно уменьшение размера до 70%. Optimus можно установить на любой сайт WordPress.

С помощью Optimus вы также можете исправить следующее предложение по оптимизации PageSpeed ​​Insights:

Путем сжатия … вы можете сэкономить 4,7 КБ (30%) без потерь.

Адаптивные изображения

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

Например, ниже приведена разметка для изображения, которое не будет адаптивным:

Теперь добавление адаптивных атрибутов позволит браузеру выбирать и обслуживать определенное изображение при выполнении определенных условий:

Если вы используете WordPress, они теперь являются частью ядра, начиная с WordPress 4.4, поэтому вам не нужно беспокоиться об их добавлении. Плагин KeyCDN Cache Enabler полностью совместим с атрибутами HTML, которые делают изображения отзывчивыми.

Image CDN

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

Мы провели несколько тестов CDN изображений, и результаты показали, что общее время загрузки наших изображений с включенной CDN сократилось в среднем на 65%! TTFB и время загрузки контента были двумя самыми важными факторами, улучшенными за счет внедрения CDN.

Форматы файлов — PNG, JPEG, WebP и SVG

Чтобы эффективно оптимизировать изображения для веб-производительности, необходимо иметь хорошую стратегию для используемых форматов файлов. PNG и JPEG являются наиболее часто используемыми форматами файлов изображений в Интернете. Однако есть два других формата, которые вам также следует учитывать, это WebP и SVG. Как правило, они самые маленькие по размеру и могут творить чудеса, уменьшая общий размер веб-страницы.

WebP

WebP — это формат изображения, разработанный Google для обеспечения превосходного сжатия фотографий. На самом деле они даже сами используют WebP на таких сайтах, как YouTube. Мы провели тест в WordPress с 5 большими изображениями в формате JPEG, чтобы продемонстрировать, насколько реально происходит сжатие при преобразовании в формат WebP, а также значительную разницу в размерах между двумя форматами. Мы используем сжатие без потерь с Optimus для оптимизации изображений, а также конвертируем их в формат WebP при загрузке в медиатеку. Плагин Cache Enabler затем доставляет изображения WebP на основе поддерживаемых браузеров.

9093 93 КБ

File name	Original size	Compressed JPEG	WebP format	Size difference
jpg-to-webp-1.jpg	480 KB	407 KB	43 KB	89%
JPG-TO-WEBP-2.JPG	659 KB	578 KB	113 KB	80%
715 КБ	127 КБ	82%
JPG-TO-WEBP-4.	605 КБ	543 КБ	70 КБ	87%

Затем мы провели сравнительный тест страниц с помощью GTmetrix, JPEG и WebP, и вы можете увидеть общую разницу в размере страницы. WebP привел к уменьшению размера страницы на 77%.

SVG

Масштабируемая векторная графика (SVG) позволяет отображать векторную графику в браузере. Они обычно используются для логотипов компаний, таких как логотип KeyCDN, который вы видите в верхней части этого веб-сайта. Файлы SVG имеют очень маленький размер, могут масштабироваться без потерь без увеличения размера файла, а также могут быть анимированы или изменены с помощью JavaScript. Еще одним преимуществом изображений SVG является то, что они могут быть сжаты Brotli или Gzip.

Когда дело доходит до использования SVG, вы можете включать их так же, как и любое другое изображение, например:

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

Вы можете использовать бесплатный плагин, например SVG Support или Add Full SVG Support, чтобы иметь возможность загружать SVG в медиатеку WordPress.

2. Оптимизация изображений для SEO

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

Имена файлов изображений

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

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

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

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

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

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

Теги заголовка изображения

Атрибут заголовка изображения, также называемый тегом заголовка, не требуется Google. Однако недавно были некоторые дебаты по этому поводу на «круглом столе поисковой системы» в сообщении под названием «Google индексирует и ранжирует теги атрибутов заголовков изображений». Тестировщик провел тест со словом «plinkyploppitypippity» в поле атрибута title и оставил альтернативный текст пустым. Через несколько дней она обнаружила, что Google проиндексировал ее изображение по этому термину.

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

Если вы сомневаетесь, вы можете добавить тег title, так как это никому не повредит.

Карта сайта для изображений

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

Например, вы можете проверить, проиндексированы ли ваши изображения, просмотрев данные карты сайта в Google Search Console или воспользовавшись оператором поиска по сайту в Google. В этом примере мы используем WordPress и плагин Yoast SEO для создания и отправки наших карт сайта. Вы также можете использовать сторонний инструмент, например xml-sitemaps.com.

1. В Google Search Console нажмите «Сканировать», а затем «Карты сайта».
2. Нажмите на вкладку «Изображения», и вы увидите количество проиндексированных изображений из общего числа отправленных в каждой из ваших карт сайта.

Индексирование изображений

Когда Google находит ваши изображения, убедитесь, что они правильно индексируются. Один из способов устранения неполадок — использовать файл карты сайта, как мы описали выше. Другой — убедиться, что настройки вашего сервера и/или CDN настроены правильно. Поисковые системы проверяют наличие файла robots.txt в корне сайта. Если файл присутствует, они будут следовать инструкциям. Если файла нет, они будут сканировать все.

Вот типичный файл robots.txt, который разрешает все.

 Агент пользователя: *
Запретить:
 

1. Первая строка определяет сканер, к которому применяется правило. User-agent: * применяется ко всем ботам, таким как Googlebot, Bingbot и т. д.
2. Следующая строка определяет, какой путь можно индексировать. Запретить: указывает поисковой системе индексировать все, по существу, ничего не разрешая, или, другими словами, разрешая все.

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

rel="canonical" в заголовок HTTP, ваши изображения будут нормально индексироваться.

Если вы используете WordPress и ваши изображения CDN начинают деиндексироваться из вашей учетной записи Google Search Console, это, вероятно, проблема со структурой карты сайта. Предполагая, что вы используете плагин Yoast SEO для WordPress, вам может понадобиться добавить фрагмент в верхнюю часть файла functions. php .

Еще одна вещь, которую следует учитывать, если вы используете Yoast, это то, что иногда ваши страницы с прикрепленными изображениями могут начать индексироваться. Каждое изображение, которое вы загружаете в WordPress, размещается на собственном URL-адресе страницы вложения. Вы определенно не хотите, чтобы люди видели их, особенно Google. Один из способов быстро исправить это — просто зайти в расширенные настройки Yoast SEO и включить «Перенаправление» для URL-адресов вложений.

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

Метатеги Facebook Open Graph

Метатеги Facebook Open Graph управляют отображением вашего контента на Facebook. Когда вы делитесь публикацией на Facebook, теги сообщают Facebook, что нужно установить для вашего URL-адреса, заголовка, описания и одной из самых важных частей — вашего изображения. См. ниже пример поста на нашей странице в Facebook из нашего блога.

Существует множество различных мета-свойств, которые вы можете использовать, но ниже перечислены наиболее важные из них.

Их можно легко добавить на любой статический сайт вручную или, если вы используете систему управления контентом, такую ​​​​как WordPress, Yoast — отличный бесплатный плагин, который может автоматически добавлять эти теги для вас. Просто убедитесь, что они включены в социальных настройках плагина.

Рекомендуемый размер изображения

Рекомендуемый размер изображения, который хорошо подходит для Facebook, составляет 1200 x 630 пикселей. С плагином Yoast в WordPress вы можете вручную установить свойства OG. Это полезно, если ваша тема WordPress использует один размер для рекомендуемого изображения, но вы все равно хотите, чтобы ваше изображение Facebook выглядело с точностью до пикселя.

Карточки Twitter

Карточки Twitter работают очень похоже на метатеги Facebook Open Graph. Они показывают часть предварительного просмотра твита. Существует четыре основных типа карточек Твиттера:

• Сводная карточка: Название, описание, миниатюра и атрибуция учетной записи Твиттера.
• Сводная карта с большим изображением: Похожа на сводную карту, но с заметным изображением.
• Карта приложения: Детали мобильного приложения с прямой загрузкой.
• Карточка игрока: Предоставляет видео/аудио/медиа.

Ниже приведен пример URL-адреса в твиттере из нашего блога, где Твиттеру пришлось полагаться на нашу карточку, чтобы получить большое изображение и сводку.

KeyCDN запускает POP в Хельсинки https://t.co/4douVdrk8M #webperf

— KeyCDN (@KeyCDN) 25 октября 2018 г.

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

 





 ">
 

Их можно легко добавить на любой статический сайт вручную или, если вы используете CMS, например WordPress, Yoast может добавить эти теги автоматически. Убедитесь, что они включены в социальных настройках плагина.

Рекомендуемый размер изображения

Рекомендуемый размер изображения, который хорошо подходит для Twitter, составляет 1024 x 512 пикселей. Опять же, в плагине Yoast в WordPress вы можете вручную установить свойства мета-имени.

Расширенные пины Pinterest

В Pinterest есть так называемые «расширенные пины». В настоящее время существует 6 различных типов расширенных пинов: приложение, фильм, рецепт, статья, продукт и место. Они используют метаданные Open Graph так же, как Facebook. Если у вас уже есть эти теги на вашем сайте, все должно быть в порядке.

1. Перейдите к валидатору URL-адресов Pinterest (требуется вход в учетную запись Pinterest).
2. Проверка URL-адреса вашего сайта. Любой URL-адрес, содержащий метаданные Open Graph.
3. Нажмите «Применить», если все настроено правильно.

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

Резюме

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

Рекомендации по оптимизации веб-изображений

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

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

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

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

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

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

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

Перед загрузкой выберите правильный тип файла

Первый шаг при использовании изображения — выбрать наиболее подходящий для него тип файла. Большинство изображений в Интернете относится к одному из трех следующих типов:

В файле Portable Network Graphics (PNG) хранится графика на веб-сайтах. Этот формат идеально подходит для цифрового искусства, особенно для плоских изображений, таких как логотипы и значки.

Файл JPEG — это изображение, сохраненное в сжатом графическом формате, стандартизованном Объединенной группой экспертов по фотографии (отсюда «JPEG»). Этот формат файла лучше всего подходит для фотографий, потому что большинство цифровых камер используют расширения JPEG в качестве основы.

Файлы Graphics Interchange Format (GIF) могут содержать несколько изображений одновременно. По этой причине они используются для создания простых анимаций с помощью процесса, похожего на флипбук.

Уменьшить размер файла изображения

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

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

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

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

Оптимизировать замещающий текст изображения

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

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

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

Вот несколько советов по добавлению замещающего текста к изображениям:

• Добавляйте замещающий текст ко всем недекоративным изображениям.
• Пишите кратко и описательно.
• Не включайте в текст «изображение» или «фото» — просто опишите, что увидит зритель.
• Спросите себя, будет ли страница одинаково понятной, если вы поменяете местами изображения с их текстовыми альтернативами.
• Для связанных изображений убедитесь, что замещающий текст описывает действие, которое будет выполнено при нажатии пользователем.

Правильное сжатие

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

Сравните эти два сжатых изображения:

Высокое разрешение.

Низкое разрешение.

Как правило, если вы используете изображение для своего веб-сайта, вы должны использовать некоторую степень сжатия. Для JPG обычно качество между 70-90 процентами обеспечивает хороший баланс. Такие программы, как Adobe Photoshop, предлагают инструменты, облегчающие сжатие изображений.

Кратко опишите свои фотографии в исходном коде

Исходный код, такой как HTML в Интернете, описывает макет страницы для браузера. Поисковые роботы (поисковые системы) могут сканировать только те изображения, которые правильно размещены в исходном коде, поэтому, если вы хотите, чтобы ваш веб-сайт отображался в Google или Bing, четкие описания изображений в коде веб-страницы являются обязательными.

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

• Используйте программу. Программы дизайна веб-страниц/сайтов, такие как Adobe Dreamweaver, позволяют вставлять изображения, устанавливать теги и атрибуты доступности и видеть эти элементы в HTML-коде. Таким образом, вы можете вносить изменения непосредственно в код по мере необходимости.
• Дайте пользователям соответствующие изображения. Атрибут под названием «srcset» позволяет определить список версий одного и того же изображения разного размера и предоставить информацию о размере каждой из них. С его помощью браузер автоматически предоставляет пользователям лучшие изображения для их устройств (например, мобильных или настольных).
• Удалить ненужные данные. Изображения содержат метаданные — информацию о том, где и когда была сделана фотография, тип камеры и т. д., — которые могут замедлить работу веб-сайта. Может есть смысл удалить.

Понимание цели вашего изображения

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

Итак, что вы можете сделать, чтобы ваш сайт не терял конверсий и кликов?

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

Лучшие изображения, лучшие практики, лучшие веб-сайты

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