Resim Değiştirici, bir web sayfasındaki herhangi bir resme tıklayıp onu kendi resminizle değiştirmenize olanak tanır — yerel bir dosya yükleyerek veya bir resim URL'si yapıştırarak. Değiştirme orijinal öğenin boyutlarına mükemmel şekilde sığar ve sayfa düzenini korur. Yeni varlıkların üretim bağlamlarında nasıl göründüğünü test edin, gerçek içerikle maketler oluşturun veya özel görüntülerle ekran görüntüleri alın.
Tasarımcılar ve geliştiriciler genellikle yeni bir resmin mevcut bir düzende nasıl görüneceğini görmek isterler. Yeni kahraman resmi mevcut metin kaplaması ile çalışacak mı? Yeni ürün fotoğrafı mevcut kart ızgarasında doğru görünüyor mu? Müşterinin logosu başlık için doğru boyutta mı? Normalde bu soruları yanıtlamak kodu düzenlemek, resim dosyalarını değiştirmek, yeniden oluşturmak ve önizlemek gerektirir. Resim Değiştirici bunu anında yapar — değiştirmek istediğiniz resme tıklayın, bir yedek yükleyin veya bir URL yapıştırın, orijinal öğenin boyutlarını ve biçimlendirmesini korurken resim hemen değişir. Düzen kaymaz, komşu öğeler yerinde kalır ve yeni resmin gerçek sayfa bağlamında tam olarak nasıl göründüğünü görürsünüz. Tüm değişiklikler tahribatsızdır ve sayfa yenilendiğinde sıfırlanır.
Sayfadaki resimlerin üzerine gelerek onları vurgulanmış görün. Değiştirmek istediğiniz resmi seçmek için tıklayın. Araç img öğelerini, CSS background-image öğelerini ve picture/source öğelerini tanır.
Bilgisayarınızdan bir resim dosyasını sürükleyip bırakın veya bir dosya seçici açmak için tıklayın. PNG, JPG, WebP, SVG ve GIF formatlarını destekler. Dosya yerel olarak yüklenir — herhangi bir sunucuya asla yüklenmez.
Başka bir yerde barındırılan bir resminiz mi var? URL'yi yapıştırın ve anında uygulansın. Herkesin erişebildiği herhangi bir resim URL'si ile çalışır — Unsplash, Imgur, CDN'niz, S3 kovaları veya herhangi bir doğrudan resim bağlantısı.
Değiştirme resmi, object-fit kullanarak orijinal öğenin boyutlarını doldurur, böylece sayfa düzeni tam olarak aynı kalır. Düzen kaymaları yok, yeniden akış yok, bozuk ızgaralar yok. Yeni resim alana uyum sağlar.
Bir kenar çubuğu paneli mevcut oturumda değiştirdiğiniz tüm resimleri izler. Orijinali ve değiştirmeyi bir bakışta görün ve o belirli değiştirmeyi geri almak için herhangi bir geçmiş girişine tıklayın.
Tüm değiştirmeler yalnızca tarayıcı belleğinde bulunur. Sayfanın gerçek resim dosyaları ve HTML asla değiştirilmez. Her orijinal resmi anında geri yüklemek için sayfayı yenileyin. Herhangi bir web sitesinde kullanmak güvenlidir.
Ekibinizin ana sayfa için üç aday kahraman resmi var. Her birini dağıtmak yerine, üretim sitesini açın ve kahraman resmini her adayla değiştirin. Her birinin gerçek metin kaplaması, navigasyon çubuğu ve çevreleyen içerikle nasıl göründüğünü görün.
Bir müşteri görüşmesi sırasında, bir hazırlık sitesindeki yer tutucu resimleri müşterinin gerçek ürün fotoğrafları veya marka varlıkları ile değiştirin. İçeriklerinin son tasarımda tam olarak nasıl görüneceğini onlara gösterin — canlı, tarayıcıda.
Farklı bölgesel içerik gösteren ekran görüntülerine mi ihtiyacınız var? Ürün resimlerini, ekip fotoğraflarını veya özellik grafiklerini bölgeye özgü sürümlerle değiştirin ve her pazar için ekran görüntüleri yakalayın — hepsi ayrı yapılar dağıtmadan.
Farklı bir illüstrasyon stili veya fotoğraf yaklaşımının mevcut bir sayfada nasıl görüneceğini keşfetme. Herhangi bir koda dokunmadan yeni tasarım yönünün görsel prototipini oluşturmak için resimleri tek tek değiştirin.
Kalitenin kabul edilebilir olduğunu görsel olarak doğrulamak için bir JPG'yi bir WebP sürümüyle değiştirin. Veya düzenin 2x resimleri düzgün işleyip işlemediğini kontrol etmek için daha yüksek çözünürlüklü bir resimle değiştirin. Dosya dönüşümlerine taahhüt etmeden önce resim formatı değişikliklerini görsel olarak test edin.
DevSuite Pro yüzen yuvasını açın ve Resim Değiştirici simgesine tıklayın. Araç etkinleşir ve sayfadaki resimler üzerine gelindiğinde vurgulanan tıklanabilir hedefler haline gelir.
Sayfadaki herhangi bir resme tıklayın. Geçerli resim bilgisini (dosya adı, boyutlar, boyut) ve yükleme veya URL yapıştırma seçeneklerini gösteren bir değiştirme iletişim kutusu görünür.
Bilgisayarınızdan bir dosyayı sürükleyip bırakın, göz atmak için tıklayın veya bir resim URL'si yapıştırın. Değiştirme anında uygulanır ve resim yerinde değişir.
Yeni resmin gerçek sayfa düzeni içinde nasıl göründüğünü görün. Metin kaplamaları ile çalışıp çalışmadığını, kapsayıcıya düzgün sığıp sığmadığını ve çevreleyen içerikle eşleşip eşleşmediğini kontrol edin.
Değiştirmeye devam etmek için diğer resimlere tıklayın. Geçmiş kenar çubuğu tüm değişiklikleri izler. Bittiğinde, tüm orijinal resimleri geri yüklemek için sayfayı yenileyin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
