Как оптимизировать картинки для сайта (блога)? Несколько важных советов.

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

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

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

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

Что известно о картинках на сайте как о контенте?

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

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

Как вес картинки может повлиять на скорость загрузки страниц?

Ранее я уже упоминал о том, что правильно оптимизированные картинки влияют на скорость загрузки страниц. И это действительно так. Просто представьте себе ситуацию, когда в статье на сайте размещена картинка, например, весом в 3-4 MB? Как долго она будет загружаться картинка прежде чем Вы ее увидите? Само собой, это повлияет негативно на скорость загрузки страницы в целом.

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

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

Как уникальность картинки влияет на рейтинг сайта?

Для начала давайте определимся, что же такое уникальность картинки?

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

Какие же тогда есть способы создания уникальных изображений, спросите Вы?

Первый и самый простой способ создания уникального изображения — взять из интернета картинку и провести с ней определенную работу. Какую именно? Об этом я рассказываю в своей статье «Как сделать уникальную картинку для сайта»

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

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

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

Как картинки на сайте влияют на трафик?

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

Как же это работает?

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

Тогда идем далее и приступаем к практическим шагам по оптимизации картинок для сайта.

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

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

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

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

Необходимый размер картинки и сжатие ее для уменьшения веса

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

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

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

Сжатие изображений с помощью программы Photoshop

С помощью программы Photoshop я задаю необходимый размер картинки и сжимаю ее до нужного параметра. В своих статьях на блоге и другом своем проекте KinderBoo.Ru я использую в основном изображения среднего размера в 680 пикселей

Открываю картинку с помощью фотошопа и выбираю в меню Изображение пункт Размер изображения.

как оптимизировать картинки для сайта с помощью программы фотошоп

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

как оптимизировать картинки для сайта с помощью программы Photoshop

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

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

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

как оптимизировать картинки для сайта с помощью программы фотошоп

Главное в данной ситуации найти золотую середину между сжатием и незначительной потерей в качестве. Чаще всего я использую параметр Высокое и степень сжатия 60. При этом у меня получаются изображения весом в 60-90 KB с незначительной потерей качества. Я рекомендую Вам придерживаться таких значений. Конечно, Вы можете еще больше сжать картинку, скажем до 10 KB, но тогда ваше изображение будет крайне непривлекательным.

А вообще, каждый конкретный случай всегда индивидуален. Если у Вас получилось сжать картинку в 700 пикселей, например, до 20-30 KB и качество при этом не сильно пострадало, то это будет еще лучше для вашего сайта.

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

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

Compressor — бесплатный сервис, позволяющий сжимать изображения в формате JPEG и PNG загрузки с компьютера

Pixlr Today — Это расширение для браузера Chrome. Разновидность популярной многофункциональной программы. Расширение содержит в себе все базовые функции фотошопа.

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

как оптимизировать картинки для сайта с помощью

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

как оптимизировать картинки для сайта с помощью расширения pixlr-today для браузера google-chrome

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

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

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

Расположение картинки в тексте

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

Прописываем атрибуты title, alt и правильное название картинки

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

Название картинки

Итак, что же такое название картинки?

Представьте, что Вы со своего фотоаппарата или мобильного телефона решили на сайт загрузить интересное фото. Как правило название загружаемого файла обычно выглядит так: IMG_3645.jpg или pic_38495.jpg Как вы уже наверное поняли — такое название не передает сути изображения. Учитывая, что поисковики сканируют все ссылки на изображения картинка с адресом https://inet-tools.ru/wp-content/uploads/2018/04/IMG_3645.jpg для нашего сайта абсолютно не приемлема.

После редактирования картинки или сохранения на компьютер изображению необходимо дать новое соответствующее название. После того, как Вы дадите новое название изображению ссылка будет выглядеть, например, так https://inet-tools.ru/wp-content/uploads/2018/04/poiskovik-kartinok.png Тут уже все становится понятно не только для поисковиков но и для людей.

Идем далее и разбираемся с атрибутом title..

Атрибут title

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

как оптимизировать картинки для сайта с помощью атрибута title

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

Атрибут alt

Атрибут alt очень важен поскольку он передает текстом то, что изображено на картинке.

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

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

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

как оптимизировать картинки для сайта с помощью атрибута alt

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

Первый вариант:

<img alt=»ребенок» src=»https://kinderboo.ru/wp-content/uploads/2018/06/rebenok-i-kniga.jpg«>

Второй вариант:

<img alt=»развивать ребенка дома в год можно с помощью детских книг с яркими картинками» src=»https://kinderboo.ru/wp-content/uploads/2018/06/rebenok-i-kniga.jpg«>

Как думаете, какой из этих двух вариантов более интересный и информативный?

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

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

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

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

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

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

  • Уникальность изображения (где брать и как сделать я подробно описал в этой статье)
  • Правильный формат (PNG, JPEG, GIF)
  • Необходимый размер (по ширине контентной части или меньше)
  • Вес изображения ( оптимально не более 80-90 KB)
  • Расположение картинки и ее соответствие области текста
  • Атрибуты title, alt и правильное название картинки
  • Подпись под изображением

В результате у нас должна получиться вот такая конструкция:

title=»Маленький ребенок рассматривает детскую книжку с картинками» src=»https://kinderboo.ru/wp-content/uploads/2018/06/rebenok-i-kniga.jpg» alt=»развивать ребенка дома в год можно с помощью детских книг из плотного картона с яркими картинками» width=»680″ height=»538″

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

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

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

С уважением, Сергей Подюков
«Мастерская Вэбмастера»

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Do you want massive traffic?
Dignissim enim porta aliquam nisi pellentesque. Pulvinar rhoncus magnis turpis sit odio pid pulvinar mattis integer aliquam!
  • Goblinus globalus fantumo tubus dia montes
  • Scelerisque cursus dignissim lopatico vutario
  • Montes vutario lacus quis preambul den lacus
  • Leftomato denitro oculus softam lorum quis
  • Spiratio dodenus christmas gulleria tix digit
  • Dualo fitemus lacus quis preambul pat turtulis
* we never share your e-mail with third parties.