Cara Mengoptimalkan Gambar Anda Untuk WordPress

Ada banyak alasan mengapa Anda (dan harus) menyertakan gambar di konten WordPress Anda. Gambar membantu pembaca Anda tetap terlibat. Mereka juga merupakan cara untuk memecah konten yang panjang dan meningkatkan Pengoptimalan Mesin Telusur (SEO). Namun, mereka juga dapat memperlambat situs web Anda.

Untungnya, ada cukup banyak sumber daya yang tersedia yang dapat membantu Anda mengoptimalkan gambar. Ini berarti Anda akan lebih mungkin mengatasi kecepatan halaman yang lambat yang dapat merusak kesuksesan situs web Anda secara keseluruhan.

Dalam artikel ini, kita akan melihat mengapa gambar berukuran besar mungkin menyeret situs Anda ke bawah. Kemudian kami akan mengeksplorasi cara mengompres file media Anda secara efektif, bersama dengan beberapa tip pengoptimalan gambar dasar yang dapat meningkatkan SEO situs Anda.

Mengapa Anda Harus Mengoptimalkan Gambar Anda untuk WordPress

Gambar adalah bagian yang berharga dan penting dari setiap strategi konten. Namun, mereka juga bisa menjadi salah satu penyebab utama lambatnya waktu pemuatan halaman.

Situs web yang lambat adalah masalah, karena dapat membuat pengguna menjauh. Faktanya, halaman yang membutuhkan waktu lima detik atau lebih untuk memuat melihat rata-rata peningkatan 90 persen dalam kemungkinan pengguna terpental (meninggalkan setelah hanya melihat satu halaman).

Meskipun ada beberapa faktor yang dapat memperlambat situs Anda, file gambar dan media menghabiskan 63 persen bandwidth yang lumayan di situs web modern. Akibatnya, penting untuk mengoptimalkan gambar yang Anda unggah ke situs Anda.

Perlu juga dicatat bahwa kecepatan situs adalah faktor peringkat Google. Ini berarti seberapa cepat atau lambat pemuatan halaman Anda akan menentukan, sampai batas tertentu, seberapa baik peringkatnya dalam hasil pencarian. Ada banyak faktor yang memengaruhi PageRank Anda, dan gambar termasuk dalam kategori "Kegunaan halaman web".

Pengoptimalan gambar benar-benar tentang meningkatkan dua hal:

• Jumlah byte yang digunakan untuk menyandikan setiap piksel gambar
• Jumlah total piksel yang digunakan.

Dengan kata lain, pengoptimalan berarti Anda mendapatkan kualitas terbaik dari piksel dan byte terkecil. Ini mengurangi ukuran file media Anda, dan dapat berdampak signifikan pada kecepatan situs Anda secara keseluruhan.

Optimalkan Gambar Anda Sebelum Mengunggah ke WordPress

Pada akhirnya, skenario kasus terbaik untuk situs web Anda adalah Anda mengoptimalkan gambar sebelum mengunggahnya. Ini agar Anda tidak berakhir dengan duplikat atau beberapa versi dari satu gambar. Itu akan mengalahkan tujuan meringankan beban situs web Anda melalui pengoptimalan gambar.

Dengan mengingat hal itu, mari kita lihat beberapa pertimbangan yang perlu Anda buat saat memutuskan cara mengoptimalkan media situs Anda.

Format File Gambar

Untuk memulai, mari kita lihat berbagai macam format gambar yang ada. Memahami bagaimana masing-masing dari mereka berbeda dan kapan waktu terbaik untuk menggunakannya dapat membantu Anda mengembangkan penggunaan gambar yang lebih efisien.

Dua format gambar yang paling umum digunakan secara online adalah JPEG dan PNG. Kedua format ini terdiri dari piksel. Piksel meregang saat Anda mengubah ukuran gambar, yang terkadang membuatnya buram. Namun, jenis gambar ini memiliki kekuatan dan kelemahan yang berbeda.

Kapan Menggunakan JPEG

File JPEG adalah pilihan yang baik untuk konten cetak dan web. File gambar semacam ini menggunakan apa yang disebut format 'lossy'. Saat gambar yang lebih besar diubah menjadi JPEG, beberapa informasi yang terkandung dalam filenya akan hilang.

Informasi itu tidak diperlukan hanya untuk menampilkan gambar. Namun, yang dimaksud adalah mengonversi ke JPEG menghasilkan ukuran file yang lebih kecil, tetapi mungkin ada pengorbanan dalam kualitas gambar secara keseluruhan. Untungnya, penurunan kualitas tidak terlalu terlihat, terutama untuk gambar yang lebih kecil.

Kapan Menggunakan PNG

File PNG juga berguna untuk konten web, seperti halnya JPEG, tetapi dengan cara yang berbeda. Karena PNG dapat memiliki latar belakang transparan, misalnya, PNG lebih serbaguna dan berguna untuk mendesain grafik web.

PNG menggunakan format file 'lossless'. Artinya, semua informasi tentang gambar dipertahankan saat file dikompresi. Akibatnya, kualitasnya cenderung lebih tinggi, tetapi menawarkan peningkatan yang lebih kecil dalam ukuran file dan kecepatan halaman. Mereka adalah opsi yang bagus untuk grafik dan ikon, dan untuk gambar berkualitas sangat tinggi.

Ukuran gambar

Sudah waktunya untuk memotong kembung. Menyampaikan gambar berskala adalah salah satu cara termudah dan paling efektif untuk mengoptimalkan gambar Anda. Mengapa begitu efektif? Penskalaan gambar akan memastikan bahwa Anda tidak mengirimkan piksel lebih banyak dari yang dibutuhkan untuk menampilkan aset pada ukuran yang diinginkan di browser.

Banyak situs mencoba mengirimkan gambar besar tanpa skala dan mengandalkan browser untuk mengubah ukurannya, yang mengakibatkan penggunaan sumber daya ekstra dan kecepatan situs yang lebih lambat. Jika ukuran alami gambar adalah 820×820 piksel, dan ditampilkan oleh browser sebagai 400×400 piksel…itu berarti 32.400 piksel yang tidak perlu!

Kejelasan dan kecepatan pemuatan halaman sangat berkaitan dengan perangkat tempat gambar ditampilkan (seluler, desktop, dll). Misalnya, gambar 4k mungkin terlihat bagus di monitor 27 inci Anda.

Namun, saat pengunjung memuat halaman dengan gambar tersebut, browser akan merender file dengan resolusi penuh terlebih dahulu, lalu memperkecilnya agar sesuai dengan layar mereka. Jika mereka menggunakan perangkat seluler yang tidak mampu menampilkan lebih dari 400 piksel, kemungkinan besar mereka akan melewatkan konten Anda.

Dengan mengingat hal itu, beberapa praktik terbaik saat mengekspor gambar Anda meliputi:

• Pertahankan ukuran file gambar Anda di bawah beberapa ratus kilobyte, dengan menyimpannya sebagai JPEG atau PNG yang 'dioptimalkan untuk web'.
• Standar web untuk gambar adalah 72 titik per inci (dpi), yang dapat dicapai dengan menyimpan gambar dalam format yang ditentukan di atas.

Anda dapat menggunakan Photoshop, Lightroom, atau editor serupa untuk memperkecil ukuran gambar menjadi sekitar 1.500 piksel atau kurang lebarnya. Di Photoshop, cukup buka Image > Image Size untuk menyesuaikan dimensi dan resolusi gambar Anda secara manual. Anda juga dapat membuka File > Export > Save for Web untuk mengoptimalkan gambar Anda untuk unggahan web :

Jika Anda tidak ingin menampilkan foto yang tajam dan jelas pada monitor yang lebih besar, Anda dapat memperkecil ukuran gambar.

Jika bekerja dengan Lightroom, buka File > Ekspor untuk menyesuaikan ukuran gambar secara manual saat mengekspornya:

Ukuran dan resolusi gambar hanyalah satu bagian dari teka-teki. Ketika datang untuk mengoptimalkan gambar Anda, Anda juga ingin memahami kompresi dan menggunakannya secara efektif.

Kompresi Gambar

Singkatnya, kompresi gambar adalah cara meminimalkan ukuran (dalam byte) file grafik, tanpa menurunkan kualitas gambar ke tingkat yang tidak dapat diterima. Seperti yang telah kita diskusikan, gambar beresolusi tinggi yang ukuran filenya terlalu besar dapat memengaruhi kecepatan halaman secara dramatis.

Di sisi lain, gambar yang dioptimalkan rata-rata 40 persen lebih ringan daripada gambar yang tidak dioptimalkan. Sebagai aturan umum, Anda ingin mengoptimalkan semua gambar dan media lain yang Anda unggah ke situs web Anda, baik sebelum atau selama proses pengunggahan.

Kompresi Lossy vs Lossless

Seperti yang kami sebutkan sebelumnya, JPEG dan PNG menggunakan dua jenis kompresi gambar yang berbeda. Kompresi lossless menjaga semua data dari file asli, tanpa mengorbankan kualitas.

Dengan kompresi lossless, Anda biasanya memecah file menjadi bentuk 'lebih kecil' untuk transmisi atau penyimpanan. Kemudian informasi tersebut disatukan kembali di ujung yang lain, sehingga dapat digunakan kembali.

Di sisi lain, kompresi lossy menghapus sebagian data yang terdapat dalam file gambar. Hal ini dapat mengakibatkan penurunan kualitas yang lebih besar, tetapi juga peningkatan kecepatan halaman yang lebih signifikan. Anda bahkan dapat menyesuaikan jumlah kompresi, untuk mencapai keseimbangan antara kualitas dan performa.

Plugin Kompresi Gambar

Gambar yang dimuat dengan cepat berarti situs yang lebih cepat dan SEO yang lebih baik. Berikut adalah beberapa plugin pengoptimalan gambar untuk membantu Anda dengan kompresi gambar.

Kompresi dan Pengoptimalan Gambar Smush

Plugin kompresi gambar Smush berfungsi untuk mengubah ukuran, mengoptimalkan, dan mengompres semua gambar Anda untuk web, sehingga memuat lebih cepat dari sebelumnya. Jika situs Anda kaya akan foto, maka plugin ini harus dimiliki.

Pengoptimal Gambar ShortPixel

Plugin Pengoptimal Gambar ShortPixel memampatkan semua gambar masa lalu dan masa depan serta PDF yang diunggah ke perpustakaan media Anda. Plugin ini menyediakan kompresi lossy dan lossless untuk sebagian besar jenis file. Jika Anda seorang fotografer, Anda dapat memilih kompresi JPEG glossy, yang menggunakan algoritme pengoptimalan lossy berkualitas tinggi.

Kompres gambar JPEG & PNG

Ingin mengoptimalkan JPEG dan PNG saja? Plugin ini menggunakan layanan kompresi gambar TinyJPG dan TinyPNG untuk membantu Anda dengan kompresi gambar. Rata-rata, gambar JPEG dikompresi sebesar 40-60 persen, dan gambar PNG sebesar 50-80 persen, tanpa kehilangan kualitas yang terlihat.

Pengoptimal Gambar EWWW

Pengoptimal Gambar EWWW melakukan tugas ganda. Keduanya mengoptimalkan gambar yang ada di situs Anda, dan menangani gambar baru yang Anda unggah juga. Selain itu, ini memberi Anda banyak kendali atas bagaimana (dan seberapa banyak) gambar Anda dikompresi.

Pengoptimal Gambar Kraken.io

Last but not least, Pengoptimal Gambar Kraken.io juga berguna untuk mengoptimalkan media baru dan yang sudah ada. Ini mendukung kompresi lossless lossless dan 'cerdas', membuatnya lebih mudah untuk mencapai gambar berkualitas tinggi dengan ukuran file yang lebih rendah.

Gambar Unggulan

Gambar unggulan tidak dimasukkan ke dalam badan posting WordPress, tetapi digunakan secara struktural di seluruh tema Anda. Ini mungkin muncul sebagai thumbnail di samping judul posting, misalnya, atau di header saat melihat posting tertentu.

Sebagian besar tema dan widget mengandalkan gambar unggulan, jadi ini bukan sesuatu yang ingin Anda lewatkan. Gambar unggulan memungkinkan penyesuaian yang lebih besar; Anda akan memiliki kemampuan untuk menampilkan gambar header khusus yang unik untuk posting dan halaman tertentu, atau mengatur thumbnail untuk fitur khusus tema Anda.

Setelah Anda memutuskan ukuran gambar unggulan yang Anda inginkan, ukuran tersebut akan tetap ditetapkan untuk semua gambar unggulan di masa mendatang. Ukuran yang harus Anda pilih bergantung pada tema situs WordPress Anda dan tata letak posting Anda.

Gambar unggulan biasanya lebih lebar daripada tinggi, mulai dari lebar 500 hingga 900 piksel. Yang terbaik juga adalah memilih gambar beresolusi tinggi dan bukan yang berpiksel.

Pro-tip: Untuk mengontrol media yang ditampilkan setiap kali postingan atau halaman dibagikan ke Facebook atau Twitter, instal plugin Yoast SEO. Anda tidak hanya dapat menyesuaikan judul dan deskripsi, tetapi juga mengunggah ukuran gambar yang benar untuk setiap saluran sosial.

Optimalkan Gambar Anda Setelah Mengunggah ke WordPress

Kami merekomendasikan untuk mengoptimalkan gambar Anda sebelum mengunggahnya. Namun, jika itu tidak memungkinkan, atau Anda ingin mengoptimalkan gambar yang sudah ada di situs Anda, Anda tetap dapat melakukannya. Ada beberapa metode yang dapat membantu Anda mengoptimalkan konten langsung Anda.

Gambar Beban Malas

Biasanya ketika seseorang mengunjungi halaman web, semua kontennya mulai dimuat. Artinya, untuk halaman yang sarat konten, perlu beberapa saat agar semuanya muncul.

'Lazy loading' melibatkan penyesuaian cara situs Anda memuat konten. Ini menginstruksikan situs Anda untuk fokus memuat teks, gambar, dan elemen lain yang langsung terlihat terlebih dahulu. Hanya setelah itu akan mulai memuat konten yang hanya dapat diakses dengan menggulir ke bawah halaman. Ini adalah cara yang bagus untuk mempercepat situs Anda dan meningkatkan pengalaman pengunjung Anda.

Cara termudah untuk menambahkan lazy loading ke situs Anda adalah melalui plugin seperti Lazy Load.

Ini adalah alat dari WP Rocket yang membantu mengurangi volume permintaan yang dikirim ke server web situs Anda sekaligus. Itu bahkan menggantikan gambar placeholder untuk video YouTube, sehingga video yang sebenarnya hanya akan dimuat sesuai kebutuhan.

Gambar Tembolok

Cara lain untuk meningkatkan kecepatan di situs Anda adalah melalui 'caching'. Ini melibatkan penyimpanan beberapa data situs Anda di tempat yang lebih mudah dan lebih cepat diakses oleh pengunjung,- sering kali di server pihak ketiga yang lebih dekat dengan lokasinya, atau di browser mereka.

Ada banyak cara untuk menyelesaikan caching melalui pengkodean, plugin, dan alat lainnya. Di sini, di WP Engine, kami menerapkan caching yang kuat di semua situs kami secara default. Ini bermanfaat untuk mengurangi dampak semua konten Anda pada kecepatan halaman, bukan hanya gambar Anda.

Hapus Data EXIF

Data EXIF ​​disimpan sebagai bagian dari file gambar, dan berisi informasi tentang di mana dan bagaimana gambar diambil. Ini secara otomatis ditambahkan ke gambar oleh kamera, dan umumnya tidak diperlukan untuk file web Anda.

Oleh karena itu, menghapus data ini dari gambar Anda dapat mempercepat halaman Anda, meskipun dampaknya tidak terlalu besar. Sayangnya, saat ini tidak ada plugin yang diperbarui yang dapat membantu Anda melakukan ini. Jadi, jika Anda menggunakan banyak foto di situs Anda dan mengkhawatirkan data EXIF, Anda perlu menghubungi pengembang untuk mendapatkan bantuan.

Hindari Pengalihan URL Gambar

Terakhir, elemen lain yang dapat memperlambat halaman Anda adalah saat gambar Anda menyebabkan pengalihan. Hal ini paling sering terjadi saat mereka menautkan ke tempat lain.

Oleh karena itu, Anda harus menghindari penyematan gambar dari sumber eksternal di situs Anda. Alih-alih, simpan dan unggah setiap gambar atau bagian dari media langsung ke situs Anda jika memungkinkan. Anda mungkin juga ingin memastikan bahwa gambar Anda tidak tertaut ke apa pun, seperti halaman media terpisah.

Mengoptimalkan Gambar untuk Mesin Pencari

Memformat judul gambar adalah langkah penting lainnya dalam pengoptimalan gambar. Ini berarti nama file gambar relevan dengan kontennya. Saat Anda melakukan ini, kemungkinan besar gambar tersebut akan muncul di hasil penelusuran gambar terkait melalui mesin telusur.

Ini akan meningkatkan visibilitas dan aksesibilitas merek Anda, serta lalu lintas ke situs Anda dengan membuat gambar situs Anda lebih sering dicantumkan dalam pencarian Gambar Google. Pengoptimalan gambar membutuhkan waktu yang sangat singkat dan dapat membuat perbedaan besar dalam lalu lintas situs Anda.

Berikut adalah beberapa tips tambahan untuk membantu peringkat gambar Anda lebih tinggi.

Teks Alt

Teks alternatif, atau dikenal sebagai 'alt text' atau 'alt tag', adalah atribut yang ditambahkan ke gambar dalam HTML. Teks alternatif membantu mesin telusur memahami tentang gambar Anda, dengan menjelaskan apa saja yang ada di dalamnya dan apa tujuannya.

Google mengandalkan teks alt untuk menentukan apa itu gambar karena yang 'dilihat' hanyalah apa yang ada di tag HTML. Bila Anda menggunakan teks alternatif yang kuat dan deskriptif untuk gambar Anda, kemungkinan besar Anda akan melihat situs Anda tercantum dengan tepat di hasil penelusuran.

Di WordPress, Anda dapat menambahkan teks alt ke gambar Anda dengan dua cara. Pertama, Anda bisa menambahkannya ke gambar yang telah ditempatkan di postingan, dengan mengklik gambar tersebut dan menggunakan opsi Pengaturan Gambar di sisi kanan layar.

Sebagai alternatif, Anda juga dapat menambahkan teks alt ke gambar dengan mengunjungi Media > Perpustakaan dan memilih gambar yang Anda inginkan. Kemudian, cukup tambahkan teks alternatif Anda ke bidang Teks Alternatif untuk gambar tersebut.

Tag Judul

Tag judul mirip dengan tag alt, tetapi untuk pembaca manusia, bukan bot mesin pencari. Pengoptimalan tag judul yang baik dapat membantu pengguna tunanetra mengakses situs web Anda.

Buat Peta Situs Gambar XML

Cara lain agar gambar Anda diperhatikan oleh Google adalah membuat peta situs dan mengirimkannya. Ini adalah opsi yang bagus untuk gambar yang tidak dapat dirayapi oleh mesin telusur.

Kita berbicara tentang gambar yang dimuat oleh JavaScript, misalnya. Peta Situs memberikan lebih banyak informasi kepada mesin telusur tentang gambar yang tersedia di situs Anda, sehingga mereka dapat memahami dan mengindeks konten Anda dengan lebih akurat.

Di WordPress, plugin berikut dapat membantu Anda membuat peta situs:

• Peta Situs Google XML
• Yoast SEO
• Paket SEO Lengkap
• Peta Situs Udinra Semua Gambar

Untuk website non-WordPress, ada juga tools yang bisa membantu dalam membuat sitemap, antara lain Screaming Frog, Dynomapper, dan lainnya. Setelah Anda membuat peta situs, Anda kemudian ingin mengirimkannya melalui alat webmaster Google.

Penempatan Gambar dan Keterangan

Last but not least, mari kita lihat penempatan visual dalam posting blog atau halaman web. Di mana Anda meletakkan gambar Anda di dalam sebuah pos dapat berdampak signifikan pada peringkatnya di Google.

Misalnya, jika Anda menempatkan gambar lebih dekat dengan frasa kata kunci Anda, kemungkinan besar peringkatnya akan lebih baik. Juga, perhatikan bahwa menambahkan keterangan kaya kata kunci ke gambar Anda dianggap sebagai teks pencarian, dan dapat membantu SEO gambar yang lebih baik.

Optimalkan Situs WordPress Anda dengan WP Engine

Pengoptimalan gambar mencakup banyak hal dalam hal meningkatkan situs web Anda. Mengoptimalkan dapat membantu meningkatkan pengalaman pengguna, dan menjaga waktu pemuatan Anda di bawah lima detik. Di sini, di WP Engine, kami memahami nilai yang dibawa pengoptimalan gambar ke situs web Anda. Itu sebabnya kami menawarkan lingkungan hosting WordPress terkelola khusus. Ini berarti Anda akan memiliki dukungan pakar dan alat serta sumber daya pengoptimalan yang komprehensif di ujung jari Anda!