Зачем вообще готовить картинки перед загрузкой на сайт
Если вы просто загружаете фото «как есть» с телефона или фотостока, это приведёт к ряду проблем:
- сайт будет долго загружаться (а значит — терять посетителей);
- пользователи с мобильных устройств увидят «мыльные» или обрезанные изображения;
- поисковые роботы не смогут корректно индексировать картинки;
- дизайн будет выглядеть неряшливо из-за разнобоя в размерах и цветах.
Правильная подготовка изображений позволяет:
- ускорить загрузку сайта;
- улучшить внешний вид страниц;
- повысить позиции в Google и Яндексе;
- создать единый стиль бренда;
- улучшить восприятие информации.
Шаг 1: Выбираем нужный формат
Для веба существует несколько популярных форматов изображений, и каждый подходит под свои задачи:
- JPEG (JPG) — оптимален для фотографий и изображений с множеством оттенков. Лёгкий и универсальный, но не поддерживает прозрачность.
- PNG — подходит для изображений с прозрачностью, логотипов и иконок. Качественный, но «тяжёлый».
- WebP — современный формат от Google. Объединяет качество PNG и лёгкость JPEG. Поддерживается всеми современными браузерами и считается оптимальным выбором для сайтов.
- SVG — векторный формат. Идеален для иконок, логотипов и простых графических элементов. Масштабируется без потери качества.
Рекомендация: если ваш сайт поддерживает WebP — используйте его везде, где можно. Это сократит вес изображений до 30–40% без потери качества.
Шаг 2: Подбираем нужное разрешение и размер
Не загружайте на сайт изображения в оригинальном разрешении 4000×3000 пикселей — в этом нет смысла, и это вредно. Нужно заранее уменьшать изображения до нужного размера в пикселях.
Примеры подходов:
- для полноэкранного баннера — 1920×1080 или 1600×900;
- для превью и карточек — 600×400, 800×600 или в зависимости от дизайна;
- для иконок — 32×32, 64×64 и т.п.
Подстраивайте разрешение под конкретный блок сайта. Изображение не должно быть ни меньше (потеря качества), ни существенно больше (лишний вес).
Шаг 3: Оптимизируем вес изображения
Цель — добиться минимального размера файла без заметной потери качества. Это напрямую влияет на скорость загрузки сайта.
Вот что можно сделать:
Сжать изображение
Используйте инструменты вроде:
Они автоматически уменьшают размер файлов, часто без визуальных потерь.
Убрать лишние метаданные
Изображения с камер часто содержат EXIF-данные: модель камеры, дата съёмки и т.д. Это увеличивает вес, но не нужно пользователю.
Выбрать разумное качество
При сохранении JPEG не ставьте 100% качества — достаточно 70–80%. Разницу вы не заметите, а файл станет значительно легче.
Оптимальный вес картинки для сайта:
- до 150–200 КБ — для баннеров и больших фото;
- до 50–100 КБ — для карточек и миниатюр.
Шаг 4: Прописываем alt-тексты и названия файлов
SEO — это не только тексты, но и изображения. Чтобы картинки работали на продвижение, нужно:
- дать понятное имя файлу — не IMG_1234.jpg, а stroitelny-uroven-lazernyi.jpg;
- заполнить alt-атрибут — это текст, который описывает, что изображено на картинке. Он помогает поисковикам понять содержание изображения, а также отображается при ошибке загрузки.
Пример хорошего alt-текста:
alt=»Лазерный строительный уровень с дальностью 30 метров»
Не заполняйте alt ключевыми словами без смысла — пишите по-человечески.
