Skjermbilder viser den engelske appen. Forhåndsinnstilte navn og kontroller er også tilgjengelig på appspråket ditt.

Ditt utgangspunkt

Bruk Responsivt web i PixRinse, og se gjennom disse innstillingene mot din faktiske destinasjon.

Innstillinger for denne arbeidsflyten
Bredder320 / 640 / 1280 / 1920 px
ProduksjonWebP, kvalitet 80
FargesRGB
Små kilderStørre varianter hoppes over
PixRinse Responsivt web forhåndsinnstilling som viser flere WebP utdatastørrelser
Innstillinger brukt for denne gjennomgangen. Velg skjermbildet for å inspisere det i full størrelse.

Hvordan gjøre det

  1. Start med den opprinnelige ressursen

    Bruk en kilde som er bred nok for den største varianten du trenger. Hver derivativ genereres fra originalen i stedet for å endre størrelsen gjentatte ganger.

  2. Velg Responsivt web

    Se gjennom de fire innebygde breddene og filnavnene. Varianter som er bredere enn kilden hoppes over, så inspiser den planlagte uttellingen.

  3. Eksporter bildesettet

    Gjennomgå alle utganger. Flere utganger per kilde krever Pro; gratisnivået kan fortsatt brukes til å teste en arbeidsflyt i én størrelse.

  4. Legg til bildene på siden din

    Bruk breddebeskrivelser i srcset og sett sizes til å matche den faktiske layouten. Inkluder nøyaktig bredde, høyde og alternativ tekst på bildeelementet.

EKSEMPEL HTML · TILPASSE 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"
>

FILENE FRA DENNE GJENNOMGANG

Hva dette eksemplet produserte

En 3072 px bred kilde er stor nok for alle fire forhåndsinnstilte bredder. Hver fil er en separat WebP, generert direkte fra den kilden.

Kvalitet
80
Fargeprofil
sRGB
Utganger fra én kilde
4
Faktisk eksporterte filer
FilFormatPikslerBytes
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134 018
vase-640w.webpWebP640 × 42711 594
Én kilde, fire nyttige nettbredder: faktiske eksporterte resultater
Faktiske eksportresultater for eksempelfilene vist i denne gjennomgangen.

Målt på prøvefilene vist. Resultatene dine avhenger av originalene og innstillingene. Det keramiske vasefotografiet er en AI-generert prøve. Appens skjermbilder og eksporterte filmålinger er ekte.

Et par vanlige spørsmål

Hva skjer hvis kilden min bare er 1000 px bred?

Malen hopper over 1280 og 1920 px variantene. Bare referansefiler som faktisk ble generert.

Genererer appen HTML?

Denne arbeidsflyten produserer bilder. Legg til srcset og sizes i nettstedets kode eller innholdssystem.

Sett arbeidsflyten i gang.

Åpne PixRinse, legg til noen bilder og start med innstillingene ovenfor.

Last ned for MacGratis: opptil 10 bilder per batch og én utgang per kilde. Denne arbeidsflytens flere utganger krever Pro. Sammenlign gratis og pro.