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. Порівняйте Free & Pro.