Kiat pengoptimalan gambar dasar yang dapat diterapkan siapa saja untuk semua jenis situs.
Per Januari 2021, ada lebih dari 1,94 miliar situs web. Itu merupakan informasi persaingan situs menjadi sangat banyak. Apa salah satu cara terbaik agar situs kita kelihatan menonjol? Gambar yang bagus. Faktanya, penglihatan mendominasi semua indra lainnya ketika harus berinteraksi dengan dan menyerap informasi.
Berikut tiga fakta singkat untuk membantu memahami betapa pentingnya gambar bagi orang-orang (dan untuk SEO ):
1. 90% dari semua data yang dikirim oleh otak adalah data visual.
2. Otak manusia memproses satu gambar dalam jumlah waktu yang sama untuk membaca 1000 kata. (Ya, ternyata pepatah lama ini memang berakar dari fakta ilmiah.)
3. Nilai konten visual lebih cepat dipahami 65%, sedangkan untuk teks tertulis hanya 10%.
Dengan sebagian besar volume penelusuran yang berasal dari ponsel dan ditambah dengan fakta bahwa rentang perhatian orang telah berkurang menjadi delapan detik situs web harus dapat memberikan pengalaman pengguna yang cepat dan menyenangkan.
Apa yang dapat dilakukan pengoptimalan gambar untuk pengunjung dan untuk SEO ?
1. Dengan memangkas beberapa detik dari kecepatan situs, ini dapat mengurangi bounce rate dan meningkatkan retensi situs.
2. Ini membantu meningkatkan kecepatan memuat halaman, yang merupakan faktor peringkat Google utama.
3. Ini dapat membantu meningkatkan keunggulan kata kunci web.
4. Ini membantu dalam pencarian gambar, yang dapat menjadi nilai tambah yang besar terutama jika bisnis berbasis produk.
5. Banyak perangkat gadget dan desktop menggunakan layar resolusi tinggi, yang meningkatkan kebutuhan akan gambar berkualitas baik.
Kiat pengoptimalan gambar
Ini adalah beberapa tip yang dapat diterapkan siapa saja untuk semua jenis situs, jadi kalian tidak semata-mata bergantung pada pengembang dan desainer konten gambar.
A. MEMILIH JENIS GAMBAR YANG TEPAT. VECTOR ATAU BITMAP?
Gambar vector sederhana, dibuat dengan menggunakan garis, titik, dan poligon. Gambar vektor paling baik diterapkan untuk bentuk, logo, icons dan flat images. Gambar vector sama sekali tidak memiliki pixelation saat kita memperbesar, membuatnya cocok untuk perangkat resolusi tinggi. Selain itu, kita dapat menggunakan file gambar yang sama di berbagai platform (serta untuk desain situs web yang responsif) tanpa harus menggunakan banyak variasi.
Gambar bitmap adalah gambar yang dibuat persegi panjang, masing-masing dikemas dengan beberapa nilai warna (pixels). Gambar bitmap memberikan kedalaman pada citra yang ingin kalian sampaikan, memberikan daya tarik emosional dan psikologis karena gambar ini terlihat nyata. Namun, jika tidak ditangani dengan baik, ini dapat sangat menghambat kecepatan pemuatan situs! Selain itu, kalian mungkin harus menyimpan beberapa variasi file untuk memastikannya kompatibel pada platform yang berbeda dan sesuai untuk desain yang responsif.
Berikut adalah tabel yang dibagikan Google untuk membantu memahami hubungan pixels -ke-byte. Singkatnya, kalian akan mendapatkan gambaran tentang seberapa berat sebuah gambar berdasarkan dimensinya serta ukurannya.
Sumber: Google
Google juga menyebutkan bahwa dibutuhkan empat byte memori untuk mengirimkan satu pixels. Bayangkan jika memiliki beberapa gambar di situs dengan 800 X 800 pixels. situs kalian membutuhkan setidaknya sekitar 625 kBps. Atau dalam istilah yang lebih sederhana, bayangkan seekor gajah berpartisipasi dalam perlombaan kelinci.
Intinya
Saya akan menyarankan dengan bijak menggunakan campuran keduanya. Rasio ideal dapat berupa 40% gambar vector dan 60% gambar bitmap.
B. MEMILIH FORMAT GAMBAR TERBAIK SVG, JPG, PNG, ATAU GIF?
Format terbaik untuk gambar vector:
SVG adalah satu-satunya, dan yang terbaik, opsi untuk gambar vector. SVG juga dapat memiliki tampilan dengan kualitas tinggi yang mudah diskalakan.
Format terbaik untuk gambar bitmap:
1. PNG : Menghasilkan gambar berkualitas tinggi dengan ukuran file yang berat. Ini dapat digunakan hanya pada halaman-halaman tertentu pada web.
2. JPG : Menghasilkan gambar berkualitas baik yang tidak berat dalam hal ukuran file. Namun, jika kalian memperkecil resolusi gambar maka gambar akan kehilangan kualitas, yang artinya kehilangan beberapa detail gambar secara permanen.
JPG tidak diragukan lagi adalah format gambar yang disukai, yang memberi kemudahan mengunduh dan mengunggah gambar tanpa repot. Karena itu, ini adalah yang paling banyak digunakan - sekitar 72,3% situs web menggunakan format gambar JPG dan sebagian besar ponsel menyimpan gambar sebagai file ".JPG". Mereka terutama disarankan untuk situs ecommerce dan media sosial.
3. Gif : Jika kalian mencari animasi, GIF adalah pilihan ideal karena mendukung 256 warna berbeda yang dipilih dari ruang warna RGB 24-bit. Saat ini, hanya 26,6% situs web yang menggunakan format GIF.
C. MENGUBAH UKURAN GAMBAR
Dengan cloud yang penuh dengan perangkat, jelas mengapa orang bingung tentang ukuran gambar yang ideal.
Perhatikan bahwa ukuran gambar dan ukuran file gambar adalah dua hal yang berbeda. Di sini kami akan menjelaskan bagaimana kita bisa mendapatkan ukuran gambar yang ideal (juga disebut dimensi gambar).
Sebagai bagian dari dimensi gambar, kami juga akan membahas rasio aspek.
Apa itu rasio aspek?
Rasio aspek menunjukkan lebar dan tinggi gambar dan ditulis dalam format "x: y".
Mengapa ini penting?
Ingat saat kalian mencoba menskalakan gambar dan benar-benar membuatnya tidak proporsional? Mengacu pada rasio aspek gambar saat memotong atau mengubah ukuran gambar membantu menjaga keindahan dimensi gambar. Kalian dapat gunakan Shutterstock.
Sumber gambar dan data tabel: Shutterstock
Rasio aspek Dimensi umum (inci) Dimensi umum (piksel) Ideal untuk
1:1 8 x 8 1080 x 1080 Foto profil media sosial dan layar ponsel
3:2 6 x 4 1080 x 720 Fotografi dan cetak
4:3 8 x 6 1024 x 768 piksel TV, monitor, dan kamera digital
16:9 1920 x 1080 dan 1280 x 720 Presentasi, monitor, dan TV layar lebar
Dengan mengacu pada tabel di atas, sebaiknya fokus pada rasio gambar 1: 1 dan 4: 3 yang sesuai untuk media sosial, layar seluler, fotografi, dan media cetak.
Menurut Squarespace, ukuran paling ideal untuk pengoptimalan gambar pada CMS adalah 1500 dan 2500 pixels.
Berikut adalah jawaban cepat dan sederhana untuk mengetahui ukuran gambar yang paling umum untuk web.
Intinya
Dari pengamatan pribadi, saya menyarankan untuk menggunakan 1080 X 1080 pixels dan 1500 X 2500 pixels.
D. NAMA GAMBAR, CARA TERBAIK
Search engine memiliki otak tanpa mata, jadi gambar harus diberi nama yang tepat, Search engine tidak akan dapat "membaca" gambar web atau memberi peringkat yang sesuai. Di sinilah kata kunci ikut berperan. Seperti yang saya sebutkan di atas, jika memberi nama gambar dengan baik, maka dapat meningkatkan kepadatan kata kunci dan peluang peringkat.
Mari kita jelaskan ini dengan sebuah contoh:
1. Cara orang biasanya menyimpan gambar - "Angka dan abjad sembarangan / acak", "Bunga bisa menari", dan "Apa yang saya pikirkan"
2. Bagaimana orang harus menyimpan gambar - "lima-kiat-untuk-pengoptimalan-gambar" dan "-metode-ideal-untuk-penamaan-gambar-dalam-2021"
Beri nama gambar situs dalam semua huruf kecil dengan tanda hubung di antaranya dan tanpa spasi. Seperti yang Anda lihat, saya telah menggunakan kata kunci "pengoptimalan gambar" dalam contoh "lima-kiat-untuk-pengoptimalan-gambar". Kalian akan terkejut dengan betapa hal itu membantu dalam menentukan peringkat.
Bonus
Kalian juga dapat menggunakan berikut ini untuk meningkatkan penggunaan kata kunci di konten situs:
1. Teks alternatif (Jika gambar dimuat dengan lambat, teks ini muncul di tempat gambar sehingga pengguna bisa mendapatkan gambaran tentang apa yang seharusnya ada di sana.)
Teks (Teks yang memberikan deskripsi singkat, membantu pengguna mengetahui lebih banyak tentang gambar.)
2. Selain itu, jika kalian memiliki situs ecommerce, kalian juga bahkan dapat memanfaatkan data terstruktur (schema json) untuk memberikan detail yang lebih spesifik kepada mesin telusur tentang warna, jenis, ukuran produk, dan banyak lagi.
E. MENGOMPRESI UKURAN BYTE DARI FILE GAMBAR
Mengompresi file mungkin adalah yang paling sederhana namun merupakan bagian terpenting dari pengoptimalan gambar karena berkaitan langsung dengan waktu pemuatan situs web. Poin satu hingga empat mempersiapkan kita untuk tahap akhir pengoptimalan gambar ini.
Berapa ukuran file gambar yang ideal?
Ukuran file di bawah 70 kb adalah yang harus kita targetkan. Dalam kasus file berat mendekati 300 kb, yang terbaik yang dapat kita capai adalah ukuran file 100 kb. Dengan melakukan hal itu, gambar tidak perlu mengambil milidetik ekstra untuk dimuat.
Bagaimana kita bisa mengurangi ukuran file gambar?
Yang perlu kalian lakukan adalah meletakkan file-file ini di situs kompresi file dan sudah siap. Ini adalah beberapa tools online kompresi file gambar gratis yang bagus :
1. TinyPNG / TinyJPG - (Mengompresi file .png dan .jpg - 135 kb dikurangi menjadi 43,9 kb - Dapat menghasilkan hingga 20 gambar sekaligus - Mendukung dropbox)
2. Image optimizer - (Mengompresi file .png dan .jpg - 135 kb dikurangi menjadi 49 kb - Hanya melakukan 1 file dalam satu waktu)
3. WeCompress - (Mengompresi .png, .jpg, dan file lainnya - 135 kb dikurangi menjadi 48 kb - Hanya melakukan 1 file dalam satu waktu)
4. EzGif - (Mengompresi .gif dan file lain - 2MiB dikurangi menjadi 1.77MiB - Hanya melakukan 1 file pada satu waktu. Ini juga memungkinkan kita mengedit gif sebelum mengompresnya.)
Bonus tips
Gunakan font web sebagai pengganti gambar dengan teks karena tampilannya lebih baik, tidak perlu diskalakan dengan gambar, hemat ruang, dan hemat waktu pemuatan.
Gunakan resolusi 72dpi untuk setiap gambar.
Catatan penutup
Kalian bisa saja menggunakan semua tip pengoptimalan gambar ini dan masih terjebak dengan situs yang memuat dalam 13 detik atau bahkan lebih buruk. Inilah saat kita mungkin ingin bertanya pada diri sendiri:
1. Apakah saya membutuhkan semua gambar ini?
2. Gambar mana yang mubazir?
3. Di mana tempat terbaik untuk meletakkan gambar di situs?
Konten situs web, baik visual maupun tertulis, memiliki hubungan yang saling terkait yang merangsang emosi dan menginspirasi orang untuk lebih tertarik dengan produk atau layanan yang kita berikan. Orang-orang (atau setidaknya saya pribadi) menilai bisnis melalui situs webnya, jadi silakan beri tahu kami, mana situs web mengesankan terakhir yang kalian kunjungi? Atau apa yang telah kalian lakukan untuk pengoptimalan gambar?