Sunday, August 19, 2018

Manipulasi Gambar dengan URL pada Blogger, Rahasia URL Gambar Blogger

Ilustrasi Manipulasi Gambar - Nizwar ID
Bingung? Cape ngurusin ukuran gambar buat upload ke artikel Blog biar SEO, Blog lo kenceng diakses dan gambarnya auto Compress, jadi lo gaperlu bela-belain buat Download > Compress > Upload, emang kalo diniatin itu ga masalah, tapi kalo artikel yang mau di UP punya banyak gambar, mau compress satu-satu, cape euy.

Disini gue mau bahas sebuah fungsi yang udah disediakan sama Blogger buat memanipulasi dan compress gambar, sebanrnya hal itu bisa dilakukan dengan memanipulasi URL gambar yang kita upload, dan sebenarnya #lagi (juga), setelah upload gambar maka ukuran gambar akan otomatis di konversi ke ukuran 340x213px.

Ukuran ini tentu ada keuntungan juga kerugian, keuntungannya, ukuran gambar bakal menurun drastis banget jadi aksesnya bisa cepettt, sementara kerugiannya ukuran gambar akan ketinggian pas diakses di perangkat yang lebarnya 340px kebawah, lengkapnya pernah gue bahas di Kompres Otomatis Gambar di Artikel Blogger.

Di artikel itu juga gue udah saranin pake ukuran Original, kaya gambar dibawah ini, alesannya biar gambar bisa lebih responsiv pas diakses dari berbagai resolusi perangkat.
Tutorial Original - Nizwar ID
Tapi itu bukan inti artikel gue kali ini, sesuai judulnya, mari kita bahas cara manipulasi gambar melalui URL.

Gambar Original

mari awali penjelasan dengan gambar dibawah ini 😘😘.
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/s1600/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
bisa liat kan tulisan yang gue tebalkan diatas, yaitu s1600, nah kata yang gue tebalin diatas adalah ukuran maksimal default yang digunakan editor Blogger, maksudnya mau segede ato sekecil apapun gambar yang lo upload (Width atau Heightnya lebih dari 1600px) editor akan otomatis konversi ukuran itu ke s1600, efeknya ukuran gambar yang lo upload ga bisa lebih dari 1600px, ngerti ga 😂?.

Gini... Misalnya lo upload diatas resolusi itu, pastikan lo gunakan angka lebih besar sebagai default dengan mengubah angka s1600, misalnya nih lo Upload gambar ukuran 4272x2848, maka ganti s1600 dengan s4272 atau yang lebih tinggi, misalnya menjadi s5000, maka gambar akan jadi benar-benar berukuran ASLI.

Spesifikasi Ukuran Gambar, Rasio Otomatis

Konsepnya sama Seperti diatas, kalo lo mau upload gambar dengan resolusi original maka gunakan angka sesuai atau lebih besar, disini lo juga bisa mengatur ukuran ke lebih rendah, jadi Artikel lo dijamin bakal lebihcepat diakses, karna ukuran dikecilkan + gambar di Compress, contoh gambar dibawah.
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/s500/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
dari paramater yang gue tebalin diatas s500 artinya Size TIDAK AKAN LEBIH DARI 500, mau itu Width (Lebar) atau Height (Tinggi), pokonya gaboleh!.

Spesifikasikan Batas Ukuran Width (Lebar)

Ga hanya membatasi gambar dengan ukuran resolusi, lo juga bisa ubah dengan spesifikasi tertentu, misalnya dalam ukuran Lebar (Width) (Ukuran tinggi otomatis), contohnya kaya gambar dibawah ini.
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w500/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Gambar diatas, paramater yang gue gunakan adalah w500, artinya Width TIDAK AKAN LEBIH DARI 500px, sementara Tingginya ga gue setting, jadi tingginya otomatis disesuaikan dengan rasio gambar. 

Spesifikasikan Batas Ukuran Height (Tinggi)

Ga hanya lebar yang bisa, tingginya juga bisa dong, fungsi ini kebalikan diatas, dimana kita mengspesifikasikan batas ukuran Height sementara Widthnya otomatis mengikuti rasio gambar, contoh gambar seperti dibawah ini
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/h200/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Gambar diatas gue gunakan parameter h200, artinya Height TIDAK AKAN LEBIH DARI 200px, sementara lebarnya ga gue setting, jadi bisa dibilang lebarnya otomatis mengikuti rasio gambar.

Spesifikasikan Batas Ukuran Width x Height (Lebar x Tinggi)

Nah ini jika kedua fungsi diatas (Width dan Height) di satukan, maka jadi kaya gini nih.
Mochamad Nizwar Syafuan - Nizwar ID
 Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w600-h200/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Dari gambar diatas gue setting Width GA AKAN LEBIH DARI 600px, sementara Heightnya GA AKAN LEBIH DARI 200px (#santai dong, jan ngegas), nah disini lo bisa ngertikan.

Tetapkan Ukuran dan Crop Tengah Gambar

Dengan fungsi ini, kita bisa ngeCrop gambar dengan mengkolaborasi kedua fungsi diatas, bisa juga menggunakan parameter s1600 atau ukuran gambar lainnya
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w300-h300-c/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Gambar diatas ada w300 yang artinya Width Ga akan lebih dari 300 (cape ngegas gue), lalu h300 yang artinya Heightnya ga akan lebih dari 300 dan diakhiri dengan C yang artinya gambar itu di Crop ditengah sesuai ukuran yang disebutkan alias di paskan dengan w300 dan h300, ngerti ga lo?

intinya parameter c itu bagian pemotongan yang disesuaikan dari Rasio yang kita deklarasikan sebelumnya, misal w300, h300 atau s300 maka gambar bakal diambil Tengahnya aja dengan rasio disesuaikan dengan ukuran gambar yang mau diambil atau yang udah disesuaikan.

Crop Bagian Tengah lalu Bulatkan

nah Fungsi -c juga punya teknik keren, dimana dengan parameter ini lo bisa buat gambar berbentuk bulat kaya gambar ini.
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w300-h300-cc/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Ternyata didalam algoritma penggunaan crop ini juga dilengkapi fitur buat buletin gambar kaya diatas, lo cukup  nambahin huruf c dibelakang parameter -c, jadinya -cc.

Crop Bagian Penting Secara Otomatis

canggihnya ada sebuah parameter dimana google memberikan algoritma yang gatau gimana cara kerjanya 😂, pokonya karena parameter ini, fungsi Crop bakal mengarah ke bagian penting, misalnya ada Muka Orang digambar, maka gambar otomatis di Crop pada bagian orang itu, contoh :
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w200-h400-p/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Dari gambar diatas mungkin w200 sama h400nya ga perlu gue jelasin, cukup fokus pada parameter -p, itulah yang bikin gatau gimana logikanya bisa ngecrop dibagian muka gue 😂.

Buat Gambar Otomatis Didownload

Nah fitur yang ini cocok buat blog Wallpaper, dimana dengan akses link gambar ini, gambar otomatis didownload (tanpa preview), coba klik gambar dibawah kalo ga pecaya 😘.
Mochamad Nizwar Syafuan - Nizwar ID
Urlnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/s1600-d/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
Disini menggunakan parameter -d, dan kalo bisa kodenya jangan diterapkan ke Img Src, tapi di A href, jadi ketika user klik link, gambarnya otomatis di download.

Memberi Warna Background Gambar

Nah disini lo bisa memberi warna pada background gambar, misalnya gambar berupa PNG yang gada backgroundnya kaya gambar dibawah hehe..
Mochamad Nizwar Syafuan - Nizwar ID
Url gambarnya :
https://1.bp.blogspot.com/-Tynb2xp94Aw/W3k8Ww0RnzI/AAAAAAAAADI/LlPxciIIsqI3o-epevtDwapMozy78IcVwCEwYBhgL/w300-h300-cc-rj-c0xda3d16/Mochamad%2BNizwar%2BSyafuan%2B-%2BNizwar%2BID.jpg
dari parameter yang gue tebalkan diatas, gue gunakan -cc untuk buat gambar gue jadi transparan dibelakangnya (harifahnya gitu, tapi karna jenis gambar jpg, jadi defaultnya putih ga transparan), lalu gue putuskan ganti warna (dari putih) / memberi warna (kalo transparan) dengan parameter rj-c0xWarnanya (pada gambar gue pake da3d16).

Nah segitu aja penjelasan gue 😂, sebenarnya masih ada lagi parameter-parameter rahasia lainnya, dan gue udah kesana kemari buat cari dokumentasinya, ga ketemu-ketemu 😥, yang gue tau masih ada parameter -k, -nu, -no tapi gatau buat apa fungsinya 😥, mungkin ada yang tau bisa komentar, kita diskusi bareng.

Oh iya Semua gambar itu berasal dari 1 Gambar yang gue mainin parameternya (cek linknya kalo ga pecaya) dan url yang gue ubah hanya di Img SRCnya aja, sementara di A Href (selain parameter dibagian ...Otomatis didownload) ga gue ikut ubah 😅, jadi kalo mau liat linknya pake Inspect Element aja ea 😘, Okeh sekian dari gue.. See ya!

Cari dengan kata kunci :

  • Rahasia URL gambar Blogger.

  • Parameter URL Gambar Blogger.

  • Manipulasi Gambar dengan URL Blogger.

  • Compress gambar pada Blogger.

Bagikan Ke Temen-Temen mu!

Related

2Komentar

avatar

Kalo boleh tau lo pake template apa gan bagi dong

Balas
avatar

beli gan, dari https://www.Internalku.com

Balas