5 Tips Mengoptimalkan Gambar untuk Web tanpa Kehilangan Kualitas

Ungkapan kuno "sebuah gambar melukiskan seribu kata" sering digunakan dalam usaha pemasaran untuk menggambarkan pentingnya sebuah gambar dalam menjual produk dengan sukses. Sebab, pelanggan sangat bergantung pada ilustrasi produk (untuk memahami kualitas, warna, dan spesifikasi lain suatu produk) daripada konten tertulis. Tingkat kunjungan situs web Anda dapat naik atau turun secara drastis, tergantung pada kualitas gambarnya. Jadi, tidak perlu dikatakan lagi bahwa gambar yang Anda berikan di situs web Anda harus beresolusi tinggi dan tajam. Namun, ada tangkapan.

Gambar berkualitas rendah yang diekspor secara tidak benar cenderung terlihat menjemukan di halaman web dan gambar berkualitas sangat tinggi menyebabkan situs dimuat dengan lambat dan karenanya, dalam kedua kasus tersebut, Anda akhirnya kehilangan keterlibatan dari pengguna Anda. Penelitian menunjukkan bahwa 53% orang meninggalkan situs seluler jika situs membutuhkan waktu lebih dari 3 detik untuk dimuat. Situs web yang memuat terlalu lama juga cenderung mengalami rasio pentalan tinggi yang pada akhirnya menyebabkan Google membenci situs web Anda. Ini, pada gilirannya, sangat memengaruhi peringkat SEO Anda.

Jadi seperti yang Anda lihat, untuk meningkatkan tingkat percakapan Anda, dan mempertahankan peringkat SEO Anda bersama dengan kinerja situs web, akan sangat penting untuk mengurangi waktu buka halaman Anda. Karena gambar menyumbang sebagian besar waktu buka situs web. Menjadi penting untuk menemukan keseimbangan sempurna antara kualitas gambar dan ukuran file gambar untuk meningkatkan waktu buka situs web dan pada gilirannya, meningkatkan SEO.

Ada trik dan teknik tertentu yang dapat Anda gunakan untuk mengoptimalkan gambar Anda untuk web sehingga ruang kosong dan foto definisi tinggi yang dimuat lambat tidak membuat pengunjung Anda berpaling karena frustrasi. Lihatlah lima cara terbaik untuk mengoptimalkan gambar Anda untuk memastikan setiap grafik indah, tajam, dan enak dipandang.

1. Simpan gambar dalam ruang warna yang tepat

Komputer menggunakan dua ruang warna untuk menampilkan gambar; RGB dan CMYK. RGB, yang merupakan singkatan dari Merah, Hijau dan Biru adalah ruang warna default yang digunakan oleh perangkat digital seperti kamera dan komputer. Selain itu, Anda juga akan menemukan profil warna lain CMYK (yang merupakan singkatan dari cyan, magenta, kuning dan hitam) yang umumnya digunakan pada printer. Jika Anda ingin menggunakan gambar ini untuk situs web Anda, penting untuk mengubah warna ke RGB agar gambar terlihat jelas dan cerah.

Anda dapat menggunakan perangkat lunak seperti Illustrator atau Adobe Photoshop untuk mengonversi gambar CMYK ke RGB. Misalnya, jika Anda menginstal Photoshop di sistem Anda, cukup buka opsi "Gambar" di bilah menu Anda dan pilih "Mode" dropdown dan pilih warna RGB. Kemudian kunjungi bagian File untuk Menyimpan file. Anda akan segera melihat warna tampak lebih mengkilap dan hidup setelah Anda selesai mengedit.

2. Kompres ukuran file

Kualitas gambar sangat tergantung pada faktor-faktor seperti ukuran file akhir dan pengaturan kompresi. Selain itu, Anda juga perlu memastikan bahwa gambarnya tajam dan tidak berpiksel. Saat menyimpan gambar dari web, pastikan ukuran file kurang dari 2MB (2048 kilobyte) untuk mempertahankan kecepatan pemuatan halaman yang cepat.

Dengan pengaturan kompresi yang benar, Anda akan dapat mencapai kualitas gambar yang baik bersama dengan ukuran file yang optimal. Umumnya, untuk menghindari pikselasi, Anda dapat mencoba menyimpan file dengan tingkat kompresi gambar 70-80% atau titik warna individual. Namun, Anda harus ingat bahwa jumlah kompresi akan bervariasi pada sejumlah faktor yang melibatkan format gambar asli dan ukuran file. Anda dapat menggunakan alat gratis seperti Imagify jika Anda ingin mengompresi ukuran file lebih jauh.

3. Gunakan format file yang benar

Ada empat jenis file utama yang dapat Anda gunakan untuk menyimpan gambar dan grafik dari web: PNG, GIF, JPG, dan SVG. Masing-masing format ini memiliki kekurangan, manfaat, dan kasus penggunaan yang dimaksudkan, dan Anda perlu mengetahui jenis gambar tertentu sebelum Anda mulai memformat gambar tersebut.

Pertama, Anda harus memeriksa apakah file Anda adalah gambar raster atau vektor dan menyimpan file yang sesuai. Gambar raster umumnya ditangkap dengan kamera atau pemindai yang dibuat dengan program berbasis piksel. Jenis gambar ini memiliki jumlah piksel yang terbatas dan dengan cepat kehilangan kualitasnya saat Anda mencoba mengubahnya ke format yang lebih besar. Format PNG, JPEG dan JPG paling cocok untuk gambar raster.

Di sisi lain, Grafik vektor dibuat dengan perangkat lunak vektor dan dapat berukuran tak terbatas (itu juga tanpa kehilangan kualitasnya). Format file SVG dan GIF paling cocok untuk gambar vektor, sementara itu juga dapat disimpan sebagai JPG atau PNG. Namun, dalam kasus terakhir, Anda mungkin kehilangan kemampuan untuk menskalakan grafik Anda tanpa batas.

4. Ekspor beberapa ukuran gambar

Karena perangkat seluler memiliki layar resolusi lebih tinggi daripada komputer desktop biasa, sebagian besar pengguna lebih suka menggunakan perangkat seluler untuk melihat konten digital. Layar dengan kepadatan tinggi ini dengan teknologi HiDPI, Retina memiliki lebih dari 200 piksel per inci (PPI) ketika standar untuk sebagian besar komputer desktop adalah 72 PPI. Jika seseorang melihat gambar 72 PPI di perangkat seluler mereka alih-alih melihatnya di komputer, itu tidak akan terlihat tajam dibandingkan dengan gambar yang disimpan dengan lebih banyak piksel.

Berikut cara efektif untuk memastikan kualitas gambar Anda sesuai untuk peramban seluler dan desktop:

Ekspor gambar Anda dalam skala @2x dan @3x, yaitu versi revisi gambar Anda menjadi 2x (200%) atau 3x (300%)

ukuran aslinya. Ini akan memungkinkan browser web seluler pengguna untuk secara otomatis menampilkan gambar dalam 2x atau 3x dari ukuran aslinya di ruang yang sama.

5. Gunakan teks alternatif untuk mendeskripsikan sumber gambar

Teks alternatif, juga dikenal sebagai teks alternatif atau atribut alt, adalah frasa pendek yang ditulis dalam kode HTML yang memberikan informasi tentang sumber gambar. Google menempatkan alt-text-images pada nilai yang relatif tinggi karena gambar-gambar ini tidak hanya melayani tujuan dasar untuk menyenangkan audiens Anda, tetapi juga karena memainkan peran penting dalam optimasi SEO situs web Anda. Ini karena Anda mendapatkan kesempatan untuk memasukkan teks dan frasa dengan kata kunci SEO untuk mendapatkan peringkat tinggi di Google. Misalnya, kode HTML tanpa teks alternatif muncul sebagai, https://pexels.com/photo/dog
sedangkan ketika teks alt disertakan, itu muncul sebagai

<img src=http://pexels.com/photo/dog.jpg alt=“dog-play-in-the-stairway”>

Teks alternatif ini juga berguna untuk pembaca situs web dengan gangguan penglihatan. Pembaca layar membacakan teks alt ini dan menjelaskan tentang gambar serta fungsi gambar pada halaman. Ini juga membantu pengguna dengan koneksi internet yang lambat untuk memahami konteks foto dan mengurangi rasio pentalan Anda dalam prosesnya.

Ada juga berbagai platform online seperti compressPNG.com, Smush.it, webresizer.com dll. yang dapat Anda gunakan untuk mengoptimalkan gambar situs web Anda tanpa terlalu banyak mengorbankan kualitas gambar.

Tampaknya banyak kerumitan, mengapa repot-repot?

Nah, seperti yang sudah dibahas sebelumnya, dampak dari gambar besar pada waktu loading website akan merugikan pertumbuhan Anda. Dan selain itu, Anda juga perlu memperhitungkan dampak berikut,

Google akan menghukum situs web yang haus data dan lambat, memberi mereka prioritas yang lebih rendah dalam hasil SERP.

Gambar besar memakan banyak ruang server yang pada akhirnya akan menghabiskan lebih banyak uang.

Semakin besar halaman web Anda, semakin banyak data yang dibutuhkan pengguna Anda untuk melihat dan menambahkan ke rasio pentalan Anda (karena pengguna dengan kuota data seluler terbatas akan skeptis tentang tinggal di situs Anda terlalu lama)

Cara saya melihatnya, pengoptimalan gambar terutama tentang menghormati pengguna situs web Anda. Audiens Anda pasti akan menghargai pengalaman yang apik dan cepat dan kemungkinan besar akan kembali ke halaman Anda berkali-kali. Dan tentu saja, itu akan dihargai oleh Google karena pemuatan cepat, situs ramah seluler sangat disukai oleh mesin pencari.

Tak perlu dikatakan, tingkat kompresi Anda akan tetap berbeda sesuai dengan kompleksitas gambar Anda. Blog ini bertujuan untuk memberi Anda strategi dasar sehingga Anda dapat melakukan optimasi penting dalam waktu yang minimal. Namun, ada banyak sekali informasi yang tersedia di internet dan jika Anda ingin meningkatkan pengetahuan Anda, ketik saja di mesin pencari Anda "optimasi gambar untuk web tanpa mengurangi kualitas" dan langsung masuk.