Mengatur gambar (resize/crop) yang diunggah melalui blogger

Permasalahan ukuran gambar akan muncul saat blog memiliki banyak gambar yang memengaruhi proses muat halaman blog dalam browser. Ketika blog memiliki banyak gambar dengan ukuran resolusi yang besar maka proses muat halaman blog akan menjadi lama. Walaupun sebenarnya gambar yang dimaksud memiliki pengaturan ukuran yang kecil tetapi memiliki resolusi gambar yang besar, akan sama saja yaitu proses muat halaman akan lama. Penggunaan CSS width atau height hanya mengatur ukuran tampilan objek atau gambar saja, tidak memengaruhi resolusi gambar sehingga akan berpengaruh pada proses muat halaman blog.

Untuk menyelesaikan permasalah seperti ini, pihak Google terutama pada layanan Blogger, telah membuat fitur pengaturan gambar melalui URL gambar tersebut. Secara defult ketika mengunggah gambar, URL pada atribut src tag img akan memiliki pengaturan URL sesuai dengan yang diatur pada jendela dialog pengaturan saat mengunggah gambar. Misalnya pengaturan pada jendela dialog dipilih ukuran medium, yaitu sama artinya dengan ukuran 320px, lihat gambar berikut.

Default pengaturan gambar yang diunggah

Cara mengatur ukuran gambar adalah dengan mengganti variabel pada syntax URL berikut.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/s1600/resize-crop-blogger-image-from-URL.jpg

sUkuran

Secara default variabel untuk gambar yang diunggah adalah s1600. Ini memiliki arti atau nilai sama dengan ukuran atau resolusi asli (original) gambar yang diunggah. Syntax-nya sebagai berikut.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/s1600/resize-crop-blogger-image-from-URL.jpg

sLebar

Untuk mengatur ukuran dan resolusi gambar dengan mengatur ukuran lebar saja sedangkan ukuran tinggi bernilai auto atau mengikuti perbesaran lebar secara rasio.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/s500/resize-crop-blogger-image-from-URL.jpg

Preview s500

sLebar-c

Mengatur ukuran dan resolusi gambar secara persegi dan memotong gambar tersebut.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/s500-c/resize-crop-blogger-image-from-URL.jpg

Preview s500-c

wLebar-hTinggi

Digunakan untuk mengatur ukuran dan resolusi gambar melalui pengaturan ukuran lebar dan tinggi secara spesifik.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/w500-h200/resize-crop-blogger-image-from-URL.jpg

Preview w500-h200

wLebar-hTinggi-c

Digunakan untuk mengatur ukuran dan resolusi gambar melalui pengaturan ukuran lebar dan tinggi secara spesifik dengan pemotongan gambar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xcoeCoiNdRQ-cUNf_N2cIs5519wOEDBUUbVzeGoPHbJZngntvLZ_01YItrMK1xfbfRt_T8NP4E6M3vVQg3AfwxLK5ah-sZs_PcWsB-r9yjL8c1vnHsQLylYj3-hWDNGJK8klHurL1Cf/w200-h300-c/resize-crop-blogger-image-from-URL.jpg

Preview w200-h500-c

Semoga bermanfaat.