Panduan Utama untuk Manajemen Gambar WordPress

1. 1. Sedang Dibaca: Panduan Utama Manajemen Gambar WordPress
2. 2. 3 Tips Manajemen Gambar yang Kurang Dikenal di WordPress
3. 3. Kesalahan SEO Gambar WordPress & Cara Memperbaikinya

Dampak visual adalah salah satu fitur terpenting dalam rencana pemasaran konten yang berdampak. Selamat datang di seri postingan baru – Panduan Utama Manajemen Gambar di WordPress.

Ini dirancang untuk memberi Anda alat yang diperlukan untuk mengelola aset gambar Anda di WordPress – mulai dari pengoptimalan teknis, SEO, integrasi CDN, dan manajemen perpustakaan. Dalam panduan multibagian ini, kami hanya akan merekomendasikan metode, tutorial, plugin, dan tema yang telah kami coba atau direkomendasikan oleh pakar industri.

Kami juga akan menghindari menyarankan secara membabi buta plugin yang memiliki penggunaan tinggi di repositori WordPress. Sebaliknya, kami akan merekomendasikan produk yang memberikan perpaduan sempurna antara proposisi nilai dan optimalisasi kinerja.

Anda mungkin bertanya-tanya bagaimana cara kami melakukan hal itu. 24.000+ unduhan tema WordPress Total – Serbaguna Responsif kami di ThemeForest mungkin bukan indikator yang bagus.

Ya, kami telah menjelajahi blog terbaik dari perusahaan hosting WordPress terkemuka di industri (seperti WPEngine dan Pagely) dan mempelajari apa yang mereka pelajari saat melayani miliaran tampilan halaman di ribuan klien terkenal. Kami telah merangkum semua informasi ini untuk Anda menjadi paragraf-paragraf kecil dan poin-poin penting untuk kesuksesan online Anda. Sekarang mari kita mulai, ya?

Tip Optimasi Teknis dan Kinerja untuk Gambar WordPress

Ada beberapa opsi pengoptimalan gambar yang tersedia di WordPress yang tidak memberikan beban yang tidak perlu pada server web. Kita akan melihat beberapa kiat pengoptimalan gambar paling umum yang harus diikuti semua orang, serta beberapa kiat lainnya yang berguna dalam acara-acara khusus.

JPG atau PNG? Menggunakan Format Gambar yang Benar

Langkah pertama dalam pengoptimalan gambar adalah awal yang baik. Mereka mengatakan pekerjaan yang dimulai dengan baik sudah setengah selesai. Hal itulah yang terjadi pada optimasi gambar di WordPress. Semuanya dimulai dengan memilih format gambar yang tepat. JPG dan PNG adalah dua format gambar yang paling umum digunakan secara online dalam pemasaran konten.

Triknya adalah memahami format mana yang harus dipilih untuk setiap jenis gambar. Memilih yang salah menyebabkan peningkatan besar dalam ukuran gambar. Berikut peraturannya.

Kapan menggunakan format PNG?

Untuk gambar datar – seperti vektor, ilustrasi, font, logo, spanduk, bentuk, spanduk, dll. – apa pun yang dibuat dalam format vektor seperti format EPS atau Adobe Illustrator (.AI), gunakan PNG. Anda akan mendapatkan gambar yang dioptimalkan dengan kehilangan kualitas hampir nol. Jika Anda menggunakan JPG dalam kasus ini, Anda tidak akan berkompromi pada ukuran, namun mungkin akan kehabisan kualitas. Faktanya, pada resolusi yang lebih tinggi, PNG akan lebih ringan tanpa kehilangan kualitas. JPG akan menderita.

Ambil contohnya. Kami akan membuat gambar datar pada 5000px dan menyimpannya sebagai JPG dan PNG.

Contoh gambar yang digunakan untuk tes

Singkatnya, gambar JPG 455% lebih tinggi dari PNG untuk resolusi yang sama.

Kapan menggunakan format JPG?

Untuk yang lainnya, gunakan JPG. Apa pun selain gambar datar atau vektor, gunakan JPG. Foto orang, tempat, benda, dll. – gunakan JPG. Hampir semua stok foto dalam kategori ini menggunakan JPG. Jika Anda menggunakan PNG sebagai pengganti JPG, Anda akan mengalami masalah kinerja yang serius.

Anda harus ekstra hati-hati dalam hal ini. Jika Anda menggunakan JPG sebagai pengganti PNG, hanya akan ada sedikit atau tidak ada kerusakan. Namun, jika Anda menggunakan PNG berdarah dan JPG, Anda menciptakan banyak ruang untuk kerusakan. Lihatlah contoh ini.

Penyiapan: Saya telah mengunduh gambar ini dari Shutterstock, yang beratnya sekitar 10,3MB dengan resolusi 6149×4562 – pada dasarnya adalah foto stok 28MP . Kecuali kami menyiapkan sesuatu seperti brosur siap cetak, kami tidak akan menggunakan foto resolusi penuh di blog kami. Katakanlah kita memiliki ukuran gambar maksimal yang tetap untuk blog kita, yaitu 1600px.

Eksperimen: Kami akan mengubah ukuran gambar sumber menjadi 1600 piksel dan membuat empat versi – dua untuk format PNG dan dua untuk JPG. Untuk setiap format (JPG/PNG), kami akan menggunakan (a) pengaturan kompresi yang direkomendasikan dan (b) pengaturan kompresi maksimum.

Contoh gambar untuk eksperimen JEPG

Hasil: Berikut adalah hasil dalam grafik yang bagus untuk Anda ikuti:

Dari pandangan pertama, orang mungkin berpikir bahwa 84% kompresi PNG cukup baik dibandingkan 98% yang dicapai dalam JPG. Hal ini tidak sepenuhnya benar. Jika Anda melihat lebih dekat pada ukuran gambar, Anda akan melihat bahwa PNG berbobot sedikit di atas 1,7 MB sedangkan JPG berukuran 0,22 MB. Artinya, PNG 8 kali lebih berat dibandingkan versi JPG dari gambar yang sama dengan resolusi yang sama. Dengan kata lain, untuk gambar dan resolusi yang sama, versi JPG 700% lebih ringan dibandingkan PNG!

Untuk gambar dan resolusi yang sama, versi JPG 700% lebih ringan dibandingkan PNG!

Sebagai aturan praktis, gunakan PNG untuk gambar datar dan JPG untuk gambar lainnya.

Daftar Periksa untuk Mengunggah Stok Foto di Blog

Ada banyak sekali blog di mana editornya langsung mengunggah gambar versi resolusi penuh di postingan blog mereka. Berikut adalah beberapa petunjuk untuk mengupload stok foto ke blog. Saya menggunakan perangkat lunak gratis bernama IrfanView yang memiliki banyak fitur mengagumkan. Saya akan mengilustrasikannya untuk Anda.

1. Ubah ukuran Gambar Anda

Pertama, Anda perlu menentukan resolusi maksimal untuk semua gambar di situs WordPress Anda. Gambar apa pun di atas dimensi tersebut akan diubah ukurannya, kecuali tentu saja ukurannya lebih kecil.

IrfanView memiliki fitur Konversi Batch (tekan B setelah meluncurkan aplikasi) yang dapat menerapkan daftar fungsi ke sekumpulan gambar sekaligus. Untuk tujuan kami, fungsinya termasuk mengubah ukuran, memotong, menambahkan tanda air, dll.

2. Hapus Data EXIF

Foto yang diklik pada kamera biasa memiliki banyak metadata yang tertanam – yang tidak lain hanyalah informasi kecil (namun berguna) tentang gambar tersebut. Contoh informasi tersebut mencakup koordinat GPS tempat gambar diklik, pengaturan ISO, model kamera, dll.

Info EXIF dari foto acak diklik di iPhone saya

Kecuali jika kita sedang melakukan photo-blogging, biasanya kita tidak ingin informasi seperti itu ada dalam gambar postingan blog. Saat Anda menyimpan atau mengonversi gambar secara batch di IrfanView, data EXIF biasanya dihapus. Ini membantu menjaga privasi Anda – terutama lokasi fisik Anda. Perbedaan ukuran untuk sebagian besar foto adalah sekitar 200-300 KB per gambar.

3. Simpan sebagai JPG Progresif

IrfanView menyimpan JEPG sebagai progresif secara default

Gambar JPG progresif memuat gambar lapis demi lapis – sehingga mempercepat waktu muat. Jaringan Pengiriman Konten seperti KeyCDN telah mulai secara otomatis mengubah JPG menjadi JPG progresif untuk mempercepat pengiriman gambar dan mengoptimalkan penyimpanan.

4. Atur DPI ke 72

DPI atau titik per inci adalah ukuran kualitas gambar. Nilai DPI yang tinggi digunakan untuk bahan cetak. Untuk web, nilai 72 sudah sempurna.

Oke, jadi rangkuman di atas, berikut pengaturan saya. Saya menjalankan fitur ini setelah saya mengumpulkan semua gambar untuk posting blog saya – sebelum mengunggah gambar ke WordPress.

Pengaturan konversi batch di IrfanView untuk blog WordPress pada umumnya

5. Optimalkan Gambar Anda

Tidak peduli apakah Anda menggunakan JPG atau PNG, Anda perlu mengoptimalkan gambar Anda. Ada banyak alat online keren yang membantu Anda mengoptimalkan gambar dan menghemat banyak ruang.

Saya berbicara tentang layanan seperti TinyPNG atau TinyJPG yang hanya mengoptimalkan gambar PNG/JPG Anda dengan beberapa algoritma canggih.

Gambar yang dioptimalkan di TinyPNG

Sejujurnya, saya tidak tahu cara kerja algoritmanya, tapi mereka tahu dan saya selalu bisa mendapatkan pengurangan 50-70% tidak peduli seberapa baik saya menyimpannya.

Anda juga dapat membeli layanan versi pro sebagai plugin Photoshop seharga $50 USD. Tersedia versi Windows dan Mac. Menurut tujuan saya, versi online (ditambah dengan fitur Simpan ke Dropbox) berfungsi paling baik.

Plugin Pengoptimalan Gambar di WordPress

Sejauh ini, kita telah mempelajari langkah-langkah untuk memulai dengan benar. Bagaimana jika Anda menemukan postingan ini sekarang, dan sudah mengupload 100-an gambar? Berikut beberapa plugin untuk membantu Anda dalam hal itu:

Pengoptimal Gambar Cloud EWWW

Plugin ini merupakan cabang dari plugin EWWW Image Optimizer yang asli dan sangat populer. Mengumpulkan lebih dari 500.000 unduhan, plugin pengoptimalan gambar ini memungkinkan Anda mengoptimalkan gambar saat diunggah ke WordPress.

Apa yang membedakannya dari kompetitor adalah kemampuannya untuk mengoptimalkan gambar yang ada di database Anda, yang menghasilkan peningkatan kinerja yang sangat besar. Ini juga menghemat biaya bandwidth yang signifikan karena sebagian besar lalu lintas Anda berasal dari artikel lama. Anda juga dapat memilih untuk mengaktifkan kompresi gambar lossy (yang hampir tidak terlihat dengan mata telanjang) namun dapat menghemat banyak ruang dan bandwidth. Dalam hal teknologi optimasi, dapat menggunakan API TinyPNG atau TinyJPG untuk mengoptimalkan gambar baru dan yang sudah ada.

Tapi inilah masalahnya. Banyak host (termasuk WPEngine) tidak mengizinkan plugin EWWW Image Optimization karena memberikan banyak beban tambahan pada server. Jika Anda berhasil melewati batasan server, akun Anda mungkin berisiko ditangguhkan karena pelanggaran kebijakan.

Di sinilah plugin EWWW Cloud Optimizer berperan. Ini memindahkan semua komputasi yang diperlukan untuk mengoptimalkan gambar ke cloud dan hanya mengganti gambar yang tidak dioptimalkan dengan gambar yang dioptimalkan. Karena hampir tidak ada daya CPU yang digunakan untuk kompresi, tidak ada beban tambahan pada server. Ini berlaku untuk semua konversi gambar baru dan yang sudah ada di situs WordPress Anda.

Paket & Harga: Seperti yang diharapkan, plugin ini tidak gratis karena pengembang harus membayar tagihan komputasi awan. Namun, harganya sangat masuk akal yaitu $9 USD untuk 3000 pengoptimalan gambar untuk langganan prabayar.

Plugin EWWW Cloud Optimizer dirancang dengan indah. Pemindai media memberi tahu Anda berapa banyak gambar yang perlu Anda optimalkan sebelum melakukan pembelian. Berdasarkan gambar server Anda, Anda dapat membeli paket prabayar yang relevan.

Plugin WordPress TinyPNG

Ini plugin pengoptimalan gambar hebat lainnya yang terintegrasi langsung dengan layanan TinyPNG/JPG. Secara otomatis gambar baru dan yang sudah ada diunggah ke perpustakaan media WordPress. Plugin ini menawarkan paket gratis 100 optimasi gambar per bulan.

Freddy telah menyusun daftar plugin pengoptimalan gambar beberapa waktu lalu – bacalah jika Anda ingin mengetahui lebih banyak tentang topik tersebut.

Kesimpulan

Ini membawa kita ke akhir postingan pertama dalam seri ini. Pada artikel berikutnya, kita akan mempelajari beberapa tips dan trik pengoptimalan gambar yang kurang dikenal seperti mencegah hotlinking, mengambil gambar dari server jarak jauh, dan sejenisnya. Apakah Anda memiliki beberapa kiat dalam kategori memulai dengan benar? Beri tahu kami di komentar di bawah.