Подготовить изображения для быстрого сайта
Сделайте из фотографий и картинок страницы файлы WebP той ширины, которую макет реально показывает. Так обычно поступают, когда главная тяжёлая и картинки всё ещё лежат в полном размере с камеры.
- Быстро
- На 100% приватно
- Всегда бесплатно
- Любой браузер
Перетащите изображения в любое место страницы
JPG, PNG, WebP, GIF, SVG, HEIC или AVIF. Фото остаются на этом устройстве.
Когда это нужно
Здесь по умолчанию стоит WebP. Фотографии обычно меньше JPG, и прозрачность элементов интерфейса сохраняется. Текущие браузеры его показывают.
Если CMS, рассылка или партнёр ещё не принимают WebP, оставьте JPG. Если знак должен остаться ровно таким, как нарисован, оставьте PNG.
Для скорости страницы уменьшить ширину так же важно, как сменить формат. WebP шириной 4000 пикселей всё ещё большой.
Чтобы отформатировать JSON или посмотреть содержимое, не вставляя токен на публичный сайт, откройте ToolBuddy. Тот инструмент тоже остаётся в браузере.
Как сделать
- Положите картинки, которые пойдут на страницу.
- Если цветовых полос нет, при скачивании оставьте WebP и поставьте качество около 0,8.
- Поставьте максимальную ширину около 1600. Картинку, которая на экране Retina занимает 1200 CSS-пикселей, задайте как 2400.
- Скачайте WebP и замените им исходный файл в теме или в CDN.
Подсказки
- Для большой картинки в начале страницы возьмите один WebP, а не PNG-снимок этой фотографии.
- Одинаковая ширина в списке товаров делает кэш и вёрстку спокойнее.
- Если у кого-то не открывается превью, сделайте отдельный JPG. На сайте оставьте WebP.