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

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


  • Share on Pinterest

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

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

Техническая и текстовая оптимизация стала для многих привычным и естественным делом. Это замечательно. Но не следует забывать и об оптимизации изображений. И тут есть только одно но – такая работа должна проходить исключительно грамотно и правильно по двум основным направлениям – уменьшению “веса” картинок ради роста быстродействия ресурса и заполнению содержимого атрибута Alt тега img.

В чем польза оптимизации изображений для SEO (и не только)

Почему поисковые системы указывают нам на потребность оптимизировать изображения на сайтах? В чем цель подобных действий? Грубо говоря, этих целей две – угодить пользователям и удовлетворить поисковики. И вот ряд важных аргументов “За”.

  1. Повышение привлекательности контента. Пользователи в большинстве своем первым делом реагируют на яркие фотографии, размещенные на ресурсе и на оригинальную, цепляющую и удерживающую взгляд графику. Именно поэтому поисковые системы учитывают при ранжировании веб-ресурсов и качество и количество изображений на них.
  2. Ускорение загрузки. Чем выше качество изображения, тем больше его “вес”, а тяжелые изображения снижают скорость загрузки сайта. Лишние секунды, потраченные пользователем на ожидание, – это потерянные пользователи и потерянная прибыль. Быстрая загрузка, в свою очередь, становится хорошим конкурентным преимуществом, ведущим к уменьшению показателя отказов. Не забываем и о том, что быстродействие сайта – фактор ранжирования. Поисковики не любят медленные веб-сайты.
  3. Дополнительный трафик с поиска по картинкам. Особенно актуально это для интернет-магазинов и коммерческих сайтов. Некоторая часть переходов по изображениям с Google Images конвертируется в покупателей.
  4. Уменьшение нагрузки на сервер. Дополнительная польза для веб-мастера, которому не придется переплачивать за дорогостоящие тарифы по мере роста посещаемости ресурса. Оптимизируя изображения, вы повышаете производительность своего сайта и ограничиваете его развитие.

Хотите развивать свой бизнес в Интернете и получать больше заказов? Давайте работать над этим вместе!


Как уменьшить объем изображений без потери качества

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

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

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

Первый, как правило, используют для фото и картинок, а второй – для векторных изображений, скриншотов, логотипов и т. д. Популярностью сегодня пользуется и формат GIF (анимированные картинки).

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

  • Десктопные (ручные) инструменты – Adobe Photoshop, Gimp Affinity Photo, Paint.NET. С их помощью вы подберете настройки оптимизации, исходя из индивидуальных потребностей, но придется потратить время на изучение возможностей упомянутых инструментов.
  • Онлайн-инструменты (автоматическая оптимизация) – JPEGmimi и TinyPNG, ImageOptim, OptiPNG и Trimage и другие подобные редакторы. Это лучший способ (и к тому же бесплатный) сжать картинки, не меняя их длину и ширину. TinyJPG, например, безвозмездно дает возможность сжимать до пяти сотен изображений в месяц и делает это с высокой скоростью. Такой бесплатный сервис как Compressor умеет сжимать картинки с потерей или сохранением качества (только для JPG и PNG), при этом сжатие оригинального файла, не превышающего 10 Мб может достичь 90%. А еще существует бесплатный конвертер Image.online-convert, работающей со 120 форматами.
  • Плагины WordPress для сжатия картинок при загрузке с сохранением их качества – Imagify Image Optimizer, ShortPixel Image Optimizer, WP Smush, а также Optimus Image Optimizer.

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

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

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

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

  • Оптимизировать заголовок изображения. Оптимизация текста, который всплывает при наведении курсора на картинку, – это совсем незначительный в плане SEO момент, но он все-таки позитивно повлияет на пользовательский интерфейс.
  • Заполнить содержимое метатега ALT. Alt-текст информирует Google о содержимом веб-страницы. Если на ней есть ряд изображений, то главный ключевик обязательно должен входить в Alt-текст главной картинки, а последующие изображения уже могут содержать вариации главного ключевика.
  • Правильно указать имя файла. Это действие может оказать влияние на рейтинг поиска картинок в Google, обеспечивая вас дополнительным трафиком. Прежде чем заливать изображение, потрудитесь дать файлу название с ключевым словом (вместо бессмысленного набора букв или цифр). Кстати, разделяйте слова в ключевых фразах с помощью дефисов, иначе имя может превратиться в нечто нечитабельное.

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

Как правильно прописывать содержимое ALT на коммерческих сайтах

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

Хотите развивать свой бизнес в Интернете и получать больше заказов? Давайте работать над этим вместе!


Если атрибут ALT рассказывает поисковикам об изображении теми же словами, которые вводят в поисковую строку клиенты, вы получите весь желаемый трафик. Будет ли он доступен вам, пропиши вы “Фото 14” вместо “Пуховик оверсайз Dolce Gabbana”? Увы, но нет.

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

Если кратко, то к атрибуту Alt предъявляются предельно простые и четкие требования. Следуйте им и вы не ошибетесь.

  1. Alt обязан быть содержательным, емким и точно описывать, что изображено на картинке.
  2. Размер атрибута Alt не должен превышать 250 символов. Обычно он состоит из 3-5 слов, достаточных для описания.
  3. В Alt желательно аккуратно вписывать ключевой запрос.
  4. Alt не должен быть спамным. Все хорошо в меру, так что переоптимизировав альты на своем ресурсе вы реально подвергаете себя угрозе санкций со стороны поисковых систем. Не следует стремиться впихнуть в Alt все ключевые слова, какие только вам нужны. “Отзывы”, “цены”, “купить”, регион – все эти слова тоже не следует добавлять в альты. Ограничьтесь самыми точными словами, описывающими картинку. А вот термин “фото” можете использовать смело.
  5. В декоративные изображения на сайте (лого, кнопки, стрелки и т. д.) вставлять ключевики совершенно бессмысленно. Для них берите пустые теги ALT, а в идеале просто выносите их в CSS-спрайты.
  6. Прописывать содержимое атрибута Alt можно и кириллицей, и латиницей, в зависимости от того, на каком языке контент вашего сайта.

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

Выводы

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

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