Tidakkah Anda menyukai gambar?

Gambar dapat mengubah sepotong teks menjadi pengalaman yang menarik saat Anda membaca. Gambar menyempurnakan postingan blog, membuatnya lebih mudah dibagikan, dan menentukan nada dan merek seluruh situs Anda.

Dan tahukah Anda, kita terprogram untuk merespons gambar. Itulah mengapa memasukkan gambar ke dalam konten Anda adalah alat yang ampuh untuk digunakan saat memasarkan blog Anda.

Namun, jika Anda tidak berhati-hati, gambar dapat mencapai lebih dari setengah (atau lebih) dari total ukuran halaman web Anda. Beberapa tahun yang lalu, ukuran rata-rata sebuah halaman web adalah 600-700K. Sekarang, ukuran rata-rata 2MB dan terus meningkat setiap tahunnya.

Itu sangat besar!

Alasan utama mengapa hal ini terjadi adalah karena banyak gambar digunakan lebih sering pada halaman web, dan gambar-gambar ini tidak dioptimalkan dengan ukuran yang tepat, sehingga gambar-gambar tersebut tidak disimpan atau dikompilasi dengan cara yang ramah web, dan malah membuat halaman web Anda menjadi besar.

Namun, sebagian besar dari kita membiarkan pengoptimalan gambar sebagai renungan dan lebih suka melakukan hal-hal yang menyenangkan seperti membuat postingan epik atau berjejaring dengan blogger lain di niche Anda.

Namun, memiliki halaman yang membengkak berarti kecepatan pemuatan halaman Anda terpengaruh. Anda mungkin tidak menganggap hal ini sebagai masalah besar jika Anda menggunakan koneksi berkecepatan tinggi, tetapi banyak pengunjung Anda yang tidak demikian. Selain itu, Google tidak menyukai halaman yang memuat dengan lambat, dan hal ini bisa berdampak negatif pada SEO Anda.

Mengapa Anda perlu mengoptimalkan gambar

Anda bekerja keras untuk membuat konten yang luar biasa dan Anda menghabiskan waktu berjam-jam untuk mempromosikan blog Anda dan berjejaring dengan blogger lain, jadi hal terakhir yang Anda inginkan adalah pengunjung potensial meninggalkan situs web Anda bahkan sebelum dimuat!

Studi menunjukkan bahwa hingga 40% pengunjung mengklik tombol kembali jika sebuah situs membutuhkan waktu lebih dari tiga detik untuk dimuat.

Saya tahu, tiga detik memang tidak terlalu lama, tetapi ketika Anda menggunakan koneksi seluler dan menunggu situs dimuat, satu detik bisa terasa lama.

Dan karena banyak pengunjung Anda mungkin menggunakan koneksi seluler yang lebih lambat, maka jelaslah - Anda perlu memperkecil ukuran halaman Anda. Dan kita sudah tahu apa penyebab terbesar dari ukuran halaman yang membengkak, yaitu gambar-gambar Anda.

Gambar-gambar besar yang tidak perlu juga menghabiskan ruang pada akun hosting Anda. Meskipun sebagian dari Anda mungkin memiliki hosting dengan ruang penyimpanan "tak terbatas", banyak penyedia hosting premium membatasi Anda hingga sekitar 10GB penyimpanan pada paket-paket yang lebih rendah. Ini dapat terisi dengan cepat, terutama jika Anda meng-host beberapa situs yang banyak gambar pada akun yang sama.

Jadi, bagaimana Anda bisa mengetahui apakah gambar Anda memperlambat situs Anda? Uji kecepatan situs Anda dengan Google PageSpeed Insights.

Jika Google melaporkan gambar yang tidak dioptimalkan sebagai masalah, inilah yang perlu Anda ketahui untuk memperbaikinya.

Dasar-dasar pengoptimalan gambar

Ketika berbicara tentang mengoptimalkan gambar di blog Anda, ada beberapa hal berbeda yang perlu Anda perhatikan: jenis file, ukuran dan dimensi gambar, cara Anda menyajikan gambar, dan kompresi gambar.

Mari kita cermati lebih dekat masing-masing area ini.

Jenis file

Gambar di web biasanya disimpan dalam format file PNG atau JPEG - atau GIF untuk animasi. Siapa yang tidak suka dengan GIF animasi lucu yang beredar di web!

Sekarang secara teknis Oke. jika Anda menyimpan gambar Anda dalam salah satu format - browser pengunjung Anda tidak akan mengalami masalah dalam menampilkan halaman web Anda - tetapi untuk kualitas dan pengoptimalan terbaik, patuhi aturan berikut ini:

• JPEG - digunakan untuk foto dan desain yang menampilkan orang, tempat, atau benda
• PNG - terbaik untuk grafik, logo, desain dengan banyak teks, tangkapan layar, dan saat Anda membutuhkan gambar dengan latar belakang transparan
• GIF - jika Anda membutuhkan animasi, jika tidak, gunakan PNG

Jadi, mengapa ada format yang berbeda?

Nah, PNG secara tradisional digunakan untuk menyimpan logo dan grafik karena mempertahankan kualitas gambar asli - tidak ada yang menginginkan teks buram dan bentuk piksel. Tetapi, jika Anda mencoba menyimpan foto sebagai PNG, itu akan terlihat luar biasa, tetapi ukuran file yang dihasilkan akan menjadi kurang menakjubkan.

JPEG secara tradisional digunakan untuk menyimpan foto. Sebagian data gambar dibuang untuk menciptakan ukuran file yang lebih kecil secara drastis, tetapi, karena foto mengandung variasi warna yang luas dan variasi alami, maka, penurunan kualitas biasanya tidak kentara bagi mata manusia.

Kita akan membahas lebih detail mengenai kompresi nanti, tetapi untuk saat ini, jika Anda hanya mengingat dua hal, ingatlah: JPEG untuk foto dan PNG untuk teks/grafis.

Dimensi gambar

Pernahkah Anda membuka halaman web dan menyadari bahwa gambar yang sangat kecil (mungkin foto kepala, misalnya) membutuhkan waktu f-o-r-e-v-e-r untuk diunduh? Sepertinya, sangat lambat sehingga Anda bisa melihat setiap baris yang masuk? Anda berpikir, bagaimana mungkin gambar sekecil itu membutuhkan waktu yang sangat lama untuk diunduh?

Dan apabila hal itu terjadi pada gambar header yang besar, maka akan lebih buruk lagi, karena dapat menghambat pemuatan seluruh halaman.

Alasan mengapa hal ini terjadi, yaitu karena blogger belum mengubah ukuran dan mengoptimalkan gambar mereka dengan benar, dan dalam kasus contoh foto kepala kita, mungkin saja mereka mengunggah JPEG resolusi penuh langsung dari kamera DSLR-nya.

Dan itu adalah file yang sangat besar!

Anda tahu, browser web (biasanya) akan menskalakan gambar dari dimensi aslinya sehingga gambar tersebut sesuai dengan tempatnya di halaman web. Apa yang tampak sebagai gambar kecil di layar bisa jadi merupakan foto 10 megapiksel yang sangat besar, yang dikecilkan dalam waktu nyata oleh browser.

Sekarang beberapa platform penerbitan web akan secara otomatis membuat beberapa variasi gambar resolusi penuh Anda dalam berbagai ukuran, tetapi jika tidak, Anda harus mengubah ukuran gambar Anda terlebih dahulu di editor gambar seperti Photoshop, Lightroom, Pixlr - atau bahkan MS Paint. Hal ini bisa berarti perbedaan antara file 50K dan 5MB.

WordPress, misalnya, secara otomatis akan membuat tiga (atau lebih, tergantung pada tema Anda) salinan dari gambar yang Anda unggah - semuanya dengan dimensi yang berbeda - yang bisa Anda gunakan dalam postingan blog, daripada selalu menggunakan gambar berukuran penuh.

Jika Anda memiliki kebiasaan mengunggah gambar stok foto berukuran besar, dan ingin menghemat ruang pada akun hosting Anda, plugin WordPress Imsanity dapat membantu Anda.

Aplikasi ini mengubah ukuran dan mengganti gambar asli menjadi sesuatu yang lebih mudah dikelola, jadi, meskipun Anda menyisipkan gambar berukuran penuh ke dalam kiriman Anda, tidak akan terlalu buruk.

Setelah diaktifkan, Imsanity juga dapat mencari gambar yang ada dan mengubah ukurannya.

Menyajikan gambar Anda

Cara Anda menyajikan gambar kepada pengunjung tidak hanya tentang mengoptimalkannya saja, tetapi bisa berdampak dramatis pada waktu muat halaman Anda.

Sebagian besar blogger menyajikan gambar mereka langsung dari akun hosting mereka dan itu biasanya tidak masalah, tetapi jika Anda benar-benar ingin memeras setiap kinerja dari situs Anda, maka menghosting gambar Anda di Content Delivery Network (CDN) dapat membuat perbedaan besar.

CDN terdiri dari server web yang ditempatkan secara strategis yang terletak di pusat data di seluruh dunia. Server-server ini menyimpan salinan duplikat gambar Anda dan ketika browser pengunjung meminta gambar dari situs web Anda, CDN secara otomatis mengarahkan browser ke server yang secara geografis paling dekat dengannya.

Ini berarti pengunjung dari Eropa, misalnya, akan menerima gambar yang disajikan dari server lokal Eropa, bukan dari Amerika Serikat atau tempat lain. Karena waktu respons dan latensi jaringan berkurang, gambar diunduh lebih cepat, sehingga mengurangi waktu muat halaman.

Blogging Wizard menggunakan Sucuri (termasuk Firewall untuk keamanan serta CDN), tetapi ada juga penyedia berkualitas lainnya seperti Amazon's Cloudfront atau KeyCDN. Bahkan CloudFlare yang populer, yang tidak sepenuhnya merupakan CDN, menawarkan CDN secara gratis dan mudah untuk disiapkan pada sebagian besar paket hosting bersama.

Kompresi gambar

Apabila menyangkut optimalisasi gambar Anda, tidak ada yang lebih mengurangi ukuran file Anda daripada kompresi gambar lossy tingkat lanjut.

Sebagian besar alat pengeditan gambar seperti Visme atau Photoshop akan menyimpan file menggunakan kompresi lossy JPEG karena kompresi ini memiliki pengurangan ukuran file yang paling baik. Jadi, meskipun kualitas gambar sedikit berkurang, namun dengan menggunakan kompresi gambar lossy, gambar yang besar akan dikurangi menjadi ukuran yang ramah web.

Saya yakin banyak orang yang menggunakan Photoshop mungkin akan melihat Simpan untuk Web sebagai fitur yang paling utama dan paling akhir untuk pengoptimalan gambar. Dan bahkan alat penyuntingan gambar online seperti PicMonkey atau Visme juga mengoptimalkan gambar Anda.

Namun, tahukah Anda bahwa ada alat yang dapat mengambil gambar "yang dioptimalkan" dari Photoshop atau alat pengeditan lainnya, mengerutkan dan mengompresnya hingga 40% (atau lebih), dan masih apakah tampak hampir sama dengan mata manusia?

Berikut ini beberapa alat bantu gratis dan berbayar untuk membantu Anda meng-crunch gambar Anda hingga menjadi ramah web.

Alat-alat desktop

ImageAlpha / ImageOptim

Untuk pengguna Mac, ImageOptim adalah alat desktop gratis yang saya gunakan setiap hari untuk mengoptimalkan gambar PNG - sebagian besar tangkapan layar - sebelum saya mengunggahnya. Alat ini mudah digunakan, Anda hanya perlu menyeret dan meletakkan file Anda, tetapi Anda harus melakukan satu gambar pada satu waktu.

Kiat pro Bagi yang paham teknologi, tersedia ImageOptim-CLI, di mana Anda dapat mengoptimalkan seluruh folder gambar sekaligus.

ImageAlpha adalah kompresor PNG lossy dan dapat melakukan keajaiban dalam mengecilkan file PNG sementara ImageOptim melakukan kompresi lossless tingkat lanjut (dengan opsi lossy) - dan menghapus metadata yang tidak perlu dari file PNG, JPEG, dan GIF.

Untuk gambar PNG saya, pertama-tama saya menjalankannya melalui ImageAlpha:

Di sini, ini mengurangi gambar tangkapan layar saya dari 103K menjadi 28K.

Saya kemudian menjalankannya melalui ImageOptim dan menghemat 10% ekstra.

JPEGmini

Untuk file JPEG saya, saya mengoptimalkannya dengan aplikasi desktop JPEGmini, tersedia untuk Mac dan Windows.

Versi Lite memungkinkan Anda mengoptimalkan hingga 20 gambar sehari secara gratis, dan dikenakan biaya $19,99 untuk menghapus batas tersebut.

Kiat pro Pengguna tingkat lanjut yang ingin mengintegrasikan JPEGmini ke dalam Photoshop atau Lightroom melalui plugin, dapat membeli versi Pro seharga $99,99.

Alat-alat Online / Cloud / SaaS

TinyPNG

Jika Anda mencari alat kompresi gambar online berkualitas tinggi, TinyPNG (ini juga mengoptimalkan file JPEG meskipun namanya) adalah aplikasi web yang memungkinkan Anda untuk menyeret hingga 20 gambar berukuran 5MB atau lebih kecil ke dalam peramban Anda, dan mengoptimalkannya sekaligus.

Mereka juga memiliki API pengembang dan menyediakan plugin WordPress yang dapat secara otomatis mengoptimalkan gambar Anda saat diunggah.

TinyPNG memberi Anda 500 pengoptimalan gambar gratis per bulan, dan setelah itu mengenakan biaya mulai dari $0,002-0,009 per gambar, tergantung pada volume.

Sekarang 500 gambar per bulan mungkin terdengar banyak, tetapi ketika Anda mempertimbangkan fakta bahwa WordPress sering kali membuat tiga hingga lima variasi dari setiap gambar dalam ukuran yang berbeda, 500 gambar sepertinya tidak terlalu banyak. sebanyak itu Untungnya, biaya per gambarnya sangat bersahabat dengan anggaran Anda.

Pengoptimal Gambar EWWW

Jika Anda belum siap untuk mengeluarkan uang, dan Anda tidak ingin direpotkan dengan mengoptimalkan gambar secara manual, plugin EWWW Image Optimizer gratis untuk WordPress dapat secara otomatis mengoptimalkan gambar yang Anda unggah.

Anda bisa memilih langganan premium yang melakukan kompresi lossy, tetapi versi gratisnya hanya melakukan kompresi lossless sehingga penghematannya tidak terlalu besar. Namun, ini akan menghemat waktu Anda dan lebih baik daripada tidak sama sekali.

Catatan: Untuk ringkasan lengkapnya, bacalah artikel kami mengenai alat kompresi gambar.

Membungkusnya

Dengan beberapa orang yang memprediksi ukuran halaman web rata-rata mendekati 3MB pada tahun 2017, sekaranglah saatnya untuk mulai mengoptimalkan gambar Anda.

Ingat, tidak semua pengunjung Anda menggunakan koneksi berkecepatan tinggi, dan halaman yang membengkak serta waktu pemuatan halaman yang lambat berpotensi memengaruhi peringkat Anda di Google. Untuk membantu meringankan beban Anda, biasakanlah untuk mengoptimalkan gambar Anda sekarang juga.

Perhatikan dimensi gambar Anda dan ubah ukuran stok foto atau gambar yang terlalu besar dari kamera digital ke ukuran yang sesuai.

Selanjutnya, manfaatkan kompresi gambar modern dengan aplikasi desktop seperti JPEGmini, atau alat cloud seperti TinyPNG atau Kraken - integrasikan ke dalam WordPress dengan sebuah plugin jika memungkinkan.

Terakhir, jika platform penerbitan Anda secara otomatis membuat variasi ukuran dari gambar asli Anda, pilih salah satu dari variasi ini untuk postingan blog Anda, daripada gambar asli berukuran penuh.

Bacaan Terkait: 7 Cara Untuk Mengurangi Ukuran File PDF.