Az Image Replacer lehetővé teszi, hogy rákattintson egy weboldal bármely képére, és felváltsa azt a sajátjával — akár helyi fájl feltöltésével, akár kép URL beillesztésével. A csere tökéletesen illeszkedik az eredeti elem méreteihez, megőrizve az oldal elrendezését. Tesztelje, hogyan néznek ki az új grafikák éles környezetben, készítsen látványterveket valós tartalommal, vagy készítsen képernyőképeket egyedi képanyaggal.
A tervezőknek és fejlesztőknek gyakran kell látniuk, hogyan nézne ki egy új kép egy meglévő elrendezésben. Működik az új hero-kép a jelenlegi szöveges felirattal? Jól mutat az új termékkép a meglévő kártyarácsban? Megfelelő méretű az ügyfél logója a fejléchez? Ezekre a kérdésekre hagyományosan csak kódszerkesztéssel, képfájlok cseréjével, újraépítéssel és előnézettel lehet választ kapni. Az Image Replacer ezt azonnal megoldja — kattintson a módosítani kívánt képre, töltsön fel egy helyettesítőt vagy illesszen be egy URL-t, és a kép azonnal kicserélődik, miközben az eredeti elem méreteit és stílusait megőrzi. Az elrendezés nem csúszik el, a szomszédos elemek a helyükön maradnak, és pontosan látja, hogyan néz ki az új kép a valódi oldalkörnyezetben. Minden módosítás roncsolásmentes, és az oldal frissítésével visszaállítható.
Vigye az egeret az oldal képei fölé, hogy kiemelve lássa azokat. Kattintson arra a képre, amelyet le szeretne cserélni. Az eszköz felismeri az img elemeket, a CSS background-image elemeket, valamint a picture/source elemeket.
Húzzon rá egy képfájlt a számítógépéről, vagy kattintson a fájlválasztó megnyitásához. Támogatott formátumok: PNG, JPG, WebP, SVG és GIF. A fájl helyileg töltődik be — sosem kerül semmilyen szerverre.
Máshol tárolt képet szeretne használni? Illessze be az URL-t, és azonnal alkalmazza a rendszer. Bármely nyilvánosan elérhető kép URL-jével működik — Unsplash, Imgur, saját CDN, S3 tárolók vagy bármely közvetlen képhivatkozás.
A csereként feltöltött kép az object-fit segítségével tölti ki az eredeti elem méreteit, így az oldal elrendezése pontosan ugyanolyan marad. Nem csúszik el semmi, nem folynak szét az elemek, nem törnek el a rácsok. Az új kép alkalmazkodik a rendelkezésre álló helyhez.
Az oldalsó panel nyomon követi az aktuális munkamenetben kicserélt összes képet. Egy pillantással összehasonlíthatja az eredetit és a helyettesítőt, és bármelyik előzménybejegyzésre kattintva visszavonhatja az adott cserét.
Minden csere kizárólag a böngésző memóriájában létezik. Az oldal tényleges képfájljai és HTML-je soha nem módosulnak. Frissítse az oldalt, és minden eredeti kép azonnal visszaáll. Biztonságosan használható bármely weboldalon.
A csapata három jelölt hero-képet vizsgál a főoldalhoz. Ahelyett, hogy mindegyiket élesítené, nyissa meg az éles oldalt, és cserélje le a hero-képet minden jelölttel. Látja, hogyan néz ki mindegyik a valódi szöveges felirattal, navigációs sávval és környező tartalommal.
Ügyféltárgyalás közben cserélje le a staging-oldalon lévő helykitöltő képeket az ügyfél tényleges termékeire vagy márkaelemeire. Mutassa meg nekik pontosan, hogyan fog kinézni tartalmuk a végső tervben — élőben, a böngészőben.
Különböző regionális tartalmakat ábrázoló képernyőképekre van szüksége? Cserélje le a termékes képeket, csapatfotókat vagy funkciós grafikákat régiófüggő verziókra, és készítsen képernyőképeket minden piachoz — különálló build-ek telepítése nélkül.
Felderítheti, hogyan nézne ki egy másik illusztrációs stílus vagy fotóhasználat egy meglévő oldalon. Cserélje le a képeket egyenként, hogy vizuális prototípust alkosson az új tervező irányból anélkül, hogy bármilyen kódhoz nyúlna.
Cserélje le a JPG-t egy WebP-verzióra, hogy vizuálisan ellenőrizze, elfogadható-e a minőség. Vagy töltse be a nagyobb felbontású képet, hogy megnézze, az elrendezés megfelelően kezeli-e a 2x képeket. Tesztelje vizuálisan a képformátum-változtatásokat, mielőtt elkötelezte magát a fájlkonverziók mellett.
Nyissa meg a DevSuite Pro lebegő dokkot, és kattintson az Image Replacer ikonra. Az eszköz aktiválódik, és az oldalon lévő képek kattintható célponttá válnak — egérrel fölé húzva kiemelve jelennek meg.
Kattintson az oldal bármely képére. Megjelenik egy cserefelület, amely az aktuális képről tartalmaz információkat (fájlnév, méretek, méret), valamint lehetőséget ad fájl feltöltésére vagy URL beillesztésére.
Húzzon rá egy fájlt a számítógépéről, kattintson a tallózáshoz, vagy illesszen be egy kép URL-t. A csere azonnal megtörténik, és a kép helyben kicserélődik.
Nézze meg, hogyan néz ki az új kép a tényleges oldal-elrendezésben. Ellenőrizze, hogy jól működik-e a szöveges feliratokkal, megfelelően illeszkedik-e a tárolóba, és illik-e a környező tartalomhoz.
Kattintson más képekre a cseréhez. Az előzmények oldalsáv nyomon követi az összes módosítást. Ha végzett, frissítse az oldalt az összes eredeti kép visszaállításához.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
