Картинки для сайта: размер, формат, вес
Тяжёлые картинки — самая частая причина медленного сайта. Исправляется это тремя действиями, и все три делаются до загрузки на сервер.
Три шага подготовки
Порядок важен: он определяет итоговый вес.
Приведите к нужной ширине
Картинка шире, чем блок, в котором она показана, — это лишний вес без пользы.
Выберите формат
Фотографии — JPG или WebP, графика и скриншоты — PNG, анимация — видео вместо GIF.
Сожмите
Умное сжатие даёт основную экономию на последнем шаге.
Сколько должна весить картинка
Универсальной цифры нет, но ориентир простой: иллюстрация в статье редко должна весить больше нескольких сотен килобайт, а иконка или логотип — больше нескольких десятков. Если страница набирает мегабайты только на изображениях, посетители с мобильным интернетом увидят её позже, чем закроют.
Где это ломается
- Загружены фотографии прямо с камеры — вес в десятки раз выше нужного
- Анимация сделана GIF-файлом — видео на его месте весит в разы меньше
- Прозрачность не нужна, но картинки сохранены в PNG
- Сжатие делается после загрузки на сайт, а не до
Когда картинок для сайта ещё нет
Иллюстрации, обложки и карточки можно не искать и не рисовать вручную: агент Leantech создаёт изображения по описанию и сразу отдаёт файлы нужного формата.
Поставить задачу →Частые вопросы
Какой ширины делать картинки?
Ориентируйтесь на ширину блока, в котором они показываются, с запасом для экранов с высокой плотностью пикселей.
Стоит ли переходить на WebP?
Да, он легче JPG при сравнимом качестве и поддерживается современными браузерами.
Как автоматизировать сжатие?
Через API сервиса или плагин системы управления сайтом.