4 основных совета по оптимизации изображений


Содержание материала:

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

Введение

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

1. Повышение производительности

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

1.1. Масштабирование изображений

Адаптируя размеры изображений специально для своего сайта, вы можете значительно сэкономить ресурсы и улучшить производительность сайта. Обращайте внимание на размеры своего изображения и размеры того блока, куда вы хотите это изображение вставить: если ваша картинка больше необходимого размера, то при помощи CSS она все равно будет уменьшена до подходящего размера, но ресурсы, затрачиваемые на ее загрузку, останутся прежними. Поэтому крайне важно загружать изображения в подходящем масштабе: согласно исследованиям, это может сэкономить более половины ваших ресурсов!

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

По информации HTTP Archive, вес изображений составляет 62% от общего веса каждой страницы веб-сайта. Поэтому лучший способ оптимизации – сжатие изображений без потерь. При таком методе сжатия изображение уменьшается по весу, но при этом не теряет в качестве. Используя этот метод оптимизации, вы можете уменьшить использование своих ресурсов на 30%.

1.3. Отзывчивые изображения

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

А вот так вы можете добавить дополнительные атрибуты для того, чтобы на сайте использовались разные размеры изображения для разных дисплеев (в данном случае дисплеи с шириной экрана 160, 320, 640 и 1280 пикселей соответственно):

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

1.4. Использование CDN

Оптимизировать загрузку изображений можно при помощи использования CDN (Content Delivery Network). Графические файлы будут загружаться намного быстрее, а значит, общее время загрузки страницы также уменьшится. Проведенные тесты показали, что включение CDN позволяет сократить время загрузки в среднем на 75 процентов.

1.5. Форматы изображений – PNG, JPEG, WebP, SVG

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

WebP

Этот формат был разработан корпорацией Google в 2010 году. Он позволяет наиболее эффектно сжать изображение: проведенные тесты показали, что использование WebP вместо JPEG позволяет примерно в два раза увеличить скорость загрузки страницы и более чем на 70% уменьшить ее вес.

SVG (Scalable Vector Graphics — масштабируемая векторная графика)

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

Совет:
в некоторых CMS (к примеру, в WordPress) файлы с этим расширением могут быть запрещены из соображений безопасности. В этом случае вам нужно воспользоваться одним из плагинов, например, SVG Support или Add Full SVG Support.

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

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

2.1. Названия файлов изображений

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

Совет:
если в качестве названия вашего изображения вы хотите использовать фразу – к примеру, “Summer Flower Arrangements”, то обязательно разделяйте ее дефисами: “summer-flower-arrangements.jpg”, так как поисковый робот Google рассматривает дефис в названии файла как разделение, пробел. Если вы будете использовать нижнее подчеркивание, то робот всю фразу воспримет как одно целое слово.

2.2. Атрибут alt

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

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

2.3. Атрибут title

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

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

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

2.5. Индексация изображений

Чтобы убедиться в том, что ваши изображения индексируются должным образом, вы можете использовать один из двух подходящих способов. Первый способ – использование карты сайта для изображений – был описан выше. А второй способ – это убедиться, что параметры вашего сервера или CDN заданы правильно. Поисковые роботы будут искать на вашем сайте файл robots.txt: если они найдут его, то будут следовать приведенной там инструкции, а если нет, то начнут сканировать абсолютно все.
Ниже вы видите пример стандартного файла robots.txt – его достаточно для того, чтобы вы точно знали, что все ваши изображения можно просканировать:

User-agent: *
Allow:
Disallow:

Первая строка (User-agent) определяет, к какому поисковому боту относится данное правило. Если вы поставите звездочку (*), то правило будет распространяться на всех роботов; либо вы можете написать название конкретной поисковой системы – Google, Yandex и т.д. Вторая и третья строчки, соответственно, отвечают за те разделы сайта, к которым робот имеет (allow) или не имеет (disallow) доступ.

Если вы используете CDN, необходимо добавить строчку rel=»canonical» в заголовок HTTP для того, чтобы поисковые боты понимали, что CDN-контент – это просто копия, а не продублированный материал:

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

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

3.1. Разметка Facebook Open Graph

Теги Open Graph определяют, как будет выглядеть материал при появлении на Facebook. Когда вы собираетесь поделиться какой-либо статьей, именно мета-теги задают все параметры записи: URL-адрес, заголовок, описание и, самое главное, изображение. Вы можете использовать множество разных мета-тегов, но основные из них:

Эти мета-теги можно вручную добавить на любой статический сайт; если вы используете CMS (к примеру, WordPress), то это можно сделать при помощи плагина (например, Yoast SEO).

Рекомендуемый размер изображения для Facebook: 1200 на 630 пикселей.

3.2. Разметка Twitter Cards

Функции этой разметки схожи с Facebook Open Graph: они используются для отображения анонса статьи в Твиттере. Существует 4 основных вида Twitter Cards:

Summary Card: запись состоит из заголовка, описания, миниатюры и авторства;
Summary Card with Large Image: такая же запись, как и Summary Card, но с большим размером изображения;
App Card: запись с возможностью скачивания мобильного приложения;
Player Card: запись с каким-либо медиа-контентом (видео, аудио).

Ниже вы видите код Summary Card with Large Image:

Как и в случае с Facebook Open Graph, эти мета-теги можно добавить самостоятельно на любой статический сайт либо при помощи плагина на CMS.

Рекомендуемый размер изображения для Twitter: 1024 на 512 пикселей.

3.3. Сниппеты Google+

Google+ использует микроданные Schema.org в качестве главного источника получения информации для своих сниппетов, но также использует и разметку Open Graph (как Facebook). Поэтому если выше вы уже настроили эти теги, то больше вам не нужно ничего делать.

Заключение

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

Оптимизация изображений сайта: теория и практика

От автора

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

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

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

Это значит, что поисковики должны «понимать», что в этом изображении, на какую оно тему, и как связано с окружающим её текстом.

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

Название файлов для изображений, типа «фото 1», «фото 2» нежелательны.

Чтобы составить, тег alt для фото, представьте, что гость сайта не видит фото, а только читает этот тег alt. Добейтесь, чтобы он понял, что на фото изображено.

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

Подготовительная оптимизация фото

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

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

Сжатие фото это уменьшение размера файла картинки, по возможности, без потери её качества.

Уменьшить размер файла картинки можно несколькими способами:

  • Уменьшить размер фото. Метод самый простой, но чаще неприемлемый, для сайтов, где большие фото нужны для тематики сайта. Оптимальный размер для картинки сайта, 448×336 пикселей.
  • Удалить метаданные картинки. Это способ часто остается за скобками, так как объём метаданных незначителен. Как правило, сервисы по обработки фото выносят это удаление отдельным пунктом.
  • Использовать специальные сервисы сжатия фото. Самый эффективный способ уменьшить фактический размер фото, без удаления метаданных. Здесь всё зависит от качества сервисов сжатия. Я покажу два моих любимых сервиса для сжатия, которые дают максимальный эффект по сжатию.

Сервисы сжатия фото

№1. Iloveimg

Сервис Iloveimg поможет отлично сжать картинки формата JPG, PNG и GIF. Сжимать фото можно пакетами и по отдельности.

№2. Tinypng

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

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

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

Другие факторы оптимизации фото

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

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

Такая же функция есть в некоторых браузерах, в частности в Google. Он найдет похожее фото в своей базе, через команду «Найти картинку (Google)», однако не укажет, какая картинка первоисточник.

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

Еще советы по оптимизации

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

То есть рекомендовано вставлять фото на сайт в своём реальном размере. То есть у вас фото 800×600, вставляете его на сайт, как фото 800×600, а не уменьшайте редактором сайта до 500×. Данный совет особенно актуален для больших фото.

Используйте сторонние хранилища картинок. Совет заключается в исключении своего сервера для показа фото на сайте. Фото вставляется на сайт, по стороннему URL специального хранилища картинок. Я этот метод никогда не использую, так как можно потерять все картинки сайта в один день.

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

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

В-третьих, используйте CDN сервера для хранения фото. Рекомендую, сервис CloudDinary. Для WordPress есть плагин Cloudinary – Image management and manipulation in the cloud + CDN.

Вывод

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

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

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

Задавались ли вы когда-нибудь такими вопросами:

  • Почему во время поиска изображений в Googlе я не вижу картинок со своего сайта?
  • Нужно ли добавлять альт теги к изображениям?
  • В чём разница между JPEG, GIF, PNG форматами и какой из них лучше выбрать?

Данная статья ответит на эти и на множество других вопросов, так что давайте приступим:

1. Присваивайте изображениям описательные названия, используя простые понятные слова

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

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

Для примера воспользуемся вот этой фотографией:

Можно оставить название, которое автоматически сгенерировала камера, например DCMIMAGE10.jpg. Однако намного разумнее будет назвать файл 2012-Ford-Mustang-LX-Red.jpg

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

  • 2012 Red Ford Mustang LX
  • Ford Mustang LX Red 2012
  • Red Ford Mustang LX 2012

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

Топ-пост этого месяца:  Мнение вебмастеров о последствиях мартовского апдейта Google

Если вам лень заниматься столь скрупулёзным трудом, то хотя бы приучите себя включать в названия ключевые слова (и постарайтесь, чтобы названия были описательными!)

2. Оптимизируйте альт теги с умом

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


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

Давайте взглянем на исходный код альт тегов:

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

Вот несколько правил касательно альт тегов:

  • Описания приводите на понятном английском языке (латинскими буквами, если на русском), как и в случае с изображениями.
  • Если вы реализуете товары, имеющие номера моделей, их также следует вводить в альт теги.
  • Не вводите ненужных слов (например: alt = ”форд мустанг мощный автомобиль купить сейчас самые низкие цены продажа со скидкой”)
  • Не используйте альт теги в изображениях, которые используете для украшения сайта. Поисковые механизмы могут отреагировать на такое действие резким понижением приоритета всех изображений без исключения.

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

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

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

  • Интерьер авто
  • Заднюю часть машины, особенно этот прекрасный спойлер
  • Снимок дисков крупным планом
  • Снимок того, что под капотом — это же Мустанг!

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

  • 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> где тегом будет: alt = ” 2012 Ford Mustang LX Red Leather Interior Trim “
  • 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> с тегом: alt = ” 2012 Ford Mustang LX Red Rear View Air Spoiler “

Главное здесь — сделать теги описательными, дабы привлечь потенциальных покупателей на сайт: за это немалый кусок работы Google вознаградит вас клиентами.

Крупные изображения

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

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

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

4. Стремитесь к максимально меньшему размеру изображения

  • Большинство потребителей ждут загрузки сайта с компьютера или планшета около трёх секунд.
  • …и около пяти секунд для загрузки страницы с телефона.
  • Сотрудники Amazon подсчитали, что если скорость загрузки страницы увеличить на 1 секунду, компания теряет 1.6 миллиардов долларов в год.
  • В поисковых алгоритмах Google также используется время загрузки страницы.

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

И что делать?

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

Если вы можете уменьшить размер файла, это прямым образом увеличит скорость загрузки страницы, что в свою очередь сохранит для вас посетителей. Если вы пользуетесь Photoshop, то можете воспользоваться опцией “Save for Web” (Сохранение для использования в сети). Данная команда позволит сохранить изображение, максимально уменьшая его размер без потери качества.

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

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

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

Что, если у меня нет Photoshop?

Если данной программы у вас нет — не беда. В интернете найдётся достаточно онлайн-редакторов, позволяющих работать с изображениями. Adobe даже выпустила онлайн приложение photoshop.com. Данная программа не обладает всеми функциями обычного Photoshop, однако там есть все базовые инструменты для работы с изображениями и за её использование вам не придётся отдавать баснословные суммы.

Вот ещё несколько удобных онлайн-редакторов:

  • PicMonkey — эксперты описывают его как «просто потрясающий редактор»
  • Pixlr — очень удобный редактор, к которому также абсолютно бесплатно прилагается приложение на смартфон, так что работать можно хоть на ходу
  • FotoFlexer — ещё один довольно продвинутый онлайн-редактор, который позволяет работать даже со слоями

И, наконец, всегда есть GIMP. GIMP — общедоступная, бесплатная программа, работающая на Windоws, Mac и Linux. Приложение может всё то же, что и Photoshop, однако не столь удобно в использовании. Но среди бесплатных приложений найти что-либо лучше, чем GIMP, просто невозможно.

Сколько должны «весить» изображения?

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

5. Запомните, какой формат использовать, и в каких случаях

Существуют три основных типа файлов, в которых сохраняются изображения: JPEG, GIF и PNG.

Рассмотрим все три на примере одного и того же изображения и сравним разницу.

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

GIF (.gif) не могут обеспечить столь высокое качество, как у JPEG, а потому используются для более простых изображений, таких как иконки или картинки декоративного эффекта. Также GIF поддерживают анимацию, о чём наверняка знает каждый пользователь Reddit.

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

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

Однако обратите внимание, что изображение PNG-24 «весит» в три раза больше, чем версия PNG-8. Так что будьте внимательны, когда работаете с этим форматом.

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

А вот несколько рекомендаций по использованию разных форматов:

  • В электронной торговле для большинства случаев лучшим выбором будет JPEG. Этот формат обеспечит наилучшее качество при наименьшем размере файлов.
  • Никогда не используйте GIF в больших изображениях товаров. Файлы данного формата весьма крупные по размерам и эффективного способа уменьшить их не существует. Используйте GIF для миниатюр, пиктограмм и декоративных изображений.
  • PNG является хорошей альтернативой как JPEG, так и GIF. Если у вас нет иной возможности получить фотографии товара кроме как в PNG формате, попробуйте использовать PNG-8, а не PNG-24. PNG идеально подходит для декоративных изображений ввиду исключительно малых размеров последних.

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

6. Запомните, как надо обращаться с миниатюрами

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

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

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

7. Используйте визуальные карты сайта

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

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

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

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

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

8. С осторожностью используйте на сайте декоративные элементы

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

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

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

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

  • Изображения, выступающие в качестве границ или узоров, переведите в формат PNG-8 или GIF. Можно создать отличные изображения всего в несколько сотен байт величиной.
  • По возможности для создания цветных зон используйте каскадные таблицы стилей (CSS). Всё, что можно заменить на CSS — заменяйте.
  • Обратите внимание на фоновые обои. Нередко случается так, что их размер неоправданно велик. Уменьшите размер, следя за тем, чтобы не испортить качество.

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

9. С осторожностью используйте сети передачи данных (CDN)

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

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

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

Исходя из этого вот ещё несколько золотых правил:

  • Не стоит слепо вестись на всё, что находится «в тренде». Ваша первостепенная задача, определить, является ли данное решение оптимальным для вашего бизнеса.
  • Если сайт успешно работает и на нём ежемесячно проводятся тысячи операций, тогда использование CDN будет хорошим решением, поскольку сеть нивелирует проблемы пропускной способности.
  • Если сайт посещают всего несколько тысяч человек в день, то, вероятно, ваш домен способен справиться с такой нагрузкой самостоятельно.

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

10. Проверяйте изображения

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

  • Проверьте количество изображений товаров на одну страницу: поскольку для сайтов, занимающихся электронной коммерцией, время загрузки играет ключевую роль, логично предположить, что чем меньше изображений на странице, тем активнее клиенты будут листать страницы и тем больше покупок будет совершено. Но также возможно и обратное: увеличение количества изображений сделает просмотр сайта более интересным, что, опять же, приведёт к большему числу покупок. Единственный способ найти правильное решение — проверить оба варианта.
  • Какие ракурсы товаров клиенты предпочитают больше: вам наверняка будет приятно видеть, насколько дружелюбнее становятся покупатели, когда у них есть возможность обозревать товары с того ракурса, с которого они хотят его (товар) видеть. Надежней всего выяснить предпочтения посетителей — устроить опрос мнений: ЧТО во время просмотра изображений привлекает их больше всего. Устраивать опросы клиентов время от времени — ещё одна полезная привычка, которой стоит обзавестись.
  • Определите, сколько товаров стоит размещать на одной странице конкретной категории товаров: 10, 20, а может 100? Попробуйте разные варианты и выясните, какой нравится клиентам больше всего.

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

Главное меню » Статьи » Советы по оптимизации изображений для более быстрой загрузки сайтов

На любом среднем сайте большинство переданных данных связаны с файлами изображений. Например, загрузка первой страницы вещательной компании составляет 1,4 МБ данных, из которых 0,9 МБ – файлы изображений. Другой пример: первая страница другого сайта насчитывает 365 КБ данных, из которых 284 КБ приходится на изображения.

Поэтому быстрый и простой способ ускорить загрузку вашего сайта – это оптимизация изображений. Пользователи Linux могут легко сделать это, используя программы optipng и jpegoptim, которые доступны в большинстве дистрибутивов Linux. После установки программ откройте консоль и перейдите в каталог, где находится ваш веб-сайт, например cd /var/www/. Затем запустите следующие команды, чтобы автоматически искать все файлы png и jpeg в каталоге и его подкаталогах и оптимизировать их на месте:

Оба optipng и jpegoptim работают без потерь, что означает, что качество видимого изображения не будет уменьшаться, даже если размеры файлов уменьшатся. Кроме того, у jpegoptim также есть опции для сжатия с потерями, что означает, что качество видимого изображения может быть немного уменьшено, но обычно потеря качества очень мала, но размер файла большой. В нашем примере выше используется опция -max = 90, которая уменьшит качество изображения JPEG до 90 для изображений, которые находятся над ним. Это довольно безопасно, так как уровень качества 90 все еще очень высок, и ни один посетитель веб-сайта не может обнаружить какие-либо дефекты изображения. Если требуется большее сжатие, лучше экспериментировать, например, используя Gimp и Save for web с предварительным просмотром в реальном времени. В команде jpegoptim опция -strip-all будет удалять любые метаданные, включая Exif-данные из изображений. Для веб-сайтов метаданные JPEG, скорее всего, не нужны, поэтому предпочтительным решением является их удаление. Если администратор сервера хочет автоматически оптимизировать все изображения на сервере (например, на серверах andreyex), создайте сценарий с содержимым:

Затем сделайте это в cronjob, добавив строку в cron как:

С помощью этого сценарий будет запускаться каждую ночь в 01:00, и он найдет все изображения PNG и JPEG, которые были созданы или изменены в течение последних двух дней, а затем он будет оптимизировать их на месте и сохранять все остальные файлы. Exif и метаданные не разделяются, так как в этом случае мы не можем быть уверены, что все изображения, хранящиеся в папках веб-сайтов, предназначены только для просмотра веб-сайтов.

С версии jpegoptim v1.3.0 доступна новая опция ‘–all-progressive’, которую рекомендуется использовать, поскольку изображения в формате JPEG будут загружаться постепенно и, таким образом, обеспечить лучший визуальный опыт конечного пользователя во время загрузка страницы.

Если у сервера есть общедоступная папка с возможностью загрузки, может быть хорошей идеей уменьшать изображения для использования в Интернете, так как изображения 8Mpix, непосредственно загружаемые с цифровой камеры, слишком велики для любого разумного использования в Интернете. Чтобы автоматически масштабировать все изображения в каталоге до более длинного края с максимальным значением 1000 пикселей, запустите Mogrify (часть GraphicsMagic):

Топ-пост этого месяца:  Компания Amazon запустит собственный мессенджер

Существуют и другие программы, такие как pngcrush и jpegtran, но в наших тестах они хуже, чем optipng и jpegoptim. Однако кажется, что есть также некоторые возможности для улучшения этих инструментов, например, служба Yahoo Smush.it может лучше выполнять работу, в частности, при оптимизации PNG с небольшим размером файла . Еще большее сжатие для файлов PNG может быть достигнуто с помощью службы TinyPNG , но оно работает с потерями и, следовательно, изображения могут иметь видимые дефекты. В большинстве случаев команды optipng и jpegoptim выше будут делать отличную работу.

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

CSS спрайты, встроенные изображения и глиф-шрифты

Если у вас есть несколько небольших изображений, вы можете объединить их в спрайты CSS с помощью GraphicMagick, используя следующую команду:

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

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

Другой вариант – использовать глифовые шрифты, такие как Font Awesome. Они имеют дополнительное преимущество масштабирования до любого размера, так как файлы шрифтов являются векторной графикой. Если графический дизайнер умный, весь сайт может быть создан только с помощью трюков CSS и пользовательских шрифтов, возможно, только с двумя или тремя фактическими изображениями и, таким образом, быстро загружается. Это мы оставляем в качестве упражнения для наших читателей.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

4 основных совета по оптимизации изображений

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

Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

Мы запустили рейтинг зарплат интернет-маркетологов! Прими участие в анонимном опросе.

SEO – Читать 14 минут – 17 ноября 2020

Человек часто не читает и не останавливает свое внимание на тексте, обычно он «сканирует» страницы. Зачастую обращает внимание на графические элементы. На основе такого поведения поисковые системы получили ряд критериев, по которым анализируют изображения.

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

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

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

Google может индексировать типы изображений в форматах BMP, GIF, JPEG, PNG и WebP, а также SVG.

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

Появились и новые форматы, такие, как WebP и JPEG-XR. Их преимущество в том, что они действительно меньше весят, но, к сожалению, пока не все браузеры поддерживают эти форматы. Например, JPEG-XR поддерживает только IE, а WebP — Chrome, Opera, Android. В связи с этим я не рассматриваю их. Но выбор за вами 🙂


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

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

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

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

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

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

Проверить размер и вес картинок можно с помощью инструмента «Аудит сайта» Serpstat. Сервис покажет список ошибок, которые сгруппированы по приоритету важности. Чтобы посмотреть все страницы, которые лучше сжать, перейдите в блок «Мультимедиа», в нем собраны страницы с битыми и слишком большими изображениями.

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

Зачем необходимо оптимизировать изображения для сайта? Как это повлияет на скорость работы ресурса? Поможет ли это в продвижении проекта? Об этом и многом другом поговорим в данной статье. Привет, друзья! С вами Юрий Бошников! Не стоит думать, что процесс оптимизации картинок для сайта – маловажный этап в продвижении сайта. На самом деле пренебрегая данным направлением, владельцы сайтов провоцируют негативное отношение поисковых роботов к контенту, размещенному на ресурсе. Ведь картинки также принимают участие в поиске! Если они не оптимизированы, не подписаны, слишком тяжелые, все это негативно отражается на позиции проекта в поисковых системах.

Содержание этой статьи:

(смотрите видео: это самый наглядный разбор с примерами)

Ищем картинки для сайта: где их брать и какими они должны быть

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

  • релевантность публикуемой статье;
  • уникальность;
  • «легкость».

Что такое релевантность – думаю, понятно. Если нет – немного уточню: соответствие фотографии тематике материала. То есть, если вы пишите про женскую одежду, нет смысла прикреплять иллюстрацию карбюратора.

Уникальность картинки столь же важна, как и уникальность текста. Если есть возможность самостоятельно создавать картинки, фотографии – отлично! Тогда с уникальностью проблем не возникнет.

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

Где брать картинки? Первый способ:

  • ввести нужный запрос в поисковой системе Гугл;
  • перейти в раздел «Картинки»;
  • под поисковой строкой кликнуть на «Настройки»;
  • кликнуть по надписи «Лицензия»;
  • выбрать раздел с «Лицензией на использование».

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

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

  • StockSnap;
  • Pexels;
  • Unsplash;
  • Death to the Stock Photo.

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

Процесс оптимизации занимает некоторое время. Предполагает несколько этапов. Но все эти действия – простые. Пусть вас не пугает объем текста. Ознакомившись с ним и немного набив руку, на каждую картинку вы будете тратить не более 3-5 минут.

Добиваемся уникальности

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

  1. Изменения названия. Пишется оно латиницей. Лучше всего английскими слова вкратце описать, что изображено на картинке. Так поисковые роботы лучше проиндексируют картинку.
  2. Обработка в редакторе. Достаточно немного обрезать картинку или повернуть ее хотя бы на 15 градусов в любом направлении, а лишнее обрезать.

Совет! Нанесение изображения на картинку не делает ее уникальной.

Уменьшение «веса»

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

Обратите внимание! Скорость загрузки оказывает непосредственное воздействие на позиции проекта в поисковой выдаче.

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

Открываете изображение в редакторе – фотошопе. Нажимаете сочетание клавиш Ctrl+I, открывается новое окно и вводите нужные вам параметры. Картинка автоматически сжимается до введенных размеров.

Совет! Первый раз убедитесь, что в качестве «системы измерения» установлены пиксели. При нажатии клавиш Ctrl+I и открытии нового окна вы увидите, где меняются параметры.

Теперь картинка стала меньшего размера. Но ее вес можно еще больше уменьшить, не потеряв качества. Зажмите следующее сочетание клавиш: Ctrl+Shift+Alt+S. Откроется окно сохранения картинок для веба. Верхнем правом углу поставьте качество картинки 60%. Сохраните изображение. Теперь оно будет максимально легким, но не потеряет свое качество.

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

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

Формат картинки

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

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

Кстати! Еще немного о том, как оптимизировать изображения для сайта онлайн. Среди наиболее популярных и отлично работающих сервисов выделяются gtmetrix.com, developers.google.com. Именно их я рекомендую на своем онлайн-тренинге «Как сделать сайт своими руками». Кстати, обучение бесплатное и построено на практических заданиях. Спустя четыре дня каждый студент уже имеет свой работающий, оформленный и наполненный контентом сайт.

Оформление изображения

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

Там будет доступна опция редактирования. Кликнув по соответствующей кнопке, откроются свойства картинки. В зависимости от редактора и административной панели, для изменения представлены следующие параметры:

  • размеры;
  • положение на странице;
  • отступы от текста;
  • и, возможно, некоторые другие.

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

Вкратце расскажу, что представляет собой каждый из этих атрибутов – тегов. Начнем с alt. Он – альтернативный текст. Именно на него ориентируются поисковые роботы – они не распознают картинки, а считывают их. Если по какой-то причине изображение не подгрузится, когда пользователь будет открывать страницу, то вместо него будет пустой квадратик с надписью. Эта надпись и есть тот самый alt.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кстати! Обязательно проверьте файл robot.txt. Возможно, в нем будет стоять запрет на индексацию картинок. Уберите его!

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

В завершение вкратце перечислю все этапы оптимизации изображения для сайта:

  • поиск релевантной тематике статьи картинки;
  • прописывание соответствующего имени/названия;
  • уменьшение размера и веса;
  • прописывание тегов Alt и Title, написание подписи, если это необходимо;
  • публикация на странице – выбор параметров отображения, отступа текста;
  • проверка файла robot.txt.

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

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

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

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

Rusability

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

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

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

1. Используйте описательные названия

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

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

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

2. Оптимизируйте alt описания

Описание alt – это текстовая альтернатива изображения, которая отображается, если фото не может загрузиться. Его также можно увидеть при наведении курсора на картинку (в зависимости от настроек браузера).

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

  • Описывайте изображения простым языком
  • Если у ваших товаров есть номера моделей, используйте их в описаниях
  • Не перегружайте описания ключевыми словами
  • Не используйте alt описания для декоративных изображений, это может грозить наказаниями от поисковиков
Топ-пост этого месяца:  Урок 14. Angular 4 NgRx. Редактирование и удаление машин

Также периодически проверяйте ваши страницы на правильность заполнения описаний.

3. Используйте несколько фото для каждого товара

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

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

4. Уменьшите размер фото

Знаете ли вы, что:

  • Почти 50% потребителей не будут ждать, пока загрузится ecommerce сайт, и 3 секунд.
  • При этом в мире время загрузки сайтов только увеличивается.
  • Amazon выяснили, что если их страницы начнут загружаться на секунду дольше, они потеряют 1,6 миллиардов долларов в год.
  • Google использует скорость загрузки страницы в качестве фактора ранжирования в своем алгоритме.

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

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

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

Если у вас нет Adobe Photoshop, выберите один из множества онлайн-инструментов для редактирования изображений (PicMonkey, PIXLR, Canva). Также всегда можно воспользоваться бесплатной программой GIMP, которая практически ничем не уступает Photoshop.

Какого размера должны быть изображения?

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

5. Выбирайте подходящий тип файла

В число самых популярных типов файлов входят JPEG, GIF и PNG.

JPEG (или .jpg) стал негласным стандартом для изображений в интернете. Этот тип файлов легко сжимать без значительной потери качества.

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

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

Вот так выглядит одно и то же изображение весом всего 24 кб в разных форматах:

JPEG, определенно, лучший из вариантов.

При выборе типа файла помните:


  • Чаще всего лучшим выбором для интернет-магазина будет JPEG, этот формат предлагает хорошее качество при меньшем размере.
  • Никогда не используйте GIF для больших фото продуктов. Уменьшить размер получившегося файла будет очень сложно. Выбирайте его только для иконок и элементов оформления.
  • Если вы используете PNG, отдавайте предпочтение PNG-8, а не PNG-24. Этот формат также лучше использовать для маленьких изображений.

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

6. Оптимизируйте превью

На большинстве ecommerce сайтов используются превью, особенно на страницах категорий. Они позволяют быстро оценить товар и при этом не занимают много места.

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

Что можно сделать?

Максимально уменьшите размер файлов превью, при этом постарайтесь сохранить качество.

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

7. Используйте sitemap для изображений

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

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

Для этого добавьте в файл robots.txt строчку: Sitemap: http://example.com/sitemap_location.xml. Или отправьте карту через Search Console.

У Google есть множество инструкций по публикации изображений, которые помогут вам эффективно оптимизировать свои страницы.

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

8. С осторожностью используйте изображения для оформления

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

О том, как сделать интернет-магазин визуально привлекательным, читайте в статье “Создаем красивый интернет-магазин: 15 советов от экспертов”.

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

  • Для простых картинок и границ используйте формат PNG-8 или GIF. Так вы сможете сохранить качество изображений и при этом уменьшить их до размера в несколько сотен байтов.
  • Если есть возможность, используйте для оформления страниц CSS, а не изображения.
  • Сократите размер фоновых изображений, они могут сильно тормозить загрузку страниц. Для этого, например, можно вырезать середину фото.

9. С осторожностью используете CDN

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

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

10. Протестируйте изображения

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

  • Протестируйте число фото на странице
  • Определите, какие ракурсы предпочитает ваша аудитория
  • Найдите оптимальное количество продуктов для страниц категорий

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

Оптимизация изображений на сайте

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

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

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

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

Размер качества оптимизированного изображения

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

Сейчас рассмотрим пример оптимизации изображения на сайте. Неважно, как я его использую: как иллюстрацию к своей статье или элемент макета шаблона.

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

Чаще всего, с растровыми изображениями, работаю через Photoshop. Раньше, сохраняя картинку в формате .jpg использовал максимальное качество. Эта картинка весила бы сейчас 321 килобайта.

После, я стал немного убавлять качество, с целью уменьшить размер изображения. Сохранял на «десятке» — получая 167 килобайта. И это почти 50% от того, как я делал в самом начале своей работы над сайтами, при этом на изображении особой разницы, в худшую сторону, вы не увидите.

По такому принципу всегда и работал. А совсем недавно, просматривая одно из своих любимых сообществ в Google+ «Всё о SEO», владельцем, которого является Константин Кирилюк, автор блога — www.chuvyr.ru , я понял, что мои картинки по прежнему много весят. Поясню.

В своём сообществе Константин провел бесплатную серию мини-аудитов, в одном из которых, затронул скорость загрузки страницы с помощью инструмента PageSpeed Insights от Google.

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

Что касается картинок, то PageSpeed Insights указывает, что бы я обязательно оптимизировал изображения. Если случай не критический – вы получите сообщение вида: «Исправьте по возможности»

После чего, я зашел в Photoshop и вспомнил, что для решения этой проблемы и сделали возможность — «Сохранить для Web и устройств»

Здесь нам будет предложено 4 варианта, 3 из которых оптимизированы. Визуально меня устраивает качество, выставленное на «60» и другие стандартные настройки. Если еще что-то менять, то качество заметно ухудшается.

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

После данного мероприятия PageSpeed Insights перестает ругаться, и общая оценка загрузки страницы – увеличивается.

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

Уникальность картинок

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

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

Как называть картинки, которые мы сохраняем? Для себя я выделяю, два основных варианта.

Первый вариант, когда мы пишем оптимизированную статью, в которой используем ключевые слова. Как и в URL с ЧПУ, я использую такое название:

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

Во втором варианте использую перевод с русского на английский:

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

Используйте атрибут alt

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

Если не использовать данный тег, то W3C Валидатор будет указывать на ошибку, то есть Ваш код не соответствует общепринятому стандарту HTML.

Атрибут title картинки

Этот атрибут вы можете заметить при наведении на картинку, это как подсказка для пользователя. На ваше усмотрение, можете сделать пояснение с вхождением ключевых слов. Обязательным title для элемента img — не считается.

Прозрачные изображения в формате PNG

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

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

Плагин оптимизации изображений для WordPress – Robin image

До сих пор я использовала плагин оптимизации изображений для WordPress — Smush. И рекомендовала его всем своим клиентам и подписчикам. Но с некоторых пор он стал платным и в бесплатном варианте создатели его очень минимизировали.

Поэтому решила найти современный, функциональный плагин, что бы заменить Smush. И совершенно случайно (хотя ничего случайного в этом мире не бывает), работая с бесплатной версией Clearfy, познакомилась с плагином Robin image. И мне он очень понравился.

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

Результаты работы плагина

    Установка и настройка плагинаУстановка плагина стандартная. Сам плагин есть в библиотеке WordPress. Поэтому просто вводите в строку поиска правильное его название — Webcraftic Robin image optimizer. И загружаете на свой сайт плагин оптимизации

» data-medium-file=»https://i2.wp.com/altacademic.ru/wp-content/uploads/2020/09/plagin-optimizatsii.png?fit=300%2C147&ssl=1″ data-large-file=»https://i2.wp.com/altacademic.ru/wp-content/uploads/2020/09/plagin-optimizatsii.png?fit=1024%2C501&ssl=1″ />
Настройки плагинаСам плагин найдете в опции консоли блога — Настройки. Когда откроете его, то увидите всего две вкладки: Основные и Основные настройки.Вкладка основные покажет вам информацию об оптимизации вашего сайта на момент установки плагина. Вы увидите, что оптимизация еще не была проведена — все по «нолям». И предупреждение, что изображения не должны превышать 5 мб. оптимизация изображений1

» data-medium-file=»https://i1.wp.com/altacademic.ru/wp-content/uploads/2020/09/optimizatsiya-izobrazheniy5.png?fit=300%2C256&ssl=1″ data-large-file=»https://i1.wp.com/altacademic.ru/wp-content/uploads/2020/09/optimizatsiya-izobrazheniy5.png?fit=374%2C319&ssl=1″ />Внимательно прочитайте — и примите к сведению при настройке. Смело используйте опции помеченные зелеными метками. Серые метки просят об осторожности. Красные — могут навредить. Поэтому, прежде чем включать какую-либо настройку, подведите курсор к знаку вопроса и внимательно прочитайте информацию.

Приступаем к основным настройкам.

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

Режим сжатия — оставила нормальный.

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

Оптимизация
Оптимизация по расписанию

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

В общем, плагином я довольна. Я пользуюсь платной версией Clearfy, в состав которой разработчики не включили этот плагин. Поэтому установила его на сайт дополнительно.

Еще больше об инструментах можно узнать, подписавшись на рассылку — «Инструменты в помощь начинающему блогеру»

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

4 совета по оптимизации конверсии целевых страниц с помощью тепловых карт

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

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

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

1. Люди предсказуемы. Используйте F-шаблон

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

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

2. F-шаблон не панацея! Определите интересы пользователей!

Всех посетителей, попадающих на ваш оффер или сайт, можно разделить на 2 большие категории:

  • тех, кто ищут что-то целенаправленно (имеют конкретную цель);
  • тех, кто “приземлились” на ресурс в процессе «серфинга в интернете» (например, когда ничего делать на работе, и надо чем-то занять время). 🙂

По словам Кристи О’Коннел в статье для Usability.gov:

«Если пользователь вошел на вашу страницу целенаправленно — например, руководствуясь результатами поисковой выдачи — то он будет вести себя совершенно по-другому: он будет “шарить” глазами по странице, пока не найдет слова, которые он и задавал в поиске!”. Совсем иначе ведут себя те, кто просто хотел просмотреть веб-страницу. Тут взгляд пользователя следует “F-шаблону».

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

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

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

3. «Баннерная слепота»

В исследовании 2007 года Якоб Нильсен, известный специалист по юзабилити, использует термин «баннерная слепота», чтобы описать явление, когда пользователи игнорируют все, что напоминает рекламу. В этом исследовании Нильсен пишет:

«Мы . подтвердили в очередной раз, что «баннерная слепота» существует. Пользователи практически никогда не смотрят на все, что выглядит “как реклама».

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

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

4. Цвет ссылки имеет значение

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

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

Добавить комментарий