Распределение показателей ранжирования, не связанных с ключевыми словами, по шкале от 0 до 9, где 0 — фактор не влияет на ранжирование страницы, а 9 — фактор оказывает сильное влияние:
Представьте, как улучшится положение сайта в поиске, если вы уменьшите время загрузки каждой страницы хотя бы на 10%. Это может поднять вас на первую страницу поисковика, а то и в первую тройку выдачи — что в разы повысит доходы.
Почему от размера изображений зависят расходы на хостинг
Большие изображения влияют и на пропускную способность хостинга. Поэтому, если у вас большой трафик, то тяжелые изображения повлекут лишние расходы. Одно дело, когда 50 человек в день загружают фото в 1 Мб, но что, если их станет 5000?
Поэтому сокращение объема изображений сэкономит вам деньги. Используйте кеширование сайта или сети доставки контента. Но для их установки потребуется помощь веб-разработчиков, возможная только до определенного момента. Поэтому научитесь самостоятельно уменьшать вес файлов изображений — это полезно и выгодно. О том, как это сделать, читайте ниже.
Основные форматы изображений
На веб-ресурсах используется не так много форматов изображений. Рассмотрим 5 основных:
- .jpg;
- .png;
- .gif;
- .svg;
- .bmp.
Большинство изображений в интернете представлено в одном из этих пяти форматов. Зайдя на любую страницу и щелкнув правой кнопкой мыши по изображению, вы сможете открыть его в новой вкладке:
Сделав это, вы легко определите формат:
Иногда узнать формат изображения с компьютера непросто, поскольку операционные системы часто скрывают расширение файла по умолчанию. Тогда зайдите в настройки компьютера и включите режим отображения расширений файлов.
На Mac пройдите следующий путь: Finder > Preferences > Advanced — а затем поставьте галочку рядом с фразой «Show all filename extensions» (Показывать все расширения файлов):
На Windows 10 откройте Пуск, затем — Проводник > Вид > Параметры > Просмотр, снимите флажок с пункта «Скрывать расширения известных типов файлов» и выберите радиокнопку «Показывать скрытые файлы, папки и диски». После нажмите «ОК»:
Функция отображения расширения файлов будет полезна, если вы планируете оптимизировать много изображений. К тому же это уменьшит вероятность ошибки.
К примеру, если вы решите конвертировать картинку из.jpg в.png, функция отображения расширений не даст перепутать файлы, лежащие рядом в папке.
Теперь о том, как определить вес изображения и его габаритный размер. На Маке достаточно кликнуть по изображению правой кнопкой мыши и выбрать пункт Get Info:
Обсудим достоинства и недостатки каждого формата. Разные типы файла обладают качествами, оптимальными для одних проектов и не применимыми для других.
.JPG
Полное наименование: Joint Photographic Experts Group (по названию организации-разработчика).
Год релиза: 1992.
Самый распространенный тип файла изображений. Большинство смартфонов и цифровых фотоаппаратов делают снимки именно в нем. Конечно, .JPG подойдет лучше, если нужно уменьшить вес файла, сохранив качество изображения.
Кстати, вы можете изменить окончание имени файла с.JPEG на.JPG и ничего катастрофического не произойдет.
Однако если вы просто загрузите фото с телефона или камеры и попытаетесь вставить на сайт без оптимизации, вас ждет неприятный сюрприз. Несжатое.JPG-изображение с телефона или цифровой камеры весит очень много. Под «много» понимается вес от 1 до 10 МБ (иногда и больше).
Ниже — пример.JPG:
Это снимок картины Винсента ван Гога «Ирисы». Хороший пример того, когда.JPG — оптимальный выбор. Картина полна красок, пустое пространство отсутствует вовсе, нет прямых линий. Сохранить это великолепие в небольшом по весу файле поможет только.JPG.
- если сомневаетесь, какой формат использовать, берите.JPG;
- это лучший формат для хранения фотографий;
- объем такого файла уменьшается без потери качества.
.PNG
Полное наименование: Portable Network Graphics (портативная сетевая графика).
Год релиза: 1996.
Формат.PNG одновременно именуют проклятием и благословением. Для веб-дизайнеров он представляет прекрасную альтернативу.GIF.
Этот формат хорош для крупногабаритных изображений, но не фотографий или изображений со множеством цветов и деталей (как на картине Ван Гога).
PNG хорошо отображает простые графики, чертежи и диаграммы. В этом формате изображение выше весит всего 34 Кб. Обратите внимание, что инфографика выглядит лучше и весит меньше, если она сохранена в формате.PNG.
PNG-изображения хорошо масштабируются. GIF имеет схожие с PNG параметры, но при этом плохо масштабируется: такие иллюстрации полны артефактов и они портят эстетичный вид страницы.
- идеален для простых графиков, чертежей и схем;
- хорош для инфографики;
- хорошо масштабируется;
- не слишком подходит цветным изображениям с большим количеством деталей;
- компьютеры Mac делают скриншоты в.PNG по умолчанию.
.GIF
Полное наименование: Graphics Interchange Format (формат для обмена изображениями).
Год релиза: 1987.
GIF — очень старый формат, разработанный еще до появления публичного интернета. Он хорошо справлялся со своей задачей, когда всемирная паутина была относительно новой.
Сегодня.GIF идеален для крошечных изображений: иконок, изображений кнопок, фоновых рисунков, декоративных иллюстраций — поскольку обеспечивает крайне небольшой размер файла. Счет идет не на мегабайты или килобайты, а на байты. Это практически ничего.
Слева — пример декоративной границы окна из крошечного размера квадратиков формата.GIF. Каждый квадратик весит всего 54 байта
Проблема с форматом в том, что такие изображения плохо масштабируются. С ними происходит то, что называется пикселизацией. С появлением.PNG сегодня уже нет смысла сохранять изображения в.GIF. Но что насчет анимированных изображений?
Нам всем по душе так называемые GIF-анимации. Однако, как правило, весят они много — порядка 2 Мб и выше. Блогеры склонны использовать анимированные картинки в постах, жертвуя ради этого временем загрузки. Но если дело того стоит, то почему нет!
- устаревший формат, замещенный.PNG;
- используйте GIF-анимации в крайнем случае — они очень тяжелые;
- GIF идеален для крошечных декоративных элементов страницы, не предназначенных для масштабирования.
.SVG
Полное наименование: Scalable Vector Graphics (масштабируемая векторная графика).
Год релиза: 2001.
Файлы формата.SVG просто невероятны. Как подсказывает название, такие изображения отлично подходят для масштабирования и могут весить очень немного.
Однако есть существенный недостаток — фотографии не могут быть векторными. Но любое другое векторное изображение может быть сохранено в этом формате (если оно было создано в программе Adobe Illustrator или Corel Draw, то его можно экспортировать в.SVG).
Формат хорош для простых схем, диаграмм и графиков. Логотипы и иконки также нередко сохраняются в.SVG. Как правило, они должны быть простыми и/или иметь абстрактный дизайн.
Логотип NASA сохранен в.SVG-формате и весит всего 14 Кб. Хотя, как вы можете заметить, само по себе изображение большое и довольно четкое. В этом вся прелесть векторной графики. Пикселизации не возникнет, независимо от того, как сильно вы измените размер изображения.
Главная проблема с этим форматом заключается в том, что такие изображения почти всегда создаются опытными художниками (если, конечно, вы не скачаете такой файл с какого-нибудь сайта). Но если вы работаете над сайтом с большим потоком трафика, будет разумно инвестировать ресурсы на создание SVG-файлов, если они действительно необходимы.
- маленький размер;
- подходит для адаптивных сайтов, где нужны изображения, масштабируемые без потери качества;
- не пригоден для фотографий;
- требует развитых дизайнерских навыков для корректного использования.
.BMP
Полное наименование: Windows Bitmap, Bitmap Picture.
Год релиза: 1985.
BMP — формат хранения растровых изображений, разработанный компанией Microsoft. Это древнейший из всех файловый форматов интернета.
Если вы когда-либо пользовались программой Microsoft Paint, то создавали файлы с расширением.BMP. Большинство современных браузеров без проблем отображают файлы этого формата, но используются они редко. Эти файлы тяжелы и подвержены пикселизации при масштабировании.
Вывод: этот формат использовать не следует.
Уменьшение веса изображений без потери качества
Здесь помогут следующие инструменты.
Adobe Photoshop — отраслевой стандарт при редактировании изображений. Это платная программа, которая обойдется в $19.99 ежемесячно. Если не желаете платить, то можете найти в сети Adobe CS6, последнюю версию программы, которая не требует абонентской платы.
Одна из полезнейших для оптимизации изображений функций Photoshop — сохранение изображения в один из веб-форматов («Save for Web»). Позволяет быстро конвертировать вес изображения и его качество для различных типов файлов.
Сначала откройте в программе изображение, которое планируете оптимизировать:
Если вы используете изображения в блоге, изменение их размеров почти всегда имеет смысл. Практически все социальные сети имеют собственные требования к размеру публикуемых картинок. Приведя этот параметр в соответствие с требуемым, вы достигнете максимальной производительности страницы.
Разберем пример. Допустим, вы захотели вставить изображение в блог и начали менять его размеры.
Ширина поля для контента — 800 пикселей
Представим, что вы хотите разместить снимок друга в своем блоге. Ширина изображения — 4 000 пикселей. Очевидно, что размер в разы превышает требуемый. Да и шансы, что вес файла будет небольшим, крайне невелики.
Можете изменить размер до 800 пикселей в ширину — но иногда, напротив, стоит масштабировать его до 1000 пикселей. На экранах Retina, установленных в Mac, довольно легко распознать изображения низкого качества. А потому у большинства дизайнеров есть обязательное правило: ширина изображения должна как минимум в два раза превышать ширину поля с контентом. Это делается для того, чтобы изображения выглядели кристально чистыми даже на экранах от Apple.
Единственная проблема — вес такого изображения будет гигантским, что, несомненно, повысит время загрузки и снизит конверсию.
В нашем случае, ширина изображения равна 8 000 пикселей.
Для того, чтобы изменить его размер, на Mac потребуется кликнуть по вкладке «Изображение», а затем выбрать пункт «Размер изображения»:
Здесь можете выбрать итоговый формат файла и определить другие характеристики изображения, более качественно оптимизировав его для сети. Сперва стоит определить, какой тип файла оптимален вашим потребностям.
Попробуйте каждый формат, указывая размер сохраняемого изображения, чтобы увидеть конечный вес файла. Выбрав JPEG, можете указать качество итогового изображения:
Опробовав все форматы, остановите выбор на том, при котором объем файла был наименьшим, а качество — таким же высоким. В примере таким форматом оказался.JPG. Именно в нем было решено сохранить изображение:
Обратите внимание, что вес файла в формате.PNG равен 731 KB!
Другие форматы могут оказаться предпочтительнее. Но если вы оптимизируете графики и чертежи, то.PNG будет оптимальным выбором.
Тем, у кого нет Photoshop, подойдет бесплатный онлайн-сервис TinyPNG. Конечно, идеальной оптимизации не получится, но снизить вес файла можно и здесь. Главный недостаток — ресурс не позволяет менять размер изображения:
Чтобы начать работу, перенесите изображение в центр главной страницы сервиса, в область, очерченную пунктиром — вес изображения тут же уменьшится автоматически:
Теперь — просто загрузите новый файл на компьютер.
Если его вес достаточно велик (больше 350 Кб), сперва уменьшите размер изображения, а затем обращайтесь к TinyPNG. Если загружаете фотографии с iPhone, можете отправить их по почте, предварительно указав размер, отличный от оригинального. Как правило, большой и средний размеры наиболее предпочтительны.
GIMP
GIMP — невероятный инструмент. Это бесплатная десктопная альтернатива вездесущему Photoshop. При этом GIMP умеет все, на что способно детище Adobe. Так что если вы ограничены в средствах, обратите на эту программу внимание. Она доступна для Windows, Mac OS и Linux.
Какой объем файла предпочтительнее?
Оптимальный вес файла зависит от того, где и в каких целях вы будете его использовать. Но основное правило звучит так: стремитесь уменьшить вес изображения, насколько это возможно, сохранив при этом его высокое качество.
Если картинки потеряли четкость, стали зернистыми или тусклыми, заново оптимизируйте их, чтобы качество файлов повысилось. Если используете Photoshop и сохраняете изображения в.JPG, попробуйте сдвинуть ползунок качества изображения до 80% и более. Если сохраняете изображение в.PNG, попробуйте вместо.PNG-8 использовать.PNG-24.
Определим идеальные показатели объема файлов для основных типов ресурсов.
Интернет-магазины
На страницах среднего интернет-магазина размещено от сотни до тысячи изображений продуктов. Поэтому оптимизация визуального контента крайне важна для сайтов eCommerce.
Как правило, вес изображений товаров сводится к 75 Кб и меньше. Если картинки на сайте масштабируются, вам потребуются большие размеры. Тогда вес может вырасти до 150 Кб.
Блоги
Как правило, вес изображений для блогов не превышает 100 Кб. Но ваша задача — добиться минимального объема при сохранении качества. Откажитесь от GIF-анимации, если это нецелесообразно.
SaaS-порталы
На этих ресурсах есть три главных вида изображений: на главной странице (hero shot), иконки и скриншоты. Самая важная страница сервиса — главная, так что и все работы по оптимизации стоит начать отсюда.
Главное изображение
Обычно это огромные изображения на весь экран. Но ваш целевой объем — 250 Кб или меньше. Это будет непросто. Но крайне результативно. Многие не придают весу особого внимания, но оптимизация только его одного уже повысит показатели ресурса.
Иконки
На многих сайтах иконки наглядно демонстрируют функции или особенности продукта. Формат таких изображений, как правило, .PNG, а вес не превышает 15 Кб.
Скриншоты
Если скриншоты такие же широкие, как и главное изображение, постарайтесь уменьшить их вес до 250 Кб, если нет — 100 Кб и меньше. Лучший формат для скриншотов — .JPG.
Бесплатные инструменты редактирования изображений
Бесплатные онлайн-сервисы
- TinyPNG. Главная ценность ресурса — в его простоте. Достаточно перенести изображение на главный экран, как его вес снижается;
- Pixlr. Интерфейс сервиса похож на Photoshop. Он также показывает вес файла при том или ином качестве картинки;
- Picmonkey. Необходимые функции доступны, а интерфейс интуитивно понятен.
Бесплатные десктопные инструменты
- GIMP;
- Paint.net. Лучшая версия Microsoft Paint. Одна из полезных функций — неограниченная история. Можете отменить столько действий, сколько нужно;
- Seashore. Приложение с открытым исходным кодом для Mac. Известно своими багами, но все еще может быть полезным.
Несколько финальных советов по оптимизации для поисковиков. Имена файлов должны быть описательными. К примеру, не нужно давать изображению в интернет-магазине название вроде 324q345q345.png. Отразите в имени файла товар, изображенный на картинке. Также убедитесь, что каждое изображение имеет соответствующий тег Alt в коде изображения:
Эта информация позволит картинке участвовать в поиске по изображениям Google или Яндекс.
Секреты оптимизации заголовков и изображений от ведущих контент-ресурсов
Заключение
CRO- и SEO-специалисты часто забывают оптимизировать изображения, недооценивая влияния этого процесса на прибыль. Но уделив оптимизации достаточно времени и внимания, вы раскроете очередной потенциал роста бизнеса. Надеемся, наш гайд поможет в этом.
Оптимизация картинок – важная часть продвижения сайта. Правильно оптимизированные изображения способствуют высшемуранжировнию ресурса в поисковой выдаче и ускоряют скорость загрузки контента. Что же такое оптимизация картинок и как она выполняется?
Оптимизация изображений – это уменьшение размера изображений, использованных в дизайне сайта и в статьях, без потери качества.
Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки web-страниц и разбираемся в том, какие показатели мешают улучшать результаты. Поможет в этом сервис PageSpeed Insights . Если страница наберет более 85 из 100 баллов – это хороший результат и именно к такой цифре нужно стремиться.
Например, сейчас результат такой:
А после оптимизации:
Такой результат стал возможен благодаря использованию рекомендаций Google:
Формат PNG
Как оптимизировать картинки, если для их сохранения использован формат PNG? Для этого можно воспользоваться рекомендациями Google:
Если планируется только базовая оптимизация изображений, можно использовать любую программу для редактирования картинок: GIMP , Photoshop и т.д. Но, какая из них лучше? Узнать это поможет небольшой эксперимент. Берем неоптимизированное изображение в формате PNG весом 293 КБ:
Создаем две папки: «GIMP» и «Photoshop» и помещаем в них одну и ту же картинку.
Как выполняется сжатие рисунка, без потери качества, при помощи редакторов GIMP и Photoshop?
Результат получается таким:
Итог: Photoshop выполнил оптимизацию изображения лучше, чем GIMP.
Но, это не значит, что можно пользоваться только этими вариантами. Есть другие, не менее эффективные утилиты для сжатия картинок в формате PNG. Например, и PNGOUT . Результат их работы следующий:
Несмотря на то, что OptiPNG на 1 КБ проиграла Photoshop, весит сама программа всего 96 КБ, а это большой плюс. А вот PNGOUT превзошла своих «конкурентов» по всем параметрам:
Работа с программами
В первую очередь, нужно скачать утилиту OptiPNG или PNGOUT (а может и обе) с официальных сайтов. Затем скопируйте файлы.exe в папку: C:\Windows.
Чтобы «упростить» задачу, достаточно просто скопировать эти файлы из папки Windowsи разместить их ярлыки на рабочем столе. Для удобства ярлык OptiPNG можно сразу назвать opting-o7 (параметр максимального сжатия при котором сохраняется качество). Остается просто перенести нужные картинки на ярлык и подождать, пока программа их оптимизирует.
Такой способ простой, но не очень удобный. Иногда при попытке оптимизировать большое количество изображений может «выскакивать» ошибка. Также не всем понравится постоянно перетягивать файлы.
Поэтому, есть еще один вариант работы с утилитами. Создаем тестовый документ, открываем и прописываем туда код (корректно работает только на ОС Windows):
Сохраняем файл в формате.reg и в кодировке ANSI, запускаем его, соглашаемся со всеми действиями и готово. Утилиты интегрированы в оболочку Windows.
Как же осуществляется оптимизация картинок? Процесс происходит так: правой кнопкой мыши нажимаем на папке, в которой находятся не оптимизированные изображения в формате PNG (файлы другого расширения утилита не изменяет) и выбираем программу, при помощи которой будем сжимать картинки. Можно делать это двумя утилитами по очереди.
Затем открывается командная строка, в которой демонстрируется процесс оптимизации:
Формат JPEG
Чтобы сжать изображение формата JPEG, нужны инструменты Jpegtran или Jpegoptim . Конечно, можно использовать редакторы GIMP и Photoshop. Однако Jpegtran или Jpegoptim эффективнее справляются с задачей оптимизации, поэтому скачиваем и устанавливаем обе программы.
Настройка утилиты Jpegtran
Активирование программы Jpegtran методом внедрения в оболочку Windows– не совсем подходящий вариант для утилиты. Она не будет корректно функционировать, так как код (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) предназначен для сжатия веса только одной картинки, а не всех файлов в папке.
Это значит, что нужно использовать другой способ активирования утилиты. Jpegtran не обязательно размещать в папкеС:\Windows, а вот копию ее можно здесь сохранить. Размещаем программу jpegtran.exe в любой папке и переименовываем (для удобства) в!jpegtran.
Затем при помощи Notepad++ создаем файл в кодировке UTF-8 (без BOM) с расширением.bat и названием!start. В него помещаем этот код:
Чтобы оптимизировать картинки, необходимо оба файла jpegtran.exe и!start.bat закинуть в одну папке и запустить процесс сжатия, используя файл!start.bat:
Настройка программы Jpegoptim
Утилита Jpegoptim без проблем внедряется в оболочку Windows. Для ее активации необходимо дописать код в конце файла PMGoptim.reg (он уже создан ранее для утилит для картинок формата PNG):
Процесс оптимизации картинок при помощи данной программы прост: нажимаем левой кнопкой мыши на папку с изображениями и выбираем «Run jpegoptim».
Результат работы Jpegtran и Jpegoptim:
Online-сервисы
В Интернете есть множество сервисов, позволяющих эффективно оптимизировать изображения. Иногда результат их работы лучше, чем утилит, рассмотренных выше.
Однако online-сервисы при сжимании изображения ухудшают качество. Иногда всего на несколько пикселей, но искажения все же заметны. То есть размер изображений нас вполне может устраивать, а вот качество оставляет желать лучшего.
С каждым годом поисковые системы все жестче закручивают гайки во внешней оптимизации. И все больше внимания уделяют внутренним факторам сайта. Например скорость загрузки вашего сайта тоже влияет на рост ваших позиций в выдаче.
Конечно существует масса способов как ускорить свой сайт, но сегодня мы поговорим только об одном из них — это оптимизация изображений для сайта. Нет это не пресловутые метатеги — ALT и TITLE, речь пойдет о технических моментах.
В свое время я даже не задумывался о том, что можно как то оптимизировать изображения. Да и зачем? Ведь широкополосный, безлимитный, картинки с сайтов грузятся моментально. Что даст уменьшение размера картинки на 20 килобайт? Да ничего!
Но тренд мобильного трафика заставил задуматься над оптимизацией. Если посмотреть на график роста мобильного трафика, то по статистике, за 2014 год в интернет с мобильных девайсов входил каждый 3 человек. А это означает, что все больше людей будут посещать сайты и блоги с гаджетов.
А как известно, скорость мобильного интернета — та еще сказка. И если на вашем сайте имеются тяжелые изображения, то пользователь может вовсе не дождаться загрузки вашего сайта. Поэтому сейчас, тема оптимизации изображений для сайта весьма актуальна.
Я перед каждой своей публикацией занимаюсь оптимизацией, и поверьте, общий вес всех картинок уменьшается до 60% без потери их качества. Так что давайте взглянем на инструменты которыми я пользуюсь.
Инструменты для оптимизации изображений на сайте.
Самый распространенный и самый доступный для многих — это Photoshop. Скорее всего если вы блогер, вебмастер или человек тесно связанный с публикациями статей на своих сайтах, то данный софт у вас установлен.
Для оптимизации изображения в Photoshop, вам необходимо провести ряд несложных манипуляций. Заходите в меню Файл -> Сохранить для Web.
После чего видим окно с двумя вариантами изображений.
Верхнее — это изображение оригинал, нижнее — это то, что мы получим после обработки.
А теперь я вам покажу фокус. Смотрите на изображения и на стрелки на них.
Первая картинка — это сохранение при 100% качестве. Ее вес уменьшился на 85%.
Вторая картинка — это сохранение при 70% качестве. Ее вес уменьшился на 95%, при этом изображения выглядят идентичными.
А теперь представьте сколько времени пришлось бы потратить пользователю на загрузку картинки размером в 2 мегабайта, на мобильном устройстве. А если таких изображений в статье 5–10 штук? Вот почему важно оптимизировать изображения для сайта.
Но Photoshop инструмент не идеальный в вопросе массовой оптимизации изображений. Поэтому давайте переключимся на более специализированный софт.
PictureBeaver — друг для windows пользователя.
Я уже давненько перешел на MacOS и Windows использую в редких случаях. В основном это для сбора семантического ядра с помощью KeyCollector. Поэтому пришлось немножко потрудиться, чтобы найти действительно стоящую программу для оптимизации изображений. И чтобы она работала на Windows.
Как оказалось, есть замечательная программа PictureBeaver , которая не прихотливая к ресурсам, и работает на удивление быстро.
С программой работать очень просто. Открываете папку со скачанным скриптом, и перетаскиваете все изображения которые планируете оптимизировать, на файл optimize.wsf
После обработки изображений, появится папка с оптимизированными картинками, и файл отчета по каждой из них.
ImageOptim — друг яблоководов.
С данным софтом для MacOS проблем нет. Это связано в первую очередь с тем, что технику apple больше всего любили и любят дизайнеры. А они то уж любят поиграться с изображениями. Поэтому найти нужный софт не составит у вас труда.
Я же свой выбор остановил на бесплатной утилите ImageOptim , так как с основной задачей она справляется на ура. А это — массовая оптимизация изображений для сайта.
Принцип ее работы отличается от PictureBeaver. Она не создает никаких новых папок с готовыми изображениями. Она просто заменяет оригиналы оптимизированными изображениями.
Выглядит она вот так:
Окно куда необходимо перетащить изображение.
Окно после оптимизации.
Как видите, программе удалось уменьшить общий вес на 24,8%
Первое изображение было уже оптимизировано в фотошопе. Второе нет.
P.S. Мобильный интернет растет, так что задумайтесь об удобстве для своих пользователей.
По словам сотрудников Яндекса, “картинки являются очень важной частью нашего поиска. Они помогают пользователям увидеть прохождение Венеры по диску Солнца, узнать, как выглядит йоркширский терьер или новый седан tesla, состав группы свинцовый цеппелин и как завязать галстук”.
Благодаря ранжированию в поиске по изображениям, сайт сможет получать значительную долю трафика. В том числе и по коммерческим запросам, когда пользователь хочет увидеть, как выглядит тот или иной товар. Кроме этого, такие положительные поведенческие факторы, как количество переходов, продолжительность и глубина просмотра сайта посетителями, пришедшими из поиска по изображениям, оказывают влияние и на ранжирование сайта в органическом поиске по всем запросам. А привлечение целевой аудитории на коммерческий сайт даже из такого источника, как поиск по изображениям, при грамотной подаче контента может привлечь на сайт значительное количество целевых посетителей, которые будут совершать конверсионные действия.
Просмотр изображений в сервисе Яндекс.Картинки
В материале пойдет речь о стандартных методах оптимизации изображений, применимых для всех типов сайтов и учитывающихся всеми поисковиками. Сейчас каждый из них будет рассмотрен более подробно, также будет дано расширенное описание каждого пункта рекомендаций с пояснениями.
Оптимизация изображений
Наличие на сайте качественных изображений — одна из составляющих успеха большинства интернет-проектов. Пользователи предпочитают получать информацию в виде графических образов, а не текста. Она быстрее и лучше воспринимается, проще запоминается. Для повышения конверсии сайта и улучшения поведенческих факторов необходимо постоянное развитие графического контента. Нужно стараться максимально визуализировать все аспекты и нюансы имеющейся информации. Таким образом пользователи захотят просматривать больше страниц сайта, им будет проще определиться с выбором и совершить конверсионное действие.
Польза от оптимизации изображений недооценивается многими специалистами. Однако благодаря несложным действиям можно получить отличный результат в виде лояльных пользователей, количество которых из поиска по изображениям, а также из органического поиска будет увеличиваться.
Атрибуты изображений alt и title
Важнейшими атрибутами изображений, которые можно указать в соответствующем теге HTML-кода, являются атрибуты alt и title. Их значения — одни из главных источников информации об изображении для поисковых систем.
Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута:
Изображение c заданным атрибутом alt
Без заданного атрибута alt изображение будет показано как пустое:
Изображение без заданного атрибута alt
Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:
Изображение c заданным атрибутом title
Итак, рассмотрим основные рекомендации поисковых систем по работе с изображениями сайта, чтобы на их основе, а также на основе практики продвижения сайтов определить список действий, благодаря которым можно получить максимальный эффект от оптимизации изображений.
Не встраивайте значимый текст в изображения. Иными словами, все важные надписи должны быть в текстовой форме.
Давайте файлам изображений подробные, информативные названия. В названии файла лучше всего использовать 1-2 слова, описывающих изображение.
Вносите подробный текст в тег alt .
Оптимальный вариант:
Предоставляйте достаточно контекста для изображений. Окружающий изображение текст должен соответствовать тому, что на нем изображено.
Подумайте о том, как лучше всего защитить свои изображения. Это могут быть различные варианты, например, нанесение водяных знаков, размещение кода для вставки изображения на другой сайт, также можно сделать изображения доступными по лицензии, требующей ссылки на источник, например, лицензии Creative Commons.
Размещение фотографий хорошего качества. Качественные фото не только помогают пользователям увидеть все мелкие детали на изображении, но и лучше выполняют функцию уменьшенных картинок в результатах поиска, и с большей вероятностью будут нажаты пользователями.
Создать для каждого изображения отдельную целевую страницу, где будет собрана вся связанная с ним информация. Это актуально для сайтов, где изображения — одни из основных элементов контента, или для интернет-магазинов.
Старайтесь размещать изображения в верхней части страниц, где их можно увидеть сразу. Это позволит быстрее заинтересовать пользователя в просмотре страницы до конца.
Старайтесь структурировать каталоги таким образом, чтобы похожие изображения хранились вместе.
Укажите ширину и высоту всех изображений. Это позволит ускорить загрузку страниц, т.к. браузеры могут отображать их еще до загрузки изображений, если известны размеры места, которое зарезервировано для незаменяемых элементов.
Не забудьте о текстах, описывающих картинку:
- Подписи к картинкам (alt, title);
- Прилегающий к картинке текст;
- Имена файлов и скриптов, в том числе с учетом транслитерации и упрощенного подстрочного перевода;
- Тексты ссылок на картинки с других страниц и с других сайтов;
- Тексты и заголовки коротких документов, обрамляющих одиночную картинку.
Именно по текстам, которые относятся к картинкам, Яндекс находит изображения по запросам пользователей.
Яндекс индексирует картинки только стандартных графических форматов (JPEG, GIF и PNG). Перед загрузкой изображения на сайт стоит убедиться, что оно сохранено в одном из этих форматов.
На ранжирование также влияет качество самого изображения.
В результатах поиска для каждой найденной картинки показывается ссылка на страницу, на которой текстовое описание картинки лучше соответствует словам запроса. Таким образом, текстовый контент страницы — важный фактор ранжирования в поиске по картинкам. Как и в случае с Google, он должен содержать максимум информации о том, что изображено на картинке, а она должна дополнять текст.
Действия, которые необходимо выполнить для оптимизации изображений
1. Изображения должны храниться и открываться на том же сервере и хостинге, что и сам сайт. Это один из показателей качества сайта для поисковых систем. Только серьезные сайты и компании могут позволить себе хранить изображения на своем хостинге или сервере, т.к. это требует дополнительных материальных затрат. Кроме этого, такие изображения будут быстрее загружаться.
2. Использовать оригинальные высококачественные изображения с максимальным разрешением. Эти изображения, в свою очередь, должны обрабатываться системой управления сайта и показываться на соответствующих страницах в меньшем размере, чтобы страница быстро загружалась. При нажатии на изображение оно должно открываться в максимально возможном оригинальном размере, который только доступен.
3. Атрибуты alt и title у изображений должны быть заполнены таким образом, чтобы максимально точно описывать его содержимое. В них необходимо использовать 1-2 ключевых слова, под которые оптимизирована страница. Лучше всего, если это будет основное ключевое слово, совпадающее с заголовком страницы и анкором ссылки на нее из основного меню сайта.
4. Под изображениями разместить подпись, которая будет также показываться снизу при нажатии на него. Подпись может быть идентичной атрибуту alt. Подпись должна стоять в том же абзаце “P”, ячейке таблицы “TD” или теге “DIV”, что и изображение.
5. Страница, на которой размещено изображение, должна содержать соответствующий текст. Текст должен быть в том числе и о том, что представлено на изображении. Оно, в свою очередь, дополняет этот текст.
6. В атрибутах указать высоту и ширину изображения.
7. Переименовать файлы изображений, написав их транслитом. В имени файла в 1-2 словах указать то, что содержится в изображении.
8. К изображениям можно дополнительно добавить атрибут LONGDESC. Подробнее о нем: http://htmlbook.ru/html/img/longdesc.
9. В свойствах jpg — файлов оригинальных изображений заполнить следующие поля:
— Название: совпадает с атрибутом alt изображения;
— Тема: название раздела, к которому относится товар;
— Оценка: 5 звезд;
— Ключевые слова: keywords со страницы раздела, к которому относится товар;
— Комментарии: описание товара из поля «О товаре» со страницы товара;
— Размеры: максимальный оригинальный размер;
— Ширина: максимальный оригинальный размер;
— Высота: максимальный оригинальный размер;
— Горизонтальное разрешение: максимальное оригинальное значение;
— Разрешение по вертикали: максимальное оригинальное значение;
— Глубина цвета: максимальное оригинальное значение;
— Владелец: название компании;
— Компьютер: название компании.
Заключение
Как видно, советов и рекомендаций по оптимизации изображений от самих поисковых систем вполне достаточно, чтобы иметь общее представление о том, что нужно делать, чтобы сайт смог нормально ранжироваться в поиске по картинкам. Многие из рекомендаций пересекаются между собой, некоторые — уникальны. Чтобы реализовать большинство из рекомендаций, достаточно единоразовых действий, благодаря которым будет достигнут стабильный положительный результат. Не стоит пренебрегать возможностью получить значительное количество посетителей на свой ресурс. Всегда следует размещать как можно больше графического контента, благодаря которому сайт сможет завоевать доверие постоянных и новых посетителей.
