A képernyőképeken az angol alkalmazás látható. Az előre beállított nevek és vezérlők az alkalmazás nyelvén is elérhetők.

A kiindulópontod

Használja a Reszponzív web értéket a PixRinse-ban, majd ellenőrizze ezeket a beállításokat a tényleges úti célhoz képest.

A munkafolyamat beállításai
Szélesség320 / 640 / 1280 / 1920 px
KimenetWebP, minőség 80
SzínsRGB
Kis forrásokA nagyobb változatok kimaradnak
PixRinse Reszponzív web előre beállított, több WebP kimeneti méretet mutat
A bemutatóhoz használt beállítások. Válassza ki a képernyőképet a teljes méretben történő ellenőrzéshez.

Hogyan kell csinálni

  1. Kezdje az eredeti tartalommal

    Használjon elég széles forrást a szükséges legnagyobb változathoz. Minden származék az eredetiből jön létre ahelyett, hogy többször átméretezné őket.

  2. Válassza a Reszponzív web

    Tekintse át a négy beépített szélességet és fájlnevet. A forrásnál szélesebb változatok kimaradnak, ezért ellenőrizze a tervezett kimeneti számot.

  3. Exportálja a képkészletet

    Tekintse át az összes kimenetet. Forrásonként több kimenethez Pro szükséges; az ingyenes réteg továbbra is használható egy méretű munkafolyamat tesztelésére.

  4. Adja hozzá a képeket az oldalához

    Használjon szélességleírókat a srcset-ban, és állítsa be a sizes értéket, hogy megfeleljen a tényleges elrendezésnek. Helyezzen el pontos szélességet, magasságot és alternatív szöveget a képelemen.

PÉLDA HTML · ALKALMAZHAT AZ ELHELYEZÉSÉHEZ
<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"
>

A FÁJLOK EBBŐL A BEVEZETÉSBŐL

Amit ez a példa produkált

A 3072 px szélességű forrás elég nagy mind a négy előre beállított szélességhez. Minden fájl egy különálló WebP, amelyet közvetlenül az adott forrásból generálnak.

Minőség
80
Színprofil
sRGB
Kimenetek egy forrásból
4
Tényleges exportált fájlok
FájlFormátumPixelekBájtok
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134018
vase-640w.webpWebP640 × 42711 594
Egy forrás, négy hasznos webszélesség: tényleges exportált eredmények
Az ebben a bemutatóban látható mintafájlok tényleges exportálási eredményei.

A bemutatott mintafájlokon mérve. Az eredmények az eredeti dokumentumoktól és a beállításoktól függenek. A kerámiavázas fénykép egy mesterséges intelligencia által generált minta. Az alkalmazás képernyőképei és az exportált fájlméretek valódiak.

Néhány gyakori kérdés

Mi történik, ha a forrásom csak 1000 px széles?

A sablon kihagyja a 1280 és a 1920 px változatot. Csak a ténylegesen létrehozott referenciafájlokat.

Az alkalmazás generál HTML?

Ez a munkafolyamat képeket készít. Adja hozzá a srcset és sizes kódot webhelye kódjához vagy tartalomrendszeréhez.

Működtesse a munkafolyamatot.

Nyissa meg a PixRinse webhelyet, adjon hozzá néhány képet, és kezdje a fenti beállításokkal.

Letöltés MacreIngyenes: kötegenként legfeljebb 10 kép és forrásonként egy kimenet. Ennek a munkafolyamatnak több kimenetéhez Pro szükséges. Hasonlítsa össze a Free & Pro-t.