Как оптимизировать изображения для сайта

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

Бесплатный экспресс аудит

Проведём SEO аудит без оплаты. Акция действует до конца августа.

Заказать аудит

Шаг 1: Оптимизировать названия картинок

Поисковые алгоритмы Яндекса и Google обращают внимание на названия изображений. Названия должны соответствовать метатегам картинок и содержанию страницы. Желательно использовать в названиях ключевые слова (запросы, по которым пользователи могут искать ваш контент).

Пример оптимизации фото:

• Некорректное имя файла: qW31tY80zM.jpg
• Оптимизированное название: iphone-16-white.jpg

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

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

Шаг 2: Уменьшить вес изображений

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

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

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

Способ 1: Уменьшить размер иллюстраций

Самый простой способ, как оптимизировать изображение, это уменьшить его размер. Чем меньше размер картинки, тем меньше вес. Ширина контентной части во многих шаблонах сайтов: 600-800 пикселей. Часто нет смысла загружать картинки с шириной более 800 пикселей. 

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

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

Обрезать картинки или менять их размеры можно с помощью платных и бесплатных графических редакторов:

Способ 2: Изменить формат файлов

Чтобы оптимизировать изображение, можно просто поменять его формат. В дизайне сайтов чаще всего используются следующие форматы файлов:

• JPEG — растровое изображение. Формат часто используется в блогах, соцсетях, каталогах интернет-магазинов. Сохранение изображений происходит с небольшой потерей качества. Формат подходит для передачи сложных градиентов, но не поддерживает прозрачный фон. Универсальное расширение открывается даже в устаревших версиях браузеров.
• PNG — растровое изображение. Формат позволяет сохранять фото без потери качества, он сохраняет четкие контуры надписей и логотипов. Можно сохранять картинки с прозрачным фоном. Но PNG файлы весят больше по сравнению с другими форматами, этот вариант не подходит для оптимизации фото.
• WebP — растровое изображение. Современный формат WebP создан как замена JPEG и PNG для оптимизации картинок. Он обеспечивает качество изображений при небольшом весе файлов, поддерживает анимацию и прозрачный фон. 
• SVG — векторное изображение. Формат используется для сохранения иконок, логотипов, графиков и диаграмм.

Для оптимизации изображений для сайта может быть достаточно перевести их из формата JPEG или PNG в формат WebP. После сохранения картинок в разрешении WebP вес уменьшается на 25-35%, а качество остается неизменным. Изменить формат можно с помощью Adobe Photoshop, Squoosh, Photopea и других сервисов.

Способ 3: Использовать превью

Большинство CMS-систем позволяют добавлять превью иллюстраций. Превью — это маленькая картинка, при нажатии на которую открывается полная версия изображения. Стандартная ширина миниатюры: 200-300 пикселей.

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

Скидка 5000 рублей на SEO продвижение

Дарим скидку 5000 рублей на SEO продвижение сайта. Акция действует до конца октября.

Заказать SEO

Способ 4: Снизить качество картинок

Оптимизировать изображение можно, если снизить качество. Эта функция есть в Adobe Photoshop и других графических редакторах. Чтобы уменьшить вес файла в Adobe Photoshop, нужно открыть диалоговое окно «Сохранить для Web» в меню «Файл». Затем выбрать формат файла и указать в поле «Потери сжатия» допустимый уровень потерь. 

Примеры онлайн-сервисов для оптимизации фото: 

• Compressor.IO.
• TinyPNG.
• ImageRecycle.
• Optimizilla.

При загрузке картинок на сайт важно соблюдать баланс между качеством и весом файлов. Легкие картинки плохого качества быстро открываются. Но низкое разрешение не нравится посетителям. Мы не советуем ухудшать качество файлов более чем на 40%. Оптимальный уровень сжатия: 20-30%.

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

Шаг 3: Заполнить атрибуты Alt и Title

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

Какие задачи выполняют метатеги:

• Alt (alternative text) — текст, который описывает содержание картинки. Он дает поисковикам возможность понять, что на ней изображено. Альтернативный текст подставляется вместо картинки, если она не загружается, или используется программа для чтения с экрана.
• Title — всплывающая подсказка. Она появляется на экране, когда пользователь наводит на картинку курсор. 

Alt — обязательный атрибут для оптимизации. Заполнение Alt улучшает ранжирование страниц и делает контент доступным. Title — дополнительный атрибут, который улучшает пользовательский опыт. Мы советуем заполнять Title, потому что он косвенно влияет на ранжирование. 

Пример оптимизации фото с помощью метатегов:

• Alt: Lada Granta Sport.
• Title: Белая Лада Гранта Спорт в ночном городе.

Оптимизация изображений для сайта с помощью метатегов Alt и Title может привлекать трафик из Яндекс.Картинок и Google Image. Хорошо ранжируются уникальные картинки высокого качества. Хорошая стратегия — загружать собственные фотографии и иллюстрации, которых еще не было в интернете. Когда такой возможности нет, чтобы сделать картинку уникальной, можно отзеркалить ее, изменить цвета или дорисовать новые элементы.