Изображения - это “носитель номинала” сайта, но при неправильном подходе они станут “обузой”, замедляющей работу сайта, а также упустят возможность улучшить SEO. Суть оптимизации изображений заключается в том, чтобы “уменьшить объем без ущерба для визуального эффекта” и “позволить поисковым системам понять содержание картинки”, а также в том, чтобысжатый размериДобавить тег altэто два самых основных и эффективных метода.
Во-первых, зачем оптимизировать изображения?
Важно понять важность оптимизации, прежде чем приступать к ней более серьезно:
- Улучшенная скорость загрузки: Большие, неоптимизированные изображения могут дольше загружаться, и посетители могут уйти, не дождавшись окончания загрузки (исследования показывают, что 53% посетителей покидают страницу, которая загружается более 3 секунд).
- Экономия места на сервере: Размер сжатого изображения меньше, что позволяет сократить занимаемое сервером пространство для хранения и потребление трафика (особенно важно для серверов, тарифицируемых по трафику).
- Помощь в SEO ранжированииПоисковые системы (например, Baidu, Google) не могут “читать” изображения напрямую, они могут понять их содержание только через текстовую информацию (например, теги alt), и оптимизация изображений может дать им больше возможностей в результатах поиска.
- Адаптация к мобильным устройствам: Пользователи мобильных телефонов имеют ограниченный трафик, поэтому изображения небольшого размера могут сократить загрузку и улучшить работу с мобильными устройствами.
Во-вторых, сжатие изображения: уменьшение громкости, без потери качества изображения
Принцип сжатия изображения заключается в удалении из него избыточной информации о пикселях (например, неразличимых невооруженным глазом цветовых различий), что позволяет уменьшить размер файла, сохранив при этом визуальный эффект. Рекомендуется новичкамПодключаемое автоматическое сжатиеРучное управление не требуется.
Метод 1: Автоматическое сжатие с помощью плагина (рекомендуется для новичков)
Рекомендуемые плагины: Smush или ShortPixel (достаточно бесплатной версии)
Для того чтобы Smush В качестве примера можно привести следующие шаги:
- Установите плагин: Фон [Плагин] → [Установить плагин] → Поиск “Smush” → Нажмите [Установить] → [Активировать].
- Основные настройки:
- После активации перейдите на страницу настроек плагина и установите флажок “Automatically compress newly uploaded images” (новые загруженные изображения будут сжиматься автоматически, не нужно делать это вручную).
- Нажмите “Пакетное сжатие” и выберите “Сжать все изображения” (для старых изображений, которые были загружены в медиатеку).
- Ожидание завершения сжатия: плагин покажет прогресс сжатия и сэкономленное место (например, “50 изображений были сжаты, сэкономив 20 МБ места”).
режущая кромкаПолностью автоматизированная обработка, поддержка пакетного сжатия, бесплатная версия для удовлетворения потребностей малых и средних веб-сайтов (бесплатная версия Smush позволяет сжимать до 5 МБ одного изображения, бесплатная версия ShortPixel позволяет сжимать до 100 изображений в месяц).
Метод 2: Ручное сжатие перед загрузкой (для экстремальной оптимизации)
Если размер изображения особенно велик (например, оригинальная фотография, сделанная фотоаппаратом, может превышать 10 МБ), рекомендуется сжать его вручную на компьютере перед загрузкой на сайт:
- Онлайн-инструменты(Установка программного обеспечения не требуется):
- TinyPNG (tinypng.com): Поддержка PNG и JPG, высокая степень сжатия, низкая потеря качества изображения, возможность загрузки 20 изображений одновременно.
- Инструмент для сжатия изображений, поддерживает формат WebP (меньший размер, чем JPG 30%-50%).
- процедура：
- Откройте инструмент → загрузите изображение → дождитесь окончания сжатия → скачайте сжатое изображение → загрузите его в медиатеку WordPress.
Сценарий: Важные изображения, такие как баннер на главной странице, основное изображение на странице подробного описания товара и т.д. Ручное сжатие позволяет более точно контролировать качество изображения.
Компрессионные заметки:
- Обычные изображения (например, сопровождающие статьи) сжимаются в В пределах 200 КБ Вот и все, управление главной страницей находится в В пределах 1 МБ。
- расстановка приоритетов Формат WebP(WordPress 5.8+ имеет встроенную поддержку), размер примерно на 50% меньше, чем JPG при том же качестве изображения.
- Избегайте чрезмерного сжатия: степень сжатия выше 80% может привести к размытию изображений, особенно тех, которые содержат много текста (например, скриншоты, инфографика).
В-третьих, добавьте теги alt: чтобы поисковые системы “понимали” картинку.
“Тег ”alt“ (полное название ”атрибут alt“) - это ”текстовое описание" изображения, которое отображается, когда изображение не загружается из-за проблем с сетью; что более важно, через него поисковая система поймет содержание картинки, что влияет на ранжирование в результатах поиска. Через него поисковая система понимает содержание картинки, что влияет на ее ранжирование в результатах поиска.
Почему я должен добавлять теги alt?
- Пример 1: картинка “красные кроссовки”, если нет alt-тега, поисковая система может знать только, что это картинка; добавьте alt-тег “красные кроссовки легкие и дышащие”, поисковая система будет ассоциировать с поисковыми запросами, связанными с “красными кроссовками”. Связанные поисковые запросы "red trainers".
- Пример 2: Когда изображение не загружается, посетитель видит текст тега alt и знает, каким должно было быть изображение (вместо пустого места или значка “изображение не может быть отображено”).
Как добавить теги alt?
Способ 1: Добавляйте непосредственно при загрузке изображений (рекомендуется)
- Загрузите изображение (либо через медиатеку, либо через редактор) и во всплывающем окне “Настройки изображения” найдите поле ввода "Альтернативный текст" (т. е. тег alt).
- Заполните описание:
- Будьте лаконичны и точны (уместно 10-15 слов) и указывайте основное содержание изображения (например, “передняя часть офиса компании”, “внешний вид ноутбука 2023 года”).
- Избегайте нагромождения ключевых слов (например, “WordPress website builder website design company” в качестве недопустимого описания).
- Если изображение является декоративным (например, разделитель, фоновый рисунок), оставьте его пустым или заполните “Декоративное изображение” (чтобы не вводить в заблуждение поисковые системы).
- Нажмите “Вставить в сообщение”, и тег alt автоматически вступит в силу.
Метод 2: Добавьте/измените теги alt для загруженных изображений
- Перейдите в меню [Медиа] → [Библиотека], найдите фотографию, которую нужно изменить, и нажмите на нее, чтобы перейти на страницу редактирования.
- Заполните или измените содержимое поля “Альтернативный текст” справа и нажмите [Обновить].
Теги alt vs Title vs Caption: не запутайтесь!
Многие новички путают эти три понятия и делают простое различие:
- тег alt (альтернативный текст): Для поисковых систем и сбоев в загрузке, влияющих на SEO, должны быть заполнены.
- Название: Текст, который будет отображаться при наведении мыши на изображение (необязательно, подходит для дополнительных сведений, например, “Нажмите, чтобы посмотреть изображение в высоком разрешении”).
- Описание (подпись): Текст, отображаемый под изображением (аналогично подписи к изображению, например, “Рисунок 1: Место проведения ежегодного собрания компании”, заполните при необходимости).
IV. Часто задаваемые вопросы для новичков
- Все ли изображения должны быть снабжены alt-тегами?Почти. Помимо чисто декоративных изображений (например, однотонных фонов, рамок), другие изображения, содержащие реальный контент (изображения товаров, людей, сцен и т. д.), должны быть добавлены в качестве основного требования для SEO.
- Что делать, если после сжатия фотографии стали нечеткими?Уменьшите степень сжатия (степень сжатия можно настроить в плагине) или повторно сжимайте вручную (например, TinyPNG), чтобы сохранить более высокое качество изображения.
- Изображения в формате WebP не отображаются в старых браузерах?WebP поддерживается современными браузерами (Chrome, Edge, Firefox, Safari 14+), а старые браузеры (например, IE) используются редко и без лишних проблем. Для совместимости установите плагин “WebP Express”, который автоматически предоставляет альтернативы JPG для старых браузеров.
- Скорость сайта не изменилась после оптимизации изображений?Это может быть связано с другими факторами (например, медленный сервер, слишком много плагинов), вы можете использовать инструмент GTmetrix, чтобы проверить, является ли “размер изображения” основной проблемой.
Оптимизация изображений - это операция “низкие затраты - высокая отдача”: 10 минут, потраченные на установку плагина и добавление alt-тегов, могут значительно улучшить скорость работы сайта и его SEO-показатели. Возьмите за привычку “загружать и оптимизировать”, и ваш сайт станет более популярным среди посетителей и поисковых систем.
Русский