Найти тему

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

Оглавление

Картинки и фотографии – это не только привлекательная часть контента на сайте, но и его важная техническая часть. SEO оптимизация изображений – важный этап в процессе продвижения. Данный процесс включает в себя два блока:

  • Оптимизация размера для более быстрой загрузки.
  • Оптимизация метаданных под необходимые ключевые запросы.

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

Сжимаем картинки

Если в начале 2000-х годов, оптимальным весом страницы считалось 50 кб, то сегодня одна картинка может весить с десятки раз больше. От того, как много весит страница зависит скорость ее загрузки. И чем она медленней, тем хуже для продвижения. Оптимальным временем загрузки сегодня считается не больше 3 секунд, причем это значение должно быть при слабом мобильном интернете, ведь трафик с телефонов сегодня занимает более половины от всего объема.

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

  • открываете картинку;
  • нажимаете «Сохранить как»;
  • выбираете место и формат;
  • далее, дается выбор качества картинки (для JPG от 0 до 12);
  • сохраняем.

Изначально это фото весило более 20 мб
Изначально это фото весило более 20 мб

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

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

 
Пример неудачного сжатия скриншота нашей статьи «5 SEO хитростей».
Пример неудачного сжатия скриншота нашей статьи «5 SEO хитростей».

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

Метаданные изображений

Вторым блоком оптимизации изображений для сайта является прописывание подходящих ключевых слов в метаданные. Картинки обладают несколькими атрибутами, куда можно записать необходимые для продвижения ключи. Для HTML верстки этих атрибутов два: alt и title; на Wordpress’е они называются «Атрибут alt» и «Заголовок» соответственно. Первый отвечает за то, какую надпись будет видно, когда фото отключено. Второй за то, какую надпись видно, если навести курсор на картинку.

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