Cara Melayani Gambar dengan Skala Besar di WordPress (Item In GTmetrix)

Perlu menyajikan gambar berskala di WordPress?


Ini hanya berarti Anda perlu mengubah ukuran gambar besar menjadi lebih kecil.

GTmetrix memberi tahu Anda gambar mana yang harus diskalakan dan dimensi yang benar untuk memotong atau diubah ukurannya. Selanjutnya, ubah ukuran (skala) gambar dan ganti gambar lama dengan yang baru.

Sajikan Gambar Skala

Karena GTmetrix hanya menampilkan gambar yang tidak dioptimalkan untuk satu halaman yang Anda uji, mulailah dengan penskalaan seluruh tempat tinggal gambar gambar yang muncul di beberapa halaman (logo Anda, gambar sidebar dan footer). Selanjutnya, jalankan halaman Anda yang lain melalui GTmetrix dan skala masing-masing gambar itu.

Dapatkah saya menggunakan plugin untuk secara otomatis skala gambar?
Tidak mungkin. Anda dapat mengatur lebar + tinggi maksimum di sebagian besar plugin pengoptimalan gambar. Tetapi area yang berbeda dari situs Anda membutuhkan dimensi tertentu (gambar perlu diskalakan sesuai dengan itu).

Buat lembar cheat dimensi gambar.
Cara terbaik untuk menghindari kesalahan penyajian gambar berskala adalah dengan mempelajari dimensi setiap area situs web Anda (slider, widget, logo, gambar blog fullwidth, dll). Selanjutnya, buat lembar contekan dimensi gambar yang mencantumkan dimensi masing-masing area. Jika Anda mengikuti lembar contekan dimensi gambar dan mengubah ukuran gambar sebelum mengunggah, Anda seharusnya tidak pernah menyajikan kesalahan gambar berskala lagi.

1. Temukan Gambar Kebesaran di GTmetrix

Jalankan halaman melalui GTmetrix dan lihat sajikan kesalahan gambar berskala di tab PageSpeed. Perluas rekomendasinya dan Anda akan melihat ukuran yang benar untuk setiap ukuran gambar. Perlu diingat GTmetrix hanya akan menampilkan kesalahan untuk satu halaman yang Anda uji.

Sajikan Gambar Skala Besar GTmetrix

Anda juga bisa secara manual memeriksa apakah gambar diskalakan. Pertama, klik kanan dan salin alamat gambar.

Salin Alamat Gambar

Selanjutnya, tempel URL gambar ke tab browser baru. Jika Anda membandingkan gambar yang ditampilkan di situs web Anda dengan URL gambar Anda, Anda akan melihat ada perbedaan ukuran yang nyata. Itu berarti gambar perlu diskalakan. Dengan membandingkan dua variasi gambar Anda secara berdampingan, Anda dapat melihat seberapa besar sebenarnya gambar tersebut (dan mengapa halaman yang dibuka mungkin sangat lambat memuat).

Gambar yang diskalakan vs yang tidak skala

2. Ubah Ukuran Gambar Untuk Memperbaiki Dimensi

Unduh gambar lama dan buka di alat edit gambar pilihan Anda (saya menggunakan GIMP). Ubah ukuran dan / atau potong gambar ke dimensi yang direkomendasikan oleh GTmetrix. Banyak alat pengeditan gambar memungkinkan Anda mengompres gambar dan menghapus Data EXIF yang akan membuat gambar dimuat lebih cepat.

Menskalakan Gambar GIMP

Anda juga dapat memotong dan mengubah ukuran gambar langsung di WordPress:

Menskalakan Gambar Di Editor Media WordPress

3. Ganti Gambar Lama Dengan Yang Baru

Unggah gambar baru Anda ke WordPress, lalu ganti gambar lama dengan yang baru.

Gambar Widget yang Tidak Dihitung

Gambar Widget Skala

4. Tes Ulang Halaman Di GTmetrix

Tes ulang halaman di GTmetrix dan Anda seharusnya tidak lagi melayani kesalahan skala gambar.

100% Sajikan Gambar Skala

5. Sajikan Gambar Skala Pada Ponsel

Menayangkan gambar berskala berbeda di perangkat seluler.

Jika Anda mendaftar untuk akun GTmetrix gratis, Anda dapat menguji akun Anda kecepatan situs web seluler di Android. Kemungkinannya adalah Anda akan melihat lebih banyak penyajian kesalahan gambar berskala jika situs Anda tidak digunakan gambar adaptif, yang berarti secara otomatis mengubah ukuran gambar untuk perangkat seluler (ini biasanya dilakukan dengan plugin).

Langkah 1: Jalankan situs Anda melalui Tes Android GTmetrix:

Tes Ponsel GTmetrix

Sajikan Gambar Skala Besar Di Ponsel

Langkah 2: Temukan dimensi latar belakang ponsel Anda yang disediakan oleh GTmetrix:

Lebar Latar Belakang Maksimum

Langkah 3: Instal plugin Adaptive Images dari ShortPixel atau Gambar Adaptif.

Gambar Adaptif ShortPixel

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

Latar Belakang Lebar Maksimal

Langkah 5: Jalankan kembali situs Anda melalui uji seluler GTmetrix untuk memastikan tidak ada kesalahan.

Tes Ponsel GTmetrix

Langkah 5: Konfigurasikan pengaturan lain di plugin gambar adaptif Anda (ShortPixel menyertakan dukungan WebP, pemuatan gambar yang malas, pemangkasan yang cerdas, dan menghapus data EXIF). Ini juga bisa membantu.

6. Ubah Ukuran Gambar Pada Beberapa Halaman

Jika Anda menggunakan gambar yang sama di beberapa halaman dan perlu diskalakan, Anda dapat mengubah ukuran gambar, menyalinnya dalam HTML, lalu menggunakan plugin Better Search Replace untuk memperbaikinya di beberapa halaman.

Langkah 1: Pasang Plugin Better Search Replace.

Langkah 2: Salin HTML gambar lama dan tempel ke bidang “Cari” di plugin Better Search Replace. Anda dapat menggunakan Editor Teks WordPress untuk melihat HTML gambar. Catatan: Better Search Replace hanya akan menggantikan gambar jika itu berisi HTML persis yang Anda masukkan di plugin.

Langkah 3: Salin HTML gambar baru dan tempel ke bidang “Ganti Dengan”.

Sajikan Gambar Skala HTML

Langkah 4: Pilih tabel (mis. Posting) yang ingin Anda pindai dan hapus centang pemindaian kering.

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

7. Buat Gambar Cheat Dimensi Gambar

Seperti yang saya sebutkan sebelumnya, Anda harus mengukur dimensi semua area situs web Anda sehingga Anda dapat mengubah ukuran gambar sebelum mengunggahnya. Anda dapat menemukan dimensi ini di GTmetrix (hanya jika Anda telah menyajikan kesalahan gambar berskala) atau Anda juga dapat menemukannya di stylesheet CSS tema Anda.

Contoh:

  • Gambar slider: 1900 (w) x 400 (h)
  • Gambar carousel: 115 (w)
  • Gambar widget: 414 (w)
  • Gambar posting blog fullwidth: 680 (w)
  • Gambar pilihan: 250 (w) x 250 (h)
  • Gambar OG Facebook Yoast: 1200 (w) x 628 (h) – langkah 11
  • Gambar OG Twitter terbaru 1024 (w) x 512 (h) – langkah 11

Persegi Panjang Lebar Piksel 680

Lebar blog saya adalah 680px, sehingga setiap gambar pada postingan ini telah diubah ukurannya menjadi 680px.

8. Plugin WordPress Untuk Melayani Gambar Skala

Sebagian besar plugin pengoptimalan gambar memiliki opsi untuk mengubah ukuran gambar, namun ini tidak terlalu efektif ketika mencoba untuk memperbaiki kesalahan dalam GTmetrix, karena berbagai area situs web Anda memerlukan dimensi yang berbeda. Ini lebih untuk memastikan gambar Anda tidak benar-benar besar. Seperti yang dikatakan plugin Imagify, lebar maksimum tidak boleh kurang dari thumbnail terbesar Anda.

Smush

Ubah Ukuran Gambar Smush

Bayangkan

Ubah Ukuran Gambar Imagify

EWW Pengoptimal Gambar

Ubah Ukuran Gambar EWWW

Optimalisasi Gambar Lainnya

Saya menulis tutorial lengkap tentang mengoptimalkan gambar di WordPress yang mana termasuk:

  • Mengompresi gambar
  • Melayani gambar melalui CDN
  • Mengubah ukuran GIFS
  • Menghapus data EXIF
  • Malas memuat gambar + video
  • Cloudflare Mirage, Polish, Perlindungan Hotlink

Optimalisasi Gambar Di GTmetrix

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

  • Cara Mengatur WP Rocket (plugin cache saya sarankan)
  • Cloudways vs. SiteGround (dua host teratas yang saya rekomendasikan)
  • Bagaimana Saya Mendapat Skor GTmetrix 100% (Panduan Kecepatan WordPress)

Saya juga punya video yang luar biasa tentang pengoptimalan kecepatan WordPress:

Pertanyaan yang Sering Diajukan

&# x2705; Dapatkah saya menggunakan plugin untuk menyajikan gambar berskala?

Tidak, berbagai bagian situs web Anda memerlukan dimensi gambar yang berbeda. Anda perlu mengatur skala gambar agar sesuai dengan dimensi unik tersebut.

&# x2705; Apa cara termudah untuk skala gambar?

Unduh gambar, pangkas / ubah ukurannya dalam program seperti Photoshop atau Gimp, lalu ganti gambar lama dengan yang baru.

&# x2705; Gambar mana yang harus saya mulai scaling terlebih dahulu?

Mulailah dengan menskala gambar yang muncul di beberapa halaman seperti logo Anda, sidebar, gambar, gambar footer, dan lainnya.

&# x2705; Di mana saya menemukan dimensi gambar yang benar?

GTmetrix memberi tahu Anda dimensi yang benar dari setiap gambar saat Anda memperluas item di tab PageSpeed.

&# x2705; Bagaimana cara mengoptimalkan gambar secara penuh?

Skala ke dimensi yang benar, kompres dan hapus data EXIF ​​menggunakan program gambar atau plugin, lalu pastikan Anda menentukan dimensi gambar (atur lebar dan tinggi gambar) di HTML.

Saya harap tutorial ini bermanfaat bagi Anda! Jika Anda masih menayangkan kesalahan gambar berskala di situs WordPress Anda, beri saya komentar dengan pertanyaan Anda dan saya akan membantu Anda dengan cara apa pun saya bisa.

Bersulang,
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