Langsung ke konten
FitMyImage
Alat lainnya
Bahasa Indonesia

HTML ke gambar

Tempel HTML dan CSS lalu dapatkan PNG, JPG, WebP, atau SVG-nya, pada kepadatan piksel 1×, 2×, atau 3×. Berguna untuk kartu media sosial, cuplikan kode, banner, dan header email.

Kepadatan piksel
Latar

Markup digambar di perangkat ini. Skrip tidak dijalankan, dan gambar atau font dari situs lain tidak dimuat: pakai URL data: dan font sistem. Untuk menangkap halaman web langsung, pakai tangkapan layar bawaan browser Anda (di Chrome: DevTools, lalu Capture full size screenshot).

Cara kerjanya

  1. Tempel HTML Anda, dengan CSS di dalam tag style.
  2. Atur lebar dalam piksel CSS; kosongkan tinggi agar mengikuti konten.
  3. Pilih kepadatan piksel (2× untuk teks tajam di ponsel) dan latarnya.
  4. Tekan Buat gambar, periksa pratinjau, dan unduh.

Apa yang bisa dan tidak bisa digambar

  • Elemen HTML dan CSS apa pun yang didukung browser, termasuk flexbox, grid, gradasi, garis tepi, dan font sistem.
  • Gambar hanya sebagai URL data:. Gambar dan font web di situs lain tidak diambil, karena browser tidak mengizinkan halaman membaca piksel dari situs lain.
  • Skrip tidak dijalankan: markup ditata di sandbox dengan skrip dimatikan.

Menangkap halaman web dari alamatnya

Mengubah URL menjadi gambar membutuhkan server yang membuka halaman itu untuk Anda, yang berarti mengirim alamat Anda ke sana dan melihat apa yang Anda tangkap. Situs ini tidak punya server. Browser Anda bisa melakukannya: di Chrome atau Edge, buka DevTools (F12), tekan Ctrl+Shift+P, lalu jalankan 'Capture full size screenshot'; Firefox punya 'Take Screenshot' di menu klik kanan.

Pertanyaan

Mengapa gambar saya tidak muncul di hasilnya?

Gambar yang ditautkan dari situs lain tidak disertakan, karena browser akan menolak halaman membaca gambar yang sudah jadi. Ubah gambar itu menjadi URL data: dan tempelkan ke src.

Format mana yang sebaiknya dipilih?

PNG untuk teks tajam dan warna datar, JPG untuk foto di atas latar polos, WebP untuk berkas web terkecil, dan SVG untuk mempertahankannya sebagai markup vektor yang bisa diskalakan tanpa buram.

Apa fungsi kepadatan piksel?

Melipatgandakan pikselnya: tata letak selebar 1200 px pada 2× menjadi gambar 2400 px, sehingga teks tetap tajam di layar beresolusi tinggi.

Apakah bisa di Safari?

Safari menggambar SVG-nya, tetapi beberapa versi tidak mengizinkan mengubahnya menjadi piksel. Jika itu terjadi, halaman akan memberi tahu Anda; pilih SVG, atau pakai Chrome, Edge, atau Firefox untuk PNG dan JPG.

Alat terkait