Skärmdumpar visar den engelska appen. Förinställda namn och kontroller är också tillgängliga på ditt appspråk.

Din utgångspunkt

Använd Responsiv webb i PixRinse och granska sedan dessa inställningar mot din faktiska destination.

Inställningar för detta arbetsflöde
Bredder320 / 640 / 1280 / 1920 px
ProduktionWebP, kvalitet 80
FärgsRGB
Små källorStörre varianter hoppas över
PixRinse Responsiv webb förinställning som visar flera WebP utdatastorlekar
Inställningar som används för denna genomgång. Välj skärmdumpen för att inspektera den i full storlek.

Hur man gör det

  1. Börja med den ursprungliga tillgången

    Använd en tillräckligt bred källa för den största varianten du behöver. Varje derivata genereras från originalet istället för att ändra storleken upprepade gånger.

  2. Välj Responsiv webb

    Granska de fyra inbyggda bredderna och filnamnen. Varianter som är bredare än källan hoppas över, så inspektera det planerade antalet utdata.

  3. Exportera bilduppsättningen

    Granska alla utgångar. Flera utgångar per källa kräver Pro; den fria nivån kan fortfarande användas för att testa ett arbetsflöde i en storlek.

  4. Lägg till bilderna på din sida

    Använd bredddeskriptorer i srcset och ställ in sizes för att matcha den faktiska layouten. Inkludera korrekt bredd, höjd och alternativ text på bildelementet.

EXEMPEL HTML · ANPASSA TILL DIN LAYOUT
<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"
>

FILERNA FRÅN DENNA GÅNG

Vad detta exempel producerade

En 3072 px bred källa är tillräckligt stor för alla fyra förinställda bredder. Varje fil är en separat WebP, genererad direkt från den källan.

Kvalitet
80
Färgprofil
sRGB
Utgångar från en källa
4
Faktiskt exporterade filer
FilFormateraPixelsBytes
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134 018
vase-640w.webpWebP640 × 42711 594
En källa, fyra användbara webbbredder: faktiska exporterade resultat
Faktiska exportresultat för exempelfilerna som visas i den här genomgången.

Uppmätt på de visade provfilerna. Resultaten beror på dina original och inställningar. Det keramiska vasfotografiet är ett AI-genererat prov. Appens skärmdumpar och exporterade filmått är verkliga.

Ett par vanliga frågor

Vad händer om min källa bara är 1000 px bred?

Mallen hoppar över varianterna 1280 och 1920 px. Endast referensfiler som faktiskt genererades.

Genererar appen HTML?

Detta arbetsflöde producerar bilder. Lägg till srcset och sizes i din webbplatskod eller innehållssystem.

Sätt igång arbetsflödet.

Öppna PixRinse, lägg till några bilder och börja med inställningarna ovan.

Hämta för MacGratis: upp till 10 bilder per batch och en utdata per källa. Detta arbetsflödes flera utgångar kräver Pro. Jämför gratis och pro.