Полная инструкция по оптимизации изображений

Дата публикации: 01-09-2018       165

Интернет пестрит самыми разными сайтами. При их создании владельцы прикладывают все имеющиеся знания, навыки, ресурсы и т. д. Есть владельцы сайтов, которые относятся к сайту как к своему детищу:

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

В данной статье мы разберем последний пункт из ранее упомянутых.

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

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

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

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

Оптимизировать изображения

Чтобы оптимизация изображений онлайн не казалось вам чем-то сложным, мы решили сделать подробный обзор по этой теме, описать основные критерии и методы. Есть система, по которой строится работа над изображениями. К ней относятся:
1. Изображение и его формат. Для того чтобы Google успешно индексировал изображения, они должны быть загружены в форматах JPEG, SVG, PNG, GIF, BMP и WebP.

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

Есть и другие форматы, например JPEG-XR, который появился недавно или упомянутый ранее формат WebP. Они не так много весят и не теряют в качестве, но не каждый браузер их распознает. Формат JPEG-XR, например, может быть распознан только браузером IE, а WebP - лишь такими браузерами как Android, Opera, Chrome.

Вероятнее всего, постепенно и они найдут широкое применение, но в данный момент лишь вам выбирать, стоит их использовать или нет, ведь в России лидирующую позицию занимает Яндекс. А для этой поисковой системы лучше выбрать популярные форматы картинок, такие как PNG, GIF и JPEG. Изображения, которые внесены на сайт с помощью скриптовых языков (программа Скрипт), не индексируются ботом Яндекса. То есть, если загружается изображение, то лучше всего с помощью специального поля загрузки изображения на странице сайта.


2. Качество изображений.

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


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

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

 

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

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

Рассмотрим несколько сервисов:

  1. Compressor - площадка бесплатно предлагает вам уменьшить фото в весе, практически без потери качества. Единственное условие - размер изначального изображения не должен превышать 10 мб. Есть возможность оптимизировать фото и без потерь для версий изображения в формате PNG и JPG. Вы сможете сжать до 90% от первоначального веса.
  2. Сервис Kraken также поможет оптимизировать ваши файлы. Если вам необходимо оптимизировать несколько изображений, которые были уже загружены на странице, скопируйте ее URL и сможете вывести целый архив сжатых изображений. Этот сервис может предложить такие полезные функции как оптимизация изображений Wordpress, а так же Magento. Эти плагины, для оптимизации изображений, в сети доступны всем. В подобных же площадках, таких как JPEGMini и TinyPNG, ваши изображения понесут значительные потери при редактировании.
  3. Оптимизация изображений для сайта онлайн возможна на сайте ImageOptim. Им часто пользуются владельцы компьютеров macbook. Он отлично оптимизирует изображение без потерь для всех известных и популярных среди пользователей форматов. Есть особая специфика в работе этого сервиса. Метаданные, которые содержит изображение (серия камеры и место локации), удаляются и именно поэтому файл становится легче. Если вы хотите добиться такого эффекта на программном обеспечении Windows существуют отдельные сервисы.
  4. Среди них можно назвать такие, как:

 

Оптимизировать изображение онлайн

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

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

Если вы решили оптимизировать изображения для экономии оперативной памяти, при загрузке изображений, делайте для них короткое описание. Таким образом, вы сможете передать поисковым ботам информацию о содержании фото. Делайте информативные названия картинок. Избегайте несвязанного набора букв (lklkjbfgn.jpg), пропишите текст словами, которые несут реальный смысл (New York.jpg). Если используете в описании ключевой запрос, учитывайте его релевантность. Он должен соответствовать содержанию фото и логически дополнять его.

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

Помимо текста на сайте поисковые системы ведут учет ссылок (анкоров). Оформите ссылки, которые приводили бы к изображениям.

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

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

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

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

Рассказать друзьям:

Cделайте первый шаг

Выберите готовый шаблон сайта из более 4000+ бесплатных и премиум вариантов.

Выбрать шаблон
X
Создайте сайт на конструкторе
прямо сейчас, и мы подарим вам
350 руб. на счет
Нажмите на кнопку, и получите бонус.
На конструкторе сайтов TOBIZ.NET, вы сможете создать сайт своими руками за максимально короткое время. В этом вам помогут 1000 готовых шаблонов и простой конструктор. Просто установите готовый шаблон сайта, отредактируйте его и привлекайте клиентов.
▣ Создать сайт