Kuvakaappaukset näyttävät englanninkielisen sovelluksen. Esiasetetut nimet ja säätimet ovat myös saatavilla sovelluksesi kielellä.

Lähtökohtasi

Käytä Responsiivinen verkko kohteessa PixRinse ja vertaa sitten näitä asetuksia todelliseen määränpäähäsi.

Tämän työnkulun asetukset
Leveydet320 / 640 / 1280 / 1920 px
LähtöWebP, laatu 80
VärisRGB
Pienet lähteetSuuremmat versiot ohitetaan
PixRinse Responsiivinen verkko esiasetus, joka näyttää useita WebP tulostuskokoja
Tässä esittelyssä käytetyt asetukset. Valitse kuvakaappaus tarkistaaksesi sen täysikokoisena.

Miten se tehdään

  1. Aloita alkuperäisestä sisällöstä

    Käytä riittävän leveää lähdettä suurimmalle tarvitsemasi versiolle. Jokainen johdannainen luodaan alkuperäisestä sen sijaan, että sen kokoa muutetaan toistuvasti.

  2. Valitse Responsiivinen verkko

    Tarkista neljä sisäänrakennettua leveyttä ja tiedostonimeä. Lähdettä leveämmät vaihtoehdot ohitetaan, joten tarkista suunniteltu tulosten määrä.

  3. Vie kuvasarja

    Tarkista kaikki lähdöt. Useat lähdöt lähdettä kohti vaativat Pron; ilmaista tasoa voidaan edelleen käyttää yhden koon työnkulun testaamiseen.

  4. Lisää kuvat sivullesi

    Käytä leveyskuvauksia kohdassa srcset ja aseta sizes vastaamaan todellista asettelua. Sisällytä kuvaelementtiin tarkka leveys, korkeus ja vaihtoehtoinen teksti.

ESIMERKKI HTML · MUKAUTUMINEN ASETTELUKSI
<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"
>

TIEDOSTOT TÄMÄN KÄYTTÄJÄNÄ

Mitä tämä esimerkki tuotti

3072 px-leveä lähde on tarpeeksi suuri kaikille neljälle esiasetetulle leveydelle. Jokainen tiedosto on erillinen WebP, joka on luotu suoraan kyseisestä lähteestä.

Laatu
80
Väriprofiili
sRGB
Lähdöt yhdestä lähteestä
4
Todelliset viedyt tiedostot
TiedostoMuotoPikselittavua
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134 018
vase-640w.webpWebP640 × 42711 594
Yksi lähde, neljä hyödyllistä verkon leveyttä: todelliset vietyt tulokset
Todelliset vientitulokset tässä esittelyssä näytetyille näytetiedostoille.

Mitattu näytetyillä näytetiedostoilla. Tulokset riippuvat alkuperäisistä asiakirjoista ja asetuksista. Keraaminen maljakkovalokuva on tekoälyn luoma näyte. Sovelluksen kuvakaappaukset ja vietyjen tiedostojen mitat ovat todellisia.

Pari yleistä kysymystä

Mitä tapahtuu, jos lähteeni on vain 1000 px leveä?

Malli ohittaa versiot 1280 ja 1920 px. Vain todella luodut viitetiedostot.

Luoko sovellus HTML?

Tämä työnkulku tuottaa kuvia. Lisää srcset ja sizes verkkosivustosi koodiin tai sisältöjärjestelmääsi.

Ota työnkulku käyttöön.

Avaa PixRinse, lisää muutama kuva ja aloita yllä olevilla asetuksilla.

Lataa MacilleIlmainen: jopa 10 kuvaa erää kohden ja yksi tulos lähdettä kohti. Tämän työnkulun useat lähdöt vaativat Pron. Vertaa Free & Pro.