Картинки и фотографии – это не только привлекательная часть контента на сайте, но и его важная техническая часть. SEO оптимизация изображений – важный этап в процессе продвижения. Данный процесс включает в себя два блока:
- Оптимизация размера для более быстрой загрузки.
- Оптимизация метаданных под необходимые ключевые запросы.
В этой заметке про то, как оптимизировать изображения для сайта, мы раскроем оба аспекта.
Сжимаем картинки
Если в начале 2000-х годов, оптимальным весом страницы считалось 50 кб, то сегодня одна картинка может весить с десятки раз больше. От того, как много весит страница зависит скорость ее загрузки. И чем она медленней, тем хуже для продвижения. Оптимальным временем загрузки сегодня считается не больше 3 секунд, причем это значение должно быть при слабом мобильном интернете, ведь трафик с телефонов сегодня занимает более половины от всего объема.
Поэтому необходимо любыми средствами стараться снизить вес страницы и оптимизировать изображения – это первое, что приходит на ум. Наша цель – это снизить их вес, максимально сохранив качество. Сжать их можно различными средствами. Например, вручную, воспользовавшись графическим редактором. Например, в Photoshop сжать картинку можно таким образом:
- открываете картинку;
- нажимаете «Сохранить как»;
- выбираете место и формат;
- далее, дается выбор качества картинки (для JPG от 0 до 12);
- сохраняем.
Но вручную можно сохранять разве что единичные изображения. Если необходимо обработать разом много фото, то работа в редакторе займет слишком много времени. В этом случае на помощь вам придут специальные онлайн-сервисы. Например, в нашей работе мы пользуемся сайтом TinyPNG.
Но будьте осторожны со сжатием скриншотов. Очень часто, если на скриншоте много текста, могут возникнуть различные артефакты сжатия. Поэтому их лучше не обрабатывать.
Если у вас нет возможности обработать фотографии (например, их слишком много даже для онлайн-сервисов), то можете решить проблему установкой скрипта, который заставит грузиться изображения постепенно.
Метаданные изображений
Вторым блоком оптимизации изображений для сайта является прописывание подходящих ключевых слов в метаданные. Картинки обладают несколькими атрибутами, куда можно записать необходимые для продвижения ключи. Для HTML верстки этих атрибутов два: alt и title; на Wordpress’е они называются «Атрибут alt» и «Заголовок» соответственно. Первый отвечает за то, какую надпись будет видно, когда фото отключено. Второй за то, какую надпись видно, если навести курсор на картинку.
Главное, не перестарайтесь с ключевыми словами в изображениях, чтобы не попасть под фильтры поисковых систем.