L

Pengalaman Melelahkan Mengoptimasi Ratusan Konten Gambar di Blog Sekaligus Tidak Sejak Awal


Bismillahirrohmanirrohim


Property of Lukmanul Hakim Watermark V2

Saya terpaksa pending banyak sekali draft artikel di Blog saya ini karena saya merasa harus sesegera mungkin mengoptimasi seluruh konten gambar di Blog saya ini 😀

Yah, namanya juga “Blogger Newbie”, seiring berjalannya waktu dan lamanya berkutat dengan aktivitas blogging, tentu banyak sekali “Bug” yang saya tau terhadap diri saya sebagai Penulis sekaligus Webmaster dan juga pada Blog saya ini beserta seluruh isinya.

 

Bukan Publish Lalu Lupakan Saja

Saya bukan tipikal orang yang taunya hanya nulis lalu publish saja 😀

Saya akan selalu memaintenance seluruh apa pun yang berkaitan dengan Blog saya ini sampai seoptimal mungkin !

Optimasi itu mencakup namun tidak terbatas pada gaya penulisan, retorika bahasa, tipografi, konten gambar, security hardening, dsb.

Saat artikel ini saya tulis, usia Blog ini (bukan Domain) adalah kurang lebih sudah berusia 6 Bulan 🙂

Dan selama itu, ada ratusan konten gambar dan teks yang sudah saya produksi dengan Blog ini !

 

Sejak awal, target saya hanyalah bagaimana pun caranya, Blog saya harus memiliki banyak konten dalam waktu yang relatif singkat.

Itu bisa saya capai dengan cara memposting artikel minimal 1 artikel dalam 1 hari.

Dan untuk konten teks bisa dikatakan tidak banyak yang harus dibenahi, tapi tidak untuk konten gambar 😀

Sejak awal saya selalu mengupload konten gambar langsung ketika saya membuat artikel, dengan nama file sekenanya, judul gambar sesuai nama file gambar tersebut.

Ya memang tidak ada masalah, karena fokus utama saya memang konten berbasis teks alias artikel, bukan gambar.

Tapi, saya menimbun sebuah masalah kecil yang lama-lama menjadi masalah besar !

 

Salah Pilih Format Gambar

Sejak awal saya sudah salah dalam memilih format gambar ketika mencapture kebutuhan screenshoot untuk artikel-artikel saya.

Saya memilih format PNG yang merupakan format yang hanya menerapkan loseless compression. Seharusnya sejak awal saya memilih format JPG, karena format JPG itu adalah lossy compression.

Untuk memperbaiki kesalahan saya itu, saya menggunakan sebuah plugin bernama “PNG to JPG” yang bisa diinstall langsung melalui directory plugins di WP-Admin.

Nama File, Title, dan URL Slug yang Tidak Optimal

Perlu diketahui bahwa nama file akan secara otomatis menjadi URL Slug atau Path pada konten gambar itu sendiri.

Contoh: https://cdn.lukman.al-hakim.id/wp-content/uploads/2017/07/logo-lukmanul-hakim-v2.png

Untuk memperbaiki kesalahan terkait file name, saya menggunakan sebuah plugin yang sangat bermanfaat bernama “Media File Renamer”, dan sebagai pelengkap saya juga menggunakan plugin “Media Alt Renamer”. Fungsi plugins tersebut sesuai namanya adalah mengganti nama media file, dan mengganti Tag ALT pada konten media.

Pada free version dari plugin tersebut, kita memang hanya diizinkan mengubah nama file sama persis dengan judul/title pada gambar tersebut.

Maka, saya pun membuat format yang umum saja, sepeti penggunaan simbol titik dua “:” misalnya agar pengurutan file gambar menjadi lebih seragam pada kumpulan gambar pada artikel yang sama yang saling berkaitan, misalnya artikel tutorial.

Contoh: Trik Nama Akun Facebook: Berhasil Mengganti Nama Akun Facebook

Maka nama file yang akan otomatis digenerate adalah: trik-nama-akun-facebook-berhasil-mengganti-nama-akun-facebook.jpg

Ada banyak gambar terkait tutorial tersebut yang artikelnya bisa Anda baca disini.

Jadi, semua gambar akan diawali dengan kalimat: trik-nama-akun-facebook-

Nah itu kalau dibuka pada file explorer/manager, dan pengurutan file berdasarkan nama file, maka seluruh gambar yang terkait akan diurutkan sehingga manajemen-nya lebih mudah.

 

Lainnya, untuk gambar-gambar yang berdiri sendiri, misalnya gambar ilustrasi yang selalu ada pada setiap artikel, maka akan saya berkan awalan kata “Ilustrasi”, misalnya “Ilustrasi WWW”, dsb.

Karena sesuai namanya, gambar-gambar seperti itu hanya bersifat ilustrasi untuk menggambarkan isi dari artikel secara garis besarnya.

Gambar ilustrasi itu juga berfungsi sebagai thumbnail pada related post di Blog saya ini soalnya 😀

Dan sudah menjadi Standard Baku untuk menulis konten artikel berkualitas tinggi yang SEO Friendly dan Google AdSense Friendly 😀

 

Optimasi lainnya terkait URL Slug juga saya lakukan pada URL Slug dari sisi konten di WordPress itu sendiri, yakni URL ketika media file dilampirkan pada sebuah artikel. Jadi formatnya adalah: URL Slug Artikel/URL Slug Gambar.

Contoh: https://www.lukmanulhakim.id/trik-mengembalikan-nama-facebook-sebelumnya/trik-nama-akun-facebook-memilih-nama-akun-facebook/

Untuk mengubah URL Slug lampiran gambar itu, kita tidak perlu menggunakan plugins apa pun, dan kita bisa membuat URL Slug yang berbeda dengan Title.

Tapi saya memilih menggunakan URL Slug yang sama dengan Title Gambar, karena bayangkan saja ada ratusan gambar yang harus saya handle 😀

Jadi, saya cukup copy paster judul gambar pada form URL Slug-nya, dan akan otomatis dikonversi ke format yang sesuai, yakni spasi diganti strip, dan menggunakan huruf kecil semua.

 

Hanya satu hal yang tidak sangkup saya lakukan kali ini, yakni membuat Deksripsi untuk setiap gambar 😀

Waaaah bisa stress saya bro 😀

Seandainya saya sadar sejak awal, maka bisa dilakukan sejak awal kan ?

Tapi tenang saja sih, untuk Deksripsi dan bahkan Keterangan Gambar bisa dilakukan kapan-kapan saja dan secara bertahap, karena yang urgent menurut saya adalah Title, URL Slug, ALT, dan File Name.

Secara umum, apa yang saya lakukan diatas adalah Image Search Engine Optimization (SEO).

 

Optimasi Ukuran File dan Resolusi Gambar Maksimal

Untuk kebutuhan ini, saya memilih Lossy Compression, dan mengingat sebelumnya sudah saya migrasikan dari PNG ke JPG yang lebih baik dalam Lossy Compression.

Opsi Lossy Compression yang saya pilih pun yang Advanced 😀

Saya menggunakan layanan Imagify yang juga menyediakan Plugin bernama Imagify juga. Karena ukuran keseluruhan konten gambar saya lumayan besar, melebihi jatah gratisan per bulannya yang hanya 25 MB/Bulan dengan Limitasi maksimal ukuran file yang bisa diproses hanya 2 MB/File.

Maka saya pun membeli One-time Plan 1 GB seharga $9,99.

Saya memilih Imagify karena dari pengujian yang saya lakukan, ukuran file hasil Ultra Lossy Compression-nya yang terkecil dibandingkan layanan/plugin serupa lainnya.

Dan selain itu, juga karena pola penarifan layanan berdasarkan ukuran file, bukan jumlah file.

Sayangnya, saat artikel ini saya tulis, Imagify belum mendukung format *.webp, yakni menggenerate/convert file *.png/*.jpg menjadi *.webp sebagai tambahan gambar untuk kebutuhan Web Caching, seperti yang diterapkan pada Google PageSpeed Module for Nginx/Apache.

 

Hasilnya ?

Semula, total keseluruhan file gambar baik original file maupun seluruh thumbnail berbagai ukuran di Blog saya ini, sudah mencapai 450’an MB !

Namun ketika sudah saya optimasi, turun secara signifikan menjadi hanya 80’an MB saja !

Mantap kan ? 😀

Hasil akhir itu selain karena Lossy Compression, juga karena sudah diubah dari format PNG ke JPG, dan maksimal resolusi gambar originalnya dibatasi maksimal 1320p.

Perlu sobat ketahui, Resolusi paling ideal yang paling besar untuk kebutuhan Blog secara umum hanyalah 1320p saja, maksudnya untuk ukuran lebar (Width) akan lebih ideal jika hanya maksimal 1320 pixel saja, sedangkan untuk ukuran tinggi (Height) bebas, karena jika dipaksakan akan aneh 😀

Tapi defaultnya WordPress akan membuat satu XXLarge Thumbnail berukuran 1320×500 pixel, yang mana jika gambar originalnya memiliki ukuran tinggi lebih dari 500 pixel maka akan dipotong (Crop).

Saya membatasinya masih menggunakan Plugin Imagify, jadi seluruh gambar dengan resolusi diatas 1320p akan diubah skalanya (re-scale) ke 1320p (width) dengan ukuran height/tinggi menyesuaikan.

Dan tentu saja, Blog saya menjadi lebih cepat dan ringan ketika diakses ! 😀

 

Penerapan Watermark pada Gambar

Bagi saya, ini penting !

Gambar yang saya bubuhkan watermark adalah gambar yang merupakan hasil jepretan saya sendiri baik itu foto maupun screenshoot.

Selain itu, gambar yang sudah saya edit pun akan saya bubuhkan watermark.

Sebenarnya, bisa saja seluruh gambar baik yang bukan buatan saya sendiri saya bubuhkan watermark, karena setiap gambar di Blog saya ini memanfaatkan resource saya baik itu Server, Storage, dan Image Optimization berbayar !

Jadi, statement “Property of Lukmanul Hakim” itu berarti bahwa konten gambar itu berada di “Tanah” saya. Itu berbeda dengan statement “Copyright of …” dsb

Tapi saya tidak lebay 😀

Hanya file gambar yang benar-benar saya anggap perlu saja yang saya bubuhkan watermark.

Untuk kebutuhan ini, saya menggunakan Plugin “Image Watermark”, yang menurut saya yang terbaik saat ini dan gratis sepenuhnya.

Tips: Jika sudah membubuhkan watermark, pindahkanlah folder backup “iw-backup” di ~/public_html/wp-content/uploads ke direktori lain, misalnya pindahkan ke Home Directory saja. Karena sesuai namanya, isi dari folder itu adalah semua gambar original yang tidak dibubuhi watermark sama sekali, dan karena posisinya di directory public_html, maka tentu bisa diakses oleh semua orang.

 

Troubleshooting Thumbnail yang Kacau di Artikel

Dampak yang membuat kacau konten artikel setelah melakukan semua optimasi diatas, khususnya karena plugin Media File Renamer adalah thumbnail di artikel yang rusak, karena File Not Found.

Apalagi jika sebelumnya Anda kebiasaan menamai file dengan huruf besar kecil seperti “Ini adalah Nama File.jpg” sebelum mengupload ke WordPress, maka akan dikonversi menjadi “Ini-adalah-Nama-File.jpg”, maka ketika diubah oleh Plugin Media File Renamer, semuanya akan menjadi huruf kecil semua, dan gambar thumbnail di artikel akan hilang. Tidak akan bisa diatasi hanya dengan mengedit artikel saja.

Untuk masalah itu, kita perlu menggunakan sebuah plugin bernama “Regenerate Thumbnail” yang akan menghapus seluruh thumbnail lama dan membuatnya lagi secara keseluruhan, berbagai ukuran thumbnail yang dibutuhkan WordPress Default maupun Plugins lainnya yang membutuhkan ukuran thumbnail sendiri.

Alhamdulillah plugin ini gratis dan memberikan fitur Batch Process, sehingga bisa memproses ratusan gambar sekali jalan 😀

Plugin ini juga saya manfaatkan untuk menghemat quota dari plugin image optimizer seperti imagify, dsb

 

Kesimpulan

Ini pengalaman berharga bagi saya, dan semoga bermanfaat untuk siapa pun diluar sana yang baru mulai ngeblog.

Saran saya, optimasilah gambar di Blog Anda sejak awal !

Ingat, semua gambar di Blog kita sejatinya adalah konten juga yang bernilai dimata Search Engine, karena semua Search Engine saat ini mendukung Image Searching.

Dari gambar yang berkualitas, judul dan deskripsi yang optimal, maka akan mengundang lebih banyak Organic Visitor dari Image Search ke artikel bersangkutan dimana file gambar itu dilampirkan.


Protected by DMCA ! Protected by Premium Copyscape !

Hi, Bagaimana Menurut Anda ?


Jadilah Pembaca yang Baik dengan cara meninggalkan Komentar pada setiap Artikel Bermanfaat yang sudah dibaca (•‿•)


Komentar adalah salah satu Faktor Penyemangat bagi seorang Blogger, termasuk juga saya. Sebagai bukti bahwa saya tidak sendirian disini, mengingat ada banyak sekali Viewer (Pembaca) Artikel di Blog saya ini. Tolong, jangan pergi begitu saja.


Tinggalkan Komentar Anda disini meskipun hanya sekedar menyapa saya, mari kita bangun Forum Diskusi di Kolom Komentar pada setiap Artikel di Blog ini.


Oleh karena itu, saya sudah menyediakan Fasilitas Comment System terbaik saat ini yakni Disqus Comments System untuk membangun Komunitas Komentator yang lebih Advanced lagi, tidak diperlukan Account Disqus untuk bisa berkomentar disini, Anda cukup memasukkan Nama dan Email saja, tapi saya sarankan untuk memiliki Account Disqus jika Anda sering berkomentar di banyak Blog yang menggunakan Disqus Comment System.

Mungkin Anda juga menyukai



Facebook Comments



Disqus Comments



×
SSL Verified