Размер изображений для сайта
Приведите фото к ширине, в которой их реально показывает макет, — баннер, картинка в статье или в блоге, — чтобы страницы грузились быстро и оставались чёткими.
Размер для платформы или задачи
Ваш файл
Почему этот инструмент
- Без ограничения размера
- Ничего не загружается
- Без регистрации
Большинство медленных страниц медленные из-за картинок, которые намного больше отведённого им места. Фото с камеры шириной 6000 пикселей в колонке шириной 800 заставляет каждого посетителя скачивать примерно в 50 раз больше пикселей, чем он видит.
Изменение размера до загрузки решает проблему у источника. Эта страница начинает с трёх распространённых размеров — баннер 1920 × 1080, картинка в контенте 1280 × 720 и изображение для блога 800 × 600 — и позволяет задать любую другую ширину, которую использует ваша тема.
Как подготовить изображения для сайта
Добавьте изображения
Перетащите фото, которые собираетесь публиковать, — JPG, PNG, WebP или HEIC, можно сразу несколько.
Выберите размер и формат
Пресет «Баннер сайта», «Картинка для статьи» или своя ширина под макет. Фото сохраняйте в WebP или JPG.
Измените размер и скачайте
Измените размер, проверьте размеры и скачайте, затем сожмите, если файлы всё ещё тяжёлые.
Как выбрать ширину в пикселях
Найдите максимальную ширину, в которой картинка показывается на сайте, в CSS-пикселях, и умножьте её на два для экранов высокой плотности (Retina). Колонке шириной 640 пикселей нужно изображение около 1280 пикселей; баннеру на всю ширину большого монитора — около 1920. Больше чем вдвое разница обычно уже не видна.
Если платформа сама создаёт адаптивные размеры — WordPress, Shopify и многие конструкторы сайтов это делают, — загружайте один разумного размера исходник, а не оригинал с камеры. WordPress, например, и так уменьшает очень большие загрузки до порога 2560 пикселей, а лишние пиксели только замедляют загрузку.
Пропорции и стабильность макета
Картинки в сетке или карточках выглядят аккуратно, только когда у них одинаковые пропорции. Приведите миниатюры статей к одной рамке 4:3 или 16:9 — и карточки выровняются. Здесь по умолчанию стоит «Заполнить с обрезкой», потому что так гарантируется точная форма; переключитесь на «Вписать целиком», если картинка должна быть видна полностью.
Известные размеры помогают и самой странице: когда ширина и высота изображения указаны в HTML, браузер резервирует место до загрузки, и текст не прыгает. Именно это инструменты оценки скорости измеряют как сдвиг макета (CLS).
Формат и вес файла для сайта
WebP — лучший выбор по умолчанию для фото на современных сайтах, JPG — универсально совместимый запасной вариант. PNG оставьте для логотипов, скриншотов и графики с прозрачностью, а простые векторные логотипы — в SVG. Сильнее всего на вес влияет изменение размера, сжатие — на втором месте.
После изменения размера прогоните крупные файлы через сжатие фото или используйте сжатие фото для сайта, если отчёт PageSpeed Insights ругается на вес изображений. Перевести готовые JPG в WebP можно в один шаг через JPG в WebP.
Что изменение размера само не исправит
Эта страница меняет файлы, которые вы загружаете. Она не правит HTML сайта, не добавляет отложенную загрузку и не создаёт адаптивные варианты srcset — это задачи темы, CMS или кода. Для загрузок в WordPress сжатие фото для WordPress объединяет разумный размер и вывод в WebP в одном шаге.
Распространённые размеры изображений для сайта
Отправные точки, а не правила — измерьте свой макет.
| Место | Типичный размер | Формат |
|---|---|---|
| Баннер на всю ширину | 1920 × 1080 | WebP или JPG |
| Картинка в контенте или статье | 1280 × 720 | WebP или JPG |
| Карточка блога или картинка в тексте | 800 × 600 | WebP или JPG |
| Логотип или иконка | Вдвое больше размера показа | SVG или PNG |
| Скриншот с текстом | Ширина показа × 2 | PNG или WebP |
Какие задачи сайта это решает
Статьи блога
Фото с камеры до ширины колонки ещё до вставки в редактор.
Баннеры на главной
Широкая картинка шапки на весь экран без скачивания 10 МБ.
Сетки карточек
Одинаковая форма всех миниатюр, чтобы сетка выровнялась.
Быстрые страницы
Меньше веса, который инструменты скорости отмечают как избыточные изображения.
Магазины и портфолио
Единообразные фото товаров или проектов перед загрузкой в конструктор сайтов.
