Cara Edit Gambar Blogger Melalui URL Parameter

Daftar Isi

Tahukah kamu bawah kita bisa mengedit atau menyetting gambar di Blogger dengan mudah tanpa perlu software atau aplikasi tambahan? Kita bisa edit gambar di Blogger hanya melalui URL gambarnya saja.

Untuk kamu yang penasaran dan ingin tahu lebih jauh tentang bagaimana caranya, silahkan simak penjelasan singkat saya berikut ini.

Sample Gambar

Disini saya akan menggunakan sampel gambar logo ASIBUKA di bawah ini:

URL dari gambar di atas adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s0/ASIBUKA-Blue.png

Cara membaca URL tersebut adalah seperti ini:

• https:// = protokol keamanan.
• blogger.googleusercontent.com = server yang digunakan untuk host gambar.
• /img/b/R29vZ2xl/ = folder dari gambar.
• AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80 = Kode enkripsi dari file gambar.
• s0 = format file
• ASIBUKA-Blue.png = Nama file dan ekstensi gambar.

Nah, untuk mengedit atau setting gambar yang di upload di Blogger, kita hanya perlu edit bagian format file nya saja.

Untuk mengeditnya silahkan kamu gunakan format-format berikut.

1. Kualitas Gambar (size)

Untuk mengubah atau mengatur ukuran gambar (size) kamu bisa gunakan parameter s diikuti dengan ukuran dalam piksel.

Contohnya: s200, berarti ukuran atau kualitas gambar menjadi 200 piksel.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s200/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang bisa kamu lihat kualitas gambar otomatis berubah menjadi 200 piksel.

Catatan

• s0 bukan berarti kualitasnya menjadi 0 piksel tapi berarti ukuran size tidak ditentukan dan gambar akan di format menggunakan kualitas aslinya.
• s1600 adalah batas maksimal kualitas piksel yang bisa diterapkan dan merupakan setting untuk original size. Jika lebih dari 1600, maka sistem akan menganggap parameter error (gambar tidak muncul) atau format dikembalikan ke s0.

2. Lebar Gambar (width)

Untuk mengubah atau mengatur lebar gambar (width) kamu bisa gunakan parameter w diikuti dengan ukuran dalam piksel.

Contohnya: w300, berarti lebar gambar menjadi 300 piksel.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/w300/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang bisa kamu lihat lebar gambar otomatis berubah menjadi 300 piksel.

Catatan

Ukuran lebar gambar akan diset sesuai ketentuan dan untuk tingginya akan menyesuaikan secara otomatis dengan rasio ukuran aslinya. Misalnya ukuran asli gambar 1280 piksel dan tinggi 960 piksel (16:9). Jika lebar diformat menjadi 160 piksel maka tinggi akan otomatis menjadi 90 piksel.

3. Tinggi Gambar (height)

Untuk mengubah atau mengatur tinggi gambar (height) kamu bisa gunakan parameter h diikuti dengan ukuran dalam piksel.

Contohnya: h100, berarti tinggi gambar menjadi 100 piksel.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/h100/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang bisa kamu lihat, tinggi gambar otomatis berubah menjadi 100 piksel.

Catatan

Ukuran tinggi gambar akan diset sesuai ketentuan dan untuk lebarnya akan menyesuaikan secara otomatis dengan rasio ukuran aslinya. Misalnya ukuran asli gambar 1280 piksel dan tinggi 960 piksel (16:9). Jika tinggi diformat menjadi 90 piksel maka lebar akan otomatis menjadi 160 piksel.

4. Lebar dan Tinggi Gambar

Untuk mengubah ukuran lebar dan tinggi gambar kamu bisa gunakan parameter w dan h diikuti dengan nonimal kualitas gambar dalam pixel dan digabungkan menggunakan tanda strip -.

Contohnya: w160-h90, berarti lebar gambar menjadi 160 piksel dan tinggi 90 piksel.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/w160-h90/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang bisa kamu lihat, lebar dan tinggi gambar otomatis berubah menjadi sesuai ketentuan piksel yang kamu buat.

Catatan

• Jika rasio pengaturan lebar dan tinggi yang kamu masukkan berbeda jauh dengan gambar aslinya, biasanya fungsi dari parameter h (tinggi) tidak digunakan dan hanya menerapkan fungsi parameter w (lebar) saja.
• Jika kamu mau menerapkan keduanya tanpa kendala, kamu bisa menerapkan fungsi parameter cropping.

5. Center Croping (Ambil Tengah)

Kamu bisa mengambil bagian tengah dari gambar sesuai ketentuanmu menggunakan parameter c setelah parameter ukuran (size) atau parameter lebar dan tinggi (wXXX-hXXX).

Contohnya: w100-h100-c, Berarti lebar gambar akan menjadi 100 piksel dan tinggi gambar menjadi 100 piksel dihitung dari tengah gambar.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/w100-h100-c/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang kamu lihat, bagian yang muncul hanyalah bagian tengah sesuai ukuran yang sudah ditentukan saja.

Catatan

Parameter ini harus diawali dengan parameter ukuran atau lebar dan tinggi. Tanpa itu, maka parameter ini tidak akan berfungsi.

6. Center Croppping dengan Circular Mask

Kamu bisa mengambil bagian tengah dari gambar sesuai ketentuanmu dan memberi efek masking lingkaran secara otomatis menggunakan parameter cc setelah parameter ukuran (size) atau parameter lebar dan tinggi (wXXX-hXXX).

Contohnya: w100-h100-cc, Berarti lebar gambar akan menjadi 100 piksel dan tinggi gambar menjadi 100 piksel dihitung dari tengah gambar dan diambil bagian centernya untuk muncul dalam bentuk lingkaran.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/w100-h100-cc/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang kamu lihat, bagian yang muncul hanyalah bagian tengah saja, namun efek masking tidak terlihat karena background dari gambar adalah transparan. Untuk melihat secara jelas, silahkan coba dengan gambar yang tidak transparan.

Catatan

Parameter ini efektif digunakan untuk gambar yang backgroundnya tidak transparan. Jika tidak transparan, maka efek masking tidak akan terlihat jelas.

7. Smart Cropping

Kamu bisa menerapkan fitur smart cropping dimana sistem akan melakukan cropping pada gambar dengan mengambil bagian yang dirasa penting untuk ditampilkan dari gambar dengan ukuran yang sesuai ketentuanmu menggunakan parameter p setelah parameter ukuran (size) atau parameter lebar dan tinggi (wXXX-hXXX).

Contohnya: w100-c100-p, Berarti lebar gambar akan menjadi 100 piksel dan tinggi gambar menjadi 100 piksel lalu sistem akan menentukan secara otomatis bagian mana dari gambar yang akan diambil untuk ditampilkan.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/w100-h100-p/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang kamu lihat, bagian yang muncul hanyalah bagian yang dianggap relevan dan perlu tampil saja dan ukuran sesuai dengan apa yang sudah kamu tentukan.

Catatan

• Parameter ini seringkali tidak berfungsi optimal pada gambar-gambar yang tidak mempunyai objek fokus.
• Parameter ini berkerja dengan baik ketika gambar memiliki kontras warna yang baik ataupun ada elemen yang familiar seperti teks atau gambar wajah.

8. Warna Background

Kamu bisa mengubah warna background dari gambar kamu jika kamu mau menggunakan parameter -rj dan c0x[kode hex warna]. Dengan begitu, kamu tidak perlu edit gambar kamu sedemikian rupa jika kamu perlu mengubah background dari gambar kamu.

Contohnya: s300-rj-c0xff0000, Berarti kualitas gambar menjadi 300 piksel lalu background dari gambar akan berubah menjadi merah karena saya menerapkan kode hex #FF0000 yang mana itu adalah warna merah.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s300-rj-c0xff0000/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Seperti yang kamu lihat, warna dari background gambar yang sama berubah menjadi merah.

Catatan

• Parameter ini optimal digunakan untuk gambar PNG yang backgroundnya transparan. Untuk gambar yang tidak transparan, kurang efektif karena background tidak akan terlihat.
• Kamu bisa menggunakan parameter -rj saja jika mau dan hasilnya background akan menjadi default yaitu #000000 atau hitam.

9. Download Link

Kalau kamu mau share gambar yang bisa di download, kamu bisa pakai parameter -d setelah parameter size ataupun ukuran lainnya.

Contohnya: s300-d, Berarti kualitas gambar menjadi 300 piksel dan bisa langsung di download.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s300-d/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Gambar akan tampil sesuai setting-an kualitas kamu dan ketika kamu klik bisa langsung mengunduh gambar.

Catatan

• Gunakan parameter ini pada anchor link href='' dan bukan pada src='' gambar. Jika digunakan pada src='' maka gambar tidak akan tayang dan akan langsung diunduh ketika loading terjadi.
• Pastikan kamu menyesuaikan ukuran atau kualitas dari gambar sebelum parameter -d karena kualitas itulah yang akan didownload nantinya. Contoh: kamu menerapkan s300-d, maka gambar yang akan di-download adalah gambar kualitas 300 piksel-nya dan bukan yang originalnya.

10. XML Sitemap

Kamu bisa menunjukkan XML Sitemap dari gambar menggunakan parameter -g.

Contohnya: s300-g, Berarti kualitas gambar menjadi 300 piksel dan XML Sitemap akan ditunjukkan melalui link.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s300-g/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Gambar akan tampil sesuai setting-an kualitas kamu dan ketika kamu klik bisa langsung menampilkan XML Sitemap dari gambar.

Catatan

Gunakan parameter ini pada anchor link href='' dan bukan pada src='' gambar. Jika digunakan pada src='' maka gambar tidak akan tayang dan akan langsung diunduh ketika loading terjadi.

11. Next-gen Auto Format (webp)

Kamu bisa meng-convert gambar kamu menjadi .WEBP (gambar yang size-nya lebih kecil daripada .JPG atau .PNG) menggunakan parameter -rw.

Contohnya: s300-rw, Berarti kualitas gambar menjadi 300 piksel dan format gambar akan berubah menjadi WEBP.

Penerapannya adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj1f_OforJpRs9XYLVgHnfsPlEmGHuTp8QqIG1AMsKR_3o4Pgtm0koe8Th_45KPLvKCMT-0Im_JaFSff2LjY7aTvmGlueBwcu0O2tBxwAuhqwBQD5r6jPVGk5tjoEWdS44_eCw1lnQG1ukJSOzOhORyBnUCMs1wMA1Uj7J4ewp6Q407UhlVKaZvJ6F80/s300-rw/ASIBUKA-Blue.png

Maka Hasilnya akan menjadi seperti ini:

Gambar akan tampil sesuai setting-an kualitas kamu dan format sudah menjadi .WEBP. Untuk membuktikannya, silahkan kamu coba download gambar di atas.

Catatan

Format akan otomatis berubah menjadi next-gen image atau webp jika browser support format gambar tersebut. Jika tidak, maka gambar akan ditampilkan pada format asalnya.

Saran Penggunaan dan Catatan Penggunaan

Saran

Silahkan gunakan metode ini untuk menampilkan thumbnail yang lebih baik tanpa perlu edit-edit gambar. Selain itu, format next-gen juga akan membantu loading blog kamu menjadi semakin cepat.

Catatan

Ada beberapa hal yang perlu diketahui dalam implementasi parameter-parameter di atas. Beberapa diantaranya adalah:

1. Parameter c atau cc tidak bisa digunakan bersamaan dengan parameter p karena akan terjadi error parsing dan gambar tidak akan dimuat.
2. Parameter ukuran (size) s tidak bisa digunakan bersamaan dengan parameter lebar w dan tinggi h atau keduanya karena akan terjadi error parsing dan gambar tidak akan dimuat.
3. Parameter d dan g hanya boleh digunakan untuk anchor link dari gambar saja atau gambar akan error dan tidak akan dimuat.

Penutup

Sebenarnya masih ada beberapa parameter lagi seperti -mo, -k, -no, -nu, namun saya belum menemukan referensi tentang fungsi dari parameter-parameter tersebut. Jika nanti sudah saya temukan, maka akan segera saya update kembali tulisan ini.

Jika kamu punya informasi lain tentang parameter untuk edit gambar dari Blogger, boleh ditambahkan melalui kolom komentar agar bisa saya update juga artikel ini.

Jika ada yang kurang jelas atau ingin didiskusikan, silahkan sampaikan saja melalui kolom komentar. Semoga rangkuman saya ini bermanfaat. Terima kasih telah berkenan membaca dan sampai jumpa di tulisan saya lainnya.