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

 

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

Top_Image_Optimization_Tips_Shopify_Blog

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

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

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

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

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

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

2012-Ford-Mustang-LX-Red

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

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

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

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

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

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

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


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

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

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

this-is-an-alt-tag

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

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

  • Описания приводите на понятном английском языке (латинскими буквами, если на русском), как и в случае с изображениями.
  • Если вы реализуете товары, имеющие номера моделей, их также следует вводить в альт теги.
  • Не вводите ненужных слов (например: 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” (Сохранение для использования в сети). Данная команда позволит сохранить изображение, максимально уменьшая его размер без потери качества.

photoshop-save-to-web-feature

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

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

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

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

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

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

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

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

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

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

macbook-jpeg

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

macbook-GIF

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

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

macbook-PNG8macbook-PNG24

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

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

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

book-image-quality-example

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

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

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

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

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

geek-toys

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

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

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

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

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

image-sitemap

У 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? Попробуйте разные варианты и выясните, какой нравится клиентам больше всего.

(справа сверху – вниз налево)

Источник