L

Jangan pakai Format Gambar PNG untuk Artikel Blog !, Lebih Baik JPG !


Bismillahirrohmanirrohim


Property of Lukmanul Hakim Watermark V2

Saya memang mengoptimasi habis-habisan konten gambar/foto di Blog saya ini, dan saya menemukan fakta bahwa format PNG itu tidak ideal untuk Website, dalam hal ini termasuk Blog !

Disini saya tidak akan membahas semua tentang gormat PNG dan JPG, akan ideal jika dibahas di artikel tersendiri.

 

Karena Opsi Default

Saya sejak awal menggunakan Format PNG karena secara default, Software Screenshoot Tool yang saya gunakan adalah menggunakan Output berformat PNG.

Jadi memang hanya gambar-gambar berupa Screenshoot saja yang menggunakan format PNG, dan jika konten gambar itu berupa foto hasil capture di Kamera, entah itu Kamera Standalone maupun Kamera pada Smartphone/Tablet PC, maka saya secara otomatis tentu menggunakan format JPG.

Alhamdulillah, saya tidak lantas fanatik dengan format PNG sehingga rela repot-repot mengkonversi lagi format JPG itu ke format PNG.

Jadi memang, saya menggunakan format PNG bukan karena saya memilihnya, tapi karena itu adalah Default Output Option di Screenshoot Tools yang saya gunakan 😀

Sebenarnya bisa saja saya ubah, namun entah kenapa kualitas gambar screenshoot menjadi jelek jika output menggunakan format JPG, akan lebih baik jika screenshoot menggunakan format PNG dulu, lalu kemudian dikonversi menjadi format JPG dengan kualitas gambar 100%, yang nanti akan saya optimasi lagi menggunakan Imagify di WordPress. Itu saya lakukan agar ketika dilakukan Lossy Compression, kualitas gambar akan tetap bagus, tapi ukuran file menjadi sangat kecil, bisa 80% lebih kecil daripada sebelumnya.

 

Optimasi File PNG VS JPG

Nah, saya juga mendapati fakta bahwa format JPG itu pada dasarnya adalah Lossy Compression sejak awal, sama seperti format MP3 jika pada file audio, sedangkan format PNG itu pada dasarnya adalah Loseless Compression sejak awal, sama seperti format FLAC jika pada file audio.

Maka dari itu, ketika saya menggunakan format JPG, maka Lossy Compression yang lebih Advanced yakni menggunakan Plugins/Tools seperti Imagify, ShortPixel, dsb, didapatkan hasil yang lebih baik, yakni ukuran file lebih kecil, dengan resolusi gambar yang sama, dan kualitas gambar yang tidak ada bedanya menurut mata manusia normal.

Ini berbeda ketika saya menggunakan format PNG, lalu saya lakukan Lossy Compression menggunakan Imagify, dsb. Hasilnya tidak signifikan, hanya kisaran 20% saja, itu pun saya sering menemukan kualitas masih lebih baik JPG ketika dilakukan Lossy Compression dengan Advaced Image Optimization seperti Imagify, dsb.

Karena pada dasarnya format PNG adalah Loseless Compression, dan algoritka “Lossy Compression” pada Advanced Image Optimization tentu berbeda dengan algoritma pada format JPG yang notabene sudah merupakan Lossy Compression sejak awal.

 

Hasilnya ?

Hasilnya menurut saya sangat siginifkan !

Jadi, awalnya total keseluruhan konten gambar di Blog saya ini baik itu gambar utama maupun thumbnail, itu ukurannya 400’an MB, itu adalah ukuran keseluruhan file dimana saya masih menggunakan format PNG pada mayoritas konten gambar di Blog saya ini.

Tapi ketika saya mengkonversikan seluruh gambar PNG Non-transparent ke format JPG, total keseluruhan file gambar baik itu gambar utama maupun seluruh thumbnail berbagai ukurannya, itu ukurannya hanya 150’an MB saja !

Mantap kan ? 😀

Itu adalah ukuran total gambar setelah dilakukan optimasi menggunakan Imagify.

Karena uniknya, ketika belum dioptimasi, justru ukuran file gambar yang sama antara format PNG dan JPG, itu lebih kecil format PNG. Tapi ketika dilakukan Lossy Compression menggunakan Imagify, hasilnya lebih kecil ukuran file JPG daripada PNG, dengan kualitas gambar yang lebih baik pada file JPG, dengan gambar yang sama persis.

Saya memilih Imagify daripada layanan lainnya karena hasil optimasinya lebih baik, ukuran file lebih kecil, dan kualitas gambar lebih halus, dan juga kinerja Plugins pada WordPress yang lebih baik, dengan User Interface yang cantik, modern, dan user friendly, harga layanannya pun dihitung berdasarkan ukuran file, bukan inodes/jumlah file. Tersedia juga Free Plan dengan jatah 25 MB/Bulan dengan Limit 2 MB/File. Jika membeli One-time Plan, maka Limit yang ada bisa lebih dari 2 MB/File dan jatah 25 MB/Bulan tetap diberikan tiap bulan, jadi jika saya beli 1 GB One-time Plan dan saya hanya pakai 500 MB untuk Massive/Batch Optimization untuk kali pertama, maka untuk selanjutnya saya akan dapat 25 MB gratis tiap bulan dan tidak ada batasan ukuran file gambar yang dioptimasi.

 

Dampak lainnya setelah saya mengkonversi seluruh file PNG Non-transparent ke format JPG adalah, waktu Load Blog saya ini lebih cepat dan ringan.

 

Kenapa Hanya Non-transparent PNG ?

Ya karena format JPG tidak mendukung Transparent Background, saya menggunakan format PNG hanya untuk gambar-gambar yang membutuhkan Transparent Background seperti Logo dan Watermark.

 

Bagaimana Cara Migrasi dari PNG ke JPG ?

Perlu Anda ketahui bahwa pada WordPress, ketika kita mengupload gambar, itu sebenarnya data mengenai konten gambar itu ditulis pada Database. Jadi jika Anda hanya mengkonversi file gambar dari PNG ke JPG saja, maka tidak akan terdeteksi oleh sistem.

Untuk itu, Anda perlu Tools yang dapat mengkonversi format PNG ke JPG dan juga memperbaiki record di database yang semula *.png menjadi *.jpg.

Alhamdulillah, sudah ada Plugin untuk kebutuhan itu, yakni: PNG to JPG.

Sesuai namanya, plugin tersebut berfungsi untuk mengubah format gambar PNG ke format JPG dan juga memperbaiki record pada database.

Tidak hanya gambar utama saja, plugin tersebut juga mengkonversi seluruh thumbnail dari file gambar utama.

Plugins ini memiliki algoritma khusus untuk mendeteksi mana file PNG yang memiliki background yang transparan dan mana yang tidak, dan kita bisa mengkonversi seluruh file PNG yang tidak memiliki background yang transparan, tapi kita juga diberikan opsi untuk mengkonversi seluruh file PNG yang memiliki background transparan. So, terserah Anda 😀

 

Jangan Buang File PNG Aslinya

Ini penting !

Karena kelemahan format JPG adalah jika kita melakukan editing, maka kualitas gambar akan semakin menurun, itu menjadi kelebihan format PNG karena file PNG ketika dilakukan editing tidak akan mengakibatkan penurunan kualitas.

Itulah salah satu alasan kenapa seluruh Screenshoot Tools yang ada di dunia ini menggunakan format PNG sebagai default-nya. Karena umumnya Screenshoot tentu dicapture dulu, lalu kemudian dilakukan editing, entah itu pemberian tanda panah, lingkaran, persegi, blur/sensor, teks, dsb.

Jadi, jika sebelumnya file konten gambar berformat PNG lalu dikonversi ke format JPG, maka versi PNG-nya dibackup/disimpan saja, dan simpanlah file yang belum dioptimasi sama sekali oleh plugin Image Optimization.

Begitu juga pada file konten gambar yang berformat JPG sejak awal, simpanlah versi yang belum dilakukan optimasi, karena ketika nanti dilakukan editing, kita melakukan editing pada file JPG yang belum dioptimasi, agar tidak terjadi penurunan kualitas yang signifikan.

Biasanya pada plugin Image Optimization selalu ada fitur Backup untuk seluruh file yang belum dioptimasi, maka jika ingin melakukan editing, sebaiknya editlah file yang ada pada folder backup dari plugin tersebut, dan ketika perubahan sudah disimpan, kembalikan file yang belum dioptimasi itu ke folder backup tersebut.

Tips: Tahu kah Anda bahwa yang menjadikan layanan Image Optimization itu berbayar adalah Resource yang mereka sediakan untuk melakukan Massive/Batch Optimization ?, sedangkan untuk melakukan optimasi gambar dalam jumlah kecil pihak penyedia layanan akan menggratiskannya pada Tool Versi Website.

Maka dari itu jika toh hanya beberapa file saya (sedikit) yang dilakukan editing ulang, kita tidak perlu restore file yang sudah dioptimasi ke versi yang belum dioptimasi di Plugins WordPress tersebut, karena jika melakukan optimasi ulang menggunakan Plugins tersebut akan dikenakan biaya/mengurangi Credit dan jatah Quota per bulan kita.

Optimasilah file gambar yang diedit tadi menggunakan Tool Optimasi yang mereka sediakan di Website mereka, lalu re-upload ke folder/direktori dimana file gambar itu disimpan di Server untuk public (jangan re-upload ke folder backup).

 

Akhir Kata

Ada banyak sekali yang saya lakukan dalam project optimasi konten gambar di Blog saya ini, dan tidak semuanya mampu saya dokumentasikan, dan saya sudah malas jika dikit-dikit pakai gambar screenshoot 😀

Maka mohon maaf jika saya terkesan tidak memberikan bukti nyata berupa screenshoot mengenai fakta yang saya kemukanan disini, misalnya penurunan ukuran total seluruh konten gambar beserta thumbail dari 400’an MB ke 150’an MB, dsb.

Saya sangat kerepotan mengoptimasi seluruh gambar di Blog saya ini, dan ini menjadi pelajaran untuk saya dan siapa pun bahwa sebaiknya pelajariah, ketahuilah, dan terapkanlah kiat-kiat dalam optimasi gambar sejak dini, sejak awal Website mulai memproduksi konten bergambar. Karena akan cukup merepotkan, jika melakukan massive optimization ketika jumlah konten gambar sudah sangat banyak.

Saya melakukan optimasi gambar setelah 6 bulan sejak Blog saya ini mulai aktif memproduksi konten, dan saya cukup kerepotan 😀

Alhamdulillah, sekarang sudah banyak Tools yang bisa digunakan, baik itu Software pada Komputer, Plugins pada WordPress, baik itu gratisan maupun berbayar. Setidaknya mengurangi tingkat stress yang saya alami dan mengurangi resource yang harus saya alokasikan seperti Waktu, Tenaga, dan Pikiran. Meskipun harus dibayar dengan sejumlah uang, dan itu sepadan 😀

Ini baru mengenai optimasi format gambar dan ukuran file gambar saja loh, belum nanti mengenai Image SEO (Search Engine Optimization).

Tahu kah Anda jika sebenarnya setiap gambar yang kita upload ke Blog itu sebenarnya sama halnya dengan artikel yang kita publish ?

Ya, konten gambar juga perlu URL Slug yang SEO Friendly, Title/Judul, Tag, Deksripsi, dab yang juga SEO Friendly.

Salah satu kesalahan yang sering dilakukan (termasuk saya) adalah saat file gambar berada di Komputer (belum diupload), maka nama file menggunakan huruf kapital.

Contoh: Ini Adalah Sebuah Gambar.jpg .

Maka ketika diupload ke Blog, URL Slug yang digenerate adalah Ini-Adalah-Sebuah-Gambar.jpg .

Padahal idealnya, sebuah URL Slug menggunakan huruf kecil semuanya, sehingga biasakanlah menamai file gambar menggunakan huruf kecil semuanya.

Dan khusus untuk gambar, sebaiknya URL Slug sama dengan Image Title.

Berbeda dengan Artikel dimana sebaiknya URL Slug maksimal adalah 5 kata saja, meskipun berbeda dengan Judul Artikel yang bisa lebih panjang.

 

Sekali lagi saya katakan, optimasilah gambar sejak awal 😀


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