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
Default pengaturan gambar yang diunggah

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

https://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/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://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/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://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/s500/resize-crop-blogger-image-from-URL.jpg

Mengatur gambar (resize/crop) yang diunggah melalui blogger
Preview s500
sLebar-c

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

https://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/s500-c/resize-crop-blogger-image-from-URL.jpg

Mengatur gambar (resize/crop) yang diunggah melalui blogger
Preview s500-c
wLebar-hTinggi

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

https://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/w500-h200/resize-crop-blogger-image-from-URL.jpg

Mengatur gambar (resize/crop) yang diunggah melalui blogger
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://2.bp.blogspot.com/-5-WhRkvkgEA/WVRjCszUb7I/AAAAAAAABsU/8NfE6HsBjXkyoZQv-_nNcHDMZYB10UGAQCPcBGAYYCw/w200-h300-c/resize-crop-blogger-image-from-URL.jpg

Mengatur gambar (resize/crop) yang diunggah melalui blogger
Preview w200-h500-c

Semoga bermanfaat.

0 comments:

Post a Comment

Read the post first!