Cara mengoptimalkan gambar untuk meningkatkan kecepatan halaman dan SEO situs web Anda

Satu kesalahan umum yang saya lihat ketika melihat halaman web langsung dan saat ini dirancang untuk strategi SEO SaaS mereka adalah bahwa gambar tidak dioptimalkan dengan baik untuk kesehatan dan kecepatan situs web secara umum. Kita semua pernah mendengar kutipan "Sebuah gambar bernilai seribu kata." Meskipun klise, itu benar dan mungkin lebih berharga.

Gambar menangkap perhatian kita dan membantu kita berhubungan dengan apa yang kita lihat. Mereka membangun sebuah cerita dan cenderung membuat kesan yang jauh lebih bertahan lama daripada sekadar kumpulan teks yang besar. Banyak orang suka mendapatkan stok gambar dari situs fotografi stok bebas hak cipta seperti Unsplash.

Google sangat memprioritaskan halaman cepat. Dengan mengabaikan langkah-langkah yang diperlukan untuk pengoptimalan gambar, Anda menyiapkan diri untuk perjuangan yang berat. Jumlah gambar yang ditambahkan ke halaman secara langsung memengaruhi waktu kecepatan muat. Semakin banyak gambar yang dimiliki halaman, semakin lambat kecepatan pemuatannya. Dalam panduan ini, kita akan mengunjungi 5 langkah yang saya lalui saat mengoptimalkan gambar untuk kecepatan halaman dan mesin pencari.

Memotong dan mengubah ukuran gambar Anda

Secara default, foto yang kami unduh sangat besar dan berkualitas tinggi. Memutuskan seberapa besar atau apa resolusi gambar ini harus ditentukan oleh ukuran terbesar gambar Anda akan dilihat. Orang-orang berpikir bahwa mereka memiliki citra kualitas tertinggi untuk mengesankan pelanggan mereka atau bahkan diri mereka sendiri, tetapi mereka tidak menyadari dampak yang sangat negatif ini. Saat memutuskan ukuran gambar yang seharusnya, pikirkan tentang ukuran terbesar gambar akan dilihat.

Anda tidak perlu dimensi gambar menjadi 6000 x 6000 piksel jika hanya akan digunakan untuk gambar profil kecil atau headshot yang akan terlihat 300 x 300 piksel. Dari pengalaman saya, saya menemukan bahwa gambar terbesar di halaman akan menjadi gambar pahlawan di bagian atas. Ukuran yang aman untuk tetap bertahan sambil mempertahankan kualitas adalah menjadikannya ukuran definisi tinggi standar 1920 x 1080 piksel.

Kiat dan trik: Jika gambar spanduk untuk blog atau laman web tampil dengan kualitas sedikit lebih rendah daripada yang Anda inginkan, pertimbangkan untuk menerapkan hamparan transparan. Ini akan membuatnya tampak seperti bagian dari desain dan membuat teks lebih mudah dibaca.

Di bawah ini, saya menggunakan Figma untuk mengubah ukuran dan memotong gambar saya. Prosesnya sangat mudah karena yang harus Anda lakukan hanyalah drag and drop kemudian ubah gambar sesuai keinginan Anda. Berikut adalah dua kontrol yang Anda butuhkan untuk mengedit gambar Anda dengan benar menggunakan Figma di windows.

• Shift + Drag - Akan menskalakan seluruh gambar ke atas atau ke bawah sambil mempertahankan rasio yang sama.
• Ctrl + Drag - Hanya akan mengubah tinggi atau panjang tanpa meregangkan gambar.

Mengekspor sebagai jenis file yang berbeda

Penting untuk memikirkan jenis format file apa yang ingin Anda gunakan. Banyak format dapat melayani tujuan yang berbeda. Masing-masing dilengkapi dengan pro dan kontra sendiri tergantung pada pandangan pengguna. Berikut adalah beberapa yang paling umum yang biasanya saya lihat:

• PNG - Bagus untuk desain grafis atau gambar yang Anda perlukan untuk melihat detail kecilnya. Ini harus dibayar dengan ukuran file yang lebih besar.
• JPEG - Untuk fotografi kehidupan nyata orang dan lokasi. Itu dapat dikompresi lebih banyak tetapi kehilangan sedikit lebih banyak informasi karena Anda tidak memerlukan banyak detail dalam hal ini.
• SVG - Bagus untuk ikon dan logo karena ini dapat ditingkatkan dan diturunkan tanpa kehilangan kualitas apa pun. Ini hanya dapat bekerja pada file gambar yang dibuat.
• WEBP - Versi gambar yang lebih baru yang dapat menggantikan PNG dan JPEG. WEBP memiliki kualitas gambar yang mirip dengan keduanya sekaligus dapat menghemat ruang 25%-40%. Satu-satunya downside adalah bahwa saat ini, browser Safari Apple tidak mendukung ini sehingga Anda memerlukan JPEG atau PNG cadangan untuk memuat.
• GIF - Ini adalah klip video atau animasi yang cenderung diputar dalam satu lingkaran. Ini bagus untuk menangkap adegan atau memamerkan bagaimana antarmuka produk dapat bekerja. Artikel ini memberikan beberapa contoh bagus tentang bagaimana mereka dapat digunakan. Karena mereka adalah urutan gambar yang dianimasikan, mereka biasanya akan menjadi ukuran file yang lebih berat dibandingkan dengan satu gambar tunggal.

Saya senang menggunakan JPEG kapan pun saya bisa karena ini membutuhkan data paling sedikit, tetapi di sini saya menggunakan PNG untuk memberikan sedikit lebih banyak kejelasan pada tangkapan layar. Seperti halnya WEBP, mungkin ada format yang lebih baru lagi, jadi ini adalah praktik terbaik untuk terus meneliti bagaimana Google melihat dan memberi peringkat pada setiap format yang tersedia untuk menemukan jawaban tercepat dan terbaik untuk halaman web Anda. Berikut ini tautan ke panduan yang lebih mendalam tentang jenis gambar paling populer.

Gunakan kompresor gambar

Langkah selanjutnya adalah mencoba untuk mendapatkan file yang Anda miliki sekecil mungkin dengan mengompresi dan mengurangi ukuran file. Dengan membuka kompresor gambar dan memproses gambar, terkadang kita bisa membuat gambar kita menjadi 90% lebih kecil dalam ukuran file. Alat yang sangat berguna yang saya suka gunakan disebut Compressor. Dengan menggunakan alat ini, Anda dapat mengompres hingga 50 gambar sehari dengan paket gratisnya.

Di sini saya mengambil gambar yang saya ekspor dan saya menyeretnya langsung ke bagian drop gambar. Setelah beberapa detik, gambar baru siap untuk diunduh dan berukuran kurang dari sepersepuluh dari ukuran aslinya. Anda juga dapat mengimpor banyak gambar dan mengunduh semuanya sekaligus seperti yang ditunjukkan dengan opsi di bagian bawah.

"Malas" vs "Bersemangat" memuat gambar Anda

Sekarang setelah Anda memiliki gambar Anda dalam format yang benar dan dikompresi ke ukuran yang benar, Anda mungkin berpikir bahwa Anda semua baik-baik saja, tetapi masih ada beberapa hal lagi untuk memastikan Anda melakukannya. Di banyak template dan situs web, kecepatan pemuatan gambar diatur untuk dimuat secara default browser yang dapat menyebabkan semua gambar Anda di halaman dimuat secara bersamaan. Solusi untuk ini adalah dengan malas memuat gambar.

Pemuatan "Lazy" menunda pemuatan elemen hingga terlihat di halaman. Bila Anda memiliki lebih dari beberapa gambar, ini dapat meningkatkan kinerja situs. Kebalikan dari ini adalah pemuatan "Eager" yang memuat elemen segera. Ini biasanya sejalan dengan pengaturan web default karena tidak ada pengaturan preferensi tentang gambar mana yang harus dimuat pertama atau terakhir.

Berikut ini contoh di editor blog HubSpot. Setelah menavigasi ke opsi lanjutan untuk gambar yang disisipkan, kita dapat melihat bahwa kita dapat mengatur pengaturan pemuatannya. Pilih "Malas" dan tekan terapkan. Gambar sekarang muncul setiap kali pengguna menggulir lebih dekat ke sana dan mengurangi waktu pemuatan yang berharga itu.

Ingatlah untuk menambahkan teks alternatif

Hal terakhir yang harus dikunjungi adalah menyertakan teks Alt di gambar Anda. Ini mungkin tidak memengaruhi kecepatan pemuatan halaman Anda, tetapi selalu penting untuk dipertimbangkan dan ditambahkan. Ketika Anda membiarkan bagian itu kosong, Anda kehilangan banyak peluang untuk meningkatkan peringkat SERP Anda.

Hal penting yang perlu diperhatikan adalah bahwa teks Alt menjelaskan "mengapa" gambar yang berkaitan dengan konten. Itu diindeks oleh google dan dibacakan dengan teks ke ucapan untuk tunanetra. Jika Anda hanya memasukkan satu kata kunci ke dalam gambar yang tidak menjelaskan apa yang terjadi, maka itu mungkin bukan pendekatan terbaik.

Di sini saya telah menambahkan teks alt ke dalam gambar. Saya mendasarkannya pada frasa kesehatan kecepatan halaman SEO. Alih-alih hanya memasukkan kata kunci, jelaskan juga bagaimana atau tindakan apa yang ada di gambar. Saya memutuskan untuk menguraikan dengan menggunakan frasa "Memeriksa kesehatan kecepatan halaman SEO menggunakan grafik".

Ini jauh lebih informatif tentang apa yang bisa dilakukan gambar untuk pengindeksan Google dan memberikan aksesibilitas yang lebih besar kepada tunanetra.

Mari kita tinjau langkah-langkah untuk membuat/mengoptimalkan gambar:

1. Seret gambar ke editor gambar seperti Figma untuk memotong dan mengubah ukuran.
2. Ekspor sebagai jenis gambar yang sesuai (PNG, JPEG, SVG, WEBP, dll.)
3. Bawa ke situs kompresor gambar seperti Compressor atau Image Resizer Online
4. Masukkan gambar terkompresi ke dalam konten Anda sebagai pemuatan lambat.
5. Tambahkan teks alternatif yang menjelaskan gambar di halaman Anda.
6. Anda sekarang memiliki gambar yang sempurna untuk situs Anda!
7. Lihat Google Search Console untuk memeriksa peningkatan kinerja Anda.

Ikuti langkah-langkah ini dan Anda akan berada di jalur yang benar untuk memelihara dan mengoptimalkan gambar Anda untuk SEO dan mempercepat kecepatan halaman Anda, menciptakan pengalaman pengguna yang fantastis!