Snímky obrazovky ukazují aplikaci v angličtině. Názvy předvoleb a ovládací prvky jsou k dispozici také v jazyce vaší aplikace.

Váš výchozí bod

Použijte Responzivní web v PixRinse a poté zkontrolujte tato nastavení podle svého skutečného cíle.

Nastavení tohoto pracovního postupu
Šířky320 / 640 / 1280 / 1920 px
VýstupWebP, kvalita 80
BarvasRGB
Malé zdrojeVětší varianty jsou přeskočeny
PixRinse Responzivní web předvolba zobrazující více výstupních velikostí WebP
Nastavení použitá pro tento návod. Vyberte snímek obrazovky a prohlédněte si jej v plné velikosti.

Jak na to

  1. Začněte s původním aktivem

    Použijte dostatečně široký zdroj pro největší variantu, kterou potřebujete. Každá derivace je generována z originálu místo toho, aby byla opakovaně měněna.

  2. Vyberte Responzivní web

    Zkontrolujte čtyři vestavěné šířky a názvy souborů. Varianty širší než zdroj jsou přeskočeny, proto zkontrolujte plánovaný počet výstupů.

  3. Exportujte sadu obrázků

    Zkontrolujte všechny výstupy. Více výstupů na zdroj vyžaduje Pro; bezplatnou vrstvu lze stále používat k testování pracovního postupu jedné velikosti.

  4. Přidejte obrázky na svou stránku

    Použijte deskriptory šířky v srcset a nastavte sizes tak, aby odpovídaly skutečnému rozvržení. Zahrňte do prvku obrázku přesnou šířku, výšku a alternativní text.

PŘÍKLAD HTML · PŘIZPŮSOBTE SE SVÉMU ROZLOŽENÍ
<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"
>

SOUBORY Z TÉTO PROCHÁZKY

Co tento příklad vyprodukoval

Zdroj 3072 px-wide je dostatečně velký pro všechny čtyři přednastavené šířky. Každý soubor je samostatný WebP, vygenerovaný přímo z tohoto zdroje.

Kvalitní
80
Barevný profil
sRGB
Výstupy z jednoho zdroje
4
Skutečné exportované soubory
SouborFormátPixelyBajtů
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134 018
vase-640w.webpWebP640 × 42711 594
Jeden zdroj, čtyři užitečné šířky webu: skutečné exportované výsledky
Aktuální výsledky exportu pro ukázkové soubory uvedené v tomto návodu.

Měřeno na ukázkových souborech. Vaše výsledky závisí na vašich předlohách a nastaveních. Fotografie z keramické vázy je vzorek vytvořený AI. Snímky obrazovky aplikace a exportovaná měření souborů jsou skutečné.

Pár běžných otázek

Co se stane, když je můj zdroj široký pouze 1000 px?

Šablona přeskočí varianty 1280 a 1920 px. Pouze referenční soubory, které byly skutečně vygenerovány.

Generuje aplikace HTML?

Tento pracovní postup vytváří obrázky. Přidejte srcset a sizes do kódu svého webu nebo do systému obsahu.

Uveďte pracovní postup do práce.

Otevřete PixRinse, přidejte pár obrázků a začněte s nastavením výše.

Stáhnout pro MacZdarma: až 10 obrázků na dávku a jeden výstup na zdroj. Více výstupů tohoto pracovního postupu vyžaduje Pro. Porovnejte zdarma a Pro.