Snímky obrazovky zobrazujú aplikáciu v angličtine. Názvy predvolieb a ovládacie prvky sú k dispozícii aj v jazyku vašej aplikácie.

Váš východiskový bod

Použite Responzívny web v PixRinse a potom skontrolujte tieto nastavenia v porovnaní so svojím skutočným cieľom.

Nastavenia tohto pracovného postupu
šírky320 / 640 / 1280 / 1920 px
VýstupWebP, kvalita 80
FarbasRGB
Malé zdrojeVäčšie varianty sa preskočia
PixRinse Responzívny web predvoľba zobrazujúca viacero výstupných veľkostí WebP
Nastavenia použité pre tento návod. Vyberte snímku obrazovky a skontrolujte ju v plnej veľkosti.

Ako na to

  1. Začnite s pôvodným aktívom

    Použite dostatočne široký prameň pre najväčší variant, aký potrebujete. Každý derivát sa generuje z originálu namiesto toho, aby sa jeho veľkosť opakovane menila.

  2. Vyberte Responzívny web

    Skontrolujte štyri vstavané šírky a názvy súborov. Varianty širšie ako zdroj sa preskočia, preto skontrolujte plánovaný počet výstupov.

  3. Exportujte sadu obrázkov

    Skontrolujte všetky výstupy. Viac výstupov na zdroj vyžaduje Pro; bezplatnú vrstvu možno stále použiť na testovanie pracovného postupu jednej veľkosti.

  4. Pridajte obrázky na svoju stránku

    Použite deskriptory šírky v srcset a nastavte sizes tak, aby zodpovedali skutočnému rozloženiu. Zahrňte do prvku obrázka presnú šírku, výšku a alternatívny text.

PRÍKLAD HTML · PRISPÔSOBTE SA SVOJMU ROZLOŽENIE
<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"
>

SÚBORY Z TEJTO PREchádzky

Čo priniesol tento príklad

Zdroj 3072 px-wide je dostatočne veľký pre všetky štyri prednastavené šírky. Každý súbor je samostatný WebP, vygenerovaný priamo z tohto zdroja.

Kvalita
80
Farebný profil
sRGB
Výstupy z jedného zdroja
4
Aktuálne exportované súbory
SúborFormátovaťpixelovbajtov
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134 018
vase-640w.webpWebP640 × 42711 594
Jeden zdroj, štyri užitočné šírky webu: aktuálne exportované výsledky
Aktuálne výsledky exportu pre vzorové súbory zobrazené v tomto návode.

Merané na zobrazených vzorových súboroch. Vaše výsledky závisia od vašich originálov a nastavení. Fotografia keramickej vázy je vzorka vygenerovaná AI. Snímky obrazovky aplikácie a exportované merania súborov sú skutočné.

Pár bežných otázok

Čo sa stane, ak je môj zdroj široký iba 1000 px?

Šablóna preskočí varianty 1280 a 1920 px. Iba referenčné súbory, ktoré boli skutočne vygenerované.

Generuje aplikácia HTML?

Tento pracovný postup vytvára obrázky. Pridajte srcset a sizes do kódu svojej webovej lokality alebo do systému obsahu.

Uveďte pracovný postup do praxe.

Otvorte PixRinse, pridajte niekoľko obrázkov a začnite s nastaveniami vyššie.

Stiahnuť pre MacZadarmo: až 10 obrázkov na dávku a jeden výstup na zdroj. Viaceré výstupy tohto pracovného postupu vyžadujú Pro. Porovnať zadarmo a Pro.