Ubah HTML ke gambar

Dengan alat ini Anda bisa ubah HTML ke gambar: tempel kode, pilih lebar, klik “Buat gambar”, lalu unduh PNG, JPG atau WebP. Gambar dibuat di browser Anda: kode tidak diunggah, tidak disimpan, dan tidak ditambahkan ke bilah alamat.

Sumber: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Diperbarui: 30 September 2026.

Lebar

Lebar gambar dalam piksel CSS (50–4.000)

Tinggi

0 = otomatis mengikuti isi

Margin dalam

Jarak antara isi dan tepi gambar

Resolusi

Latar

Format

Kotak Alat SayaInput Anda hanya disimpan di browser ini.

Kode HTMLHTML dengan gaya inline atau blok <style>. Gambar hanya sebagai Base64 (data:image/…), font hanya dari sistem. Skrip dan alamat eksternal dihapus.

Teks Anda tetap di browser Anda – tidak dikirim, tidak disimpan, dan tidak ditambahkan ke bilah alamat.

Hasil

Keluaran: Gambar selebar 600 px, resolusi 2× → 1.200 px

Cara menghitung

Bagaimana HTML menjadi gambar

Browser menggambar kode HTML sebagai grafik: kode dibersihkan dulu, lalu dirender sebagai SVG berisi HTML tersemat (foreignObject) dan dilukis ke kanvas (canvas) yang disimpan sebagai PNG, JPG atau WebP. Cara ini cocok untuk kartu, kutipan, tabel, potongan faktur, blok email, atau gambar pratinjau media sosial – apa pun yang bisa dirancang dengan HTML dan CSS.

Yang didukung

HTML dan CSS: gaya inline dan blok <style>, flexbox, grid, gradasi, bayangan, sudut membulat, tabel.
Gambar: hanya yang disematkan sebagai alamat Base64 (data:image/png;base64,…) atau SVG inline. Gambar ke Base64 mengubah file gambar menjadi alamat yang tepat.
Font: font yang terpasang di perangkat Anda dan font sistem. Font web dari internet (Google Fonts) tidak diambil.

Yang tidak berfungsi

Skrip tidak berjalan, gambar, font, dan stylesheet dari alamat lain tidak dimuat, dan animasi, efek hover, iframe, canvas, serta video tidak menghasilkan gambar. Bagian seperti itu dihapus saat pembersihan; catatan di bawah hasil memberi tahu Anda. Tampilannya bisa sedikit berbeda dari halaman asli karena browser hanya menggambar potongan Anda.

Ukuran, ketajaman, dan format

Lebar dan tinggi: dengan “0” tinggi mengikuti isi.
Resolusi: 2× memberi piksel dua kali lipat dan tampak tajam di ponsel dan layar Retina. Untuk gambar yang sangat besar, resolusi dibatasi otomatis.
Format: PNG untuk teks dan grafik bertepi tajam dengan transparansi, JPG untuk file kecil (selalu dengan latar), WebP sebagai kompromi modern.

Privasi dan keamanan

Kode Anda hanya diproses di browser dan tidak disimpan di mana pun. Skrip, atribut peristiwa seperti onclick, dan alamat eksternal dihapus sebelum menggambar. Jika Anda ingin menaruh teks di foto yang sudah ada, gunakan tulis teks di foto.

Pertanyaan umum

Bagaimana cara mengubah HTML ke gambar?

Tempel kode HTML, pilih lebar dan resolusi, lalu klik “Buat gambar”. Setelah itu unduh gambar sebagai PNG, JPG atau WebP.

Mengapa gambar saya tidak muncul?

Gambar dari alamat lain (https://…) tidak dimuat demi keamanan. Sematkan sebagai alamat Base64 (data:image/…) atau gunakan SVG inline.

Apakah kode saya diunggah?

Tidak. Kode dibaca di browser Anda dan digambar menjadi gambar di sana. Tidak dikirim dan tidak disimpan.

Bagaimana mendapatkan latar transparan?

Pilih latar “Transparan” dan format PNG atau WebP. JPG tidak mendukung transparansi dan selalu mendapat latar putih.

Mengapa gambarnya buram?

Atur resolusi ke 2× atau 3×. Gambar lalu memiliki dua atau tiga kali lipat piksel pada ukuran tampilan yang sama.

Apakah Google Fonts berfungsi?

Tidak, font web dari internet tidak diambil. Gunakan font sistem seperti Arial, Georgia atau Verdana, atau font yang terpasang di perangkat Anda.

Sumber dan dasar hukum

Diperbarui: 30 September 2026 · Kebijakan editorial