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

Время чтения:4,5 минуты

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример-атрибута-alt.jpg

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

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!