Cara Ambil Screenshot Halaman Web Paling Mudah

Buat kamu yang ingin tahu cara mengambil gambar tangkapan layar atau screenshot dari sebuah halaman web kini ada cara baru yang paling mudah. Yakni dengan memanfaatkan fitur screenshot dari Statically CDN.

Statically.io, atau yang sebelumnya lebih tenar disebut Staticaly.com, baru-baru ini telah merilis fitur baru dimana para penggunanya bisa mengambil gambar tangkapan layar atau yang kerap disebut screenshot dari sebuah halaman situs website. Cara ini cukup memanfaatkan layanan CDN dari Statically saja, kamu tidak perlu menginstall atau memasang aplikasi apapun. Fitur ini disebut Screenshot as a Service.

Screenshot dari suatu website biasa dipakai untuk keperluan ilustrasi. Sebenarnya ada banyak cara untuk mengambil screenshot dari sebuah halaman situs web. Dari memakai tombol Print Screen, memasang software, install APK screenshot, hingga memasang browser extension. Tapi semuanya tergolong merepotkan dan tidak bisa dilakukan dengan instan.

Baca juga: Cara Kompress Gambar dengan CDN Staticaly

Ada juga cara lain untuk mengambil screenshot, yakni dengan memanfaatkan situs web yang memang menyediakan layanan mengambil screenshot dari sebuah situs atau blog. Layanan ini misalnya web-capture.net, Screenshot Guru, Snapito, Site-Shot, atau url2png. Tapi biasanya prosesnya tidak instan. Kadang kamu harus menunggu proses konversi beberapa saat, bahkan ada yang harus mendaftar terlebih dahulu.

Hasilnya pun sebagian besar kurang baik dan tidak opsi pengaturan lebih lanjut seperti pengaturan kualitas gambar, ukuran resolusi tangkapan layar yang diinginkan, atau kompatibilitas pada mode mobile.

Untunglah sekarang ada cara yang lebih mudah untuk ambil screenshot halaman web bahkan satu halaman penuh. Tidak hanya itu, kamu juga bisa menggunakan cara ini untuk ambil screenshot satu halaman penuh di android.

Karena isi artikel ini agak panjang dan mungkin membingungkan para pemula, saya membagi cara screenshot halaman web ini ke dalam beberapa topik. Silahkan dibaca pelan-pelan, jika masih ada yang membuat bingung jangan ragu untuk meninggalkan pesan/komentar.

Cara Membuat Screenshot Halaman Situs dengan Statically

Untuk membuat screenshot dari sebuah halaman situs web dengan Statically, modal yang kamu butuhkan hanyalah web browser dan koneksi internet saja. Kamu bisa memakai browser apapun seperti Chrome, Firefox, Opera, UC Browser, atau bahkan browser bawaan HP.

Sekarang kita akan langsung praktek. Buka terlebih dahulu web browser kamu dan pastikan koneksi internet tidak ada kendala. Gunakan format berikut untuk mengambil screenshot dari sebuah halaman situs web:

https://cdn.statically.io/ss/url-kamu

contoh:

https://cdn.statically.io/ss/www.oom.web.id
https://cdn.statically.io/ss/oom.web.id

Tekan tombol Enter dan Taraaa...!! Situs yang kamu tuju sudah berhasil diambil screenshot-nya. Untuk menyimpan gambar tersebut juga sangat mudah. Jika di komputer, cukup klik kanan dan pilih "Save image as" atau tekan kombinasi tombol Ctrl + S. Sedangkan jika melalui smartphone cukup klik dan tahan gambar lalu pilih Simpan.

Sangat cepat dan mudah sekali. Untuk ukurannya, secara default Statically akan membuat gambar tangkapan halaman dengan resolusi 1280x960 pixel. Tapi tenang saja, pada langkah berikutnya kita akan belajar cara mengubah ukuran ini.

Mengatur Resolusi atau Ukuran Lebar dan Tinggi Halaman

Resolusi 1280x960 bagi sebagian orang memang tampak terlalu besar, tidak semua orang menyukainya (termasuk saya). Nah, kita bisa mengatur ukuran gambar yang dihasilkan dengan mengatur parameter width (lebar) dan height (tinggi) sesuai kebutuhan kamu.

Untuk mengubah ukurannya, kita bisa melakukan setting pada parameter W untuk width (lebar) dan H untuk height (tinggi). Inilah format pengaturannya:

https://cdn.statically.io/ss/url-kamu?w=640
https://cdn.statically.io/ss/url-kamu?h=320

contoh:

https://cdn.statically.io/ss/www.oom.web.id?w=640

Sampai tutorial ini ditulis, Statically belum menyediakan cara menggabungkan parameter W dan H dalam 1 format. Itu artinya, kamu hanya bisa menentukan salah satu saja yang ingin diatur ukurannya, apakah lebar atau tingginya. Begitupun jika kamu ingin mengubah rasio gambar dari 4:3 menjadi 16:9 maka kamu harus melakukan cropping secara manual.

Mengubah Format Penyimpanan Gambar

Statically menyediakan 2 pilihan format penyimpanan gambar. Jika tidak kamu tentukan sebelumnya, gambar hasil tangkapan layar yang dibuat akan disimpan dalam format PNG. Tapi sebenarnya, Statically juga menyediakan format gambar JPG atau JPEG untuk hasil screenshotnya.

Adapun untuk pengaturan format gambar adalah dengan memakai kode berikut ini:

https://cdn.statically.io/ss/url-kamu?type=png
https://cdn.statically.io/ss/url-kamu?type=jpeg

contoh:

https://cdn.statically.io/ss/www.oom.web.id?type=jpeg

Kamu bisa memilih salah satu diantara 2 format gambar tersebut. Perbedaannya, kualitas gambar screenshot pada format PNG lebih bagus dan lebih jelas jika dibandingkan dengan format JPG. Tapi ukuran file pada gambar PNG jauh lebih besar jika dibandingkan gambar JPG.

Mengatur Kualitas Gambar Hasil Screenshot

Setelah kita menentukan tipe atau format gambar hasil screenshot di atas, kita juga bisa mengatur kualitas gambar screenshot yang nantinya dihasilkan. Kualitas ini ditentukan dengan nilai antara 0 hingga 100 dimana 100 adalah gambar dengan kualitas terbaik yang bisa diperoleh.

Untuk mencobanya, gunakan format berikut di browser kamu:

https://cdn.statically.io/ss/url-kamu?quality=100

contoh:

https://cdn.statically.io/ss/www.oom.web.id?quality=75

Cara Screenshot Satu Halaman Penuh

Screenshot 1 halaman penuh atau yang disebut full web page screenshot berarti mengambil tangkapan layar dari bagian atas hingga ujung paling bawah dari situs web yang dituju. Bagaimana jika website tersebut memakai fitur infinite scrolling? Tenang, yang diambil hanya sampai fungsi readmore terakhir.

Cara screenshot satu halaman penuh di android atau di komputer bisa dilakukan dengan mengetikkan format berikut di browser kamu:

https://cdn.statically.io/ss/url-kamu?fullPage=true

contoh:

https://cdn.statically.io/ss/www.oom.web.id?fullPage=true

Apakah yang diambil adalah screenshot dari tampilan mobile? Bukan, hasil screenshot masih dalam bentuk tampilan desktop dengan resolusi maksimum width adalah 1280. Ini juga berlaku meskipun kamu menambahkan parameter m=1 atau amp=1. Untuk mengubahnya menjadi tampilan mobile kamu bisa membaca langkah selanjutnya.

Ambil Screenshot Mode Mobile atau Versi HP

Jika kamu ingin membuat gambar screenshot halaman situs web dalam versi mobile atau seperti jika dibuka lewat smartphone, kamu bisa menggunakan format berikut ini:

https://cdn.statically.io/ss/URL?mobile=true

contoh:

https://cdn.statically.io/ss/www.oom.web.id?mobile=true

Gambar screenshot nantinya akan memiliki tampilan yang sama seperti saat kamu buka lewat HP atau android. Dalam mode ini, kamu tidak perlu menambahkan parameter khusus seperti m=1 atau amp=1 dan sebagainya karena Statically secara otomatis akan menyesuaikan parameter browser agent di server mereka.

Menggabungkan Parameter atau Format di atas

Sekarang kita memasuki langkah terakhir yang akan dipelajari, yakni bagaimana cara menggabungkan beberapa fungsi atau parameter di atas menjadi satu atau mengkombinasikannya sesuai kebutuhan.

Pada dasarnya, parameter atau format yang disediakan Statically di atas sifatnya fleksibel dan bisa kamu gabung atau kombinasikan dengan parameter lainnya. Misalnya, kamu bisa menyimpan gambar screenshot 1 halaman penuh mode mobile dengan format JPG dan kualitas gambar 80. Maka kamu bisa menggabungkan kodenya menjadi seperti ini:

https://cdn.statically.io/ss/url-kamu?fullPage=true&mobile=true&type=jpeg&quality=80

Atau jika kamu ingin mengambil screenshot tampilan desktop format PNG dengan ukuran lebar 800 dan kualitas gambar 60 maka bisa menggunakan format di bawah ini:

https://cdn.statically.io/ss/url-kamu?w=800&quality=60

Memasukkan Gambar Screenshot ke dalam Postingan

Buat kamu yang enggan repot, Statically tidak mengharuskan semua penggunanya untuk menyimpan gambar hasil tangkapan layar untuk kemudian diunggah lagi. Kamu bisa langsung memasukkannya ke dalam postingan seperti gambar pada umumnya.

Bedanya, yang kamu masukkan bukanlah URL dari file gambar, tapi link ke layanan screenshot dari Statically tadi. Contohnya saya ingin memasukkan screenshot situs Oom.web.id ini dalam ukuran 640x480 format JPG dan kualitas gambar 90. Maka saya memasukkan script berikut ini:

<img src="https://cdn.statically.io/screenshot/oom.web.id?quality=90&type=jpeg&w=640" width="640" height="480" alt="Contoh Screenshot Oom.web.id" title="Hasil Screenshot dari situs Oom.web.id" />

Maka hasilnya adalah seperti pada gambar di bawah ini:

Catatan: Berhubung kita tidak bisa menggabungkan parameter width dan height, kita hanya bisa mengatur ukuran lebar (W) dan memasukkan secara manual ke dalam tag img dengan rasio gambar 4:3. Contoh, jika W=640 maka dalam tag HTML ditulis width="640" height="480", jika w=480 maka width="480" height="360". Dan seterusnya.

Itulah panduan lengkap cara ambil screenshot halaman web paling mudah yang bisa dilakukan di android, ios, atau windows pc. Jika kamu masih merasa bingung atau kesulitan, silahkan tinggalkan komentar pada kotak yang tersedia di bawah ini.