İçeriğe geç
FitMyImage
Diğer araçlar
Türkçe

HTML'den görsele

HTML ve CSS yapıştırın, 1×, 2× ya da 3× piksel yoğunluğunda PNG, JPG, WebP veya SVG halini alın. Sosyal medya kartları, kod parçaları, afişler ve e-posta başlıkları için kullanışlıdır.

Piksel yoğunluğu
Arka plan

İşaretleme bu cihazda çizilir. Betikler çalışmaz, başka sitelerdeki görseller ya da yazı tipleri yüklenmez: data: URL'leri ve sistem yazı tiplerini kullanın. Canlı bir web sayfasını yakalamak için tarayıcınızın kendi ekran görüntüsü özelliğini kullanın (Chrome'da: DevTools, ardından Capture full size screenshot).

Nasıl çalışır

  1. HTML'nizi, CSS bir style etiketi içinde olacak şekilde yapıştırın.
  2. Genişliği CSS pikseli olarak ayarlayın; yüksekliği içeriğe uysun diye boş bırakın.
  3. Piksel yoğunluğunu (telefonlarda keskin yazı için 2×) ve arka planı seçin.
  4. Görsel oluştur'a basın, ön izlemeyi kontrol edin ve indirin.

Neler çizilebilir, neler çizilemez

  • Tarayıcının desteklediği her HTML öğesi ve CSS; flexbox, grid, gradyanlar, kenarlıklar ve sistem yazı tipleri dahil.
  • Görseller yalnızca data: URL'si olarak. Başka sitelerdeki resimler ve web yazı tipleri alınmaz, çünkü tarayıcı bir sayfanın başka sitelerden piksel okumasına izin vermez.
  • Betikler çalışmaz: işaretleme, betiklerin kapalı olduğu bir korumalı alanda yerleştirilir.

Bir web sayfasını adresinden yakalamak

Bir URL'yi görsele dönüştürmek, sayfayı sizin için açan bir sunucu gerektirir; bu da ona adresinizi göndermek ve neyi yakaladığınızı görmesine izin vermek demektir. Bu sitenin sunucusu yok. Tarayıcınız bunu yapabilir: Chrome ya da Edge'de DevTools'u açın (F12), Ctrl+Shift+P'ye basın ve 'Capture full size screenshot' komutunu çalıştırın; Firefox'ta sağ tık menüsünde 'Ekran görüntüsü al' bulunur.

Sorular

Sonuçta görsellerim neden eksik?

Başka sitelerden bağlanan görseller dışarıda bırakılır, çünkü tarayıcı sayfanın bitmiş resmi okumasına izin vermez. Onları data: URL'lerine dönüştürüp src içine yapıştırın.

Hangi biçimi seçmeliyim?

Net yazı ve düz renkler için PNG, düz bir arka plan üzerindeki fotoğraflar için JPG, en küçük web dosyası için WebP, bulanıklaşmadan ölçeklenen vektör işaretleme olarak saklamak için SVG.

Piksel yoğunluğu ne yapar?

Pikselleri çoğaltır: 2×'te 1200 px genişliğindeki bir düzen 2400 px'lik bir görsel olur, böylece yazı yüksek çözünürlüklü ekranlarda keskin kalır.

Safari'de çalışır mı?

Safari SVG'yi çizer ama bazı sürümleri onu piksele dönüştürmeye izin vermez. Böyle olursa sayfa bunu söyler; SVG'yi seçin ya da PNG ve JPG için Chrome, Edge veya Firefox kullanın.

İlgili araçlar