Cara Melayani Imej Berskala Di WordPress (Item Dalam GTmetrix)

Perlu menayangkan gambar berskala di WordPress?


Ini hanya bermaksud anda perlu mengubah saiz gambar besar agar lebih kecil.

GTmetrix memberitahu anda gambar mana yang perlu ditimbang dan dimensi yang betul yang harus dipangkas atau diubah ukurannya. Seterusnya, ubah saiz (skala) gambar dan gantikan gambar lama dengan yang baru.

Layan Imej Skala

Oleh kerana GTmetrix hanya menunjukkan gambar yang tidak dioptimumkan untuk satu halaman yang anda uji, mulailah dengan penskalaan di seluruh laman web gambar gambar yang muncul di beberapa halaman (logo, bar sisi dan gambar kaki anda). Seterusnya, jalankan halaman anda yang lain melalui GTmetrix dan timbangkan gambar individu di atasnya.

Bolehkah saya menggunakan pemalam untuk menskalakan gambar secara automatik?
Tidak mungkin. Anda boleh menetapkan lebar + tinggi maksimum pada kebanyakan pemalam pengoptimuman gambar. Tetapi kawasan yang berbeza di laman web anda memerlukan dimensi tertentu (gambar perlu ditimbang dengan tepat).

Buat lembaran cheat dimensi gambar.
Cara terbaik untuk mengelakkan kesalahan gambar skala penyampaian adalah dengan mempelajari dimensi setiap kawasan laman web anda (slaid, widget, logo, gambar blog lebar penuh, dll.). Seterusnya, buat cheat dimensi gambar yang menyenaraikan setiap dimensi kawasan. Sekiranya anda mengikuti cheat sheet dimensi gambar anda dan mengubah saiz gambar sebelum memuat naik, anda tidak akan pernah melakukan kesalahan gambar berskala lagi.

1. Cari Gambar Berukuran Besar dalam GTmetrix

Jalankan halaman melalui GTmetrix dan lihat kesalahan gambar skala tayangan di tab PageSpeed. Luaskan cadangan mereka dan anda akan melihat dimensi yang betul untuk setiap ukuran gambar. Perlu diingat GTmetrix hanya akan menunjukkan kesilapan untuk satu halaman yang anda uji.

Layan Gambar Skala GTmetrix

Anda juga boleh periksa secara manual sama ada gambar berskala. Pertama, klik kanan dan salin alamat gambar.

Salin Alamat Gambar

Seterusnya, tampal URL gambar ke tab penyemak imbas baru. Sekiranya anda membandingkan gambar yang ditunjukkan di laman web anda dengan URL gambar anda, anda akan melihat terdapat ukuran yang berbeza. Itu bererti gambar perlu dibuat skala. Dengan membandingkan dua variasi gambar anda secara bersebelahan, anda dapat melihat seberapa besar gambar itu sebenarnya (dan mengapa halaman di atasnya dimuat sangat lambat).

Imej Berskala vs Tidak Berskala

2. Ubah saiz Imej Untuk Membetulkan Dimensi

Muat turun gambar lama dan buka di alat penyuntingan gambar pilihan anda (saya menggunakan GIMP). Ubah saiz dan / atau pangkas gambar ke dimensi yang disarankan oleh GTmetrix. Banyak alat penyuntingan gambar membolehkan anda memampatkan gambar dan membuangnya Data EXIF yang akan menjadikan pemuatan gambar lebih pantas.

Skala Imej GIMP

Anda juga boleh memotong dan mengubah saiz gambar secara langsung di WordPress:

Menimbang Imej Dalam Penyunting Media WordPress

3. Gantikan Imej Lama Dengan Yang Baru

Muat naik gambar baru anda ke WordPress, kemudian ganti gambar lama dengan yang baru.

Imej Widget Tidak Berskala

Imej Widget Berskala

4. Uji Semula Halaman Dalam GTmetrix

Uji ulang halaman di GTmetrix dan anda tidak seharusnya mempunyai kesalahan imej berskala lagi.

100% Lekatkan Imej Skala

5. Layan Imej Skala Di Mudah Alih

Melayan gambar berskala berbeza di telefon bimbit.

Sekiranya anda mendaftar untuk mendapatkan akaun GTmetrix percuma, anda boleh menguji kelajuan laman web mudah alih pada Android. Kemungkinan anda akan melihat lebih banyak ralat gambar skala penyampaian jika laman web anda tidak digunakan gambar adaptif, yang bermaksud mengubah ukuran gambar secara automatik untuk peranti mudah alih (ini biasanya dilakukan oleh pemalam).

Langkah 1: Jalankan laman web anda melalui Uji Android GTmetrix:

Ujian Mudah Alih GTmetrix

Layan Imej Skala Di Mudah Alih

Langkah 2: Cari dimensi latar belakang mudah alih anda yang disediakan oleh GTmetrix:

Lebar Latar Belakang Maksimum

Langkah 3: Pasang pemalam Gambar Adaptif dari ShortPixel atau Imej Adaptive.

Imej Adaptasi ShortPixel

Langkah 4: Tetapkan dimensi yang disediakan oleh GTmetrix sebagai lebar maksimum latar belakang.

Lebar Maksimum Latar Belakang

Langkah 5: Jalankan semula laman web anda melalui ujian mudah alih GTmetrix untuk memastikan tidak ada kesalahan.

Ujian Mudah Alih GTmetrix

Langkah 5: Konfigurasikan tetapan lain dalam plugin gambar adaptif anda (ShortPixel merangkumi sokongan WebP, pemuatan gambar malas, pemangkasan pintar, dan penghapusan data EXIF). Ini juga boleh membantu.

6. Ubah saiz Imej Pada Pelbagai Halaman

Sekiranya anda menggunakan gambar yang sama di beberapa halaman dan perlu ditskalakan, anda boleh mengubah ukuran gambar, menyalinnya HTML, kemudian menggunakan plugin Better Search Replace untuk memperbaikinya di beberapa halaman.

Langkah 1: Pasang Carian Lebih Baik Ganti pemalam.

Langkah 2: Salin HTML gambar lama dan tampal ke medan “Cari Untuk” di pemalam Better Search Replace. Anda boleh menggunakan Penyunting Teks WordPress untuk melihat HTML gambar. Catatan: Ganti Pencarian yang Lebih Baik hanya akan menggantikan gambar jika mengandungi HTML yang tepat yang anda masukkan dalam pemalam.

Langkah 3: Salin HTML gambar baru dan tampal ke medan “Ganti Dengan”.

Layan HTML Gambar Skala

Langkah 4: Pilih jadual (mis. Catatan) yang anda mahukan diimbas dan hapus centang kering.

Langkah 5: Klik “Cari / Ganti” dan pemalam akan menggantikan gambar lama dengan yang baru.

7. Buat Lembaran Menipu Dimensi Gambar

Seperti yang saya nyatakan sebelumnya, anda harus mengukur dimensi semua kawasan laman web anda supaya anda dapat mengubah ukuran gambar sebelum memuat naiknya. Anda boleh menemui dimensi ini di GTmetrix (hanya jika anda mempunyai kesalahan gambar skala) atau anda juga dapat menemukannya di lembaran gaya CSS tema anda.

Contoh:

  • Imej gelangsar: 1900 (w) x 400 (j)
  • Imej karusel: 115 (w)
  • Imej Widget: 414 (w)
  • Gambar catatan blog lebar penuh: 680 (w)
  • Gambar pilihan: 250 (w) x 250 (j)
  • Gambar Oo Facebook Yoast: 1200 (w) x 628 (h) – langkah 11
  • Gambar Yoast Twitter OG 1024 (w) x 512 (h) – langkah 11

Segi Empat Lebar Piksel 680

Lebar blog saya adalah 680 piksel, jadi setiap gambar pada siaran ini telah diubah saiznya menjadi 680 piksel.

8. Plugin WordPress Untuk Menayangkan Imej Skala

Sebilangan besar plugin pengoptimuman gambar mempunyai pilihan untuk mengubah ukuran gambar, namun ini tidak begitu berkesan ketika berusaha memperbaiki kesalahan dalam GTmetrix, kerana kawasan yang berlainan di laman web anda memerlukan dimensi yang berbeza. Lebih-lebih lagi untuk memastikan gambar anda tidak terlalu besar. Seperti kata pemalam Imagify, lebar maksimum tidak boleh kurang daripada lakaran kecil terbesar anda.

Senyum

Ubah saiz Imej Smush

Bayangkan

Ubah saiz Imej

Pengoptimum Imej EWW

Ubah saiz Imej EWWW

Pengoptimuman Imej Lain

Saya menulis tutorial lengkap mengenai mengoptimumkan gambar di WordPress yang merangkumi:

  • Memampatkan gambar
  • Melayan gambar melalui CDN
  • Mengubah saiz GIFS
  • Mengalih keluar data EXIF
  • Malas memuatkan gambar + video
  • Cloudflare Mirage, Polish, Hotlink Protection

Pengoptimuman Imej Dalam GTmetrix

Mencari Lebih Banyak Tutorial Kelajuan WordPress?
Berikut adalah tutorial lain yang saya tulis:

  • Cara Menyiapkan WP Rocket (plugin cache yang saya cadangkan)
  • Cloudways vs. SiteGround (dua hos teratas yang saya cadangkan)
  • Bagaimana Saya Mendapat Skor GTmetrix 100% (Panduan Kelajuan WordPress)

Saya juga mempunyai video hebat mengenai pengoptimuman kelajuan WordPress:

Soalan Lazim

&# x2705; Bolehkah saya menggunakan pemalam untuk menayangkan gambar berskala?

Tidak, bahagian yang berbeza dari laman web anda memerlukan dimensi gambar yang berbeza. Anda perlu membuat skala gambar agar sesuai dengan dimensi unik tersebut.

&# x2705; Apakah kaedah termudah untuk menskalakan gambar?

Muat turun gambar, potong / ubah saiznya dalam program seperti Photoshop atau Gimp, kemudian ganti gambar lama dengan yang baru.

&# x2705; Gambar mana yang harus saya mulakan penskalaan terlebih dahulu?

Mulakan dengan menskalakan gambar yang muncul di beberapa halaman seperti logo, bar sisi, gambar, gambar kaki, dan lain-lain.

&# x2705; Di mana saya dapati dimensi gambar yang betul?

GTmetrix memberitahu anda dimensi yang betul dari setiap gambar semasa anda mengembangkan item di tab PageSpeed.

&# x2705; Bagaimana saya mengoptimumkan sepenuhnya gambar?

Skala ke dimensi yang betul, kompres dan hapus data EXIF ​​menggunakan program gambar atau plugin, kemudian pastikan anda menentukan dimensi gambar (tetapkan lebar dan tinggi gambar) dalam HTML.

Saya harap tutorial ini berguna! Sekiranya anda masih mempunyai kesalahan gambar skala di laman WordPress anda, tinggalkan saya komen dengan soalan anda dan saya akan membantu anda.

Sorakan,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map