Контент с изображениями лучше усваивается пользователями и гораздо интереснее для них, чем сплошные полотна текста. Оптимизация картинок для сайта в умелых руках становится дополнительным инструментом для привлечения трафика.
В чем заключается оптимизация изображений для сайта
Суть оптимизации изображений в трёх основных составляющих.
- Текстовое содержание. Цель — улучшить индексацию картинок роботами Гугла и Яндекса. Алгоритмы в принципе хорошо обрабатывают иллюстрации, способны понять, что на них, но для более высокого ранжирования им необходимо давать подсказки. Организуется это с помощью атрибутов alt, title и метаданных. Последние вообще лучше удалять, особенно если информации много. Для этого нужно перенести файл в Adobe Photoshop и сохранить, выставив в настройках «для веба» и «не сохранять meta».
- Качество, скорость загрузки. Предназначение — уменьшить вес картинки для быстрого открывания её в поисковых системах, а также улучшить качество изображения. В первую очередь надо грамотно подобрать формат. JPG/JPEG, PNG, Gif — самые распространённые варианты. JPG поддерживает TrueColor, поэтому его лучше использовать для безупречного отображения цветов. Бесспорный плюс этого формата — во время сжатия иллюстрация незначительно теряет чёткость. PNG оптимальнее для логотипов, схем, рисунков и всех остальных случаев, когда нужна прозрачность. Gif глубиной цвета не радует, но его плюс в поддержке анимации.
- Уникализация. Крайне важный пункт, когда есть задача получать трафик с поисковых систем. При прочих равных, сайт с шаблонным контентом ранжируется ниже, чем ресурс с оригинальными иллюстрациями. Ещё одна причина уникализации — обход системы безопасности, ведь алгоритмы быстро блокируют материалы с одинаковыми picture. Например, когда запускается РК с разных аккаунтов на Фейсбуке. Данная работа включает изменение названия, обрезку и внесение различных дополнений — рамка, цвет, водяной знак. Подробнее про уникализацию фото можно почитать в нашем отдельном материале.
Очевидно, что подписанная по смыслу картинка гораздо лучше, чем какая-то тарабарщина из символов. Допустим, если на фото питательный крем, то «pitatelny-krem.jpg» по сравнению с «min/_5687.jpg» выглядит куда приемлемее не только для человека, но и для поискового робота. Соответственно, человекопонятный адрес файла (img src) обеспечивает позитив для Seo. Его надо прописать на стадии сохранения изображения, вбив название от руки в верхнюю графу.
Оптимизация Alt и Title для картинок для Seo
Грамотное заполнение alt и title очень положительно влияет на оптимизацию всей страницы сайта.
- Alt — это альтернативное текстовое описание picture. Очень важный атрибут, всегда учитываемый поисковиками. За его отсутствие можно даже попасть под фильтр. Гугл и Яндекс ориентируются на этот тег, чтобы показать релевантные примеры при поиске картинок. Посетители в обычных условиях не видят alt. Но если в браузере пользователя отключено отображение или произошла какая-то ошибка, данный тег проинформирует посетителя о содержимом изображения.
Желательно, чтобы альт-тег был наполнен смыслом, состоял из не менее трёх слов (не более 250 знаков), включал по возможности различные вариации поискового запроса.
- Title — несёт дополнительную информацию. Данный атрибут появляется при наведении стрелки мыши.
Когда пользователю трудно понять, что на фото, он машинально наводит курсор и подсказка тайтл помогает ему. Рекомендуется делать title содержательным, коротким и точно описывающим картинку. Ключевое слово также можно использовать, но с оглядкой на спам. Этот тег не столь важен, как альт, поэтому некоторые веб-мастеры его не заполняют вообще. Однако рекомендуется его всё же заполнять, так как он положительно отражается на юзабилити.
Оптимизация размеров изображений для Seo
Документы с высоким разрешением чётче выглядят и больше привлекают внимания. Если их качество лучше, чем у конкурентов, то и при равных данных, сайт займёт более высокие позиции в выдаче.
Однако большие и яркие фото тормозят процесс загрузки страницы, поэтому нуждаются в редактировании. Оптимизация — процесс не разовый. Надо этим заниматься регулярно, пока веб-ресурс наполняется контентом, так как вместе с новыми статьями появляются и свежие медиафайлы.
Перед скачиванием картинок на сайт, рекомендуется их уменьшать и обязательно сжимать по возможности, обеспечивая баланс качества и скорости загрузки. Делается это с помощью различных программ. Что это даёт в плане Seo? Уменьшается вес иллюстраций, они занимают немного места на хостинге, что в целом положительно сказывается на скорости загрузки. Естественно, поисковики начинают лучше относиться к таким площадкам.
На данный момент для Гугла скорость чуть ли не главный фактор ранжирования. «Тормозные» страницы он просто выбрасывает из выдачи, их места занимают лёгкие и быстро открываемые документы. Объясняется это тем, что всё больше пользователей заходит в сеть через мобильные устройства. Громоздкие изображения на телефонах значительно снижают page speed.
Сжатие, это метод компрессии медиафайла, когда уменьшается только вес — примерно, около 50-90% от исходного значения. Сжатие бывает с потерями и без. В первом случае удаляются лишние биты информации. В JPG это некритичные части изображения — например, на голубом фоне вместо десятков оттенков оставляется всего 1-2.
Сжатие без потерь уменьшает размер файла так, чтобы в дальнейшем удалось восстановить первоначальное качество. Никакой информации программа не удаляет. Этот способ больше подходит для PNG.
Сервисы для оптимизации изображений онлайн
Рассмотрим несколько программ, которые помогут оптимизировать картинки через Интернет.
- Metapicz. Посредством этого сервиса можно увидеть мета XMP/EXIF и другие данные. Достаточно загрузить картинку и нажать Go, чтобы открылся список.
- Compressjpeg. Онлайн-программа, куда загружаются разом до 20 изображений разных форматов, сжимаются и скачиваются все сразу в ZIP.
- Compressor. Инструмент для компрессии иллюстраций различных форматов, включая SVG, WEBP. Обеспечивает наилучший баланс между качеством и размером файла. Есть платная версия Pro, позволяющая работать с документами 20 Мб, изменять высоту/ширину, автоматически переименовывать картинки и проводить другие работы по оптимизации.
- Iloveimg. Онлайн-редактор, предоставляющий множество опций для работы с фото. Их можно сжимать, уменьшать/увеличивать, обрезать, конвертировать. А также наносить водяные знаки, поворачивать изображение и делать подписи шаблонами мемов.
- ImGonline. Универсальный сервис для обработки JPEG. Предоставляет возможность изменять размер, конвертировать, сжимать, редактировать/удалять EXIF и другие мета, добавлять те или иные эффекты.
- Canva. В этом онлайн-сервисе графического дизайна разрешено загружать картинки и редактировать. Например, добавлять тексты и стикеры, обрезать, брать в рамку и т. д.
- TinyPng. Платформа использует интеллектуальный метод сжатия PNG/JPG, путём уменьшения количества цветов в изображении.
- Google Images. Здесь можно проверить, уникальна ли картинка. Достаточно загрузить файл, чтобы система предоставила количество копий или схожих фото.
Есть множество и других, полезных в плане оптимизации picture, онлайн-сервисы.
Программы и офлайн сервисы для оптимизации картинок
Безусловно, иногда приходится работать вне зоны действия Интернета. Тогда нужно использовать офлайн программы для редактирования изображений.
- PNGGauntlet. Программа, занимающая мало места на компьютере. С её помощью удаётся оптимизировать картинки в формате PNG. Кроме того, конвертируются графические файлы JPG, GIF, BMP, TIFF в PNG.
- Ashampoo Photo Commander Free. Простая и бесплатная прога с доступом оптимизации и корректирования изображения. Всего за 1 минуту удастся создать красивый коллаж или календарь.
- Photoshop. Инструмент, установленный на компьютерах многих пользователей. Позволяет уменьшить вес иллюстраций, установить нужный формат, изменить размер. Одним словом, в Фотошопе с картинкой можно делать практически всё.
- Illustrator. Векторный графический редактор, разработанный Adobe Systems ещё в 1987 году. В этой программе можно создавать логотипы, значки, изменять цветовую палитру. Изображения остаются чёткими в любом масштабе, так как разработка осуществляется по векторному формату.
- Sketch. Ещё один векторный редактор, но разработанный другой компанией — Bohemian Coding. Предоставляет пользователю целый набор инструментов для рисования. В плане оптимизации здесь удастся быстро уникализировать фото, создавая рамки, коллажи и эскизы.
- Riot. Мощный инструмент для оптимизации размера картинок. Поддерживает большое количество форматов. Программа располагает кучей полезных опций: сжатие фото до заданного объёма, редактирование метаданных, коррекция цвета, изменение высоты и ширины иллюстрации и многое другое.
- Paint.Net. Полноценный аналог MS Paint, который штатно встраивается во все компьютеры. В отличие от примитивного инструмента, в этом графическом редакторе от Microsoft удастся профессионально работать. Целиком бесплатная утилита, но требует установки Microsoft Net Framework 2.0.
- OptiPNG. Компьютерная программа, позволяющая уменьшать файлы PNG и другие форматы путём компрессии. Фишка — именно эту прогу рекомендует инструментарий Google Page Speed.
Как оптимизировать изображения на WordPress
На Вордпресс оптимизацию картинок можно делать с помощью различных плагинов. Плюсы неоспоримы — все они подключаются по API, поэтому сервер не нагружается.
- Smush Lazy Load Image Compression and Optimization. Модуль регулярно обновляется. Предназначение — оптимизация картинок форматов JPEG/PNG/GIF и других. Автоматически находит «тяжёлые» документы, замедляющие взаимодействие поисковиков с сайтом.
- EWWW Image Optimizer. Плагин уменьшает файлы, способен автоматически выделить те изображения, компрессию над которыми проводить необязательно.
- Optimus. Утилита от KeyCDN, позволяющая сжать иллюстрацию до 70%. Минус плагина — есть ограничение по размеру картинок (не более 100 Кб).
Как оптимизировать изображения на Битрикс
На 1C-Bitrix для оптимизации картинок обычно устанавливается модуль от Dev2Fun. Он работает с различными форматами, конвертирует JPEG/PNG в графический WebP, рекомендуемый самим Google. Изображения после обработки легко проходят анализ Page Speed Insights.
OptiPic — ещё одно автоматизированное решение для сайтов на Битрикс. Этот плагин построен на алгоритме, который самостоятельно выявляет и удаляет лишние метаданные в файле. Модуль предоставляется тарифными пакетами. В бесплатной версии разрешено работать с картинками до 10 Мб.
Оптимизация картинок для сайта делает их максимально полезными, быстрыми и способными получать дополнительный трафик. С технической точки зрения они, как и видео, имеют для Гугл и Яндекс большое значение.
Краткое резюме по статье
Компания «Ребут Онлайн» провела тест. За 3 месяца позиции сайтов с оригинальными иллюстрациями оказались выше, чем у ресурсов с дублями.
Это можно сделать, используя стандарт IPTC. Он подразумевает настройку специальных тегов.
В справке Google указано, что самое важное (большое) изображение желательно помещать в верхней части страницы.
Учитывая тот факт, что Гоша и Яша воспринимают его, как совокупную составляющую, для выхода в топ надо использовать не менее 12 вариаций одного и того же фото. Так считает Деми Мурыч — известный сеошник. Показывать они должны одно и то же, но иметь разные форматы и функции.
Читайте также:
-
Арбитраж трафика: лучшие вакансии недели (25—30 января)
-
Покупка рекламы в «Телеграм»: какие особенности нужно знать, чтобы она была эффективной
-
Бесплатный видео-курс по арбитражу PUSH-трафика. Урок 3
-
Какие креативы конвертят в гемблинге?
-
Как повысить CTR рекламы в Facebook
-
Как создать интернет-магазин во ВКонтакте — пошаговая инструкция