PixRinseНа скриншотах показано англоязычное приложение. Предустановленные имена и элементы управления также доступны на языке вашего приложения.
Ваша отправная точка
Используйте Адаптивный веб в PixRinse, затем сверьте эти настройки с фактическим пунктом назначения.
| Ширина | 320 / 640 / 1280 / 1920 px |
|---|---|
| Выход | WebP, качество 80 |
| Цвет | sRGB |
| Малые источники | Более крупные варианты пропускаются. |
Как это сделать
Начните с исходного актива
Используйте источник, достаточно широкий для самого большого варианта, который вам нужен. Каждая производная создается на основе оригинала, а не подвергается многократному изменению размера.
Выберите Адаптивный веб
Просмотрите четыре встроенных значения ширины и имена файлов. Варианты, превышающие исходный, пропускаются, поэтому проверьте запланированное количество выходных данных.
Экспортируйте набор изображений
Просмотрите все результаты. Для нескольких выходов на источник требуется Pro; Уровень бесплатного пользования по-прежнему можно использовать для тестирования рабочего процесса одного размера.
Добавьте изображения на свою страницу
Используйте дескрипторы ширины в srcset и установите sizes в соответствии с фактическим макетом. Включите точную ширину, высоту и альтернативный текст в элемент изображения.
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>ФАЙЛЫ ИЗ ЭТОГО ПРОХОЖДЕНИЯ
Что дал этот пример
Источник шириной 3072 px достаточно велик для всех четырех предустановленных значений ширины. Каждый файл представляет собой отдельный WebP, созданный непосредственно из этого источника.
- Качество
- 80
- Цветовой профиль
- sRGB
- Выходы из одного источника
- 4
| Файл | Формат | Пиксели | Байты |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35 214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64 108 |
| vase-320w.webp | WebP | 320 × 213 | 4 018 |
| vase-640w.webp | WebP | 640 × 427 | 11 594 |
Измерено на показанных файлах-образцах. Ваши результаты зависят от ваших оригиналов и настроек. Фотография керамической вазы представляет собой образец, созданный искусственным интеллектом. Скриншоты приложения и размеры экспортированных файлов настоящие.
Пара распространенных вопросов
Что произойдет, если ширина моего источника составит всего 1000 px?
Шаблон пропускает варианты 1280 и 1920 px. Только справочные файлы, которые были фактически созданы.
Генерирует ли приложение HTML?
Этот рабочий процесс создает изображения. Добавьте srcset и sizes в код вашего веб-сайта или систему контента.
Заставьте рабочий процесс работать.
Откройте PixRinse, добавьте несколько изображений и начните с настроек выше.
Скачать для MacБесплатно: до 10 изображений в пакете и один выход для каждого источника. Для нескольких выходов этого рабочего процесса требуется Pro. Сравните бесплатную и Pro.