PixRinseGli screenshot mostrano l'app inglese. I nomi e i controlli preimpostati sono disponibili anche nella lingua dell'app.
Il tuo punto di partenza
Utilizza Web responsive in PixRinse, quindi controlla queste impostazioni rispetto alla tua destinazione effettiva.
| Larghezze | 320 / 640 / 1280 / 1920 px |
|---|---|
| Produzione | WebP, qualità 80 |
| Colore | sRGB |
| Piccole fonti | Le varianti più grandi vengono saltate |
Come farlo
Inizia con la risorsa originale
Utilizza una fonte sufficientemente ampia per la variante più grande di cui hai bisogno. Ogni derivata viene generata dall'originale invece di essere ridimensionata ripetutamente.
Seleziona Web responsive
Esamina le quattro larghezze e i nomi dei file incorporati. Le varianti più larghe dell'origine vengono saltate, quindi controlla il conteggio dell'output pianificato.
Esporta il set di immagini
Esaminare tutti gli output. Più output per sorgente richiedono Pro; il livello gratuito può ancora essere utilizzato per testare un flusso di lavoro di una sola dimensione.
Aggiungi le immagini alla tua pagina
Utilizza i descrittori di larghezza in srcset e imposta sizes in modo che corrisponda al layout effettivo. Includi larghezza, altezza e testo alternativo precisi sull'elemento immagine.
<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"
>I FILE DI QUESTA PROCEDURA
Cosa ha prodotto questo esempio
Una sorgente di larghezza 3072 px è sufficientemente grande per tutte e quattro le larghezze preimpostate. Ogni file è un WebP separato, generato direttamente da quella fonte.
- Qualità
- 80
- Profilo colore
- sRGB
- Uscite da un'unica fonte
- 4
| File | Formato | Pixel | Byte |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35.214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64.108 |
| vase-320w.webp | WebP | 320 × 213 | 4018 |
| vase-640w.webp | WebP | 640 × 427 | 11.594 |
Misurato sui file di esempio mostrati. I risultati dipendono dagli originali e dalle impostazioni. La fotografia del vaso di ceramica è un campione generato dall'intelligenza artificiale. Gli screenshot dell'app e le misurazioni dei file esportati sono reali.
Un paio di domande comuni
Cosa succede se la mia fonte è larga solo 1000 px?
Il modello ignora le varianti 1280 e 1920 px. Fare riferimento solo ai file effettivamente generati.
L'app genera HTML?
Questo flusso di lavoro produce immagini. Aggiungi srcset e sizes nel codice del tuo sito web o nel sistema di contenuti.
Metti in funzione il flusso di lavoro.
Apri PixRinse, aggiungi alcune immagini e inizia con le impostazioni sopra.
Scarica per MacGratuito: fino a 10 immagini per batch e un output per sorgente. Gli output multipli di questo flusso di lavoro richiedono Pro. Confronta gratuito e Pro.