Slike zaslona prikazuju aplikaciju na engleskom jeziku. Unaprijed postavljeni nazivi i kontrole također su dostupni na jeziku vaše aplikacije.

Vaše polazište

Upotrijebite Responzivni web u PixRinse, zatim pregledajte ove postavke u odnosu na svoje stvarno odredište.

Postavke za ovaj tijek rada
širine320 / 640 / 1280 / 1920 px
IzlazWebP, kvaliteta 80
BojasRGB
Mali izvoriVeće varijante se preskaču
PixRinse Responzivni web unaprijed postavljeno prikazuje više WebP izlaznih veličina
Postavke korištene za ovaj vodič. Odaberite snimak zaslona da biste ga pregledali u punoj veličini.

Kako to učiniti

  1. Započnite s izvornim sredstvom

    Koristite dovoljno širok izvor za najveću varijantu koja vam je potrebna. Svaki derivat generira se iz originala umjesto da mu se stalno mijenja veličina.

  2. Odaberite Responzivni web

    Pregledajte četiri ugrađene širine i imena datoteka. Varijante šire od izvora su preskočene, stoga provjerite planirani izlazni broj.

  3. Izvezite skup slika

    Pregledajte sve rezultate. Više izlaza po izvoru zahtijeva Pro; besplatni sloj i dalje se može koristiti za testiranje tijeka rada jedne veličine.

  4. Dodajte slike na svoju stranicu

    Koristite deskriptore širine u srcset i postavite sizes da odgovara stvarnom izgledu. Uključite točnu širinu, visinu i alternativni tekst na element slike.

PRIMJER HTML · PRILAGODITE SE VAŠEM IZGLEDU
<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"
>

DATOTEKE IZ OVOG PREGLEDA

Što je ovaj primjer proizveo

Izvor širine 3072 px dovoljno je velik za sve četiri unaprijed postavljene širine. Svaka je datoteka zasebni WebP, generiran izravno iz tog izvora.

Kvaliteta
80
Profil boja
sRGB
Izlazi iz jednog izvora
4
Stvarne izvezene datoteke
FileFormatpikseliBajtovi
vase-1280w.webpWebP1280 × 85335.214
vase-1920w.webpWebP1920 × 128064.108
vase-320w.webpWebP320 × 2134.018
vase-640w.webpWebP640 × 42711.594
Jedan izvor, četiri korisne web širine: stvarni izvezeni rezultati
Stvarni rezultati izvoza za ogledne datoteke prikazane u ovom vodiču.

Mjereno na prikazanim oglednim datotekama. Vaši rezultati ovise o vašim izvornicima i postavkama. Fotografija keramičke vaze uzorak je generiran umjetnom inteligencijom. Snimke zaslona aplikacije i mjerenja izvezene datoteke su stvarne.

Nekoliko uobičajenih pitanja

Što se događa ako je moj izvor širok samo 1000 px?

Predložak preskače varijante 1280 i 1920 px. Samo referentne datoteke koje su stvarno generirane.

Generira li aplikacija HTML?

Ovaj tijek rada proizvodi slike. Dodajte srcset i sizes u kod vaše web stranice ili sustav sadržaja.

Pokrenite tijek rada.

Otvorite PixRinse, dodajte nekoliko slika i počnite s gornjim postavkama.

Preuzmi za MacBesplatno: do 10 slika po skupini i jedan izlaz po izvoru. Više izlaza ovog tijeka rada zahtijeva Pro. Usporedi besplatno & Pro.