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

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

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

SEO-оптимизация картинок. Что в нее входит

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

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

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

Бок о бок с размером изображения идет его формат, то есть расширение файла. Формат картинки влияет на скорость его показа, а для некоторых сайтов это критический момент — это может касаться и интернет-магазина с насыщенной карточкой товара, и лендинга с красивым фоном. Чаще всего в интернете используются форматы:сжатие jpeg

  • .png
  • .jpeg
  • .gif


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

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

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

Атрибут изображения alt

Вы обращали внимание на то, что если по каким-то причинам изображение не загрузилось, то на его месте может быть написана короткая описательная фраза? Её вы видите благодаря тому, что тегу <img>, где заключено изображение, приписан атрибут alt. Именно он несет описание изображения, и сигнализирует о смысле картинки и вам, и поисковику. Использование атрибута alt обязательно, это базовая деталь в деле SEO-оптимизации картинок. Alt должен быть кратким (не более шестидесяти символом) и четким, то есть описывать именно то, что изображено на иллюстрации. Код изображения с атрибутом принимает такой вид:

<img src=»адрес изображения» alt=»Описание изображения» />

ЧПУ названия файла изображения

У изображений помимо тега alt, есть еще и title, однако он не имеет значения для продвижения. Он скорее будет полезен вам для навигации. А вот ЧПУ — это еще один сигнал поисковой машине о том, что изображено на картинке. То есть сам файл должен называть не случайным набором символов, а понятными, осмысленными словами. Например, фотографию с автомобилем лучше загружать на сервер с названием avtomobil.jpg. При этом нужно избегать спамных вариантов названий, например kupit-televizor-nedorogo.jpg. Это поможет и вам, и поисковику, и даже пользователю вашего сайта, если он захочет какую-нибудь картинку сохранить.

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

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

TinyPNGоптимизация картинок tinypng

Сервис существует по двум адресам: tinypng.com и tinyjpg.com, — и как можно догадаться, обрабатывает изображения в PNG и JPG. В сервис можно загрузить одновременно до двадцати изображений этих двух форматов. После оптимизации вам будет показан процент осуществленного сжатия. Сохранить можно как на компьютер, так и в Dropbox. Размер файла ограничен 5 мегабайтами.

Optimizilla

оптимизация картинок optimizilla

Этот сервис обрабатывает изображения в JPEG и PNG размером до 10 мегабайт. Возможно заливать сразу до 20 фотографий и они будут еще час хранится на сервисе в сжатом виде. Перед оптимизацией можно выбрать степень сжатия на специальной шкале.

Compressor.io

оптимизация картинок compressor io

Compressor.io работает с изображениями форматов JPG, PNG, SVG и GIF. Принимает картинки до 10 мегабайт.

JPEGmini

оптимизация картинок jpeg mini

Простой сервис по сжиманию JPEG, не перегруженный лишними кнопками. Изначально возможна загрузка изображений по одному, массово — после регистрации. Ограничение по размеру — 10 Mb. После сжатия все изображения можно сохранить в веб-альбом, откуда потом скачать архив.

Web Resizer

оптимизация картинок web resizer

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

Вывод

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

Очень плохоПлохоСреднеХорошоОчень хорошо (голосов: 1, в среднем: 5,00 из 5)
Загрузка...


Комментарии (0)

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

wpDiscuz
следующая статья предыдущая статья