Konversi HTML ke PNG

Q: Bisakah PNG hasil konversi HTML memakai latar transparan, bukan putih?

Bisa. Aktifkan **Latar transparan**. Transparansi hanya muncul di bagian yang tidak diberi warna latar oleh halaman itu sendiri, jadi situs dengan warna body putih tetap akan keluar putih. Cara ini paling cocok untuk satu komponen atau lencana yang dibuat sebagai file HTML tersendiri.

Q: Bagaimana cara membuat PNG dari bagian atas halaman HTML yang panjang saja?

Ubah **Gambar** menjadi satu per halaman dan atur **Halaman** ke Halaman pertama. Anda mendapat bagian pertama seukuran halaman, bukan seluruh panjangnya. Untuk memangkasnya ke bingkai yang tepat sesudahnya, gunakan alat [potong gambar](/crop-image).

Jadikan halaman web tersimpan, ekspor dasbor, atau mockup komponen sebagai PNG yang setiap huruf dan garis tipisnya persis seperti yang digambar browser. Pilih lebar jendela, dan tata letaknya akan mengikuti.

atau jatuhkan file DOC, DOCX, DOCM … di sini ·

Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit

Keluaran

Konversi ke

Resolusi

Gambar

File diproses di server kami dan dihapus setelah 30 menit.

Cara menggunakan alat ini

1
Tambahkan file HTML
Unggah file .html, .htm, atau .mhtml, hingga 20 file per batch dan masing-masing 95 MB. Halaman yang disimpan sebagai satu file MHTML membawa gambar dan gayanya di dalam file itu.
2
Atur lebar jendela
Lebar halaman HTML dimulai pada 1280 px. Pakai 390 px untuk tata letak ponsel atau 1920 px untuk dasbor lebar. Konversi ke sudah berisi PNG dan Gambar sudah berupa satu gambar panjang.
3
Konversi ke PNG
Tekan Konversi ke PNG. Aktifkan Latar transparan di Pengaturan lanjutan jika halaman tidak punya warna latar sendiri dan gambarnya akan diletakkan di atas karya lain.

Jawaban

Bagaimana cara mengonversi HTML ke PNG?

Unggah file .html atau .mhtml, atur Lebar halaman HTML sesuai layar yang ingin ditiru, lalu tekan Konversi ke PNG. Seluruh halaman yang sudah dirender kembali sebagai satu gambar lossless.

Ubah HTML ke PNG saat teks dan garis harus tetap tajam

PNG telah menjadi Rekomendasi W3C sejak 1996 dan memakai kompresi lossless, sehingga tepi anti-aliasing teks isi 14 px, garis tabel satu piksel, dan kode berwarna sintaksis tetap utuh. Itulah alasan developer melampirkan tangkapan PNG pada laporan bug dan desainer membagikannya dalam tinjauan: tidak ada yang perlu menebak apakah tepi yang kabur berasal dari masalah CSS atau artefak kompresi.

Harganya adalah ukuran file. Halaman berisi teks dan warna datar terkompresi dengan baik; halaman penuh foto tidak. Jika tangkapan akan dikirim lewat chat atau email, tempat ukuran lebih penting daripada detail tajam, JPG menghasilkan file yang lebih kecil. Untuk dokumentasi, catatan rilis, dasbor, dan panduan gaya, PNG adalah pilihan bawaan yang lebih aman.

Lebar menentukan tata letak. HTML tidak punya halaman tetap: file yang sama menampilkan desain desktop tiga kolom pada 1280 px dan satu kolom bertumpuk pada 390 px. Konverter menata halaman pada Lebar halaman HTML yang Anda masukkan, antara 320 dan 3840 px, lalu menangkapnya dari baris pertama hingga footer.

Lebar konverter HTML ke PNG untuk layar yang umum

195:422

390 × 844 px

Ponsel

Viewport CSS banyak iPhone terbaru; menampilkan tata letak seluler

41:59

820 × 1180 px

Tablet

iPad Air dalam posisi potret; banyak situs berganti breakpoint di sekitar lebar ini

8:5

1280 × 800 px

Laptop

Lebar bawaan di konverter ini

16:9

1920 × 1080 px

Monitor Full HD

Dasbor lebar dan panel admin

HTML

HyperText Markup Language

HTML adalah bahasa markup untuk web, pertama kali dideskripsikan oleh Tim Berners-Lee pada awal 1990-an dan kini dikelola oleh WHATWG sebagai living standard. File HTML mendeskripsikan judul, paragraf, tautan, tabel, gambar, dan formulir, sedangkan gaya tampilannya biasanya berasal dari CSS. Setiap browser dapat merendernya, dan HTML juga digunakan untuk template email serta halaman web yang disimpan. Satu file HTML sering bergantung pada gambar dan stylesheet eksternal, sehingga tampilannya bisa rusak jika dipindahkan sendirian.

Kompresi: –
Transparansi: –
Animasi: –
Diperkenalkan: 1993 · Tim Berners-Lee; maintained by WHATWG

Konverter HTML

PNG

Portable Network Graphics

PNG adalah format raster lossless (tanpa kehilangan kualitas) yang diterbitkan pada 1996 oleh PNG Development Group dan kemudian distandardisasi oleh W3C dan ISO. Format ini menyimpan setiap piksel secara persis, mendukung transparansi alfa penuh, dan menangani teks, tepi tajam, serta warna datar tanpa artefak. Ketepatan itu membuatnya ideal untuk tangkapan layar, logo, ikon, dan grafis antarmuka. Kekurangannya ada pada ukuran: foto yang disimpan sebagai PNG sering kali beberapa kali lebih besar daripada foto yang sama dalam JPEG atau WebP. Semua browser, sistem operasi, dan editor dapat membuka file PNG.

Kompresi: Lossless
Transparansi: Ya
Animasi: Tidak
Diperkenalkan: 1996 · PNG Development Group

Konverter PNG

Orang memilih PNG ketika halaman sebagian besar berisi teks, kode, tabel, atau elemen antarmuka: piksel lossless menjaga garis tipis dan huruf kecil tetap tajam di dokumentasi, laporan bug, dan tinjauan desain, tempat artefak JPG akan terlihat.

Konversi HTML ke PNG tanpa kehilangan gaya atau font

File .html biasa sering bergantung pada hal yang disimpan di tempat lain: stylesheet di folder css, gambar di server asal, font dari layanan font. Jika semua itu tidak ada, halaman kembali menjadi teks tanpa gaya dengan huruf bawaan. Menyimpan halaman di Chrome atau Edge sebagai Halaman web, satu file menghasilkan file .mhtml yang menyatukan gaya dan gambar, dan itulah yang paling andal untuk diunggah.

Font web mengikuti aturan yang sama. Font yang dideklarasikan dengan @font-face hanya dimuat jika filenya bisa dijangkau; font yang hanya ada di komputer Anda sendiri diganti dengan font yang mirip. Jika tipografi harus persis, sematkan font tersebut atau periksa hasilnya sebelum mengirimkannya.

Lebar yang tetap juga membuat tangkapan mingguan sebuah laporan bisa dibandingkan berdampingan. Jika hasilnya harus tetap berupa teks yang bisa dipilih untuk dicetak, gunakan HTML ke PDF sebagai gantinya.

Pertanyaan seputar HTML ke PNG

Apakah konversi HTML ke PNG lebih baik daripada screenshot dari browser sendiri?

Screenshot browser hanya menangkap yang muat di layar Anda, kecuali Anda memakai alat tangkapan satu halaman penuh, dan lebarnya bergantung pada ukuran jendela saat itu. Di sini lebar adalah angka yang Anda tetapkan, sehingga dua tangkapan yang dibuat berminggu-minggu terpisah akan sejajar persis, dan seluruh halaman ikut dari baris pertama hingga footer.

Mengapa PNG dari halaman HTML beberapa kali lebih besar daripada JPG-nya?

PNG menyimpan setiap piksel tanpa kehilangan data. Teks dan warna datar terkompresi dengan baik dengan cara itu, tetapi foto, gradasi, dan poster video tidak, sehingga landing page yang penuh foto bisa menghasilkan PNG besar. Untuk halaman seperti itu, HTML ke JPG adalah pilihan yang lebih ringan; untuk contoh kode, grafik, dan UI, penghematannya biasanya tidak sebanding dengan hasil yang buram.

Bisakah PNG hasil konversi HTML memakai latar transparan, bukan putih?

Bisa. Aktifkan Latar transparan. Transparansi hanya muncul di bagian yang tidak diberi warna latar oleh halaman itu sendiri, jadi situs dengan warna body putih tetap akan keluar putih. Cara ini paling cocok untuk satu komponen atau lencana yang dibuat sebagai file HTML tersendiri.

Apakah konverter HTML ke PNG menjalankan JavaScript di halaman?

Konten yang dibuat skrip saat halaman dibuka bisa muncul, tetapi apa pun yang menunggu klik, gulir, atau login tidak akan muncul. Jika grafik atau tabel baru ada setelah interaksi, buka halaman di browser Anda, tunggu hingga selesai dimuat, lalu simpan sebagai satu file sebelum mengunggahnya.

Bagaimana cara membuat PNG dari bagian atas halaman HTML yang panjang saja?

Ubah Gambar menjadi satu per halaman dan atur Halaman ke Halaman pertama. Anda mendapat bagian pertama seukuran halaman, bukan seluruh panjangnya. Untuk memangkasnya ke bingkai yang tepat sesudahnya, gunakan alat potong gambar.