PixRinseScreenshots tonen de Engelse app. Vooraf ingestelde namen en bedieningselementen zijn ook beschikbaar in uw app-taal.
Jouw startpunt
Gebruik Responsief web in PixRinse en controleer vervolgens deze instellingen ten opzichte van uw werkelijke bestemming.
| Breedtes | 320 / 640 / 1280 / 1920 px |
|---|---|
| Uitvoer | WebP, kwaliteit 80 |
| Kleur | sRGB |
| Kleine bronnen | Grotere varianten worden overgeslagen |
Hoe het te doen
Begin met het oorspronkelijke bezit
Gebruik een bron die breed genoeg is voor de grootste variant die je nodig hebt. Elke afgeleide wordt gegenereerd op basis van het origineel in plaats van herhaaldelijk te worden vergroot of verkleind.
Selecteer Responsief web
Bekijk de vier ingebouwde breedten en bestandsnamen. Varianten die breder zijn dan de bron worden overgeslagen, dus controleer het geplande aantal outputs.
Exporteer de afbeeldingsset
Bekijk alle uitvoer. Voor meerdere uitgangen per bron is Pro vereist; de gratis laag kan nog steeds worden gebruikt om een workflow van één grootte te testen.
Voeg de afbeeldingen toe aan uw pagina
Gebruik breedtebeschrijvingen in srcset en stel sizes zo in dat deze overeenkomt met de daadwerkelijke lay-out. Voeg nauwkeurige breedte, hoogte en alternatieve tekst toe aan het afbeeldingselement.
<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"
>DE BESTANDEN UIT DEZE WALKTHROUGH
Wat dit voorbeeld heeft opgeleverd
Een bron met een breedte van 3072 px is groot genoeg voor alle vier de vooraf ingestelde breedten. Elk bestand is een afzonderlijke WebP, rechtstreeks vanuit die bron gegenereerd.
- Kwaliteit
- 80
- Kleurprofiel
- sRGB
- Uitgangen uit één bron
- 4
| Bestand | Formaat | Pixels | Bytes |
|---|---|---|---|
| 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 |
Gemeten op de getoonde voorbeeldbestanden. Uw resultaten zijn afhankelijk van uw originelen en instellingen. De foto van de keramische vaas is een door AI gegenereerd monster. De app-screenshots en geëxporteerde bestandsmetingen zijn echt.
Een paar veelgestelde vragen
Wat gebeurt er als mijn bron slechts 1000 px breed is?
De sjabloon slaat de varianten 1280 en 1920 px over. Alleen referentiebestanden die daadwerkelijk zijn gegenereerd.
Genereert de app HTML?
Deze workflow produceert afbeeldingen. Voeg srcset en sizes toe aan uw websitecode of inhoudssysteem.
Zet de workflow aan het werk.
Open PixRinse, voeg een paar afbeeldingen toe en begin met de bovenstaande instellingen.
Download voor MacGratis: maximaal 10 afbeeldingen per batch en één uitvoer per bron. Voor de meerdere uitvoer van deze workflow is Pro vereist. Vergelijk gratis en pro.