Cara Mengoptimalkan Gambar Anda untuk Menjadi SEO Friendly (Panduan Lengkap)

Kinerja situs web Anda bergantung pada beberapa faktor mulai dari host web tertentu yang Anda pilih, lebih dari mengikuti pedoman aksesibilitas situs web, hingga ukuran file gambar yang Anda gunakan.


Namun, memformatnya untuk ukuran yang tepat dapat mengurangi kualitas karena modifikasi yang Anda lakukan. Berita baiknya adalah Anda dapat mempertahankan kualitas gambar yang optimal dan mendapatkan ukuran yang tepat dengan beberapa teknik dan trik.

Apa itu Pengoptimalan Gambar?

dimensi pengoptimalan gambarHalaman web dapat mengalami pelambatan yang signifikan ketika gambar besar hadir. Ini dapat mengurangi waktu pemuatan dan menjadikan pengalaman keseluruhan di bawah standar untuk pengunjung situs Anda.

Mengurangi ukuran file adalah pengoptimalan gambar. Anda dapat menggunakan skrip atau plugin untuk ini.

Ini kemudian menghasilkan waktu pemuatan yang lebih cepat untuk halaman Anda. Kompresi lossless dan lossy adalah dua metode optimasi yang paling umum.

Manfaat Pemformatan Gambar

ukuran gambar rata-rata di webDiperkirakan sekitar 54 persen dari total berat laman web disebabkan oleh gambar.

Ketika Anda mengerjakan optimasi situs web, gambar Anda harus menjadi tugas pertama Anda karena hal ini. Manfaat pemformatan gambar meliputi:

  • Peningkatan kecepatan pemuatan halaman
  • Lebih cepat membuat cadangan
  • Lebih sedikit ruang penyimpanan server diperlukan
  • Peningkatan SEO dengan plugin SEO yang tepat
  • Bandwidth lebih sedikit digunakan

Cara Meningkatkan Kinerja dengan Optimasi Gambar

Tujuannya adalah untuk menyeimbangkan kualitas yang dapat diterima dan ukuran file serendah mungkin. Ada lebih dari satu cara bagi Anda untuk melakukan ini. Sebelum mengunggah, mengompresi gambar Anda adalah pilihan umum. Anda dapat menggunakan alat atau plugin untuk tujuan ini (berikut adalah beberapa).

Penting untuk mempertimbangkan jenis kompresi dan format file yang Anda gunakan. Kombinasi yang tepat memungkinkan untuk mengurangi ukuran gambar Anda hingga lima kali.

Lakukan percobaan dengan berbagai format file dan tipe kompresi untuk menentukan kombinasi terbaik untuk kebutuhan Anda.

Pilih Format File Terbaik

Untuk memilih jenis file terbaik, penting untuk mengetahui mana yang tersedia. Ini adalah yang paling umum:

  • JPEG: Tipe ini menggunakan optimasi lossless dan lossy. Anda dapat menemukan keseimbangan besar antara ukuran dan kualitas file dengan menyesuaikan tingkat kualitas.
  • PNG: Tipe ini cenderung memiliki ukuran file yang lebih besar, tetapi kualitas gambarnya lebih tinggi. Anda dapat menggunakan kompresi lossy atau lossless.
  • GIF: Ini sangat ideal untuk gambar animasi. Anda hanya dapat menggunakan kompresi lossless. Hanya menggunakan 256 warna.

format file gambar

Ada beberapa pilihan lain, tetapi ini adalah yang paling umum dan mudah digunakan. Pilihan lain termasuk JPEG XR dan WebP. Tidak semua browser mendukung keduanya, jadi perhatikan ini.

Mereka bisa menjadi pilihan yang layak. Misalnya, dibandingkan dengan gambar JPEG yang sebanding, rata-rata ada pengurangan ukuran file 30 persen dengan WebP.

Karena kurangnya dukungan universal untuk dua opsi ini, aplikasi Anda akan memerlukan logika tambahan di server atau aplikasi Anda untuk menyediakan sumber daya yang sesuai:

  • Optimalisasi gambar adalah layanan yang disediakan oleh beberapa CDN, termasuk pengiriman WebP dan JPEG XR.
  • Untuk mendeteksi klien, berikan format gambar terbaik yang tersedia dan periksa format yang didukung, mungkin untuk menambahkan logika aplikasi tambahan.
  • Alat sumber terbuka tertentu mengotomatiskan percakapan, pengoptimalan, dan penyajian aset yang sesuai.

Ukuran vs Kualitas Kompresi

Kompresi rendah cenderung memberikan kualitas yang lebih tinggi, tetapi ukuran file biasanya lebih besar. Yang sebaliknya berlaku dengan kompresi tinggi. File-file lebih kecil, tetapi kualitasnya cenderung menurun.

kualitas gambar vs kompresi

Idealnya, Anda menginginkan total satu hingga dua MB untuk berat keseluruhan halaman web Anda. Jadi, pertimbangkan berapa banyak gambar yang perlu Anda gunakan dan bagi angka ini sekitar 1,5. Ini memberi Anda ukuran per gambar yang memungkinkan kecepatan pemuatan terbaik.

Optimisasi Lossless vs. Lossy

Ini adalah dua jenis kompresi yang akan Anda gunakan. Penting untuk memahami apa yang mereka lakukan:

  • lossless vs lossy CompressionKerugian: Ini memampatkan data dan itu adalah filter. Sebelum membuat gambar, itu harus dikompresi. Namun, kualitasnya tidak berkurang. Ada beberapa alat yang melakukan kompresi lossless.
  • Rugi: Ini menghilangkan beberapa data dan itu adalah filter. Perhatikan berapa banyak pengurangan yang Anda lakukan karena itu akan menurunkan gambar. Anda dapat menggunakan berbagai editor gambar dan alat untuk menyesuaikan pengaturan kualitas gambar.

Konfigurasi optimal konfigurasi lossless atau lossy tergantung pada kriteria Anda sendiri, seperti pertukaran antara artefak yang diperkenalkan dan ukuran file, dan konten gambar.

Tidak ada pengaturan universal tunggal yang berlaku untuk semua gambar. Pada akhirnya, Anda ingin bermain-main dengan gambar yang berbeda untuk melihat mana yang terbaik.

Mengubah ukuran gambar menjadi skala

Berkat halaman responsif di situs, seperti WordPress, Anda akan mendapatkan beberapa ukuran file di perpustakaan media Anda. Browser Anda dapat memilih ukuran yang terbaik dan mengunduhnya. Ukuran yang dipilih browser didasarkan pada resolusi perangkat.

mengubah ukuran gambar di wordpress

File asli tetap tidak tersentuh dan dipertahankan. Anda dapat menggunakan plugin untuk menghindari penyimpanan dokumen asli untuk menghemat ruang disk jika Anda mau.

Mengganti dan Menghilangkan Gambar

Apakah Anda memerlukan semua gambar di halaman web? Jika tidak, hapus yang tidak perlu. Namun, jika semuanya berkaitan dengan konten, pertimbangkan untuk mengganti gambar yang lebih besar atau lebih rendah dengan opsi yang lebih baik.

Dalam beberapa kasus, font web dan efek CSS dapat menggantikan gambar sambil tetap memberikan estetika visual yang bagus pada halaman. Dengan font web, tipografi yang bagus dapat membantu meningkatkan kegunaan dan memberikan tampilan yang lebih sesuai untuk halaman Anda.

Ini juga dapat meningkatkan keterbacaan dan branding Anda. Pastikan saja Anda masih dapat mencari, memilih, dan mengubah ukuran teks dengan mudah tanpa masalah keterbacaan.

Efek CSS meliputi elemen, seperti bayangan dan gradien. Ini juga dapat lebih lanjut branding. Animasi dapat memberikan daya tarik visual pada halaman web Anda di setiap tingkat zoom dan resolusi. Dibandingkan dengan file gambar, ini adalah sebagian kecil dari byte.

Gambar Raster vs. Vektor

vektor vs vektor

Raster dan vektor adalah dua jenis file gambar utama. Program berbasis piksel, pemindai atau kamera digunakan untuk membuat gambar raster.

Ini banyak digunakan di internet dan lebih umum digunakan. Perangkat lunak vektor digunakan untuk membuat gambar vektor. Ini umum untuk gambar yang masuk ke produk fisik, dan di bidang teknik, CAD dan grafik 3D.

Gambar vektor bebas resolusi dan zoom. Ketika bentuk geometris terlibat, vektor ideal. Ketika gambar kompleks dan memiliki banyak detail dan bentuk tidak teratur, gambar raster lebih disukai.

Grafik raster mengkodekan nilai individual setiap piksel dalam kisi persegi panjang untuk mewakili gambar. Grafik vektor mewakili gambar menggunakan titik, garis, dan poligon.

Implikasi Layar Resolusi Tinggi

Penting untuk membedakan antara dua jenis piksel yang berbeda, yang meliputi piksel perangkat dan piksel CSS. Beberapa piksel perangkat dapat hadir dalam satu piksel CSS. Detail pada layar menjadi lebih halus dengan lebih banyak piksel perangkat.

piksel css vs piksel perangkatUntuk memanfaatkan sepenuhnya jumlah piksel perangkat yang lebih tinggi, aset gambar harus lebih detail.

Tugas ini adalah ideal untuk gambar vektor karena dapat menghasilkan hasil yang tajam ketika diberikan pada resolusi apa pun.

Karena gambar raster menggunakan basis per-pixel untuk menyandikan data gambar, mereka lebih menantang. Ini sementara ukuran file raster meningkat seiring meningkatnya piksel.

Jadi, layar beresolusi tinggi membutuhkan gambar beresolusi tinggi untuk mendapatkan manfaatnya. Gambar vektor terbaik untuk layar resolusi tinggi karena mereka selalu memberikan hasil yang tajam karena menjadi resolusi independen.

Hanya ingat bahwa terlepas dari resolusi, teknik pengoptimalan gambar adalah sama.

Mengoptimalkan Gambar Vektor

Scalable Vector Graphics (SVG) didukung oleh semua browser modern.

Ini ideal untuk grafik dua dimensi dan formatnya berbasis XML-gambar. File SVG dapat dibuat dengan tangan menggunakan editor teks yang Anda sukai atau dengan sebagian besar jenis perangkat lunak berbasis vektor.

Untuk mengurangi ukuran file SVG, mereka harus diperkecil. GZIP harus digunakan saat mengompresi file SVG.

Mengoptimalkan Gambar Raster

Kisi piksel merupakan gambar raster. Pixel individual berada pada kisi dua dimensi. Misalnya, urutan 10.000 piksel membentuk gambar 100 kali 100 piksel. Setiap piksel mengkodekan transparansi dan informasi warna.

raster beratNilai RGBA disimpan oleh setiap piksel. Ini termasuk:

  • Jalur Merah
  • Saluran biru
  • Jalur Hijau
  • Saluran alfa (transparansi)

256 warna (nilai) dialokasikan secara internal oleh browser. Per saluran, ini berarti delapan bit. Per pixel, ini adalah empat byte. Ini memungkinkan untuk menghitung ukuran file menggunakan dimensi kisi. Tidak perlu banyak untuk ukuran file menjadi sangat besar.

Jadi, untuk mengurangi ukuran file gambar, ada beberapa strategi:

  • Kurangi kedalaman bit gambar. Anda dapat melakukan ini dengan menggunakan palet warna yang lebih kecil.
  • Optimalkan data yang disimpan oleh masing-masing piksel.

Alat dan Penyetelan Parameter

Tidak ada alat gambar yang sempurna, set parameter optimasi atau format yang akan bekerja untuk setiap gambar. Konten gambar, dan persyaratan teknis dan visualnya, akan menentukan mana yang harus Anda gunakan.

Setelah Anda menemukan set pengaturan yang baik, Anda dapat menggunakannya untuk gambar serupa di masa depan untuk menghemat waktu. Namun, pastikan Anda tidak pernah berasumsi bahwa pengaturan yang sama harus digunakan untuk mengompres semua gambar.

Mempelajari beberapa alat umum dapat membantu Anda membuat pilihan yang tepat. Keempatnya adalah yang paling sering digunakan:

  • Gifsicle: Ini memungkinkan Anda untuk mengoptimalkan dan membuat berbagai gambar GIF.
  • Optipng: Ini digunakan untuk memungkinkan optimasi PNG lossless.
  • Jpegtran: Yang ini memungkinkan Anda untuk mengoptimalkan gambar JPEG.
  • Pngquant: Ini digunakan untuk memungkinkan optimasi PNG lossy.

Memberikan Aset Gambar Skala

Ada dua kriteria utama untuk dipertimbangkan saat Anda melakukan optimasi gambar:

  • Mengoptimalkan jumlah piksel total gambar.
  • Mengoptimalkan berapa banyak byte yang diperlukan untuk menyandikan setiap piksel dalam suatu gambar.

pohon format gambarUkuran file gambar Anda dipecah menjadi total piksel dikalikan dengan total byte yang diperlukan untuk pengkodean piksel individual. Ini dia. Ingatlah ini ketika Anda sedang bekerja untuk menentukan ukuran optimal untuk file gambar di situs web Anda.

Karena itu, cara yang paling efektif dan mudah untuk mengoptimalkan gambar adalah memastikan bahwa Anda tidak mengirim lebih banyak piksel yang benar-benar Anda perlukan untuk menunjukkan aset di browser pada ukuran yang diinginkan..

Begitu, jangan hanya mengandalkan browser Anda untuk mengubah skala gambar. Ini dapat menyebabkan mereka ditampilkan pada resolusi yang lebih rendah. Ini juga menggunakan banyak sumber daya CPU tambahan.

Biasanya tidak mungkin untuk menjamin ukuran tampilan yang tepat untuk setiap aset tunggal yang dikirim. Namun, penting untuk memastikan bahwa Anda menjaga semua piksel yang tidak perlu menjadi minimum.

Sangat penting bagi Anda untuk mengirimkan aset besar Anda sedekat mungkin dengan ukuran tampilan mereka.

Daftar Periksa Pengoptimalan Gambar

Semua informasi di sini memungkinkan Anda untuk mengoptimalkan gambar Anda sehingga halaman web Anda lebih cepat. Anda masih dapat menggunakan gambar yang indah, tetapi tidak akan menyebabkan pelambatan signifikan dengan waktu pemuatan halaman Anda.

Ini akan membuat pengunjung Anda senang dan meningkatkan fungsi keseluruhan situs web Anda. Pertimbangkan poin daftar periksa berikut saat Anda mengoptimalkan gambar Anda:

  • Pertimbangkan format vektor karena mereka berfungsi untuk resolusi tinggi dan beberapa perangkat karena mereka berskala dan tidak tergantung resolusi.
  • Semua aset SVG harus dikompresi dan diperkecil. Ini menghapus metadata yang tidak perlu.
  • Untuk format raster, bermain-main dengan pengaturan kualitas optimal. Ini dapat menghemat banyak byte.
  • Untuk setiap aset, cari tahu persyaratan fungsional Anda dan pilih format terbaik untuk gambar raster.
  • Otomatiskan kapan pun Anda bisa untuk memastikan optimalisasi gambar yang konsisten.
  • Sajikan gambar berskala sehingga ukuran gambar alami dan ukuran tampilan semirip mungkin.

Singkatnya, ada ilmu dan seni untuk optimasi gambar. Algoritma dan teknik yang dikembangkan sangat berfungsi sebagai ilmu.

Kurangnya jawaban pasti mengenai kompresi gambar individu adalah seni. Pada akhirnya, Anda harus bermain-main dan bereksperimen. Ini memungkinkan Anda untuk membuat pilihan terbaik untuk file gambar Anda dan bagaimana mereka berkontribusi pada kecepatan halaman web Anda.

Dengan meningkatnya popularitas dan kecanggihan pembuat situs web pihak ketiga seperti Wix, mudah bagi para desainer untuk menjadi ceroboh tetapi tetap fokus pada pengembangan dan pemeliharaan proses optimasi gambar yang baik apakah menampar templat atau membangun situs dari awal.

Referensi dan kredit gambar:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map