Kuvien vaihtotyökalun avulla voit napsauttaa mitä tahansa verkkosivun kuvaa ja korvata sen omallasi — joko lataamalla paikallisen tiedoston tai liittämällä kuvan URL-osoitteen. Korvaava kuva sovittuu täydellisesti alkuperäisen elementin mittoihin ja säilyttää sivun asettelun. Testaa miltä uudet resurssit näyttävät tuotantoympäristössä, luo mockupeja oikealla sisällöllä tai ota kuvakaappauksia mukautetulla kuvastolla.
Suunnittelijat ja kehittäjät tarvitsevat usein nähdä, miltä uusi kuva näyttäisi olemassa olevassa asettelussa. Toimiiko uusi hero-kuva nykyisen tekstipäällyksen kanssa? Näyttääkö uusi tuotekuva hyvältä olemassa olevassa korttinäkymässä? Onko asiakkaan logo oikean kokoinen ylätunnisteeseen? Normaalisti näihin kysymyksiin vastaaminen vaatii koodin muokkaamista, kuvatiedostojen vaihtamista, uudelleenrakentamista ja esikatselua. Kuvien vaihtotyökalu tekee siitä välitöntä — napsauta vaihdettavaa kuvaa, lataa korvaava tai liitä URL-osoite, ja kuva vaihtuu heti säilyttäen alkuperäisen elementin mitat ja tyylin. Asettelu ei siirry, vierekkäiset elementit pysyvät paikoillaan, ja näet täsmälleen miltä uusi kuva näyttää todellisessa sivukontekstissa. Kaikki muutokset ovat tuhoamattomia ja nollautuvat sivun päivityksellä.
Vie hiiri sivun kuvien päälle nähdäksesi ne korostettuina. Napsauta valitaksesi kuvan, jonka haluat korvata. Työkalu tunnistaa img-elementit, CSS background-image-elementit sekä picture/source-elementit.
Vedä ja pudota kuvatiedosto tietokoneeltasi tai napsauta avataksesi tiedostonvalitsimen. Tukee PNG-, JPG-, WebP-, SVG- ja GIF-muotoja. Tiedosto ladataan paikallisesti — sitä ei koskaan ladata palvelimelle.
Onko kuva tallennettu muualle? Liitä URL-osoite ja se otetaan käyttöön välittömästi. Toimii minkä tahansa julkisesti saatavilla olevan kuvan URL-osoitteen kanssa — Unsplash, Imgur, CDN-palvelusi, S3-ämpärit tai mikä tahansa suora kuvalinkki.
Korvaava kuva täyttää alkuperäisen elementin mitat käyttämällä object-fit-ominaisuutta, joten sivun asettelu pysyy täsmälleen samana. Ei asettelun siirtymisiä, ei uudelleenvirtausta, ei rikkinäisiä ruudukkoja. Uusi kuva mukautuu tilaan.
Sivupaneeli seuraa kaikkia kuvakorvauksia nykyisessä istunnossa. Näe alkuperäinen ja korvaava kuva yhdellä silmäyksellä, ja napsauta mitä tahansa historiakohtaa kumotaksesi juuri sen korvauksen.
Kaikki korvaukset ovat olemassa vain selaimen muistissa. Sivun todellisia kuvatiedostoja ja HTML-koodia ei koskaan muuteta. Päivitä sivu palauttaaksesi kaikki alkuperäiset kuvat välittömästi. Turvallinen käyttää millä tahansa verkkosivustolla.
Tiimillä on kolme ehdokaskuvaa etusivun hero-alueelle. Sen sijaan, että jokainen julkaistaisiin erikseen, avaa tuotantosivu ja vaihda hero-kuva jokaisen ehdokkaan kanssa. Katso miltä kukin näyttää oikean tekstipäällyksen, navigointipalkin ja ympäröivän sisällön kanssa.
Asiakaspuhelun aikana korvaa staging-sivuston paikkakuvat asiakkaan todellisilla tuotekuvilla tai brändiresursseilla. Näytä heille täsmälleen miltä heidän sisältönsä näyttää lopullisessa suunnittelussa — reaaliajassa selaimessa.
Tarvitsetko kuvakaappauksia, joissa näkyy eri alueiden sisältöä? Korvaa tuotekuvat, tiimikuvat tai ominaisuusgrafiikat aluekohtaisilla versioilla ja ota kuvakaappauksia kullekin markkina-alueelle — kaikki ilman erillisten julkaisujen käyttöönottoa.
Tutki miltä erilainen kuvitustyyli tai valokuvauslähestymistapa näyttäisi olemassa olevalla sivulla. Vaihda kuvia yksi kerrallaan rakentaaksesi visuaalisen prototyypin uudesta suunnittelusuunnasta koskematta lainkaan koodiin.
Korvaa JPG WebP-versiolla varmistaaksesi visuaalisesti, että laatu on hyväksyttävä. Tai vaihda korkeampiresoluutioinen kuva tarkistaaksesi, käsitteleekö asettelu 2x-kuvia oikein. Testaa kuvamuodon muutokset visuaalisesti ennen tiedostokonversioihin sitoutumista.
Avaa DevSuite Pro -kelluva telakka ja napsauta kuvien vaihtotyökalun kuvaketta. Työkalu aktivoituu ja sivun kuvista tulee napsautettavia kohteita, jotka korostuvat hiiren viedessä.
Napsauta mitä tahansa sivun kuvaa. Näkyviin ilmestyy vaihtoikkuna, joka näyttää nykyisen kuvan tiedot (tiedostonimi, mitat, koko) sekä vaihtoehdot lataamiselle tai URL-osoitteen liittämiselle.
Vedä ja pudota tiedosto tietokoneeltasi, napsauta selataksesi tai liitä kuvan URL-osoite. Vaihto otetaan käyttöön välittömästi ja kuva vaihtuu paikalleen.
Katso miltä uusi kuva näyttää todellisessa sivun asettelussa. Tarkista, että se toimii tekstipäällysten kanssa, mahtuu säiliöön oikein ja sopii ympäröivään sisältöön.
Napsauta muita kuvia jatkaaksesi vaihtamista. Historiasivupalkki seuraa kaikkia muutoksia. Kun olet valmis, päivitä sivu palauttaaksesi kaikki alkuperäiset kuvat.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
