Optimalkan Gambar Anda Dengan Ukuran Gambar yang Ditentukan Sebelumnya [Tip WordPress]

Mengoptimalkan gambar di situs web adalah tugas yang menakutkan. Anda dapat memilih untuk menggunakan lebih sedikit gambar, gambar terkompresi, sprite atau svg; daftar berjalan. Satu tempat di mana banyak situs WordPress tersandung adalah dalam menentukan ukuran gambar, yaitu a aspek penting dalam mengoptimalkan situs-situs yang banyak kontennya.

Ukuran gambar sangat penting karena gambar secara otomatis dibuat sesuai dengan ukuran yang diberikan ketika gambar diunggah. Ini memastikan bahwa bahkan jika Anda memiliki gambar asli lebar 3000px, itu tidak pernah digunakan jika gambar 600px cukup. Idealnya ruang lebar 600px harus menggunakan gambar lebar 600px alih-alih memperkecil yang lebih besar.

Dalam artikel ini saya akan memandu Anda apa ukuran gambar dan cara mendefinisikannya.

Bagaimana WordPress Menangani Gambar

Jika Anda pernah menyisipkan gambar di artikel WordPress Anda harusnya datang dengan pemilih ukuran gambar. Ini memungkinkan Anda memasukkan versi gambar kecil, sedang dan besar. Ukuran sebenarnya untuk ini dapat dimodifikasi dalam pengaturan WordPress.

Setiap kali Anda mengunggah gambar melalui WordPress, itu menghasilkan versi gambar-gambar ini dan menyimpannya secara terpisah. Misalnya, jika Anda mengunggah gambar 1200 × 800, WordPress dapat membuat versi 100 × 100, 600 × 400 dan 900 × 600. Saat Anda menyisipkan gambar dan memilih "sedang" versi medium yang sebenarnya akan digunakan, sebagai lawan dari versi menyusut asli.

Ini sangat bermanfaat karena itu menghemat bandwidth pada server dan waktu pemrosesan pada komputer klien. Saya pikir tidak mengherankan bahwa mengunduh gambar 600 × 400 lebih cepat daripada mengunduh gambar 1200 × 800.

Jika gambar yang lebih besar digunakan yang perlu diperkecil, browser harus mengurus perhitungan untuk mewujudkan ini. Meskipun ini tidak akan memakan waktu berjam-jam, itu mungkin terlihat di situs web gambar-berat.

Gambar Yang Tepat Di Tempat Yang Tepat

Tujuan akhir seharusnya adalah selalu gunakan ukuran gambar yang sesuai. Jika Anda membutuhkan gambar 440 × 380, maka ambil gambar dengan ukuran yang tepat dari server. Ada dua tempat utama di mana Anda akan menggunakan gambar yang diunggah: gambar unggulan dan gambar dalam posting - saya sarankan fokus pada gambar unggulan terlebih dahulu.

Dalam semua kecuali artikel yang paling diarahkan secara visual, tidak masalah jika gambar dalam-posting memiliki lebar 220px atau 245px. Versi apa pun yang Anda miliki akan sama-sama dapat digunakan. Namun gambar yang ditampilkan biasanya ditampilkan pada ukuran umum. Untuk daftar artikel Anda dapat menggunakan thumbnail 178 × 178, untuk header artikel Anda dapat menggunakan gambar lebar 1200 × 600.

Selain ini, Anda juga mungkin ingin membuat thumbnail terpisah / sedang / besar seperti yang ditentukan dalam pengaturan memberi Anda akses mudah ke dimensi tertentu saat menambahkan gambar ke posting.

Jadi intinya adalah: Bukankah lebih bagus jika kita memiliki dua ukuran gambar ekstra yang dapat kita gunakan untuk gambar unggulan? Ukuran gambar ini akan dibuat tepat di samping yang lain ketika gambar diunggah. Kabar baiknya adalah bahwa WordPress telah Anda liput dengan fungsi yang cukup sederhana.

Membuat Ukuran Gambar

Dengan menggunakan fungsi add_image_size () Anda dapat menentukan semua ukuran gambar yang dibutuhkan situs web Anda. Mari kita buat dua contoh yang disebutkan di atas. Tempatkan kode di bawah ini di file functions.php tema Anda atau di file plugin.

 add_image_size ('Featured_thumbnail', 178, 178, true); add_image_size ('Featured_wide', 1200, 600); 

Seperti yang Anda lihat, fungsi ini membutuhkan empat parameter. Parameter pertama memungkinkan Anda menetapkan nama untuk ukurannya. Parameter kedua adalah lebar maksimum, ketiga, tinggi maksimum. Parameter keempat mengatur pemotongan keras. Jika disetel ke true, gambar akan dibuat sesuai ukuran yang Anda tentukan.

Setelah ini ditambahkan ke tema atau plugin Anda, dua versi baru dari setiap file yang Anda unggah akan dibuat oleh WordPress.

Menggunakan Ukuran Gambar

Ukuran gambar ini dapat digunakan dalam sejumlah fungsi yang berhubungan dengan pengambilan media. Mari kita lihat gambar yang ditampilkan terlebih dahulu. the_post_thumbnail () biasanya digunakan untuk menampilkan gambar yang ditampilkan pada posting. Kode berikut dapat ditempatkan di loop WordPress:

 the_post_thumbnail ('Featured_thumbnail'); 

Parameter pertama dari fungsi ini memungkinkan Anda menentukan ukuran gambar yang akan digunakan. Karena saya telah menentukan "Featured_thumbnail", versi 178 × 178 dari file ini akan digunakan.

Ada sejumlah fungsi lain seperti wp_get_attachment_image ()dan wp_get_attachment_image_src () yang juga menggunakan parameter ukuran gambar. Setiap kali Anda menggunakan fungsi seperti itu, Anda harus selalu menentukan ukuran gambar yang sesuai.

Regenerasi Gambar Mini

Jika Anda sudah memiliki situs, Anda tidak akan dapat mengoptimalkan artikel secara retrospektif hanya dengan menentukan ukuran gambar. Ukuran gambar hanya diperhitungkan saat gambar baru diunggah, sehingga tidak diterapkan pada gambar yang sudah ada di sistem.

Jangan takut, plugin Regenerate Thumbnails akan membuat semuanya menjadi lebih baik! Plugin ini dapat membuat ulang thumbnail untuk semua gambar Anda, dengan mempertimbangkan semua ukuran gambar yang ditentukan. Ini juga bisa menargetkan gambar tertentu, yang berguna jika Anda hanya memiliki beberapa, atau Anda sedang melakukan beberapa pengujian.

Setelah thumbnail dibuat ulang, Anda akan melihat versi yang dioptimalkan dimuat di situs Anda. Anda dapat memeriksanya dengan melihat sumber gambar. Jika Anda mengunggah 'example.jpeg' dan Anda melihat 'example.jpeg' sebagai sumber untuk gambar unggulan Anda, ada sesuatu yang tidak beres. Jika kamu melihat “contoh-178 × 178.jpeg” maka semuanya baik-baik saja; gambar yang dioptimalkan ditampilkan.

Gambar Responsif

Salah satu kesulitan dalam memelihara situs yang dioptimalkan adalah responsif. Saat saya melihat artikel di iPad, gambar dalam-posting berukuran besar akan diturunkan karena lebar maksimumnya adalah 786px atau lebih.

Solusi termudah adalah dengan menggunakan plugin seperti Hammy. Hammy bekerja berdasarkan lebar konten tema Anda (berbeda dengan lebar jendela browser) dan dapat menyajikan gambar yang dioptimalkan berdasarkan itu. Ini sangat berguna untuk pengguna seluler di mana kekuatan pemrosesan dan bandwidth mungkin menjadi masalah.

Pengoptimalan Gambar Lebih Lanjut

Seperti yang saya sebutkan dalam pendahuluan ada banyak cara untuk mengoptimalkan gambar. Dari sprite hingga kompresi gambar, banyak teknik yang dapat digunakan untuk mengurangi waktu pemuatan yang sejalan dengan gambar. Ashutosh KS telah menulis artikel yang bagus yang menampilkan 9 Plugin WordPress Untuk Meningkatkan Kinerja Gambar, saya sarankan Anda membacanya!

Saya juga menyarankan untuk melihat Gambar Bebas Tanggap Kerepotan yang menunjukkan kepada Anda cara menambahkan dukungan untuk elemen gambar, sesuatu yang ingin Anda gunakan jika Anda ingin menulis kode Anda sendiri.