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


как выйти в топ поиска по картинкам — SEO на vc.ru

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

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

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

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

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

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

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

Размещайте изображения рядом с текстом, который они иллюстрируют.

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

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

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

Навигация
  • Планы
  • Характеристики
  • Клиенты
  • Связаться с нами
  • Забронировать демо
Авторизоваться Блог Кинста Брайан Джексон, Акции .

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

Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может иметь огромное влияние на скорость вашего сайта?

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

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

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

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

Что такое оптимизация изображения? (Оптимизированные и неоптимизированные изображения)

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

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

Вот пример оптимизированного и неоптимизированного изображения:

Как видите, при правильной оптимизации одно и то же изображение может быть на 75% меньше оригинала без потери качества.

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

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

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

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

Почему так важна оптимизация изображения? Каковы преимущества оптимизации изображений?

Хотя оптимизация изображений дает множество преимуществ, ниже приведены основные из них, о которых вы должны знать:

  • Более высокая скорость веб-сайта
  • Улучшен рейтинг SEO
  • Более высокий общий коэффициент конверсии продаж и потенциальных клиентов
  • Меньше хранилища и пропускной способности (что может снизить стоимость хостинга и CDN)
  • Более быстрое резервное копирование веб-сайтов (также снижает стоимость хранения резервных копий)

Помимо видео, изображения - это следующий по значимости элемент на веб-странице.Согласно HTTP-архиву, изображений составляют в среднем 21% от общего веса веб-страницы.

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

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

Согласно исследованию Strangeloop, задержка загрузки веб-сайта в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

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

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

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

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

Три вещи, которые играют огромную роль в оптимизации изображения:

  • Формат файла изображения (JPEG против PNG против GIF)
  • Сжатие (более высокое сжатие = меньший размер файла)
  • Размеры изображения (высота и ширина)

Выбрав правильную комбинацию из трех, вы можете уменьшить размер изображения до 80%.

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

1. Формат файла изображения

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

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

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

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

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

В WPBeginner мы используем все три формата изображений в зависимости от типа изображения.

2. Сжатие

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

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

Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, On1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

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

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

Существует также несколько популярных плагинов WordPress, таких как Optimole, EWWW Image Optimizer и другие, которые могут автоматически сжимать изображения при их первой загрузке. Многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений, потому что это просто и удобно.

Мы расскажем больше об этих плагинах WordPress позже в этой статье.

3. Размеры изображения

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

Обычно эти фотографии имеют разрешение 300 точек на дюйм и размер от 2000 пикселей и более. Эти высококачественные фотографии хорошо подходят для печати или настольных издательских систем. Они не подходят для веб-сайтов.

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

Например, мы оптимизировали фотографию с исходным размером файла 1,8 МБ, разрешением 300 точек на дюйм и размером изображения 4900 × 3200 пикселей.

Мы выбрали формат jpeg для более высокого сжатия и изменили размеры до 1200 × 795 пикселей, а также уменьшили размер файла изображения до 103 КБ. Это на 94% меньше исходного размера файла.

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

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

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

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

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

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

Adobe Photoshop

Adobe Photoshop - это программное обеспечение премиум-класса с функцией сохранения изображений, оптимизированных для Интернета. Просто откройте изображение и нажмите «Файл» Сохранить для Интернета ».

Откроется новое диалоговое окно. Справа вы можете установить разные форматы изображений.Для формата JPEG вы увидите разные варианты качества. Когда вы выбираете свои параметры, он также показывает размер файла в нижнем левом углу.

GIMP

GIMP - бесплатная альтернатива популярному Adobe Photoshop с открытым исходным кодом. Его можно использовать для оптимизации ваших изображений для Интернета. Обратной стороной является то, что его не так просто использовать, как некоторые другие решения из этого списка.

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

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

TinyPNG

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

Они сожмут изображение и дадут вам ссылку для скачивания. Вы можете использовать их дочерний веб-сайт TinyJPG для сжатия изображений JPEG.

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

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

JPEG Mini

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

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

ImageOptim

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

Альтернатива Windows для этого - Trimage.

Лучшие плагины для оптимизации изображений для WordPress

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

Ниже представлен наш список лучших плагинов для сжатия изображений WordPress:

  1. Optimole - популярный плагин от команды ThemeIsle.
  2. EWWW Оптимизатор изображения
  3. Сжатие изображений JPEG и PNG - плагин от команды TinyPNG, упомянутой выше в статье.
  4. Imagify - плагин от популярной команды плагинов WP Rocket.
  5. Оптимизатор изображения ShortPixel
  6. WP Smush
  7. reSmush.it

Использование любого из этих плагинов для оптимизации изображений WordPress поможет вам ускорить работу вашего сайта.

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

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как оптимизировать изображения для веб-сайтов и блогов

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

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

1. Размеры файлов

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

Самый простой способ избежать слишком больших изображений - убедиться, что при редактировании фотографий вы выбрали «Сохранить для Интернета.Вы можете сделать это с помощью быстрого сочетания клавиш - command + option + shift + s - в Photoshop, которое откроет новое окно с несколькими различными параметрами веб-оптимизации. Вы можете отформатировать свой файл (о чем мы поговорим ниже), настроить качество изображения (в правом верхнем углу диалогового окна) и установить размер файла (в правом нижнем углу).

Розовые фламинго на закате, автор - Анна Омельченко

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

Close Up Shih Tzu Dog by chaoss

Знание параметров вашей веб-страницы является ключевым моментом, так что вы всегда можете настроить изображение до нужного размера.Например, если на вашем сайте есть столбцы шириной 800 пикселей, вам нужно настроить изображения, чтобы они также были шириной 800 пикселей. Высота изображения не имеет большого значения, если вы не собираетесь использовать изображения определенной формы. Также важно следить за количеством килобайт в изображении, которое можно просмотреть в левом углу окна «Сохранить для Интернета». Хорошее практическое правило состоит в том, что небольшое количество килобайт означает более быструю загрузку. Но вам все равно необходимо внести соответствующие изменения, и вам не придется жертвовать качеством фотографий ради времени загрузки.Менее 300К обычно безопасно.

2. Форматирование файлов изображений

Изображения бывают всех форм и размеров, и важно убедиться, что они имеют соответствующую маркировку для их конечного назначения. Существует три стандартных типа файлов изображений, с которыми вы, скорее всего, будете работать: JPEG, PNG и GIF. Каждый тип файла обладает уникальными качествами, которые делают его подходящим для конкретных сценариев: JPEG наиболее подходит для сжатия цифровых фотографий, а GIF обычно используется для видеоклипов с низким разрешением, анимированных изображений и логотипов с ограниченной цветовой палитрой.PNG широко используются в Интернете, поскольку они поддерживают изображения на основе палитры, оттенки серого и изображения RGB.

Котенок дома в солнечный день, Максим Ширков

Чтобы (сверх) упростить: используйте JPEG для фотографий, PNG для векторных изображений и GIF для движущихся изображений. Вы можете выбрать оптимальный формат для ваших изображений при сохранении в любой программе для редактирования фотографий. Обратите внимание, что некоторые типы файлов могут лучше работать с платформой, на которой вы работаете, поэтому имейте это в виду при форматировании изображения.

3.Не делайте миниатюрные изображения разрешенными

Черника крупным планом от bozulek Человеческий глаз, Макро Анемона Свежий мед в сотах от StudioSmart Черно-белые зебры от Шанталь де Брюйн

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

4. Именование изображений

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

Посреди Тосканы от JaroPienza

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

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

Хотите найти изображения для оптимизации для Интернета? В нашем отчете «Тенденции творчества за 2015 год» представлено более десятка тщательно отобранных коллекций, в том числе несколько, посвященных тому, что популярно в социальных сетях и Интернете. Посмотреть »

Верхнее изображение: Летающие мыльные пузыри с отраженными домами от bonzodog

Создаете мощный мультимедийный веб-сайт? Узнайте еще больше о сжатии изображений.

.

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

Стратегия успешного поиска

Эта статья была первоначально опубликована 5 сентября 2013 г. и обновлена ​​18 октября 2019 г.

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

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

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

Приступим!

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

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

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

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

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

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

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

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

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

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

Точно так же электронные информационные бюллетени с визуальными элементами получают больше кликов и вовлеченности.Изображения также увеличивают время пребывания на странице.

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

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

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

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

Связано: Как заявить о себе в социальных сетях

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

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

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

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

Вернуться к началу

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

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

Вернуться к началу

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

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

Давайте изменим это с помощью следующих семи шагов:

  1. Выберите правильные изображения.
  2. Внимательно рассмотрите текст, связанный с вашими изображениями.
  3. Отрегулируйте размер и формат изображения.
  4. Учитывайте отложенную загрузку.
  5. Включить кеширование браузера.
  6. Не забывайте метаданные изображения.
  7. Создайте карту сайта для изображений.

1. Выберите нужные изображения

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

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

Не добавляйте изображения в сообщение ради изображений.

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

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

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

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

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

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

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

Связано: Рекомендации по использованию изображений на страницах товаров электронной коммерции

Stock Photo - это вариант

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

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

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

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

По теме: Как использовать стоковую фотографию 8 разных способов

Перед фактами

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

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

Вернуться к началу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По теме: Как проводить SEO-исследование ключевых слов для привлечения трафика на ваш сайт

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

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

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

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

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

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

Вернуться к началу

3. Отрегулируйте размер и формат изображения

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

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

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

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

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

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

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

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

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

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

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

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

Связано: 10 лучших практик редактирования изображений

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

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

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

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

JPEG

Joint Photographic Experts Group - более известная как JPG / JPEG - является одним из самых старых типов файлов.

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

GIF

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

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

PNG

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

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

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

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

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

Эксперимент, проведенный Ahrefs, сравнил, как инструменты изменения размера изображения работают при уменьшении среднего размера файла:

  • Imageoptim: 69% (JPEG) против 40% (PNG)
  • Shortpixel: 42% (JPEG) против 59% (PNG)
  • Kraken.io: 13% (JPEG) против 63% (PNG)
  • TinyPNG: 27% (JPEG) против 65% (PNG)
  • Optimizilla: 27 (JPEG) против 60% (PNG)
  • Imagify.io: 6% (JPEG) против 1% (PNG)
  • Compressor.io: 42% (JPEG) против 58% (PNG)

Интересно отметить, что хотя Imageoptim подходил для JPEG, он был ужасен для PNG.Итак, в целом Shortpixel - ваш лучший выбор. Вы также можете сжимать изображения с помощью плагина, такого как Smush, или инструмента оптимизации изображений, такого как Pixlr (JPEG) или GIMP.

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

Теперь, если вы не хотите возиться с плагинами, вы всегда можете использовать Photoshop для изменения ваших изображений.Для этого используйте параметр «Сохранить для Интернета», который минимизирует размер файла при оптимизации качества.

Связано: 5 важных приемов Photoshop для начинающих

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

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

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

Вернуться к началу

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

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

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

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

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

Изображение: Плагин A3 для отложенной загрузки

К началу

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

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

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

  ExpiresActive On # Изображений ExpiresByType image / jpg «доступ на 1 год» ExpiresByType image / jpeg "доступ на 1 год" ExpiresByType image / gif "доступ на 1 год" ExpiresByType image / png "доступ на 1 год"  

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

Вернуться к началу

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

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

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

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

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

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

Связано: структурированные данные - кто, что и почему использует схему

Вернуться к началу

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

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

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

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

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

Изображение: изображения Sitemap Справка консоли поиска

По теме: 12 лучших инструментов SEO, которые помогут вашему сайту отображаться в результатах поиска

Вернуться к началу

Заключение и следующие шаги

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

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

Если вы чувствуете себя увязшим в оптимизации изображений для SEO, GoDaddy SEO Services поможет вам.Свяжитесь с SEO-экспертами GoDaddy сегодня, чтобы узнать, чем они могут помочь!

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

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий