UltKit

HTML'yi PNG'ye Dönüştürme

Kaydedilmiş bir web sayfasını, dışa aktarılmış bir paneli ya da bir bileşen taslağını, her harfin ve ince çizginin tam olarak tarayıcının çizdiği gibi kaldığı bir PNG'ye dönüştürün. Pencere genişliğini seçin, sayfa düzeni ona göre şekillensin.

Belgeden Resme

veya DOC, DOCX, DOCM … dosyaları buraya bırakın ·

Dosya başına en fazla 95 MB· En fazla 20 dosya· 30 dakika sonra silinir

Çıktı

Dosyalar sunucularımızda işlenir ve 30 dakika sonra silinir.

Bu aracı nasıl kullanırsınız

  1. 1

    HTML dosyasını ekleyin

    Her toplu işlemde en fazla 20 dosya ve dosya başına 95 MB olacak şekilde .html, .htm veya .mhtml dosyalarını yükleyin. Tek bir MHTML dosyası olarak kaydedilen sayfa, resimlerini ve stillerini kendi içinde taşır.

  2. 2

    Pencere genişliğini ayarlayın

    HTML sayfa genişliği 1280 px ile başlar. Telefon düzeni için 390 px, geniş bir panel için 1920 px kullanın. Dönüştürülecek biçim zaten PNG olarak ayarlıdır ve Resimler seçeneği tek uzun resimdir.

  3. 3

    PNG'ye dönüştürün

    PNG biçimine Dönüştür → düğmesine basın. Sayfanın kendi arka plan rengi yoksa ve resim başka bir tasarımın üzerine yerleştirilecekse Gelişmiş ayarlar altındaki Şeffaf arka plan seçeneğini açın.

Yanıt

HTML'yi PNG'ye nasıl dönüştürürüm?

.html veya .mhtml dosyasını yükleyin, HTML sayfa genişliği değerini taklit etmek istediğiniz ekrana göre ayarlayın ve PNG biçimine Dönüştür → düğmesine basın. Sayfanın tamamı tek bir kayıpsız resim olarak geri gelir.

Yazılar ve çizgiler net kalmalıysa HTML'yi PNG'ye dönüştürün

PNG 1996'dan beri bir W3C Tavsiyesidir ve kayıpsız sıkıştırma kullanır; bu yüzden 14 px gövde metninin yumuşatılmış kenarları, bir piksellik tablo çizgileri ve sözdizimi renkli kod olduğu gibi korunur. Geliştiricilerin hata raporlarına PNG görüntüleri eklemesinin, tasarımcıların da incelemelerde paylaşmasının nedeni budur: bulanık bir kenarın CSS sorunu mu yoksa sıkıştırma kusuru mu olduğunu kimse merak etmez.

Bedeli dosya boyutudur. Metin ve düz renkten oluşan bir sayfa iyi sıkışır; fotoğraflarla dolu bir sayfa sıkışmaz. Görüntü, net ayrıntıdan çok boyutun önemli olduğu bir sohbete veya e-postaya gidecekse JPG daha küçük dosya verir. Dokümantasyon, sürüm notları, paneller ve stil kılavuzları için PNG daha güvenli varsayılandır.

Düzeni genişlik belirler. HTML'nin sabit bir sayfası yoktur: aynı dosya 1280 px'te üç sütunlu masaüstü tasarımını, 390 px'te tek sütunlu dizilimi gösterir. Dönüştürücü sayfayı girdiğiniz HTML sayfa genişliği değerinde, 320 ile 3840 px arasında, yerleştirir ve ilk satırdan alt bilgiye kadar yakalar.

Yaygın ekranlar için HTML'den PNG'ye dönüştürme genişlikleri

195:422

390 × 844 px

Telefon

Son dönem birçok iPhone'un CSS görünüm alanı; mobil düzeni gösterir

41:59

820 × 1180 px

Tablet

Dikey konumda iPad Air; birçok site kesme noktalarını buralarda değiştirir

8:5

1280 × 800 px

Dizüstü bilgisayar

Bu dönüştürücüdeki varsayılan genişlik

16:9

1920 × 1080 px

Full HD monitör

Geniş paneller ve yönetim ekranları

HTML

HyperText Markup Language

HTML, web'in işaretleme dilidir; ilk kez 1990'ların başında Tim Berners-Lee tarafından tanımlandı ve şimdi WHATWG tarafından yaşayan bir standart olarak sürdürülüyor. Bir HTML dosyası başlıkları, paragrafları, bağlantıları, tabloları, resimleri ve formları tanımlar; biçimlendirme ise genellikle CSS'ten gelir. Her tarayıcı onu işler; e-posta şablonlarında ve kaydedilmiş web sayfalarında da kullanılır. Tek bir HTML dosyası çoğu zaman harici resimlere ve stil sayfalarına bağlıdır, bu yüzden tek başına taşındığında bozuk görünebilir.

Sıkıştırma
–
Saydamlık
–
Animasyon
–
Çıkış yılı
1993 · Tim Berners-Lee; maintained by WHATWG
HTML dönüştürücü

PNG

Portable Network Graphics

PNG, 1996'da PNG Development Group tarafından yayımlanan ve sonradan W3C ile ISO tarafından standartlaştırılan kayıpsız bir raster biçimdir. Her pikseli aynen korur, tam alfa saydamlığını destekler; metni, keskin kenarları ve düz renkleri bozulma olmadan işler. Bu kesinlik onu ekran görüntüleri, logolar, simgeler ve arayüz grafikleri için ideal kılar. Bedeli boyuttur: PNG olarak kaydedilen fotoğraflar, aynı fotoğrafın JPEG veya WebP hâlinden çoğunlukla birkaç kat büyüktür. Tüm tarayıcılar, işletim sistemleri ve düzenleyiciler PNG dosyalarını açar.

Sıkıştırma
Kayıpsız
Saydamlık
Evet
Animasyon
Hayır
Çıkış yılı
1996 · PNG Development Group
PNG dönüştürücü

Sayfa çoğunlukla metin, kod, tablo veya arayüz parçalarından oluştuğunda PNG tercih edilir: kayıpsız pikseller, JPG bozulmalarının göze çarpacağı dokümantasyon, hata raporu ve tasarım incelemelerinde ince çizgileri ve küçük yazıları net tutar.

Stilleri ve yazı tiplerini kaybetmeden HTML'yi PNG'ye dönüştürme

Düz bir .html dosyası çoğu zaman başka yerde duran şeylere bağlıdır: css klasöründeki bir stil dosyası, asıl sunucudaki resimler, bir yazı tipi hizmetinden gelen fontlar. Bunlar eksik olduğunda sayfa, varsayılan yazı tipinde stilsiz metne döner. Sayfayı Chrome veya Edge'de Web Sayfası, Tek Dosya olarak kaydetmek, stilleri ve resimleri bir arada tutan bir .mhtml dosyası üretir; yüklenecek en güvenilir dosya budur.

Web yazı tipleri de aynı kurala tabidir. @font-face ile tanımlanan bir yazı tipi yalnızca dosyasına ulaşılabiliyorsa yüklenir; yalnızca kendi bilgisayarınızda bulunan bir yazı tipi benzeriyle değiştirilir. Tam tipografi önemliyse yazı tipini gömün veya göndermeden önce sonucu kontrol edin.

Sabit genişlik, bir raporun haftalık görüntülerini yan yana karşılaştırılabilir kılar. Sonucun yazdırma için seçilebilir metin kalması gerekiyorsa bunun yerine HTML'den PDF'ye biçimini kullanın.

HTML'den PNG'ye dönüştürme hakkında sorular

HTML'yi PNG'ye dönüştürmek, kendi tarayıcımdan ekran görüntüsü almaktan daha mı iyi?

Tam sayfa yakalama aracı kullanmadığınız sürece tarayıcı ekran görüntüsü yalnızca ekranınıza sığan kısmı alır ve genişliği pencerenizin o anki boyutuna bağlıdır. Burada genişlik sizin belirlediğiniz bir sayıdır; bu yüzden haftalar arayla alınan iki görüntü birebir örtüşür ve sayfanın tamamı ilk satırdan alt bilgiye kadar dahil edilir.

PNG neden aynı sayfanın JPG hâlinden birkaç kat daha büyük?

PNG her pikseli kayıpsız saklar. Metin ve düz renkler bu şekilde iyi sıkışır, ancak fotoğraflar, renk geçişleri ve video kapak görselleri sıkışmaz; bu yüzden fotoğraf ağırlıklı bir açılış sayfası büyük bir PNG üretebilir. Bu tür sayfalarda HTML'den JPG'ye daha hafif bir seçimdir; kod örnekleri, grafikler ve arayüzler için ise bulanıklığa genellikle değmez.

PNG'nin arka planı beyaz yerine şeffaf olabilir mi?

Evet. Şeffaf arka plan seçeneğini açın. Yalnızca sayfanın kendisinin arka plan rengi belirlemediği yerlerde görünür; yani gövde rengi beyaz olan bir site yine beyaz çıkar. En iyi sonucu, kendi HTML dosyası olarak hazırlanmış tek bir bileşen veya rozetle verir.

Dönüştürücü sayfadaki JavaScript'i çalıştırıyor mu?

Sayfa açılırken bir betiğin oluşturduğu içerik görünebilir, ancak tıklama, kaydırma veya oturum açma bekleyen hiçbir şey görünmez. Bir grafik ya da tablo yalnızca etkileşimden sonra oluşuyorsa sayfayı tarayıcınızda açın, yüklenmesini bekleyin ve yüklemeden önce tek dosya olarak kaydedin.

Uzun bir sayfanın yalnızca üst kısmının resmini nasıl alırım?

Resimler ayarını sayfa başına bir resim olarak değiştirin ve Sayfalar ayarını İlk sayfa yapın. Sayfanın tamamı yerine sayfa boyutundaki ilk bölümü alırsınız. Sonrasında tam bir kareye kırpmak için resim kırpma aracını kullanın.