Pengiriman Gambar Cepat: Mengoptimalkan Gambar untuk Web dan CDN

Diterbitkan: 2025-04-10

Apakah Anda ingin meningkatkan kinerja situs Anda? Optimalkan gambar Anda untuk web!

Maksudnya itu apa? Ini berarti menawarkan gambar berkualitas tinggi yang menyenangkan pengunjung tanpa memperlambat situs Anda.

Tahukah Anda bahwa 90% pembeli di Etsy mengatakan kualitas gambar memengaruhi keputusan pembelian mereka? Demikian pula, Airbnb menemukan bahwa daftar dengan foto profesional mendapatkan 20% lebih banyak pemesanan daripada yang tidak. Gambar yang indah meningkatkan konversi, tetapi ada tangkapan: gambar besar dan tidak dioptimalkan dapat memperlambat situs Anda secara drastis.

Kami punya punggung Anda! Di situlah optimasi gambar masuk.

Dalam panduan ini, Anda akan mempelajari teknik terbaik untuk mengoptimalkan gambar untuk web dan CDN untuk memastikan waktu beban yang lebih cepat dan kinerja yang lebih baik.

TL; DR: Takeaways untuk mengoptimalkan gambar untuk web

Cara termudah untuk mengoptimalkan gambar untuk Web termasuk kompresi, mengubah ukuran ke dimensi yang tepat, dan mengubahnya menjadi format generasi berikutnya seperti webp atau avif. Jika Anda ingin menerapkan teknik optimasi canggih, gunakan pemuatan malas, sajikan gambar responsif, aktifkan caching, preload gambar kritis di atas lipatan dan gunakan CDN.

GTMetrix, Insightspeed Insights dan Google Analytics adalah alat Anda untuk menganalisis kinerja, mendapatkan saran optimasi dan membuat keputusan yang digerakkan data sesuai.

Untuk melacak optimalisasi gambar Anda untuk Web, Anda harus selalu memantau metrik seperti kecepatan pemuatan halaman, ukuran file gambar, berat halaman, jumlah permintaan HTTP, cat konten terbesar (LCP), waktu untuk byte pertama (TTFB), waktu rata -rata per sesi di desktop dan seluler.

Untuk mengimplementasikan caching, pemuatan malas, dan optimasi yang lebih maju, Anda dapat menggunakan WP Rocket. Untuk kompresi gambar dan konversi webp/avif, pertimbangkan Imagify. Untuk mempercepat pengiriman gambar di seluruh dunia dengan CDN, periksa RocketCDN.

3 Teknik Optimalisasi Gambar Esensial untuk Web

Cara efektif untuk mengoptimalkan gambar untuk web adalah dengan menyajikannya dalam format dan ukuran yang tepat dan mengompresnya tanpa kehilangan kualitas. Mari kita membahas tiga teknik dasar untuk memulai perjalanan optimasi Anda.

1. Memilih format gambar yang tepat untuk web

Format yang lebih lama seperti JPEG, PNG, dan GIF telah melayani web dengan baik, tetapi mereka tidak memiliki efisiensi format generasi berikutnya seperti Webp dan Avif. Format modern ini menawarkan kualitas yang sama dengan kompresi superior, yang berarti gambar Anda memuat lebih cepat tanpa mengorbankan detail.

Contoh dan praktik terbaik

  • Selalu mengonversi gambar ke Webp atau AVIF untuk ukuran file yang lebih kecil dan kinerja yang lebih baik.

Studi Google Web.dev menemukan bahwa gambar WebP 25-34% lebih kecil dari JPEG yang sebanding, menjadikannya pilihan cerdas untuk situs web yang lebih cepat. Di bawah ini, Anda dapat melihat bahwa file JPEG memiliki berat 43,84kb dan webp hanya 29,61kb, tetapi kualitasnya sama.

img

2. Mengukur ukuran gambar untuk dimensi yang tepat

Menggunakan gambar yang lebih besar dari yang perlu memperlambat situs web Anda karena browser harus memuat dan mengubah ukurannya dengan cepat. Dengan menskalakan gambar ke ukuran yang tepat yang akan ditampilkan, Anda mengurangi ukuran file dan meningkatkan kecepatan pemuatan.

Contoh dan praktik terbaik

Selalu ubah ukuran gambar Anda agar sesuai dengan ukuran tampilan yang sebenarnya di situs Anda.

  • Untuk posting blog WordPress, lebar 800px sangat ideal.
  • Untuk gambar produk WooCommerce, minimal 800px × 800px memastikan kejelasan.

3. Mengompresi gambar tanpa kehilangan kualitas

Kompresi gambar mengurangi ukuran file, yang berarti lebih sedikit permintaan HTTP dan gambar pemuatan yang lebih cepat-baik yang penting untuk meningkatkan kecepatan halaman. Namun, mengompresi terlalu banyak dapat menyebabkan foto buram, memengaruhi kredibilitas dan tingkat konversi situs web Anda. Kuncinya adalah menemukan keseimbangan yang tepat: ukuran file yang lebih kecil tanpa kehilangan kualitas yang nyata.

Contoh dan praktik terbaik

Gunakan alat kompresi yang tidak mengubah kualitas gambar tetapi mengurangi ukuran file sebanyak mungkin.

Misalnya, dapatkah Anda melihat perbedaan antara dua gambar ini?

Kualitas yang Tidak Diubah Setelah Kompresi - Sumber: Imagify
Kualitas yang Tidak Diubah Setelah Kompresi - Sumber: Imagify

Kami tidak bisa! Yang di sebelah kanan dikompresi oleh 80% , namun kualitasnya tetap identik.

Petunjuk : Imagify adalah plugin optimisasi gambar termudah yang secara otomatis mengompres gambar dan mengubahnya menjadi Webp atau AVIF.

Sekarang setelah Anda mengetahui tiga strategi dasar, Anda dapat mengambil upaya optimasi gambar Anda lebih jauh dengan teknik yang lebih canggih dan membuat gambar Anda lebih siap untuk web.

Strategi Optimasi Gambar Web Lanjutan

Optimalisasi gambar melampaui kompresi dan format generasi berikutnya. Pertimbangkan teknik canggih seperti pemuatan malas, gambar responsif, dan optimasi alt-text untuk meningkatkan kinerja dan SEO.

1. Menerapkan pemuatan malas untuk pemuatan halaman awal yang lebih cepat

Teknik canggih pertama untuk menyiapkan gambar untuk web adalah menerapkan pemuatan malas. Ini membantu mengurangi waktu pemuatan halaman awal dengan menunda pemuatan gambar di luar layar sampai dibutuhkan.

Dengan menerapkan pemuatan malas, Anda memastikan bahwa gambar hanya memuat ketika mereka terlihat di viewport pengguna, membuat halaman terasa lebih cepat.

Contoh dan praktik terbaik

Bayangkan Anda sedang membaca posting blog WordPress berjudul "10 Pantai Terbaik di Thailand". Alih -alih memuat semua 10 gambar besar sekaligus, pemuatan malas memastikan bahwa:

  • Gambar pantai pertama segera memuat halaman.
  • Gambar yang tersisa memuat hanya saat Anda menggulir ke bawah, mengurangi waktu pemuatan awal.

Yang perlu Anda lakukan hanyalah untuk:

  • Gunakan Native Loading = ”Lazy” untuk gambar di bawah lipatan.
  • Kecualikan gambar pahlawan dan elemen visual utama dari pemuatan malas.
Petunjuk : Plugin WP Rocket mengimplementasikan pemuatan malas untuk di bawah gambar lipatan (bersama dengan 80% dari praktik terbaik kinerja lainnya) segera setelah diaktifkan, jadi Anda tidak perlu khawatir tentang pengaturan teknis. Itu melakukan angkat berat untuk Anda!

2. Preload dan prioritaskan gambar kritis Anda untuk dimuat terlebih dahulu

Sepanjang garis yang sama, teknik canggih lain untuk optimasi gambar web adalah memastikan browser Anda memprioritaskan gambar kritis seperti elemen cat konten terbesar (LCP).

LCP adalah salah satu vital web inti yang mengukur berapa lama konten terbesar Anda dimuat pada halaman (yang biasanya merupakan gambar). Untuk meningkatkan LCP, Anda harus memberi tahu browser untuk memprioritaskan rendering gambar kunci ini secepat mungkin.

Contoh & Praktik Terbaik

Bayangkan elemen LCP pada halaman produk WooCommerce - kemungkinan besar, gambar produk utama. Untuk membuatnya lebih cepat, di luar pemuatan malas, Anda juga bisa:

  • Gunakan fetchpriority = ”tinggi” pada gambar LCP untuk memberi tahu browser agar segera memuatnya.
  • Gunakan rel = "preload" jika gambar tidak ada di HTML awal, memastikan browser memuatnya sebelumnya.
Petunjuk : Mengoptimalkan gambar kritis dengan pemuatan malas, preloading, dan fetch prioritas = atribut tinggi pada awalnya mungkin tampak menakutkan karena Anda perlu memanipulasi beberapa kode. Untungnya, plugin WP Rocket dapat melakukan ini secara otomatis untuk Anda!

3. Menggunakan gambar responsif untuk ukuran layar yang berbeda

Menggunakan gambar responsif meningkatkan kecepatan halaman dengan memastikan bahwa browser memuat ukuran gambar yang paling tepat berdasarkan perangkat pengguna. Ini mencegah gambar yang terlalu besar dari memperlambat pengalaman seluler sambil mempertahankan kualitas tinggi di layar yang lebih besar.

Contoh dan praktik terbaik

  • Gunakan atribut <tibeli> elemen atau srcset untuk melayani ukuran gambar yang berbeda berdasarkan perangkat pengguna.
  • Optimalkan gambar secara terpisah untuk tampilan seluler, tablet, dan desktop.
  • Desain mobile-first saat membangun halaman atau seluruh situs web.

Berikut adalah resolusi layar umum teratas di seluruh dunia untuk referensi:

  • Desktop : 1920 × 1080, 1366 × 768, 1536 × 864, 1280 × 720
  • Mobile : 360 × 800, 390 × 844, 393 × 873, 412 × 915
  • Tablet : 768 × 1024, 1280 × 800, 800 × 1280, 820 × 1180
Petunjuk : Gunakan Google Analytics untuk mengidentifikasi resolusi layar paling umum yang mengunjungi situs Anda. Anda dapat melakukannya melalui Laporan > Pengguna > Teknologi > Detail Teknologi dan mengubah dimensi utama menjadi "Resolusi Layar".

4. Mengoptimalkan Alt-Text untuk SEO

Alt-Text meningkatkan aksesibilitas dan berkontribusi pada SEO gambar dengan menyediakan mesin pencari dengan konteks yang relevan. Mereka memberikan deskripsi tekstual gambar dan dapat meningkatkan peluang Anda ditampilkan dalam hasil teratas dari gambar Google.

Contoh dan praktik terbaik

  • Jadilah sederhana dan deskriptif tetapi ringkas, hanya menggabungkan kata kunci yang relevan secara alami.
  • Hindari isian kata kunci dan lebih fokus pada deskripsi yang ramah pengguna dan bermakna.
Petunjuk : Baca teks alt Anda dengan keras. Jika Anda tidak memahaminya, itu berarti perlu pengerjaan ulang.

Misalnya, inilah contoh alt-tag yang bagus untuk produk WooCommerce:

"Jaket Jean Biru Wanita yang kebesaran dengan kancing depan dan dua kantong dada."

Gambar Alt -Tag Praktek Terbaik Untuk SEO - Sumber: Dashboard WordPress saya
Gambar Alt-Tag Praktek terbaik untuk SEO-Sumber: Dashboard WordPress saya

Tag alt ini bersifat deskriptif, termasuk detail kunci, dan secara alami mengintegrasikan kata kunci untuk SEO.

Di sisi lain, itu akan menjadi contoh yang buruk (isian kata kunci): "Blue Jean Jacket Denim Besar Jaket Biru Wanita Trendy Jaket Fashion Ladies."

5. Memanfaatkan CDN untuk pengiriman gambar yang lebih cepat

CDN (jaringan pengiriman konten) adalah teknik lain yang efisien untuk menyiapkan gambar untuk web dan meningkatkan kecepatan halaman.

CDN meningkatkan kecepatan pemuatan gambar dengan menggunakan caching dan ubah ukuran on-the-fly, memastikan bahwa gambar dikirim dalam ukuran yang benar untuk perangkat pengguna.

Berkat caching, setelah gambar dioptimalkan, CDN tidak perlu mengoptimalkannya kembali setiap kali perangkat baru memintanya. Selain itu, gambar disajikan dari server yang paling dekat dengan pengguna (titik kehadiran), mempercepat pengiriman gambar.

Gambar CDN Dijelaskan - Sumber: Imagify
Gambar CDN Dijelaskan - Sumber: Imagify

Contoh

Server asal Anda ada di London, tetapi klien di Sydney ingin mengakses situs WooCommerce Anda, yang diisi dengan gambar produk. Tanpa CDN, permintaan itu melakukan perjalanan jauh ke London dan kemudian kembali ke Sydney. Namun, dengan CDN, permintaan ditangani oleh server lokal di Australia, dan gambar memuat lebih cepat.

Praktik terbaik untuk mengoptimalkan gambar dengan CDN

  • Periksa URL Anda karena gambar CDN bergantung pada URL untuk menentukan gambar mana yang akan memuat dan menggunakan parameter seperti ukuran, format, dan kualitas.
  • Pastikan CDN mendukung AVIF dan Webp karena, seperti yang disebutkan sebelumnya, format generasi berikutnya ini meningkatkan kompresi dan kualitas gambar.
  • Optimalkan gambar Anda (misalnya, dengan kompresi) sebelum menggunakan cdn gambar apa pun sehingga Anda dapat menambahkan lapisan optimisasi lain.
Petunjuk: Jika Anda mencari CDN mudah yang dilengkapi dengan plugin dan melakukan semua pengaturan teknis untuk Anda, pertimbangkan RocketCDN. CDN lain juga dapat berfungsi, tetapi mereka mungkin memerlukan lebih banyak pengaturan teknis di pihak Anda.

Alat Teratas dan Plugin untuk Optimalisasi Gambar Web

Cara terbaik untuk mengoptimalkan gambar untuk web adalah dengan menggunakan plugin optimasi kinerja seperti WP Rocket, Imagify dan RocketCDN. Selain itu, alat desain seperti Sketch atau Photoshop dapat membantu mengubah ukuran gambar tepat untuk penggunaan web. Aturan praktis lain adalah menggunakan tema WordPress yang sepenuhnya responsif dan plugin yang ramah seluler untuk memastikan gambar beradaptasi dengan baik dengan perangkat yang berbeda. Mari kita membahas masing -masing alat ini.

1. Imagify - plugin optimasi gambar termudah

Imagify adalah plugin optimisasi gambar termudah yang secara otomatis mengompres gambar secara curah sambil mempertahankan kualitas tinggi. Imagify membantu Anda menerapkan tiga teknik optimasi gambar dasar yang disebutkan sebelumnya: kompresi, konversi generasi berikutnya, dan mengubah ukuran gambar yang lebih besar-semuanya dengan mudah.

Fitur utama yang bermanfaat untuk optimasi web

Mari kita membahas tiga fitur ini yang membantu menyiapkan gambar untuk web:

  • Mode kompresi pintar secara otomatis memberikan keseimbangan terbaik antara pengurangan ukuran file dan kualitas visual. Ada tombol kompresi curah yang dapat Anda tekan dan mengoptimalkan semua gambar Anda sekaligus.
Contoh optimasi gambar yang dilakukan dengan Imagify dari Perpustakaan WordPress - Sumber: Imagify
Contoh optimasi gambar yang dilakukan dengan Imagify dari Perpustakaan WordPress - Sumber: Imagify

Jika Anda penasaran, Anda dapat melihat bahwa kualitasnya sama pada gambar asli (kiri) vs pada yang terkompresi (kanan):

Imagify mengoptimalkan gambar Anda tetapi menjaga kualitas yang sangat baik - Sumber: Imagify
Imagify mengoptimalkan gambar Anda tetapi menjaga kualitas yang sangat baik - Sumber: Imagify
  • Plugin secara otomatis mengonversi gambar ke Webp untuk kinerja web yang lebih baik. Ada juga opsi untuk dikonversi ke Avif.
Konversi Format Next -Gen dengan Imagify - Source: Imagify
Konversi Format Next-Gen dengan Imagify-Source: Imagify
  • Ada juga opsi untuk mengubah ukuran gambar yang lebih besar saat mengunggah untuk menghindari masalah kinerja.
Ubah Ubah Ubah Gambar Lebih Besar Dengan Imagify - Source: Imagify
Ubah Ubah Ubah Gambar yang Lebih Besar Dengan Imagify - Source: Imagify

Plugin ini benar-benar ramah pemula, dan tidak perlu menjadi perancang pro. Imagify mengoptimalkan gambar untuk web atas nama Anda! Ada paket gratis yang tersedia untuk sekitar 200 gambar sebulan sehingga Anda dapat melihat hasilnya sendiri.

Jika Anda mencari lebih banyak plugin optimasi gambar, lihat artikel kami yang membandingkan plugin kompresi gambar terbaik.

2. Photoshop

Ini adalah alat yang ampuh untuk pengeditan dan optimasi gambar.

  • Konversi webp tersedia di bawah File > Simpan > Webp .
  • Untuk menggunakan kompresi gambar, buka File > Ekspor > Simpan untuk Web , lalu sesuaikan ukuran dan kualitas gambar. Berhati-hatilah untuk tidak terlalu berkompres dan kehilangan kualitas.

3. Sketsa

Ini adalah alat yang hebat untuk mengubah ukuran dan menyiapkan gambar untuk beberapa perangkat.

  • Muncul dengan mockup yang sudah dibuat untuk iPhone, Android, dan lebih memastikan Anda dapat menyiapkan gambar Anda untuk desain responsif dengan mudah.
  • Ini juga mendukung konversi WebP: Gunakan File> Ekspor> Webp.
Bagus untuk diketahui: Alat-alat ini tidak diintegrasikan ke dalam WordPress dan mereka adalah kurva pembelajaran curam.

4. CloudConvert dan Optimizilla

Banyak alat online ada untuk kompresi gambar dan konversi format, tetapi jarang menemukan yang melakukan keduanya. Anda mungkin membutuhkan dua alat terpisah untuk mengoptimalkan gambar secara online seperti CloudConvert dan Optimizilla.

Ikuti langkah -langkah di bawah ini untuk menggunakannya bersama

  1. Gunakan CloudConvert untuk mengonversi JPEG berat menjadi Webp. Cukup seret dan letakkan gambar Anda ke bidang File Pilih .
JPEG Online ke Webp Converter - Sumber: CloudConvert
JPEG Online ke Webp Converter - Sumber: CloudConvert
  1. Unduh gambar yang dikonversi dan kompres menggunakan kompresor gambar online seperti Optimizilla.

5. WP Rocket

WP Rocket adalah plugin kinerja paling sederhana dan paling kuat untuk mengoptimalkan konten dan gambar Anda untuk web sambil meningkatkan vital web inti. Ini juga membantu melewati beberapa audit wawasan halaman dengan mudah. Selain itu, 80% dari praktik terbaik kinerja diterapkan secara instan, menghemat waktu dan upaya.

Fitur utama yang bermanfaat untuk optimasi web

WP Rocket membantu membahas hampir semua tips dari bagian Teknik Optimasi Gambar Tingkat Lanjut, menjadikannya solusi kinerja all-in-one.

Mari kita membahas setiap fitur:

  • Caching Browser & Page (termasuk caching seluler) dan kompresi GZIP , memastikan bahwa gambar dan aset lainnya memuat lebih cepat.
  • Optimalisasi Gambar Kritis: Secara otomatis mengoptimalkan gambar halaman di atas sehingga dapat diterjemahkan lebih cepat oleh browser. Misalnya, gambar LCP akan dimuat sebelumnya dan diberikan prioritas kepada pengguna.
  • Lazy Loading : Menunda memuat gambar sampai dibutuhkan, bukan sekaligus. Ini membantu halaman memuat lebih cepat dan menyimpan data dengan hanya menampilkan gambar ketika pengguna menggulir ke atasnya.
Bagus untuk diketahui: WP Rocket juga meminimalkan CSS & JavaScript untuk mengurangi muatan jaringan dan meningkatkan waktu pemuatan. Untuk optimasi yang lebih baik, Anda dapat mengaktifkan fitur tambahan langsung dari dasbor WordPress.

Perbandingan alat optimasi gambar untuk kebutuhan yang berbeda

Berikut adalah rekap alat berdasarkan kebutuhan Anda sehingga Anda dapat memilih yang terbaik untuk mengoptimalkan gambar untuk web.

Untuk optimasi yang mudah dan efisien di WordPress

Imagify adalah sekutu terbaik Anda. Ini menangani kompresi, penilaian otomatis gambar besar, dan konversi format generasi berikutnya (webp/avif) secara langsung di dasbor WordPress Anda. Anda dapat mengoptimalkan gambar secara individu atau dalam jumlah besar, menghemat waktu dan upaya tanpa berurusan dengan kompleksitas teknis. Dan ingat, Imagify memastikan untuk tidak melayani gambar buram berkat mode kompresi cerdasnya!

Untuk optimasi gambar canggih di WordPress

Jika Anda membutuhkan caching, memuat malas, preloading gambar LCP, dan mengoptimalkan gambar di atas lipatan, WP Rocket adalah solusi masuk. Ini terintegrasi dengan Imagify dan menyediakan suite optimasi kinerja penuh untuk meningkatkan kecepatan pemuatan dalam beberapa klik.

Untuk optimasi dasar di luar wordpress

Jika Anda lebih suka tidak menggunakan plugin WordPress, CloudConvert atau Optimizilla adalah konverter online yang mudah digunakan yang mendukung kompresi gambar curah dan konversi format (hingga 20 gambar sekaligus). Namun, Anda harus mengunggah ulang gambar yang dioptimalkan secara manual ke WordPress.

Untuk kontrol penuh atas ukuran gambar

Gunakan alat desain seperti sketsa, photoshop (lanjutan), gimp, atau alat bawaan seperti pratinjau (Mac) atau foto (windows). Sketsa sangat ideal untuk dengan mudah membuat berbagai ukuran variasi untuk perangkat yang berbeda. Photoshop juga bagus tapi ini adalah kurva belajar yang sangat curam.

Untuk kontrol penuh atas ukuran gambar dan tingkat kompresi

Photoshop memungkinkan kontrol yang tepat atas tingkat kompresi sebelum Anda mengekspor gambar. Namun, dengan kekuatan besar menjadi tanggung jawab besar dan pastikan untuk tidak terlalu mengompres gambar Anda.

Untuk CDN yang kuat dengan pengaturan yang mudah

Jika Anda mencari CDN bebas kerumitan yang terjangkau dengan integrasi WordPress, RocketCDN adalah pilihan yang tepat. Muncul dengan plugin WordPress khusus, yang berarti tidak ada pengaturan teknis yang kompleks (catatan CNAME misalnya) diperlukan di pihak Anda. Dengan Global Points of Presence (POPS), ini memastikan pengiriman gambar cepat di seluruh dunia yang ideal untuk situs web multibahasa dengan pengunjung dari berbagai daerah.

Tentu saja, CDN lain tersedia dan berkinerja baik, tetapi mereka sering datang dengan biaya yang lebih tinggi dan pengaturan yang lebih teknis, yang dapat menjadi tantangan bagi pemula.

Mengukur Dampak Optimalisasi Gambar pada Web: 6 Metrik

Untuk mengukur dampak optimasi gambar, Anda dapat menggunakan alat kinerja, alat perekrutan responsif, alat data (seperti Google Analytics), dan metrik utama untuk menentukan apakah optimasi Anda berfungsi. Ayo kita membahasnya.

Berikut daftar metrik dan KPI yang dapat Anda lacak untuk mengukur keberhasilan upaya optimasi gambar Anda.

1. Waktu yang terisi penuh

Ini mengukur berapa lama waktu yang dibutuhkan untuk memuat sepenuhnya. Gambar yang dioptimalkan harus mengurangi waktu ini.

2. Cat konten terbesar

Cat Contentful Terbesar (LCP) mengukur berapa lama waktu yang dibutuhkan untuk konten yang terlihat terbesar (seringkali gambar atau blok teks besar) untuk dimuat pada halaman. Karena gambar biasanya merupakan elemen terbesar yang mempengaruhi waktu pemuatan, mengoptimalkannya secara langsung meningkatkan LCP.

Jika skor LCP Anda meningkat setelah kompresi gambar dan pengubah ukuran, itu berarti optimasi Anda berfungsi!

3. Ukuran File Gambar

Ukuran file yang lebih kecil berarti waktu pemuatan yang lebih cepat tanpa kehilangan kualitas. Setelah Anda menerapkan kompresi dan konversi format generasi berikutnya, Anda harus melihat bahwa ukuran file gambar Anda jauh lebih kecil setidaknya 40%.

4. Berat halaman

Ini adalah ukuran total aset halaman, termasuk gambar. Dengan gambar yang dioptimalkan, Anda harus menyimpan beberapa KB.

5. Bouncing Rate dari pengguna seluler

Tingkat pentalan yang tinggi dapat menunjukkan pemuatan yang lambat atau respon seluler yang buruk. Jika Anda meningkatkan pengalaman pengguna seluler dengan menyajikan gambar ukuran yang tepat, pengunjung harus lebih bersedia untuk terlibat dengan konten Anda dan tidak segera pergi.

6. Waktu rata -rata di halaman untuk pengguna seluler

Jika pengguna tinggal lebih lama, itu menunjukkan pengalaman yang lebih baik dan gambar dioptimalkan dengan baik.

Perhatikan bahwa itu juga berguna untuk memeriksa bagian audit dan teratas bagian GTMetrix dan wawasan halaman, sebelum dan sesudah melakukan perubahan. Jika optimasi berfungsi dengan baik, Anda akan melihat perbaikan seperti "gambar mengkodekan secara efisien", "tunduk gambar offscreen" atau "gambar ukuran yang benar" ditandai berwarna hijau.

Tunda audit gambar offscreen yang harus di dalam hijau setelah optimasi - Sumber: PageSpeed ​​Insights
Tunda audit gambar offscreen yang harus di dalam hijau setelah optimasi - Sumber: PageSpeed ​​Insights

5 Alat untuk digunakan untuk memeriksa apakah optimasi gambar berfungsi

1. GTMetrix

Didukung oleh Lighthouse, GTMetrix menganalisis kecepatan dan kinerja situs web.

  • KPI diukur untuk optimasi gambar: waktu yang penuh, cat konten terbesar (inti vital web), berat halaman.
Sumber Berat dan Ukuran Halaman: GTMetrix
Sumber Berat dan Ukuran Halaman: GTMetrix
  • Bagian Audit untuk Optimalisasi Gambar: Bagian Masalah Teratas menyoroti bidang -bidang untuk perbaikan.

Img

2. Wawasan Halaman

Alat bertenaga mercusuar Google mengevaluasi kinerja halaman.

  • KPI diukur untuk optimasi gambar: skor kinerja keseluruhan, cat konten terbesar.
Mengukur Inti Web Vitals untuk Kecepatan Pemuatan Halaman pada Wawasan Halaman - Sumber: Wawasan Pagespeed
Mengukur Vital Web Inti untuk Kecepatan Pemuatan Halaman pada Wawasan Halaman - Sumber: Wawasan Pagespeed
  • Bagian Audit untuk Optimalisasi Gambar: Bagian Diagnosis menyoroti masalah yang harus diatasi.

Img

3. Google Analytics

Ini melacak lalu lintas situs web dan perilaku pengguna, membantu membuat keputusan pemasaran berbasis data.

  • KPI Diukur untuk Optimalisasi Gambar : Bounce Rate, Rata -Rata Waktu di Halaman untuk Pengguna Desktop dan Seluler.

Misalnya, ikuti langkah -langkah tersebut untuk mengukur waktu rata -rata di halaman untuk pengguna seluler

  • Pergi ke Google Analytics> Keterlibatan> Ikhtisar (atau halaman tertentu)
  • Bandingkan Data Desktop vs.
  • Pilih tanggal optimasi sebelum dan sesudah
Mengukur Keterlibatan Pengguna Seluler Setelah Optimalisasi Gambar - Sumber: GoogleAnalytics
Mengukur Keterlibatan Pengguna Seluler Setelah Optimalisasi Gambar - Sumber: GoogleAnalytics

4. Cadenceseo.com

Ini adalah alat yang ampuh untuk memeriksa respons situs web dan keramahan seluler.

  • Apa yang diperiksa: Ini memverifikasi bagaimana tampilan situs web Anda di beberapa perangkat (tablet, seluler dan desktop) dan menunjukkan kepada Anda peningkatan yang perlu dilakukan.

5. Imagify

Imagify mengompres gambar langsung dari pustaka WordPress dan melacak penghematan ukuran file.

  • KPI Diukur untuk optimasi gambar: Pengurangan ukuran file gambar.
Ukuran file baru lebih kecil dari yang asli berkat Imagify: Optimalisasi berfungsi dengan baik - Sumber: Dashboard WordPress saya

5 Praktik Buruk Umum dalam Optimalisasi Gambar Web

Sebelum Anda mulai mengoptimalkan gambar Anda untuk desain web, luangkan waktu sejenak untuk meninjau lima praktik buruk standar ini. Menghindari jebakan ini akan membantu memastikan Anda berada di jalur yang benar untuk meningkatkan tidak hanya kinerja tetapi juga pengalaman pengguna.

Kompresi berlebihan yang menyebabkan kehilangan kualitas

Menekan gambar terlalu banyak dapat menghasilkan kualitas yang buruk dan pengalaman pengguna yang negatif. Selalu bertujuan untuk menyeimbangkan kompresi dengan kualitas visual dengan alat yang efisien yang dapat melakukan pekerjaan untuk Anda.

Mengabaikan optimasi gambar spesifik seluler

Tidak mengubah ukuran gambar untuk ukuran tampilan yang berbeda (seperti seluler, tablet, dan desktop) dapat menyebabkan waktu beban yang lebih lambat dan penggunaan data yang tidak perlu, terutama ketika gambar besar digunakan dalam wadah kecil. Mengubah ukuran gambar sesuai dengan konteksnya sangat penting untuk kinerja yang dioptimalkan.

Menempel pada format "berat" seperti GIF atau JPEG

Mengandalkan format yang sudah ketinggalan zaman seperti GIF dan JPEG dapat menghasilkan ukuran file yang lebih besar. Pertimbangkan untuk menggunakan format yang lebih baru seperti WebP atau AVIF untuk kualitas yang sama dan ukuran file yang lebih kecil.

Malas memuat gambar di atas lipatan

Pemuatan malas sangat baik untuk gambar di luar layar, tetapi gambar penting, seperti yang di atas lipatan, harus diprioritaskan untuk meningkatkan waktu pemuatan yang dirasakan.

Hanya menggunakan kompresi lossless

Jika Anda menggunakan alat kompresi yang andal, Anda harus selalu memilih kompresi lossy. Anda seharusnya tidak melihat perbedaan visual antara kompresi lossy dan lossless. Mode lossy akan mengurangi ukuran file lebih dari yang lossless.

Membungkus

Anda sekarang harus dilengkapi dengan baik untuk mengoptimalkan gambar untuk web, dari teknik dasar hingga canggih! Dengan alat yang tepat, Anda dapat memastikan gambar Anda dioptimalkan sepenuhnya dan memanfaatkan CDN untuk meningkatkan kecepatan halaman Anda. Anda juga tahu cara melacak kemajuan Anda dengan metrik kinerja utama dan alat pengujian terbaik.

Untuk memulai perjalanan optimasi Anda tanpa risiko, ikuti dua langkah kuat ini:

  • Mulailah dengan Imagify - Instal secara gratis dan optimalkan hingga 200 gambar tanpa biaya. Plus, Anda dapat mengembalikan gambar asli Anda jika diperlukan.
  • Instal WP Rocket - langsung mendapat manfaat dari 80% praktik terbaik kinerja, termasuk caching dan optimasi gambar kritis. Ada jaminan pengembalian uang 14 hari, sehingga Anda dapat mencobanya juga bebas risiko!