Cara mengubah kualitas gambar posting blogger via URL

Kali ini saya mau berbagi buat kalian yang suka nulis blog dalam mode HTML, bukan kompose. Karena yang kita pelajari saat ini adalah resizing atau mengubah ukuran suatu gambar agar sesuai dengan standarisasi website dan tidak membebankan loading suatu halaman.

Untuk meresize gambar pada blogger kita bisa mengganti ukuran nilainya melalui URL. Biasanya kebanyakan orang menggunakan gambar medium, alisa dengan ukuran 360px, sehingga kalau kita buka dari browser desktop gambar akan terlihat blur dan tidak bagus. Tapi bila memggunakan ukuran tinggi ukuran normal, gambar tetap bagus dilihat akan tetapi loadngnya cukup lama.

Nah untuk mengatur ukuran gambar agar tepat, tidak blur, ukuran sizenya juga kecil kuran dari 100kb akan mempercepat pemuatan sebuah halaman. Secara default blogger akan menampilkan gambar dalam ukuran normal, ukuran ini biasanya berskisar 300px hingga 500px. Jika sobat menggunakan css responsive untuk mengubah ukuran gambar, biasanya akan blur pada layar desktop.

Berikut ini beberapa nilai ukuran gambar yang bisa sobat terapkan saat menambahkan gambar pada blog. Khususnya untuk platform blogspot ya. Kalau buat wp silakan cari plugin sendiri.

Gambar Original

Ukuran default, blogger akan menampilkan gambar asli dengan ukuran original jika menggunakan URL seperti ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s1600/AlumniSMKPGRI2018.jpg

Loadnya Pasti Lama:

Mengatur Maksimal Lebar

Lebar gambar bisa diatur dalam satuan px sementara tinggi gambar akan menyesuaikan secara otomatis.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/w300/AlumniSMKPGRI2018.jpg

Hasilnya Blur ya wkwkwk:

Mengatur Maksimal Tinggi

Sama seperti diatas, maksimal tinggi gambar bisa diatur sementara lebar menyesuaikan secara otomatis.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/h200/AlumniSMKPGRI2018.jpg

Hasilnya sama saja wkwkw😂:

Mengatur Maksimal Lebar dan Tinggi

Pada gambar dibawah ini ukuran lebarnya tidak akan kebih dari 300px dan tinggi gambar juga tidak akan lebih dari 200px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/w300-h200/AlumniSMKPGRI2018.jpg

Hasilnya:

Agar gambar bisa di Unduh

Tambahkan -d pada ukuran terakhir maks size pada gambar kita. Dengan demikian, ketika ada orang membuka URL gambar tersebut akan otomatis mengnduhnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s1600-d/AlumniSMKPGRI2018.jpg

Hasilnya Klik untuk melihat :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s1600-d/AlumniSMKPGRI2018.jpg

Memotong Tengah

Jika sobat ingin hanya menampilkan gambar yang berada ditengahnya saja tambahkan -c

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s1600-c/AlumniSMKPGRI2018.jpg

Hasilnya:

Memotong Tengah Bulat

Jika sobat ingin memangkas gambar dengan ukuran bulat tapi tidak transparan tambahkan -cc

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s500-cc/AlumniSMKPGRI2018.jpg

Hasilnya:

Memotong Pintar

Jika sobat ingin memangkas gambar hanya ingin menyertakan bagian pinggirnya saja gunakan -p.
Saat sobat menambahkan -p ke parameter ukuran akhir, algoritma pintar Google akan memeriksa gambar dan memilih area yang paling berharga dalam gambar untuk dikembalikan sebagai versi krop.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61h2PAusDAcqjh_obkT9GlEbevQYamiyn3yDhrsYYVSwMi-4lVpXl6tnRMXvZcFovNinB1GufRIZ2gYRs4fiZnxuMFN3SCq28iprYCJEqHzRoRfuC_MYD4bc5Yj9t79v8mlBs-kJmAJp-/s500-p/AlumniSMKPGRI2018.jpg

Hasilnya:

Mengkombinasikan Parameter

Parameter yang saya kasih diatas bisa dikombinasikan, seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH2odLxYC1EF-cWVJq4nlxl8RpTmdjqJY21C6j2CDBylrSnkkqAw5hWgh_m8AYe-fFNzNPZrOampamI0IKuEPVhuHOIGVcxtJaoa4JzI3YM1T1gOSk3FGohZjDhoNWqa7rPHojsy2R5t8J/w300-h200-d/kuota-murah.jpg

Saya menyukai ini, ukuran gambar bisa disesuaikan secara kustom. Bahkan jika kita ingin menambahkna gambar mini saja bisa, tetapi kebanyakan orang menggunakan gambar dengan ukuran normal dan dibantu dengan css responsive. Tentu saja hal tersebut akan memperlambat loading halaman, kecuali pemiliknya memasang kode LazyLoad Gambar.

Catatan Penting!:
Gambar diatas terlihat sama ukuranya karena saya menggunakan kode CSS gambar responsive. 50% kecil dan 100% full image. Yang membedakan adalah ukuran asli gambar beserta kualitasnya.

Bagi pengguna fitur kompose sudah kalian tidak akan pernah melihat kode gambar atau link URL gambar, menurut saya menulis blog pada fitur kompose memang sangat mudah. Tinggal ketik drag & drop, tambahkan center, link, dll. Namun dibalik itu semua kompose punya kelemahan tersendiri, yaitu kode HTML yang dihasilkan dari fitur tersebut sangat berantakan sekali.

Seandainya satu artikel sobat edit berulang kali dengan mode kompose, bisa saya pastikan suatu saat tampilan artikelnya jadi jelek. Font sudah nggak keruan, warna background entah apa, ukuran teksnya mungkin kekecilan.

Hal ini terjadi karena fitur kompose ini tidak menggunakan teknologi kecerdasan buatan, melainkan hanya menggunakan teknologi kemampuan program javascript pada browser. Apabila kamu membuat teks berwarna biru, kemudian suatu saat kamu kembalikan lagi ke warna awal teks tersebut masih mempunyai kode HTML namun warnanya menyerupai warna semula. Kebanyakan kode HTML pada artikel bisa membua pemblokiran dom dan halaman menjadi lebih lambat dimuat.

Rekomendasi Terbaik:
Skrip Lazy Load mgid versi kedua, versi lengkap onscroll

asiknya nulis blog dengan kode html, gak perlu kemampuan ekstra

Mau ngoding tapi gak punya PC, Nih Tips ngoding di android

Cara membuat website layanan video streaming sederhana

Cara membuat server aplikasi ujian android CBT/FlyExam