REHBER

Görüntüden HTML'ye — yapıştırabileceğiniz, e-postayla gönderebileceğiniz veya statik barındırmaya bırakabileceğiniz tek dosya

Bazen pikseller zaten elinizdedir — ekran görüntüsü, logo, diyagram — ve sıradaki ihtiyaç, varlık URL'si kurmadan bir ekip arkadaşına verebileceğiniz veya depoya atabileceğiniz işaretlemedir. Burada «görüntüden HTML'ye» derken, bu pikselleri küçük bir HTML belgesinin içine data URL olarak gömmek ve olağan bakımı yapmak kastedilir: alt metin, isteğe bağlı bağlantı, düzen ipuçları. Bu, dev galeriler için CDN yerine geçmez; tek görsel tüm mesaj olduğunda JPG'den HTML'e veya PNG'den HTML'e tarzı pratik bir teslimdir.

Gömülü data URL dışa aktarımı için görüntü önizlemesi ve HTML çıktı paneli

Hata ekran görüntüleri, kahraman PNG'ler ve tek seferlik diyagramlar — ek tüm hikâyeyi anlattığında

Modern yığınlar ayrı varlıkları sever; oysa e-posta şablonları, LMS parçacıkları, iç wiki'ler ve hata raporlarında gerçek iş, tek başına bir dosyanın klasör dolusu yüklemeye göre denetlenmesinin daha kolay olduğu yerde olur. Yalnızca dev bir Base64 dizesi döken bir JPG'den HTML'e dönüşüm teknik olarak doğrudur ve yine de ince ayarı can sıkıcıdır. Görünür bir döngüye eğiliyoruz: genişlik, döndürme, sıkıştırma veya parlaklık ve kontrastı değiştirin, önizlemeyi izleyin, ardından sağdaki HTML'e bakarak neyin gideceğini doğrulayın.

Burada bir görüntüyü HTML'e dönüştürdüğünüzde tarayıcı dosyayı yerel okur, gerektiğinde ayarları tuval üzerine çizer ve başka yere yapıştıracağınız src'yi yeniden yazar. Böylece kimlik bilgileri rastgele bir sunucuya gitmez ve yineleme ucuzdur — her küçük dokunuştan sonra yeniden yüklemezsiniz. Çıktı ağır geliyorsa kopyalamadan önce gömülü genişliği sınırlayın veya WebP veya JPEG'e geçin; yalnızca ham src gerekiyorsa anahtarı çevirin ve yalnızca data URL satırını alın.

Dönüştürücüye git
🌱

Piksellerle birlikte giden üst veri

Dışa aktarmadan önce alt metin ve isteğe bağlı bir bağlantı sarmalayıcısı ayarlayın; böylece biri dosyanızı ekran okuyucuda açtığında görsel yalnızca sessiz bir görüntü bloğu olmaz.

🔬

Görebildiğiniz raster kontrolleri

Döndürün, parlaklığı veya kontrastı hafifçe oynatın ve bir maksimum genişlik ile kalite hedefiyle yeniden kodlayın. Bu seçimler gömülü görüntüye işlenir; kopyalamayı unutacağınız bir yığın CSS filtresine değil.

💫

Resmin yanında HTML

Çıktı sütunu önizleme ile aynı geçişi izler; Uygula'ya bastıktan sonra neyin değiştiğini tahmin etmek zorunda kalmazsınız.

FEATURES

Yükle ve umut et sitelerinden daha sakin bir görüntüden HTML'ye yaklaşımı

Rakipler çoğu kez tek bir dönüştür düğmesinde biter. Sıkıştırmayı ve düzeni gerçekten yapıştıracağınız işaretlemenin yanında tutarız.

Önizlemenin yanında HTML görünürken görüntü genişliği ve sıkıştırma ayarlama

Gizemli bir dize yerine görsel ince ayar

Geçerli bir data URL, varlık şablonunuzun izin verdiğinin iki katı geniş olduğunda veya karanlık mod ekran görüntüsü QA'ya düşmeden önce canlandırılmaya ihtiyaç duyduğunda yine yanlış teslimdir. Burada pazarlık ettiğiniz bitmap solda kalır; sağ sütun ya sarılmış belge ya da bir bilete yapıştıracağınız çıplak src satırı olarak aynı geçişi izler. «Yeniden boyutlandır / kodla»yı açın, dosyadaki maksimum genişliği, kaliteyi ve çıktı biçimini ayarlayın, Uygula'ya basın; iki panel birlikte hareket eder — hangi düğmenin gerçekten gittiğini tahmin etmek gerekmez. Parlaklık ve kontrast dışa aktarma için piksellere işlenir; sonradan eklenen ve çoğu kez kopyası unutulan CSS filtrelerinden iyidir. Hizalama, görüntüleme genişliği, alt ve isteğe bağlı bağlantı kontrolleri araç çubuğunu paylaşır; adım kör bir dönüştürücüden çok beş dakikalık düzen cilasına yakın hissettirir. HTML doğru göründüğünde, bir megabayt Base64'i çözmek için Geliştirici Araçları'nı açmadan doğrudan Jira'ya, bir Markdown bloğuna veya iç belgeye kopyalayın. Bu bir tasarım sisteminin yerini almaz; ama tek tıklamalı araçların bıraktığı indir — yeniden aç — homurdan döngüsünün yerini alır.

  • Görüntüyü ayarlarken HTML'yi görün
  • Genişlik veya biçim değişince yeniden kodlayın
  • Sunucularımıza yükleme yok
  • Playground'da HTML önizlemesi

HTML'e görüntü nasıl eklenir?

Çoğu öğretinin öğrettiği manuel yol

Çoğu öğretinin öğrettiği manuel yol

Bir <img> öğesi eklersiniz, src'yi bir URL'ye veya data URL'ye yönlendirirsiniz ve anlamlı alt metin verirsiniz. Hızlı bir fikstür için data URL'yi doğrudan src'ye yapıştırabilirsiniz; bedeli daha büyük bir HTML dosyasıdır. Ayrı bir .jpg veya .webp barındırıp referans vermek işaretlemeyi küçük tutar ama taşınacak bir dosya daha ekler.

Tek dosyalı data URL ne zaman kazanır

Tek dosyalı data URL ne zaman kazanır

E-posta parçacıkları, iç belgeler veya çevrimdışı teslimler tek bir HTML kümesiyle daha iyi davranır. Görüntüyü satır içi pişirmek, biri klasörü yeniden adlandırdığında kırılan göreli yollardan sizi kurtarır.

Döngüyü nasıl kısaltıyoruz

Döngüyü nasıl kısaltıyoruz

Görüntüyü yükleyin, önizleme güncellenirken düzen ve sıkıştırmayı ayarlayın, ardından HTML'yi veya yalnızca src satırını kopyalayın. Çok uzaklara gittiyseniz döndürmeyi ve dışa aktarma ayarlarını sıfırlayın, sağ sütun beklediğinizle eşleşene kadar yeniden uygulayın.

Görüntüden HTML'ye: kısa yanıtlar

BAŞLA

Görüntüden HTML'i deneyin

Solda yükleyin, sağda ince ayar yapıp karşılaştırın.

Görüntüden HTML'ye

Ücretsiz
  • Yanında HTML ile canlı önizleme
  • Yeniden boyutlandır, döndür, parlaklık, kontrast
  • WebP, JPEG veya PNG gömme
  • Tarayıcıda yerel çalışır
Yukarı dön

Çok büyük görüntüler kodlamayı yavaşlatabilir; data URL'yi küçültmek için dışa aktarma panelindeki maks. genişliği kullanın.

Görüntüden HTML'ye araç
Tarayıcıda

Tek HTML dosyası, tek görüntü

Görüntüyü başka yerde barındırmadan tek ek veya parçacık gerektiğinde kullanışlıdır.