Konverter online gratis HTM ke PNG

Apa itu format HTM

HTM adalah ekstensi file HTML yang digunakan untuk halaman web dan dokumen web lokal. File .htm berisi markup untuk teks, link, tabel, formulir, dan referensi media; CSS mengatur presentasi, sedangkan JavaScript dapat mengubah halaman setelah dimuat. Ekstensi .htm dan .html mewakili format HTML yang sama, meskipun .htm dahulu berguna pada sistem yang memerlukan ekstensi tiga karakter.

Browser seperti Chrome, Firefox, Edge, dan Safari dapat membuka file HTM. Web editor, sistem manajemen konten, static-site generator, dan aplikasi Windows lama dapat membuatnya. File HTM mungkin bergantung pada file CSS, JavaScript, gambar, font, dan media yang berada di sekitarnya, sehingga menyalin hanya file HTML dapat menghasilkan rendering yang tidak lengkap.

Apa itu format PNG

PNG (Portable Network Graphics) adalah format gambar raster yang menyimpan gambar hasil rendering sebagai piksel. Format ini mendukung kompresi lossless, transparansi, dan gambar full-color, sehingga cocok untuk screenshot, mockup antarmuka, diagram, logo, serta grafik dengan teks tajam atau area warna datar.

PNG tidak mempertahankan link HTML, struktur semantik, aturan CSS, script, teks yang dapat dipilih, perilaku responsif, atau interaktivitas. Gunakan PNG ketika diperlukan representasi visual tetap, bukan halaman web yang dapat diedit atau interaktif.

Cara mengonversi HTM ke PNG

Menggunakan web browser

1. Simpan file HTM bersama folder yang dirujuk, seperti css, images, dan fonts. Relative path yang benar diperlukan agar aset tersebut dapat dimuat.
2. Buka file di Chrome, Edge, Firefox, atau browser terkini lainnya dengan mengekliknya dua kali atau memilih Open with.
3. Atur lebar viewport yang diperlukan dengan mengubah ukuran jendela browser atau menggunakan alat emulasi perangkat pada browser. Halaman responsif dapat menggunakan layout yang berbeda pada setiap lebar.
4. Tangkap halaman yang telah dirender menggunakan fitur screenshot browser, alat screenshot sistem operasi, atau developer tools.
5. Simpan gambar sebagai .png dan periksa apakah ada konten yang terpotong, font yang hilang, gambar yang belum dimuat, atau layout responsif yang keliru.

Di Chrome atau Edge, buka developer tools dengan Ctrl + Shift + I di Windows atau Linux, atau Cmd + Option + I di macOS. Buka menu perintah, jalankan Capture full size screenshot, lalu simpan PNG yang dihasilkan. Gunakan device toolbar terlebih dahulu jika halaman harus ditangkap pada dimensi tertentu. Pengambilan berukuran penuh mencakup seluruh dokumen yang dapat digulir; screenshot biasa hanya menangkap viewport yang terlihat.

Menggunakan 101convert

Anda dapat mengonversi file secara gratis di 101convert.com tanpa menginstal software. Upload file HTM, pilih PNG jika pilihan format output ditampilkan, mulai konversi, lalu download gambar. Jika halaman menggunakan CSS, gambar, font, atau script terpisah, sertakan file terkait ketika converter mendukung upload arsip atau aset; jika tidak, resource tersebut mungkin tidak muncul dalam hasilnya.

Menggunakan Playwright untuk pengambilan berulang

Playwright cocok untuk screenshot otomatis atau batch karena menggunakan browser engine dan dapat mengatur viewport tetap. Setelah menginstal Playwright dan browser Chromium-nya, script Node.js dapat menggunakan:

const { chromium } = require("playwright");
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto("file:///absolute/path/page.htm", { waitUntil: "networkidle" });
  await page.screenshot({ path: "page.png", fullPage: true });
  await browser.close();
})();

Ganti URL file dengan absolute path file HTM. Atur fullPage menjadi false jika hanya viewport yang diperlukan. Untuk halaman yang memuat konten setelah aktivitas jaringan berhenti, tunggu selector yang relevan atau tambahkan jeda singkat sebelum mengambil screenshot.

Keterbatasan kualitas dan kompatibilitas

Dimensi PNG bergantung pada viewport browser dan device pixel ratio. Tingkatkan viewport atau device scale factor ketika teks kecil harus tetap mudah dibaca, tetapi perkirakan ukuran file yang lebih besar. Screenshot bukan konversi layout cetak: elemen dengan posisi tetap, animasi, gambar yang dimuat secara lazy, dan state hover dapat menghasilkan perbedaan tergantung waktu pengambilan.

Aturan keamanan browser lokal dapat memblokir script, font, atau resource yang dimuat dari lokasi lain. Pastikan aset yang diperlukan tersedia secara lokal, gunakan relative path yang valid, dan tunggu hingga web font serta gambar selesai dimuat. PNG mempertahankan piksel yang ditangkap tanpa kehilangan akibat kompresi seperti pada JPEG, tetapi biasanya lebih besar daripada JPEG untuk konten fotografis dan tidak dapat mempertahankan teks, link, atau perilaku asli halaman.