1. Масштабирование изображения
2. Сжатие изображения
3. Адаптивные изображения
4. Изображение CDN
5. WebP
6. SVG
7. 2. Оптимизируйте изображения для SEO
8. Имена файлов изображений
9. Изображение Alt Text
10. Изображение Карта сайта
11. Индексирование изображений
12. Рекомендуемый размер изображения
13. Рекомендуемый размер изображения
14. Pinterest Богатые булавки
15. Фрагменты Google+
16. Резюме

Брайан Джексон

Обновлено 10 апреля 2017 г.

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

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

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

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

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

Когда дело доходит до работы с изображениями, начинание с основ может быть очень важным, и мы имеем в виду, как масштабируются изображения. Большинство из вас, вероятно, видели следующее Google Pagespeed Insights рекомендация в тот или иной момент при проведении теста скорости: предложение по оптимизации: «Сжимая и корректируя размер… вы можете сэкономить 5,8 КБ (51%)».

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

Обычно рекомендуется загружать изображения в масштабе . Иногда это означает обрезать их с помощью Photoshop, Paint или Gimp, прежде чем загружать их. Это экономит ресурсы, а также обеспечивает соответствие правилам Google Pagespeed. Или вы также можете загрузить несколько разрешений ваших изображений и служить правильное разрешение для правильного устройства ,

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

Сколько веб-сайта состоит из изображений? Ну, согласно HTTP Архив 62% средних байтов на страницу состоят из изображений. Один из лучших способов оптимизировать ваши изображения - воспользоваться интеллектуальное сжатие изображений ,

46% экспертов заявили, что приоритет номер один или фокус должны быть на оптимизации изображения! - Web Perf Advice

KeyCDN разработан и поддерживается Optimus Image Optimizer именно по этой причине. Это уменьшает размер файла изображения без видимой потери качества. И в зависимости от изображения и формата возможно уменьшение размера до 70%. У нас есть плагин для WordPress, и если вы используете API , он может быть использован с любой платформой. Библиотека PHP для Optimus API доступен на GitHub , Используя Optimus, вы также можете исправить следующую рекомендацию Google Pagespeed Insights: Предложение по оптимизации: « Сжимая … вы можете сэкономить 4,7 КБ (30%) без потерь».

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

Адаптивные методы изображения , например, атрибуты HTML srcset и sizes позволяют нам обслуживать различные масштабированные изображения в зависимости от размера дисплея . Они расширяют элементы img и source для предоставления списка доступных источников изображений и их размеров. Браузеры могут затем использовать эту информацию, чтобы выбрать лучший источник изображения. Оба атрибута являются частью Спецификация HTML и может использоваться отдельно или в сочетании с элементом изображения ».

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

<img src = "responseive-images-car.jpg" alt = "отзывчивый автомобиль изображений" width = "640" height = "434">

Вот пример, когда вы добавляете новые адаптивные атрибуты.

<img srcset = "responseive-images-car-160.jpg размеры 160 Вт, responseive-images-car-320.jpg 320 Вт, responseive-images-car-640.jpg 640 Вт, responseive-images-car-1280.jpg 1280 Вт" размеры = "(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px" src = "responseive-images-car.jpg" alt = "отзывчивый автомобиль изображений">

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

Изображение CDN

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

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

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

WebP

WebP это формат изображения, разработанный Google для обеспечения превосходного сжатия фотографий. На самом деле они даже сами используют WebP на таких сайтах, как YouTube. Мы запустили тест в WordPress с 5 большими изображениями в формате JPG, чтобы продемонстрировать степень сжатия и значительную разницу в размерах файлов .jpg и .webp. Мы используем сжатие без потерь с Optimus для оптимизации изображений, а также для преобразования в формат WebP после загрузки в медиа-библиотеку. WordPress Cache Enabler затем доставляет изображения WebP на основе поддержки браузера (Chrome и Opera).

Имя файла Оригинальный размер Сжатый Размер JPG WebP Разница в размере jpg-to-webp-1.jpg 480 КБ 407 КБ 43 КБ 89% jpg-to-webp-2.jpg 659 КБ 578 КБ 113 КБ 80% jpg-to-webp- 3.jpg 787 КБ 715 КБ 127 КБ 82% jpg-to-webp-4.jpg 617 КБ 543 КБ 61 КБ 88% jpg-to-webp-5.jpg 605 КБ 543 КБ 70 КБ 87%

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

SVG

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

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

<img src = "circle.svg" width = "100" height = "100">

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

Вы можете использовать бесплатный плагин, как Поддержка SVG или же Добавить полную поддержку SVG чтобы вы могли загружать SVG-файлы в медиатеку WordPress. Примечание. SVG могут быть несовместимы с другими сторонними плагинами WordPress.

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

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

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

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

Например, в этом сообщении в блоге наше рекомендуемое изображение называется: optimize-images-for-web.webp. Это тема нашего поста. И ** всегда используйте дефисы, когда есть несколько слов. ** Googlebot видит дефисы как разделитель. Не используйте подчеркивания , иначе Google будет читать все как одно слово.

Изображение Alt Text

Alt-текст, также называемый alt-тегами, описывает изображение и назначение для него на странице. Как правило, вы хотите, чтобы оно было коротким, но описательным. Посмотрите пример ниже нашего показанного изображения и альтернативного текста, который мы выбрали. Часто это может быть похоже на выбранное вами имя файла.

<img src = "optimize-images-for-web.webp" alt = "оптимизировать изображения для Интернета">

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

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

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

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

Изображение Карта сайта

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

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

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

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

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

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

Пользователь-агент: * Disallow:

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

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

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

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

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

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

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

<meta property = "og: url" content = "https://www.keycdn.com/blog/resource-hints/" /> <meta property = "og: type" content = "article" /> <мета-свойство = "og: title" content = "Подсказки к ресурсам - что такое предварительная загрузка, предварительная выборка и предварительное подключение?" /> <meta property = "og: description" content = "Узнайте, как вы можете использовать подсказки и директивы ресурсов, такие как предварительная загрузка, предварительная выборка и предварительное подключение, для ускорения доставки ресурсов на ваших веб-сайтах." /> <meta property = "og: image" content = "https://blog.keycdn.com/blog/wp-content/uploads/2016/03/resource-hints.png" />

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

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

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

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

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

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

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

<meta name = "twitter: card" content = "summary_large_image" /> <meta name = "twitter: description" content = "Иногда возникает путаница в отношении того, как CDN обрабатывает изображения, и поэтому в этом посте мы покажем вам лучшие практики для индексация изображений в поисковой выдаче. " /> <meta name = "twitter: title" content = "CDN SEO: индексирование изображений в поисковой выдаче" /> <meta name = "twitter: site" content = "@ keycdn" /> <meta name = "twitter: image" content = "https://blog.keycdn.com/blog/wp-content/uploads/2015/10/cdn-seo-indexing-images.png" /> <meta name = "twitter: creator" content = "@ keycdn "/>

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

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

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

Pinterest Богатые булавки

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

1. Перейти к Валидатор URL Pinterest
2. Проверьте URL с вашего сайта. Любой URL, на котором есть метаданные Open Graph.
3. Нажмите «Применить», если все настроено правильно.

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

Фрагменты Google+

Google+ использует микроданные Schema.org в качестве основного способа получения данных для своих обрывки , Но он также использует метаданные Open Graph, как Facebook и Pinterest. Так что, если у вас уже есть эти теги на вашем сайте, вы должны быть в порядке.

Резюме

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

Похожие

Комментарии