6 Cara Mengoptimalkan Gambar untuk Performa Web yang Lebih Baik

6 Cara Mengoptimalkan Gambar untuk Performa Web yang Lebih Baik
Rick Davis

Manusia adalah makhluk visual, dan penelitian mendukung fakta tersebut. Setelah hanya tiga hari, tingkat retensi untuk teks hanya berkisar antara 10% - 20%, namun untuk gambar, tingkat retensi bisa mencapai 65%. Otak menerima 90% informasi visual dan memprosesnya 60.000 kali lebih cepat. Tidak diragukan lagi, visual memainkan peran penting dalam keterlibatan situs web.

Namun, dibutuhkan lebih dari sekadar memilih beberapa gambar dan menempatkannya di sekitar situs Anda. Gambar yang berat menghabiskan banyak bandwidth, sehingga memperlambat kecepatan pemuatan halaman. Mesin pencari akan menyadari kinerja yang lambat dan menghukum Anda dengan peringkat yang rendah.

Artikel kami akan menunjukkan kepada Anda enam cara berbeda untuk mengoptimalkan gambar demi performa web yang lebih baik pada tahun 2021.

Kiat pengoptimalan gambar untuk kinerja web yang lebih baik di

Katakanlah Anda mendesain situs web untuk organisasi nirlaba dan Anda suka menggunakan banyak gambar untuk memamerkan hasil karya Anda. Donatur, sponsor, dan pemangku kepentingan lainnya menggunakan informasi tersebut sebagai dasar untuk terus mendukung. Namun, jika Anda tidak mengoptimalkan gambar, pengalaman pengguna dan keterlibatan akan terganggu. Masalah terbesar adalah lambatnya pemuatan halaman dan respons waktu habis.

Optimalisasi gambar mengacu ke langkah apa pun yang Anda lakukan untuk mengurangi ukuran, format, atau resolusi file. Anda dapat melakukan ini tanpa mengorbankan kualitas gambar.

Mari kita lihat beberapa pilihan Anda.

Ilustrasi Kampanye Pemasaran oleh Deemak Daksina

1. Mulailah dengan audit pengoptimalan gambar

Audit pengoptimalan gambar akan memberikan informasi yang relevan tentang hal-hal yang perlu Anda tingkatkan.

Mulailah dengan melakukan inventarisasi gambar yang Anda miliki di situs Anda. Tes yang relevan akan mendiagnosis masalah apa pun yang perlu Anda tangani.

Sebagai contoh, audit mungkin menunjukkan bahwa Anda memiliki terlalu banyak gambar. Audit ini juga akan menunjukkan format gambar Anda dan memungkinkan Anda untuk menentukan tindakan selanjutnya. Misalnya, menghapus atau mengubah format file dapat secara signifikan meningkatkan kecepatan pemuatan halaman.

2. Pilih format yang tepat untuk gambar

File gambar tersedia dalam berbagai format. Berikut ini adalah tiga jenis format gambar yang paling umum untuk aplikasi web yang perlu Anda ketahui:

  • PNG memiliki keunggulan sebagai gambar yang sangat berkualitas tinggi. Sayangnya, untuk mencapai hal ini, ukuran file sangat besar. PNG bekerja dengan baik untuk gambar dan logo sederhana dan memungkinkan kompresi lossless.
  • JPEG adalah yang paling umum di sebagian besar situs web, dan sangat bagus untuk gambar yang rumit dan berwarna-warni. Namun demikian, Anda harus berhati-hati apabila mengompresi gambar JPEG, karena kejernihannya bisa berkurang, semakin kecil ukurannya. Sebagian orang menyebutnya sebagai lossy.
  • GIF berfungsi untuk animasi, ikon kecil, dan gambar beresolusi rendah. GIF memungkinkan kompresi lossless, tetapi Anda hanya dapat menggunakan hingga 256 warna.

Simpan Ikon oleh Andreas Storm

3. Mengubah ukuran dan memampatkan gambar

Anda mungkin telah memperhatikan bahwa gambar tampak memuat sedikit demi sedikit. Beberapa waktu akan berlalu sebelum Anda dapat melihat gambar secara penuh; suatu pertanda bahwa gambar mungkin terlalu berat. Mengubah ukuran atau mengompres akan mengatasi masalah ini.

Harap diperhatikan, bahwa Anda tidak boleh mengunggah gambar apa pun sebelum mengoptimalkannya. Dan untuk kualitas terbaik, usahakan agar file berada dalam kisaran 1 hingga 2 MB.

Gunakan alat pemangkasan untuk mengubah ukuran gambar. Ini membantu mengurangi ukuran file, sehingga menghasilkan kecepatan pemuatan halaman yang lebih baik. Anda memiliki banyak sekali alat bantu yang dapat Anda gunakan.

Mengompresi gambar membantu mengurangi ukuran file, tetapi Anda bisa mendistorsi gambar jika terlalu banyak mengompresnya. Kompresi rendah mungkin ideal jika Anda ingin mempertahankan kualitas gambar, tetapi tidak secara signifikan mengurangi ukurannya.

Jenis-jenis kompresi

Ada dua konsep yang sudah kami sebutkan di atas, kompresi lossless vs lossy.

  • Kompresi lossless mempertahankan kualitas gambar sekaligus menghapus metadata yang tidak perlu.
  • Kompresi lossy mengurangi ukuran file dengan membuang sebagian elemen, dan mungkin mengorbankan kualitas gambar, tetapi Anda mungkin tidak menyadari perbedaannya. Jadi, kompresi lossy masih merupakan cara yang sangat baik untuk mengompresi gambar.

Editor gambar yang tepat akan membantu Anda menentukan kompresi mana yang paling sesuai untuk Anda.

4. Pengoptimalan gambar yang mengutamakan seluler

Setiap langkah yang Anda ambil harus mengikuti strategi SEO yang mengutamakan seluler, karena Google beralih ke peringkat pertama seluler. Gambar harus terlihat sama di perangkat seluler apa pun seperti di perangkat desktop. Sejumlah besar lalu lintas internet datang melalui perangkat tersebut.

Jika pengguna tidak terlibat dengan UX yang baik saat menggunakan perangkat seluler, Anda akan kehilangan mereka.

Pertimbangkan untuk mengoptimalkan gambar untuk mobile-first. Jika terlihat bagus di layar kecil, maka akan terlihat fantastis di desktop atau laptop.

Pengoptimalan ASO oleh Abbi_Kerimov

5. Nama file dan dampaknya terhadap SEO

Pengoptimalan gambar juga mengharuskan Anda untuk memperhatikan bagaimana Anda menamai file. Semua tindakan yang Anda lakukan harus memiliki tujuan untuk meningkatkan visibilitas di mesin pencari. Ketika Anda mengunggah atau mengambil gambar, perangkat akan secara otomatis memberinya nama file. Nama ini biasanya terdiri dari kode atau angka acak. Mungkin terlihat seperti 2224444.jpg.

Mengunggah gambar apa adanya di situs web Anda tidak akan membantu mesin pencari sama sekali.

Permudah perayap web untuk menemukan Anda dengan mengalokasikan label deskriptif pada setiap gambar. Masukkan kata kunci yang relevan yang memberikan informasi tentang bisnis atau situs Anda.

6. Pertimbangkan untuk menggunakan pemuatan malas

Pemuatan gambar yang malas persis seperti namanya, alih-alih seluruh gambar dimuat sekaligus, gambar akan terus dimuat, semakin banyak pengunjung online menggulir ke bawah halaman.

Lihat juga: Bercerita dalam Desain - Tren Teratas Tahun 2021

Lazy loading hanya menampilkan apa yang relevan pada saat itu. Anda akan menghemat bandwidth karena Anda tidak akan menggunakan sumber daya yang tidak perlu.

Memuat... oleh Dona

Lihat juga: Desain Grafis Geometris: Panduan Lengkap dan Definisi

Pikiran terakhir

Performa web adalah faktor peringkat penting yang digunakan mesin pencari. Google akan menghukum situs Anda jika kecepatan pemuatan halaman rendah.

Banyak faktor yang menentukan kecepatan halaman, dan penggunaan gambar menempati salah satu posisi teratas. Jika Anda tidak mengoptimalkan gambar, performa web Anda akan menurun. Halaman akan dimuat dengan lambat, dan pengalaman serta keterlibatan pengguna tidak akan baik.

Pilih format gambar yang tepat. Selanjutnya, gunakan teknik seperti mengubah ukuran dan mengompresi untuk mengurangi ukuran file. Jadwalkan pengujian halaman secara teratur dan audit situs untuk memeriksa kinerja situs.




Rick Davis
Rick Davis
Rick Davis adalah desainer grafis dan seniman visual berpengalaman dengan pengalaman lebih dari 10 tahun di industri ini. Dia telah bekerja dengan berbagai klien, mulai dari perusahaan rintisan kecil hingga perusahaan besar, membantu mereka mencapai tujuan desain dan meningkatkan merek mereka melalui visual yang efektif dan berdampak.Lulusan School of Visual Arts di New York City, Rick bersemangat mengeksplorasi tren dan teknologi desain baru, dan terus mendorong batas-batas dari apa yang mungkin di lapangan. Dia memiliki keahlian mendalam dalam perangkat lunak desain grafis, dan selalu ingin berbagi pengetahuan dan wawasannya dengan orang lain.Selain pekerjaannya sebagai desainer, Rick juga seorang blogger yang berkomitmen, dan berdedikasi untuk meliput tren dan perkembangan terbaru dalam dunia perangkat lunak desain grafis. Dia percaya bahwa berbagi informasi dan ide adalah kunci untuk membina komunitas desain yang kuat dan bersemangat, dan selalu bersemangat untuk terhubung dengan desainer dan kreatif lainnya secara online.Apakah dia mendesain logo baru untuk klien, bereksperimen dengan alat dan teknik terbaru di studionya, atau menulis posting blog yang informatif dan menarik, Rick selalu berkomitmen untuk memberikan karya terbaik dan membantu orang lain mencapai tujuan desain mereka.