Image Replacer ви позволява да кликнете върху всяко изображение на уебстраница и да го замените със свое собствено — или чрез качване на локален файл, или чрез поставяне на URL адрес на изображение. Замяната се вписва перфектно в размерите на оригиналния елемент, запазвайки оформлението на страницата. Тествайте как изглеждат новите активи в реална среда (production), създавайте макети с реално съдържание или правете екранни снимки с персонализирани изображения.
Дизайнерите и разработчиците често трябва да видят как ново изображение би изглеждало в съществуващо оформление (layout). Дали новото главно изображение (hero image) ще работи с текущия текстово покритие (overlay)? Изглежда ли новото фото на продукта добре в съществуващата мрежа от карти? Дали логото на клиента е с правилния размер за хедъра? Обикновено отговорът на тези въпроси изисква редактиране на код, смяна на файлове с изображения, повторно изграждане и предварителен преглед. Image Replacer прави това мигновено — кликнете върху изображението, което искате да промените, качете замяна или поставете URL адрес и изображението се сменя веднага, като запазва оригиналните размери и стил на елемента. Оформлението не се измества, съседните елементи остават на мястото си и виждате точно как новото изображение изглежда в реалния контекст на страницата. Всички промени са неразрушителни и се нулират при опресняване на страницата.
Задръжте курсора на мишката върху изображенията на страницата, за да ги видите подчертани. Кликнете, за да изберете изображението, което искате да замените. Инструментът разпознава елементите img, CSS елементите background-image и елементите picture/source.
Плъзнете и пуснете файл с изображение от вашия компютър или щракнете, за да отворите селектор за файлове. Поддържа формати PNG, JPG, WebP, SVG и GIF. Файлът се зарежда локално — никога не се качва на сървър.
Имате изображение, хоствано другаде? Поставете URL адреса и той се прилага мигновено. Работи с всеки публично достъпен URL адрес на изображение — Unsplash, Imgur, вашия CDN, S3 бакети или всяка директна връзка към изображение.
Заменящото изображение запълва размерите на оригиналния елемент, използвайки „object-fit“, така че оформлението на страницата остава точно същото. Без измествания на оформлението (layout shifts), без промяна в потока, без счупени мрежи (grids). Новото изображение се адаптира към пространството.
Панел на страничната лента проследява всички изображения, които сте заменили в текущата сесия. Вижте оригиналното срещу замененото с един поглед и щракнете върху който и да е запис в историята, за да отмените конкретната замяна.
Всички замени съществуват само в паметта на браузъра. Действителните файлове с изображения и HTML на страницата никога не се променят. Опреснете страницата, за да възстановите незабавно всяко оригинално изображение. Безопасно за използване на всеки уебсайт.
Вашият екип разполага с три кандидат-изображения за началната страница. Вместо да внедрявате всяко едно, отворете производствения сайт и сменете главното изображение с всеки кандидат. Вижте как изглежда всяко с реалния текст, лентата за навигация и околното съдържание.
По време на клиентско обаждане заменете заместващите изображения (placeholder) на междинен сайт (staging) с действителните снимки на продукти или бранд активи на клиента. Покажете им точно как ще изглежда съдържанието им в крайния дизайн — на живо, в браузъра.
Нуждаете се от екранни снимки, показващи различно регионално съдържание? Заменете изображенията на продуктите, снимките на екипа или графиките на функциите с регионални версии и направете екранни снимки за всеки пазар — всичко това без внедряване на отделни версии.
Проучване как различен стил на илюстрация или фотографски подход би изглеждал на съществуваща страница. Заменяйте изображенията едно по едно, за да изградите визуален прототип на новата посока на дизайна, без да докосвате код.
Заменете JPG с WebP версия, за да проверите визуално дали качеството е приемливо. Или сменете с изображение с по-висока разделителна способност, за да проверите дали оформлението се справя правилно с 2x изображения. Тествайте визуално промените във формата на изображението, преди да се ангажирате с преобразуване на файлове.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Image Replacer. Инструментът се активира и изображенията на страницата стават цели за кликване, подчертани при задържане на мишката.
Кликнете върху всяко изображение на страницата. Появява се диалогов прозорец за замяна, показващ текущата информация за изображението (име на файла, размери, големина) и опции за качване или поставяне на URL адрес.
Плъзнете и пуснете файл от вашия компютър, щракнете за преглед или поставете URL адрес на изображение. Замяната се прилага мигновено и изображението се сменя на място.
Вижте как новото изображение изглежда в действителното оформление на страницата. Уверете се, че работи с текстовите слоеве, вписва се правилно в контейнера и съответства на околното съдържание.
Кликнете върху други изображения, за да продължите със замените. Страничната лента за история проследява всички промени. Когато приключите, опреснете страницата, за да възстановите всички оригинални изображения.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
