Image Replacer vam omogućuje da kliknete bilo koju sliku na web stranici i zamijenite je svojom — bilo učitavanjem lokalne datoteke ili lijepljenjem URL-a slike. Zamjena se savršeno uklapa u dimenzije originalnog elementa, čuvajući raspored stranice. Testirajte kako novi resursi izgledaju u produkcijskom kontekstu, stvarajte mockupe sa stvarnim sadržajem ili snimajte zaslone s prilagođenim slikama.
Dizajneri i programeri često trebaju vidjeti kako bi nova slika izgledala u postojećem rasporedu. Hoće li nova hero slika funkcionirati s trenutnim tekstualnim preklopom? Izgleda li nova fotografija proizvoda dobro u postojećoj mreži kartica? Je li klijentov logotip prave veličine za zaglavlje? Normalno, odgovaranje na ta pitanja zahtijeva uređivanje kôda, zamjenu datoteka slika, ponovno izgradnju i pregled. Image Replacer to čini trenutnim — kliknite sliku koju želite promijeniti, učitajte zamjenu ili zalijepite URL, i slika se odmah zamjenjuje uz zadržavanje originalnih dimenzija i stila elementa. Raspored se ne pomiče, susjedni elementi ostaju na mjestu, i vidite točno kako nova slika izgleda u stvarnom kontekstu stranice. Sve promjene su nedestruktivne i resetiraju se osvježavanjem stranice.
Prijeđite mišem preko slika na stranici kako biste ih vidjeli istaknute. Kliknite za odabir slike koju želite zamijeniti. Alat prepoznaje img elemente, CSS background-image elemente i picture/source elemente.
Povucite i ispustite datoteku slike s računala ili kliknite za otvaranje birača datoteka. Podržava PNG, JPG, WebP, SVG i GIF formate. Datoteka se učitava lokalno — nikada se ne prenosi na nijedan poslužitelj.
Imate sliku negdje drugdje? Zalijepite URL i odmah se primjenjuje. Radi s bilo kojim javno dostupnim URL-om slike — Unsplash, Imgur, vaš CDN, S3 bucketi ili bilo koja izravna veza na sliku.
Zamjenska slika ispunjava dimenzije originalnog elementa koristeći object-fit, tako da raspored stranice ostaje potpuno isti. Nema pomicanja rasporeda, nema prelamanja, nema pokvarenih mreža. Nova slika se prilagođava prostoru.
Bočna ploča prati sve slike koje ste zamijenili u trenutnoj sesiji. Odmah vidite original nasuprot zamjeni, a klikom na bilo koji unos u povijesti poništavate tu specifičnu zamjenu.
Sve zamjene postoje samo u memoriji preglednika. Stvarne datoteke slika i HTML stranice nikada se ne mijenjaju. Osvježite stranicu kako biste odmah vratili sve originalne slike. Sigurno za korištenje na bilo kojoj web stranici.
Vaš tim ima tri kandidatske hero slike za početnu stranicu. Umjesto postavljanja svake, otvorite produkcijsku stranicu i zamijenite hero sliku svakim kandidatom. Pogledajte kako svaka izgleda sa stvarnim tekstualnim preklopom, navigacijskom trakom i okolnim sadržajem.
Tijekom poziva s klijentom, zamijenite slike rezerviranog mjesta na staging stranici klijentovim stvarnim fotografijama proizvoda ili brandiranim resursima. Pokažite im točno kako će njihov sadržaj izgledati u konačnom dizajnu — uživo, u pregledniku.
Trebate snimke zaslona koje prikazuju različit regionalni sadržaj? Zamijenite slike proizvoda, fotografije tima ili grafike značajki verzijama specifičnim za regiju i snimite zaslone za svako tržište — sve bez postavljanja zasebnih buildova.
Istražujete kako bi drugačiji stil ilustracije ili fotografski pristup izgledao na postojećoj stranici. Zamjenjujte slike jednu po jednu kako biste izgradili vizualni prototip novog smjera dizajna bez dodirivanja ikakvog kôda.
Zamijenite JPG s WebP verzijom kako biste vizualno provjerili je li kvaliteta prihvatljiva. Ili ubacite sliku više rezolucije kako biste provjerili upravlja li raspored ispravno sa slikama 2x. Vizualno testirajte promjene formata slika prije nego što se posvetite konverzijama datoteka.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Image Replacer. Alat se aktivira i slike na stranici postaju klikabilne mete, istaknute pri prelasku mišem.
Kliknite bilo koju sliku na stranici. Pojavljuje se dijaloški okvir za zamjenu koji prikazuje informacije o trenutnoj slici (naziv datoteke, dimenzije, veličina) i opcije za učitavanje ili lijepljenje URL-a.
Povucite i ispustite datoteku s računala, kliknite za pretraživanje ili zalijepite URL slike. Zamjena se primjenjuje odmah i slika se mijenja na licu mjesta.
Pogledajte kako nova slika izgleda unutar stvarnog rasporeda stranice. Provjerite radi li s tekstualnim preklopima, odgovara li kontejneru i odgovara li okolnom sadržaju.
Kliknite druge slike kako biste nastavili zamjenu. Bočna ploča s poviješću prati sve promjene. Kada završite, osvježite stranicu kako biste vratili sve originalne slike.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
