Cara Mengoptimumkan Imej Anda agar Mesra SEO (Panduan Lengkap)

Prestasi laman web anda bergantung pada beberapa faktor mulai dari hos web tertentu yang anda pilih, melebihi panduan kebolehaksesan laman web, hingga ukuran fail gambar yang anda gunakan.


Memformatnya dengan ukuran yang tepat, bagaimanapun, dapat menurunkan kualitas karena pengubahsuaian yang Anda buat. Berita baiknya ialah anda dapat mengekalkan kualiti gambar yang optimum dan mendapatkan ukuran yang tepat dengan beberapa teknik dan trik.

Apa itu Pengoptimuman Imej?

dimensi pengoptimuman gambarHalaman web dapat mengalami kelambatan yang ketara apabila terdapat gambar besar. Ini dapat mengurangkan masa pemuatan dan menjadikan pengalaman keseluruhan lebih rendah bagi pengunjung laman web anda.

Mengurangkan saiz fail adalah pengoptimuman gambar. Anda boleh menggunakan skrip atau pemalam untuk ini.

Ini kemudian menghasilkan masa pemuatan yang lebih cepat untuk halaman anda. Pemampatan tanpa kerugian dan kerugian adalah dua kaedah pengoptimuman yang paling biasa.

Faedah Pemformatan Imej

saiz gambar purata di webDianggarkan bahawa kira-kira 54 peratus daripada berat keseluruhan laman web disebabkan gambar.

Semasa anda mengusahakan pengoptimuman laman web, gambar anda harus menjadi tugas pertama anda kerana ini. Kelebihan pemformatan gambar merangkumi:

  • Kelajuan memuatkan halaman yang ditingkatkan
  • Lebih pantas membuat sandaran
  • Ruang simpanan pelayan lebih sedikit diperlukan
  • SEO yang diperbaiki dengan pemalam SEO yang betul
  • Lebar jalur kurang digunakan

Cara Meningkatkan Prestasi dengan Pengoptimuman Imej

Tujuannya adalah untuk mengimbangkan kualiti yang boleh diterima dan ukuran fail serendah mungkin. Terdapat lebih daripada satu cara untuk anda melakukan ini. Sebelum memuat naik, memampatkan gambar anda adalah pilihan biasa. Anda boleh menggunakan alat atau pemalam untuk tujuan ini (berikut adalah beberapa).

Penting untuk mempertimbangkan jenis pemampatan dan format fail yang anda gunakan. Gabungan yang tepat memungkinkan untuk mengurangkan ukuran gambar anda hingga lima kali.

Eksperimen dengan format fail dan jenis pemampatan yang berbeza untuk menentukan kombinasi terbaik untuk keperluan anda.

Pilih Format Fail Terbaik

Untuk memilih jenis fail yang terbaik, penting untuk mengetahui mana yang ada. Ini adalah yang paling biasa:

  • JPEG: Jenis ini menggunakan pengoptimuman lossless dan lossy. Anda dapat mencapai keseimbangan ukuran dan kualiti fail dengan menyesuaikan tahap kualiti.
  • PNG: Jenis ini cenderung mempunyai ukuran fail yang lebih besar, tetapi kualiti gambarnya lebih tinggi. Anda boleh menggunakan pemampatan lossy atau lossless.
  • GIF: Ini sesuai untuk gambar animasi. Anda hanya boleh menggunakan pemampatan tanpa kerugian. Ia hanya menggunakan 256 warna.

format fail gambar

Terdapat pilihan lain, tetapi ini adalah antara yang paling biasa dan senang digunakan. Pilihan lain termasuk JPEG XR dan WebP. Tidak semua penyemak imbas menyokong kedua-dua ini, jadi sedarlah ini.

Walau bagaimanapun, mereka boleh menjadi pilihan yang sesuai. Sebagai contoh, berbanding dengan gambar JPEG yang setanding, rata-rata terdapat pengurangan saiz fail 30 peratus dengan WebP.

Oleh kerana kurangnya sokongan universal untuk dua pilihan ini, aplikasi anda memerlukan logik tambahan pada pelayan atau aplikasi anda untuk menyediakan sumber yang sesuai:

  • Pengoptimuman gambar adalah perkhidmatan yang disediakan oleh beberapa CDN, termasuk penghantaran WebP dan JPEG XR.
  • Untuk mengesan klien, berikan format gambar terbaik yang tersedia dan periksa format yang disokong adalah mungkin untuk menambahkan logik aplikasi tambahan.
  • Alat sumber terbuka tertentu mengautomasikan perbualan, pengoptimuman dan penyediaan aset yang sesuai.

Saiz berbanding Kualiti Pemampatan

Pemampatan rendah cenderung memberikan kualiti yang lebih tinggi, tetapi ukuran fail biasanya lebih besar. Sebaliknya berlaku dengan pemampatan tinggi. Failnya lebih kecil, tetapi kualitinya cenderung menurun.

kualiti gambar vs pemampatan

Sebaik-baiknya, anda mahukan jumlah satu hingga dua MB untuk keseluruhan berat halaman web anda. Oleh itu, pertimbangkan berapa banyak gambar yang perlu anda gunakan dan bahagikan nombor ini dengan kira-kira 1.5. Ini memberi anda ukuran per gambar yang membolehkan kelajuan pemuatan terbaik.

Pengoptimuman Lossless vs Lossy

Ini adalah dua jenis pemampatan yang akan anda gunakan. Penting untuk memahami apa yang mereka lakukan:

  • Compression lossless vs lossyTidak rugi: Ini memampatkan data dan ia adalah penapis. Sebelum membuat gambar, gambar mesti dikompres. Walau bagaimanapun, kualiti tidak berkurang. Terdapat beberapa alat yang melakukan pemampatan tanpa kerugian.
  • Rugi: Ini menghilangkan beberapa data dan ia adalah penapis. Perhatikan berapa banyak pengurangan yang anda lakukan kerana ia akan merosakkan imej. Anda boleh menggunakan penyunting gambar dan alat yang berbeza untuk menyesuaikan tetapan kualiti gambar.

Konfigurasi optimum dari konfigurasi lossless atau lossy bergantung pada kriteria anda sendiri, seperti pertukaran antara artifak yang diperkenalkan dan ukuran fail, dan kandungan gambar.

Tidak ada satu tetapan universal yang berlaku untuk semua gambar. Pada akhirnya, anda mahu bermain-main dengan gambar yang berbeza untuk melihat mana yang paling sesuai.

Mengubah saiz Imej ke Skala

Terima kasih kepada halaman responsif di laman web, seperti WordPress, anda akan mendapat beberapa ukuran fail di perpustakaan media anda. Penyemak imbas anda boleh memilih ukuran yang terbaik dan memuat turunnya. Ukuran yang dipilih penyemak imbas berdasarkan pada resolusi peranti.

mengubah saiz gambar di wordpress

Fail asalnya tetap tidak tersentuh dan disimpan. Anda boleh menggunakan pemalam untuk mengelakkan menyimpan yang asli untuk menjimatkan ruang cakera jika anda mahu.

Mengganti dan Menghilangkan Gambar

Adakah anda memerlukan semua gambar di laman web? Sekiranya tidak, buang yang tidak perlu. Walau bagaimanapun, jika semuanya berkaitan dengan kandungan, pertimbangkan untuk mengganti gambar dengan kualiti yang lebih besar atau lebih rendah dengan pilihan yang lebih baik.

Dalam beberapa kes, fon web dan kesan CSS dapat menggantikan gambar sambil memberikan estetika visual yang bagus di halaman. Dengan fon web, jenis huruf yang bagus dapat membantu meningkatkan kebolehgunaan dan memberikan tampilan yang lebih disesuaikan ke halaman anda.

Ia juga dapat meningkatkan kemampuan membaca dan penjenamaan anda. Hanya pastikan anda masih boleh mencari, memilih dan mengubah saiz teks dengan mudah tanpa ada masalah kebolehbacaan.

Kesan CSS merangkumi elemen, seperti bayangan dan kecerunan. Ini juga boleh menjenamakan lebih jauh. Animasi dapat memberikan daya tarikan visual di laman web anda pada setiap tahap dan resolusi zoom. Berbanding dengan fail gambar, ini adalah sebahagian kecil daripada bait.

Gambar Raster vs Vektor

rastor vs vektor

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

Ini banyak digunakan di internet dan lebih biasa digunakan. Perisian vektor digunakan untuk membuat gambar vektor. Ini adalah perkara biasa untuk gambar yang menggunakan produk fizikal, dan dalam bidang kejuruteraan, grafik CAD dan 3D.

Gambar vektor bebas dari resolusi dan zoom. Apabila bentuk geometri terlibat, vektor sangat sesuai. Apabila gambar kompleks dan mempunyai banyak perincian dan bentuk yang tidak teratur, gambar raster lebih disukai.

Grafik raster menyandikan nilai individu setiap piksel dalam grid segi empat tepat untuk mewakili gambar. Grafik vektor mewakili gambar menggunakan titik, garis dan poligon.

Implikasi Skrin Resolusi Tinggi

Penting untuk membezakan antara dua jenis piksel yang berbeza, yang merangkumi piksel peranti dan piksel CSS. Pelbagai piksel peranti boleh terdapat dalam satu piksel CSS. Perincian pada skrin menjadi lebih halus dengan lebih banyak piksel peranti.

piksel css vs piksel perantiUntuk memanfaatkan sepenuhnya jumlah piksel peranti yang lebih tinggi, aset gambar mesti mempunyai lebih terperinci.

Tugas ini adalah sesuai untuk gambar vektor kerana ia dapat menghasilkan hasil yang tajam apabila diberikan pada sebarang resolusi.

Oleh kerana gambar raster menggunakan asas per-piksel untuk menyandikan data gambar, gambar itu lebih mencabar. Ini sementara saiz fail raster meningkat ketika piksel meningkat.

Jadi, skrin beresolusi tinggi memerlukan gambar beresolusi tinggi untuk meraih faedahnya. Gambar vektor adalah terbaik untuk skrin beresolusi tinggi kerana mereka selalu memberikan hasil yang tajam kerana bebas daripada resolusi.

Ingatlah bahawa tanpa mengira resolusi, teknik pengoptimuman gambar adalah sama.

Mengoptimumkan Imej Vektor

Grafik Vektor Berskala (SVG) disokong oleh semua penyemak imbas moden.

Ini sesuai untuk grafik dua dimensi dan formatnya berdasarkan gambar XML. Fail SVG boleh dibuat dengan tangan menggunakan penyunting teks yang anda sukai atau dengan kebanyakan jenis perisian berasaskan vektor.

Untuk mengurangkan saiz fail SVG, fail tersebut harus dikurangkan. GZIP harus digunakan semasa memampatkan fail SVG.

Mengoptimumkan Imej Raster

Grid piksel membentuk gambar raster. Piksel individu berada pada grid dua dimensi. Sebagai contoh, urutan 10,000 piksel membentuk gambar 100 hingga 100 piksel. Setiap piksel mengekod maklumat ketelusan dan warna.

berat rasterNilai RGBA disimpan oleh setiap piksel. Ini termasuk:

  • Saluran merah
  • Saluran biru
  • Saluran hijau
  • Saluran Alpha (ketelusan)

256 warna (nilai) diperuntukkan secara dalaman oleh penyemak imbas. Setiap saluran, ini diterjemahkan menjadi lapan bit. Setiap piksel, ini adalah empat bait. Ini memungkinkan untuk mengira ukuran fail menggunakan dimensi grid. Ukuran fail tidak memerlukan banyak ukuran.

Jadi, untuk mengurangkan saiz fail gambar, terdapat beberapa strategi:

  • Kurangkan kedalaman bit gambar. Anda boleh melakukan ini dengan menggunakan pallete warna yang lebih kecil.
  • Optimumkan data yang disimpan oleh setiap piksel.

Alat dan Penalaan Parameter

Tidak ada alat gambar yang sempurna, set parameter pengoptimuman atau format yang akan berfungsi untuk setiap gambar. Kandungan gambar, dan keperluan teknikal dan visualnya, akan menentukan yang harus anda gunakan.

Sebaik sahaja anda menemui set tetapan yang baik, anda boleh menggunakannya untuk gambar serupa pada masa akan datang untuk menjimatkan masa. Namun, pastikan bahawa anda tidak pernah menganggap bahawa tetapan yang sama harus digunakan untuk memampatkan semua gambar.

Mempelajari beberapa alat yang biasa dapat membantu anda dalam membuat pilihan yang tepat. Keempat-empat ini adalah antara yang paling kerap digunakan:

  • Gifsicle: Ini membolehkan anda mengoptimumkan dan membuat pelbagai gambar GIF.
  • Optipng: Ini digunakan untuk memungkinkan pengoptimuman PNG tanpa kerugian.
  • Jpegtran: Ini membolehkan anda mengoptimumkan gambar JPEG.
  • Pngquant: Ini digunakan untuk memungkinkan pengoptimuman PNG yang hilang.

Menghantar Aset Imej Berskala

Terdapat dua kriteria utama yang harus dipertimbangkan ketika anda melakukan pengoptimuman gambar:

  • Mengoptimumkan jumlah piksel keseluruhan gambar.
  • Mengoptimumkan berapa bait yang diperlukan untuk mengekod setiap piksel dalam gambar.

pokok format gambarUkuran fail gambar anda dipecah menjadi jumlah piksel dikalikan dengan jumlah bait yang diperlukan untuk pengekodan piksel individu. Inilah dia. Ingatlah ini semasa anda berusaha untuk menentukan ukuran optimum untuk fail gambar di laman web anda.

Oleh kerana itu, cara yang paling berkesan dan mudah untuk mengoptimumkan gambar adalah dengan memastikan bahawa anda tidak menghantar lebih banyak piksel yang anda perlukan untuk menunjukkan aset dalam penyemak imbas pada ukuran yang dimaksudkan.

Jadi, jangan hanya bergantung pada penyemak imbas anda untuk menjual semula gambar. Ini boleh menyebabkannya dipaparkan pada resolusi yang lebih rendah. Ia juga menggunakan banyak sumber CPU tambahan.

Umumnya tidak mungkin untuk menjamin ukuran paparan yang tepat untuk setiap aset yang dihantar. Walau bagaimanapun, penting untuk memastikan bahawa anda meminimumkan semua piksel yang tidak diperlukan.

Anda juga mesti menyerahkan aset besar anda sedekat yang anda dapat dengan ukuran paparannya.

Senarai Semak Pengoptimuman Imej

Semua maklumat di sini membolehkan anda mengoptimumkan gambar anda supaya halaman web anda lebih cepat. Anda masih dapat menggunakan gambar yang cantik, tetapi gambar tersebut tidak akan menyebabkan kelambatan yang ketara dengan masa muat halaman anda.

Ini akan menjadikan pengunjung anda gembira dan meningkatkan fungsi keseluruhan laman web anda. Pertimbangkan perkara senarai semak berikut semasa anda mengoptimumkan gambar anda:

  • Pertimbangkan format vektor kerana ia berfungsi untuk resolusi tinggi dan pelbagai peranti kerana berskala dan resolusi tidak bergantung.
  • Semua aset SVG harus dimampatkan dan dikurangkan. Ini menghilangkan metadata yang tidak diperlukan.
  • Untuk format raster, main-main dengan tetapan kualiti yang optimum. Ini dapat menjimatkan sebilangan besar bait.
  • Untuk setiap aset, ketahui keperluan fungsional anda dan pilih format terbaik untuk gambar raster.
  • Automasikan seboleh-bolehnya untuk memastikan pengoptimuman gambar yang konsisten.
  • Layankan gambar berskala sehingga ukuran gambar semula jadi dan ukuran paparan serupa.

Ringkasnya, terdapat sains dan pengoptimuman seni hingga imej. Algoritma dan teknik yang sangat maju berfungsi sebagai sains.

Kurangnya jawapan pasti mengenai pemampatan gambar individu adalah seni. Pada akhirnya, anda harus bermain-main dan bereksperimen. Ini membolehkan anda membuat pilihan terbaik untuk fail gambar anda dan bagaimana ia menyumbang kepada kelajuan halaman web anda.

Dengan peningkatan populariti dan kecanggihan pembangun laman web pihak ketiga seperti Wix, mudah bagi para pereka untuk mendapatkan ceroboh tetapi tetap fokus untuk mengembangkan dan mengekalkan proses pengoptimuman gambar yang baik sama ada menampar templat atau membina laman web dari awal.

Rujukan dan kredit gambar:

  • PicupMedia.com
  • Pengkomputeran.HomeDNS.org
  • KognitifSEO.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