Piltide Asendaja laseb sul klõpsata mis tahes pildil veebilehel ja asendada selle oma omaga — kas laadides üles kohaliku faili või kleepides pildi URL-i. Asendus mahub ideaalselt originaalelemendi mõõtmetesse, säilitades lehe paigutuse. Testi, kuidas uued varad näevad välja tootmise kontekstis, loo makette päris sisuga või tee ekraanipilte kohandatud kujutistega.
Disainerid ja arendajad peavad sageli nägema, kuidas uus pilt näeks välja olemasolevas paigutuses. Kas uus hero pilt töötab praeguse tekstikihistuse korral? Kas uus tootefoto näeb õige välja olemasolevas kaardiruudustikus? Kas kliendi logo on päise jaoks õige suurusega? Tavaliselt nõuab nendele küsimustele vastamine koodi muutmist, pildifailide vahetamist, ümberehitamist ja eelvaate vaatamist. Piltide Asendaja teeb selle koheseks — klõpsa pildil, mida tahad muuta, lae üles asendus või kleebi URL ja pilt asendub koheselt, säilitades originaalelemendi mõõtmed ja stiili. Paigutus ei muutu, naabrielemendid jäävad paigale ja näed täpselt, kuidas uus pilt päris lehekontekstis välja näeb. Kõik muudatused on mittepurustavad ja nullitakse lehe värskendamisel.
Hõljuta lehe piltide kohal, et neid esile tõsta. Klõpsa, et valida pilt, mida tahad asendada. Tööriist tunneb ära img elemente, CSS background-image elemente ja picture/source elemente.
Lohista ja pillu pildifail oma arvutist või klõpsa, et avada faili valija. Toetab PNG, JPG, WebP, SVG ja GIF vorminguid. Fail laetakse lokaalselt — kunagi ei laeta üles ühtegi serverisse.
Kas sul on pilt mujal majutatud? Kleebi URL ja see rakendub koheselt. Töötab mis tahes avalikult ligipääsetava pildi URL-iga — Unsplash, Imgur, sinu CDN, S3 ämbrid või mis tahes otsene pildilink.
Asenduspilt täidab originaalelemendi mõõtmed object-fit'i kasutades, nii et lehe paigutus jääb täpselt samaks. Pole paigutuse muutusi, pole reflow'd, pole katkenud ruudustikke. Uus pilt kohandub ruumiga.
Külgriba paneel jälgib kõiki pilte, mida oled praeguses sessioonis asendanud. Vaata originaali vs asendust ühe pilguga ja klõpsa mis tahes ajaloo kirjel, et tühistada see konkreetne asendus.
Kõik asendused eksisteerivad ainult brauseri mälus. Lehe tegelikke pildifaile ja HTML-i ei muudeta kunagi. Värskenda lehte, et koheselt taastada iga originaalpilt. Turvaline kasutada mis tahes veebilehel.
Sinu meeskonnal on kolm hero pildi kandidaati kodulehe jaoks. Selle asemel et iga ühte juurutada, ava tootmissait ja vaheta hero pilt iga kandidaadiga. Vaata, kuidas iga üks näeb välja päris tekstikihistuse, navigatsiooniriba ja ümbritseva sisuga.
Kliendikõne ajal asenda staging saidi kohatäitja pildid kliendi tegelike toodete fotodega või brändi varadega. Näita neile täpselt, kuidas nende sisu välja näeb lõplikus disainis — reaalajas, brauseris.
Vajad ekraanipilte, mis näitavad erinevat regionaalset sisu? Asenda toodete pildid, meeskonnafotod või funktsioonigraafika regiooni-spetsiifiliste versioonidega ja tee igaühe turu jaoks ekraanipilte — kõik ilma eraldi build'ide juurutamiseta.
Uurides, kuidas erinev illustratsiooni stiil või fotograafia lähenemine näeks olemasoleval lehel välja. Vaheta pilte ükshaaval, et ehitada üles uue disaini suuna visuaalne prototüüp ilma koodi puudutamata.
Asenda JPG WebP versiooniga, et visuaalselt veenduda, et kvaliteet on vastuvõetav. Või vaheta sisse kõrgema resolutsiooniga pilt, et kontrollida, kas paigutus käsitleb 2x pilte korralikult. Testi pildi vormingu muudatusi visuaalselt enne failide teisendamisele pühendumist.
Ava DevSuite Pro hõljuv dokk ja klõpsa Piltide Asendaja ikoonil. Tööriist aktiveerub ja pildid lehel muutuvad klikitavateks sihtmärkideks, esiletõstetud hõljutusel.
Klõpsa lehel mis tahes pildil. Ilmub asendamise dialoog, mis näitab praeguse pildi infot (failinimi, mõõtmed, suurus) ja võimalusi üleslaadimiseks või URL-i kleepimiseks.
Lohista ja pillu fail oma arvutist, klõpsa sirvimiseks või kleebi pildi URL. Asendus rakendatakse koheselt ja pilt asendub kohas.
Vaata, kuidas uus pilt näeb välja päris lehepaigutuses. Kontrolli, kas see töötab tekstikihistustega, mahub korralikult konteinerisse ja vastab ümbritsevale sisule.
Klõpsa teistel piltidel, et jätkata asendamist. Ajaloo külgriba jälgib kõiki muudatusi. Kui oled lõpetanud, värskenda lehte, et taastada kõik originaalpildid.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
