Изображения делают сайт красивым, «живым» и запоминающимся. Но стоит немного переусердствовать — и даже самый стильный визуал превращается в головную боль для SEO и пользователей 😬.
В этой статье разберём самые распространённые ошибки при работе с изображениями и подскажем, как их избежать.

🖼️ 1. Слишком большие изображения (вес и разрешение)

Это один из самых частых просчётов — загружается картинка прямиком из фотобанка или с телефона в оригинальном размере и весе. В итоге:

• Страница грузится медленно ⏳
• Показатели отказов растут
• Поисковики занижают позиции из-за плохой скорости

👉 Как избежать:

• Используй форматы `.webp` вместо `.jpg` или `.png`
• Перед загрузкой сжимай картинки через TinyPNG, Squoosh или аналогичные сервисы
• Для блога часто достаточно разрешения 1200px по ширине, нет смысла грузить 5000px

🧐 2. Отсутствие или дублирование атрибута alt

Атрибут `alt` — это не просто подпись для SEO. Он помогает незрячим пользователям, и поисковым роботам понять, что изображено на картинке. А если `alt` не прописан — ты упускаешь шанс дополнительно продвинуться в выдаче.

❌ Плохой alt: `image1.jpg`, `картинка`, `photo`
✅ Хороший alt: `Серый кот лежит на белом диване`, `График роста трафика за май 2025 года`

🚫 Ошибка: одинаковый alt у всех изображений или отсутствие его вовсе.

🎯 3. Изображения не соответствуют содержанию

Красиво, но ни к месту — так можно описать часть визуалов, которые вставляют просто «для красоты». Но если картинка не усиливает смысл текста, а только отвлекает — она не нужна.

💡 Изображение должно:

• дополнять или иллюстрировать то, о чём говорится в тексте
• помогать удерживать внимание
• повышать доверие к контенту

🕵️ 4. Имена файлов — каша из цифр

Имя файла тоже читается поисковыми системами.
Файл с названием `IMG_8273648.jpg` ничего не говорит ни Google, ни пользователю.

✅ Вместо этого загружай изображения с именами вида:
`kofeynya-v-parizhe.jpg`, `optimizatsiya-saita-grafik.webp`

📌 Важно: используй латиницу и дефисы, а не кириллицу и подчёркивания.

💥 5. Отсутствие lazy load (ленивой загрузки)

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

🚀 Это сильно повышает скорость загрузки, особенно на мобильных устройствах.
Во многих темах WordPress это уже встроено, либо можно добавить плагином (например, a3 Lazy Load).

🧩 6. Нерациональное использование форматов

Использовать `.png` для фото? Или `.jpeg` для логотипа с прозрачным фоном? Это приводит к лишнему весу или некорректному отображению.

🧠 Как правильно:

• `.webp` — универсально, современно, экономно
• `.jpeg` — для фото (если нет поддержки WebP)
• `.png` — для иконок, скриншотов и изображений с прозрачным фоном
• `.svg` — для логотипов, простых графиков, иконок (вектор)

🏗️ 7. Игнорирование адаптивности

На телефоне огромная горизонтальная картинка может занимать весь экран и ещё полтора. А иногда и «вылезать» за пределы страницы 😅

🔧 Что делать:

• Используй адаптивные изображения через `srcset` или функционал темы
• Проверь отображение на мобильных устройствах
• Не вставляй картинки как фон, если они важны для смысла — это плохо адаптируется

📉 8. Картинки без контекста и подписей

Пользователь может не понять, зачем вставлено то или иное изображение. Особенно, если:

• Это скриншот интерфейса
• Это статистика или график
• Это продукт без названия или описания

✍️ Добавляй подписи, описания или выноски, чтобы связать картинку с текстом.

🔄 9. Повтор одного и того же изображения в разных местах

Часто бывает, что одно и то же фото или иконку вставляют в каждую статью. Это выглядит:

• Повторяющимся
• Неоригинальным
• Иногда — как дублирующий контент

🧼 Лучше иметь несколько вариаций, чем везде лепить одну и ту же иллюстрацию.

✅ Важно помнить

Изображения — это инструмент, а не просто украшение. Они могут:

• повысить доверие 👌
• усилить SEO 💪
• улучшить восприятие текста 📖
• или… навредить, если сделаны небрежно ❌

🔜 В одной из наших предыдущих статей мы рассказали, как оптимизировать изображения «по-человечески», без перегибов и вреда для UX. Оставайтесь с нами 😉