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

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

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

Давайте начнем!

Почему изображения имеют значение

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

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

Изображения усиливают содержание

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

Подумайте о том, сколько времени понадобится, чтобы прочитать короткий абзац. Не так уж и много, правда? Однако изображения могут обрабатываться мозгом за 13 миллисекунд — в 60 000 раз быстрее, чем текст.

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

Изображения улучшают запоминание контента

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

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

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

Изображения передают вашу фирменную идентичность

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

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

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

Изображения привлекают трафик на ваш сайт

Поиск изображений составляет 27% от всех запросов. Кроме того, значительно увеличилось число посещений веб-сайтов в результате поиска изображений, поскольку Google обновила свою кнопку «Просмотр изображения» с поиска изображений до «Посетить [страницу]».

Изображения делают ваш сайт более привлекательным

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

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

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

7 шагов по оптимизации изображений для Интернета

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

Итак, давайте изменим это с помощью следующих семи шагов.

1. Выберите правильные изображения

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

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

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

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

Используйте свои собственные изображения

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

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

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

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

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

Стоковые фотографии – один из вариантов

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

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

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

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

Лицом к лицу с фактами

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

Безусловно, существует множество ситуаций, когда использование изображений лиц людей просто не работает. Но когда есть возможность — сделайте это.

2. Внимательно изучите текст, связанный с вашими изображениями

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

Не поддавайтесь искушению пропустить заполнение этих текстовых деталей.

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

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

Итак, давайте разберемся с этим.

Название изображения

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

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

Имя файла также должно включать ключевые слова, по которым изображение может ранжироваться в поиске Google, без использования стоп-слов. Вы должны разделить ключевые слова дефисами, а не подчеркиваниями: поисковые системы их не распознают.

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

Текст alt для изображения

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

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

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

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

Подпись к изображению

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

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

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

Описание изображения

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

3. Настройте размер и формат изображения

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

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

Измените размер ваших изображений

Средний веб-сайт содержит около 1,8 МБ изображений, что составляет 60% от размера сайта. Хотя очень важно размещать на своем сайте высококачественные фотографии с высоким разрешением, они часто могут привести к низкой скорости загрузки страниц.

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

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

Когда дело доходит до онлайн-доступа, скорость — это почти все. 

Например, Amazon обнаружил, что задержка загрузки сайта в одну секунду может стоить им 1,6 миллиарда долларов в год.

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

Здесь важно отметить, что размер изображения и размер файла — это две разные вещи.

Размер изображения относится к измерению изображения (т. е. 1024×680 пикселей), тогда как размер файла — это объем пространства, необходимого для его хранения на сервере (т. е. 350 кб).

Как и следовало ожидать, чем больше изображение, тем больше размер файла. Тем не менее, это не повод для тревоги при оптимизации изображений для веб-сайтов. Даже если качество изображения ниже, это может совсем не повлиять на просмотр в интернете — подобное просто означает, что пользователи не смогут распечатать картинку, поставить ее в рамку и повесить на стену.

Выберите правильные типы файлов изображений

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

Наиболее распространенными типами файлов веб-изображений являются JPEG, GIF и PNG.

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

JPEG

JPG или JPEG — является одним из старейших типов файлов.

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

GIF

GIF стал известным благодаря анимированным растровым графическим файлам.

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

PNG

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

Выберите правильную степень сжатия

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

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

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

Другие советы по работе с файлами изображений большого размера

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

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

4. Рассмотрите ленивую загрузку

Ленивая загрузка — это когда браузер откладывает загрузку изображений до тех пор, пока они не будут отображаться на экране. Это означает, что изображения, расположенные ниже на веб-сайте (ниже свитка прокрутки), не будут загружаться, пока пользователь не перейдет на эту часть веб-сайта.

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

Несмотря на продолжающиеся дебаты о последствиях ленивой загрузки для SEO, инструмент Google PageSpeed ​​Insights рекомендует это делать.

Есть несколько способов реализовать ленивую загрузку. Однако большинство из них связаны с кодингом вручную. Тем не менее, если вы используете WordPress, настоятельно рекомендуется плагин A3 Lazy Load.

5. Включите кэширование в браузере

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

Вы также можете включить кэширование в браузере вручную, добавив этот код в ваш файл .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg «access 1 year»
ExpiresByType image/jpeg «access 1 year»
ExpiresByType image/gif «access 1 year»
ExpiresByType image/png «access 1 year»
</IfModule>

Измените «access 1 year» в коде для любого периода времени, который кажется подходящим для ваших нужд.

6. Не забывайте метаданные изображений

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

Метаданные могут составлять до 15% от общего размера изображения JPEG.

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

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

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

Для создания таких структурированных данных лучше всего следовать рекомендациям Google по структурированным данным.

7. Создайте карту сайта изображений

Карта сайта важна, потому что она сообщает поисковым системам обо всех страницах вашего сайта.

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

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

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

Вывод и следующие шаги

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

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

Всем успешной работы и творчества!

Источник