Nahrazení obrázků vám umožní kliknout na libovolný obrázek na webové stránce a nahradit ho vlastním — buď nahráním místního souboru nebo vložením adresy URL obrázku. Náhrada dokonale zapadá do původních rozměrů elementu a zachovává rozvržení stránky. Testujte, jak nová aktiva vypadají v produkčním kontextu, vytvářejte makety s reálným obsahem nebo pořizujte snímky s vlastní grafikou.
Designéři a vývojáři potřebují často vidět, jak by nový obrázek vypadal ve stávajícím rozvržení. Bude nový heroický obrázek fungovat se stávajícím textovým překryvem? Vypadá nová produktová fotografie správně v existující mřížce karet? Je logo klienta správné velikosti pro záhlaví? Normálně zodpovězení těchto otázek vyžaduje úpravu kódu, výměnu obrazových souborů, znovusestavení a náhled. Nahrazení obrázků to umožňuje okamžitě — klikněte na obrázek, který chcete změnit, nahrajte náhradu nebo vložte URL a obrázek se ihned zamění při zachování původních rozměrů a stylování elementu. Rozvržení se neposune, sousední elementy zůstanou na místě a uvidíte přesně, jak nový obrázek vypadá ve skutečném kontextu stránky. Všechny změny jsou nedestruktivní a při obnovení stránky se resetují.
Najeďte myší na obrázky na stránce a uvidíte je zvýrazněné. Kliknutím vyberte obrázek, který chcete nahradit. Nástroj rozpoznává elementy img, elementy CSS background-image a elementy picture/source.
Přetáhněte obrazový soubor z počítače nebo kliknutím otevřete výběr souborů. Podporuje formáty PNG, JPG, WebP, SVG a GIF. Soubor se načte místně — nikdy se nenahraje na žádný server.
Máte obrázek umístěný jinde? Vložte adresu URL a okamžitě se použije. Funguje s jakoukoli veřejně přístupnou adresou URL obrázku — Unsplash, Imgur, vaší CDN, S3 buckety nebo jakýmkoli přímým odkazem na obrázek.
Náhradní obrázek vyplní původní rozměry elementu pomocí object-fit, takže rozvržení stránky zůstane přesně stejné. Žádné posuny rozvržení, žádné přeformátování, žádné rozbité mřížky. Nový obrázek se přizpůsobí prostoru.
Panel postranního panelu sleduje všechny obrázky, které jste v aktuální relaci nahradili. Pohlédněte na originál a náhradu na první pohled a kliknutím na libovolnou položku historie vraťte zpět toto konkrétní nahrazení.
Všechna nahrazení existují pouze v paměti prohlížeče. Skutečné obrazové soubory a HTML stránky nejsou nikdy změněny. Obnovením stránky okamžitě obnovíte každý původní obrázek. Bezpečné použití na libovolné webové stránce.
Váš tým má tři kandidáty na heroický obrázek pro domovskou stránku. Místo nasazení každého z nich otevřete produkční stránku a zaměňte heroický obrázek za každého kandidáta. Podívejte se, jak každý vypadá se skutečným textovým překryvem, navigační lištou a okolním obsahem.
Během hovoru s klientem nahraďte zástupné obrázky na stagingové stránce skutečnými produktovými fotografiemi nebo brandovými aktivy klienta. Ukažte jim přesně, jak jejich obsah bude vypadat ve finálním designu — živě, v prohlížeči.
Potřebujete snímky obrazovky zobrazující různý regionální obsah? Nahraďte produktové obrázky, fotografie týmu nebo grafiku funkcí verzemi specifickými pro daný region a pořiďte snímky pro každý trh — vše bez nasazení samostatných sestavení.
Zkoumáte, jak by jiný styl ilustrace nebo fotografický přístup vypadal na existující stránce? Zaměňujte obrázky jeden po druhém a sestavujte vizuální prototyp nového designového směru bez dotyku jakéhokoli kódu.
Nahraďte JPG verzí WebP pro vizuální ověření, že kvalita je přijatelná. Nebo vložte obrázek s vyšším rozlišením a zkontrolujte, zda rozvržení správně zpracovává obrázky 2×. Testujte vizuálně změny formátu obrázků před provedením konverzí souborů.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Nahrazení obrázků. Nástroj se aktivuje a obrázky na stránce se stanou klikatelnými cíli, zvýrazněnými při najetí myší.
Klikněte na libovolný obrázek na stránce. Zobrazí se dialog nahrazení s informacemi o aktuálním obrázku (název souboru, rozměry, velikost) a možnostmi nahrání nebo vložení adresy URL.
Přetáhněte soubor z počítače, klikněte pro procházení nebo vložte adresu URL obrázku. Náhrada se okamžitě použije a obrázek se zamění na místě.
Podívejte se, jak nový obrázek vypadá ve skutečném rozvržení stránky. Zkontrolujte, zda funguje s textovými překryvy, správně se vejde do kontejneru a odpovídá okolnímu obsahu.
Klikněte na další obrázky a pokračujte v nahrazování. Postranní panel historie sleduje všechny změny. Po dokončení obnovte stránku a obnovte všechny původní obrázky.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
