Menentukan Dimensi dengan Menambahkan Lebar dan Tinggi pada Elemen Gambar

Dalam dunia web design, menentukan dimensi gambar yang tepat sangatlah penting untuk membuat tampilan website lebih estetis dan profesional. Salah satu cara untuk menentukan dimensi gambar adalah dengan menambahkan lebar dan tinggi secara eksplisit pada elemen gambar. Pada artikel ini, kita akan membahas lebih lanjut tentang cara menentukan dimensi gambar dengan menambahkan lebar dan tinggi pada elemen gambar.

Pertama-tama, apa itu dimensi gambar? Dimensi gambar mengacu pada ukuran gambar dalam satuan piksel. Lebar dan tinggi gambar harus ditentukan agar gambar terlihat optimal pada tampilan website. Jika ukuran gambar terlalu kecil atau terlalu besar, gambar dapat terdistorsi atau tidak terlihat dengan jelas. Oleh karena itu, menentukan dimensi gambar dengan benar adalah hal yang sangat penting dalam web design.

Menambahkan lebar dan tinggi secara eksplisit pada elemen gambar adalah cara termudah untuk menentukan dimensi gambar. Ini dapat dilakukan dengan mudah menggunakan HTML dan CSS. Untuk menambahkan dimensi gambar secara eksplisit, Anda harus menentukan nilai lebar dan tinggi gambar pada tag HTML gambar. Contoh kodenya sebagai berikut:

<img src="gambar.jpg" alt="Gambar" width="500" height="300">

Pada kode di atas, nilai lebar gambar ditentukan sebagai 500 piksel dan nilai tinggi gambar ditentukan sebagai 300 piksel. Dengan menentukan nilai lebar dan tinggi gambar pada tag HTML gambar, browser dapat mengoptimalkan tampilan gambar pada website dengan benar.

Namun, perlu diingat bahwa menambahkan dimensi gambar secara eksplisit pada elemen gambar dapat mempengaruhi kinerja website. Jika gambar terlalu besar, halaman website dapat memuat lebih lambat karena waktu yang dibutuhkan untuk mengunduh gambar lebih lama. Oleh karena itu, pastikan untuk menentukan dimensi gambar yang tepat agar tidak mempengaruhi kinerja website.

Selain itu, penting untuk memperhatikan aspek rasio gambar. Rasio gambar mengacu pada perbandingan antara lebar dan tinggi gambar. Beberapa gambar memiliki rasio aspek tertentu, seperti 4:3 atau 16:9. Jika rasio gambar tidak diatur dengan benar, gambar dapat terlihat terdistorsi pada tampilan website. Oleh karena itu, pastikan untuk menyesuaikan nilai lebar dan tinggi gambar sesuai dengan rasio gambar yang diinginkan.

Salah satu cara untuk menentukan rasio gambar yang tepat adalah dengan menggunakan proporsi golden ratio atau rasio emas. Proporsi golden ratio adalah perbandingan antara dua ukuran yang ideal, yaitu 1:1.618. Rasio emas dapat memberikan tampilan gambar yang lebih estetis dan proporsional pada tampilan website. Namun, pastikan untuk tetap menyesuaikan rasio gambar dengan konteks tampilan website yang diinginkan.

1. Mengidentifikasi Kesalahan Dimensi Gambar pada GTmetrix

GTmetrix adalah sebuah alat analisis performa web yang dapat membantu Anda memeriksa dan menganalisis situs web Anda. Dalam GTmetrix, kesalahan dimensi gambar dapat ditemukan dalam bagian “Optimize Images”. Untuk mengidentifikasi kesalahan dimensi gambar, ikuti langkah-langkah berikut:

1. Buka laporan GTmetrix untuk situs web Anda.
2. Buka bagian “Optimize Images”.
3. Periksa kolom “Size” untuk setiap gambar. Jika gambar memiliki ukuran file yang besar, ini bisa menunjukkan bahwa gambar tersebut belum dioptimalkan dengan benar.
4. Periksa kolom “Dimensions” untuk setiap gambar. Jika gambar memiliki dimensi yang tidak sesuai, misalnya ukuran gambar yang lebih besar dari ukuran tampilan yang sebenarnya, itu adalah kesalahan dimensi gambar.
5. Perbaiki kesalahan dimensi gambar dengan mengedit gambar tersebut menggunakan perangkat lunak pengedit gambar dan mengubah ukuran gambar agar sesuai dengan tampilan yang diinginkan.

Setelah melakukan perbaikan, lakukan pengujian ulang menggunakan GTmetrix untuk memeriksa apakah kesalahan dimensi gambar sudah teratasi atau tidak.

2. Salin Dimensi Gambar dari Laporan GTmetrix

Langkah berikutnya adalah menyalin nilai lebar dan tinggi gambar (yang diberikan di GTmetrix)

3. Cari Semua Gambar yang bermasalah pada Situs Web Anda

Jika Anda memiliki situs web yang sudah berjalan dan ingin meningkatkan performa dan kinerja situs, salah satu hal yang perlu diperhatikan adalah masalah dimensi gambar. Gambar yang memiliki dimensi yang salah dapat mempengaruhi kecepatan loading situs web Anda.

Untuk mengidentifikasi masalah dimensi gambar, cari semua gambar yang bermasalah dengan dimensi width dan height pada situs web Anda. Anda dapat melakukan hal ini dengan menggunakan alat analisis performa web seperti GTmetrix. Setelah menemukan gambar-gambar yang bermasalah, periksa kode HTML untuk gambar tersebut dan pastikan dimensi gambar telah ditentukan dengan benar.

Sekarang kita perlu menemukan gambar di situs WordPress Anda.

Editor visual WordPress secara otomatis menentukan dimensi gambar untuk Anda, sehingga biasanya tidak ada kesalahan untuk gambar di sini. Namun, beberapa area pada situs web Anda mungkin tidak menentukan dimensi gambar secara otomatis (seperti pembangun halaman, slider, widget, dan HTML atau CSS yang dibuat sendiri). Anda perlu mengetahui area mana dari situs WordPress Anda yang memberikan kesalahan.

4. Tambahkan Lebar + Tinggi Ke HTML Gambar

Setelah Anda menemukan gambar tersebut, lihat kode HTML-nya dan Anda akan melihat bahwa tidak ada ukuran lebar dan tinggi yang ditentukan. Yang perlu Anda lakukan adalah memasukkan ukuran tersebut ke dalam kode HTML seperti ini: width=”135px” height=”135px”

Sebelum

<img src="example.png" />

Sesudah

<img src="example.png" width="135px" height="135px" />

5. Periksa Kembali Halaman di GTmetrix

Setelah menyimpan perubahan, jalankan ulang halaman melalui GTmetrix. Gambar yang sebelumnya bermasalah seharusnya sudah diperbaiki.

6. Tentukan Dimensi Gambar dengan plugin WP Rocket

Jika Anda menggunakan WP Rocket, Itu bisa menambahkan opsi untuk menentukan dimensi gambar secara otomatis yaitu pada pengaturan Media yang disebut “add missing image dimensions“. WP Rocket akan memindai HTML untuk atribut src yang tidak memiliki lebar + tinggi, kemudian menambahkannya.

7. Perbaiki Dimensi Gambar Pada Banyak Halaman

Ingin memperbaiki gambar secara massal yang muncul di banyak halaman?

Anda bisa menggunakan plugin Better Search Replace untuk memperbaiki logo, gambar widget, dan gambar lainnya yang muncul di banyak halaman tanpa harus mengakses satu per satu. Ini bisa menghemat waktu.

Langkah 1: Pasang plugin Better Search Replace.

Langkah 2: Di kolom “Cari”, tambahkan HTML gambar tanpa lebar + tinggi yang ditentukan. Di kolom “Ganti dengan”, tambahkan versi baru dari gambar yang mencakup lebar + tinggi.

Langkah 3: Pilih tabel yang ingin Anda periksa dan ganti gambar. Jika ingin mencobanya terlebih dahulu, Anda bisa memilih opsi “dry run”, jika tidak, hapus tanda centang pada opsi tersebut dan klik “Run Search/Replace”.

Langkah 4: plugin Better Search Replace akan melakukan pencarian dan penggantian gambar pada semua tabel yang Anda pilih. Setelah selesai, Better Search Replace akan memberitahu Anda berapa banyak tabel yang telah dipindai dan berapa banyak gambar yang telah diganti.

Pertanyaan yang Sering Diajukan