Pentingnya gambar responsif di WordPress Core

Popularitas gambar responsif meningkat dan itu adalah sesuatu yang tidak dapat diabaikan oleh siapa pun. Namun menggunakan fungsi yang sama di CMS populer seperti WordPress bisa menjadi pengalaman yang menantang. Tugasnya bisa memakan waktu lama meskipun mungkin bagi pengguna untuk menulis fitur di dalam tema itu sendiri. Tetapi banyak hal telah berubah secara dramatis sejak WordPress 4.4 diperkenalkan sehingga memudahkan pengembang dan administrator untuk menyematkan fungsionalitas gambar responsif ke dalam tema mereka.

Sorotan utama termasuk ketersediaan plug-in Gambar Responsif dalam inti WordPress. Ini berarti pengguna sekarang dapat menikmati kehadiran dukungan gambar responsif yang hadir sebagai fitur default di dalam WordPress. Mari kita lihat lebih dekat bagaimana sebenarnya fitur ini bekerja dan bagaimana fitur ini dapat digunakan dengan hati-hati untuk memanfaatkan potensi situs WordPress.

Fungsi Fitur

Semua konten dan gambar akan terdiri dari atribut srcset dan ukuran setelah Anda memperbarui ke WordPress 4.4. Hal ini terutama untuk memastikan ketersediaan setiap ukuran gambar untuk mempertahankan dimensi gambar yang diminta sebenarnya. Selama contoh di mana rasio aspek bervariasi dibandingkan dengan gambar asli yang diminta, maka pemotongan khusus akan ditinggalkan dari atribut srcset . Pada saat yang sama, gambar responsif akan ditampilkan saat gambar dipanggil melalui fungsi wp-get-attachment-image.

Gambar responsif bertindak sebagai fitur latar belakang di WordPress 4.4 karena fungsi otomatisnya yang terjadi setiap kali gambar diunggah di WordPress melalui pengunggah media. Proses latar belakang otomatis ini menghasilkan atribut srcset dan ukuran yang ditampilkan setiap kali gambar muncul di halaman. Ini berarti tidak ada antarmuka yang terlihat dalam fitur gambar responsif baru. Tak satu pun dari opsi seperti keberadaan formulir untuk tujuan pengisian atau kotak untuk tujuan pemeriksaan dan opsi untuk tujuan beralih tersedia karena kurangnya antarmuka yang terlihat.

Pengembang tema harus memastikan bahwa atribut ukuran yang akurat tersedia dalam gambar dengan cara mengedit file functions.php tema. Penting untuk mempertimbangkannya karena atribut srcset dan ukuran yang ada di tag gambar adalah yang sebenarnya mewakili gambar responsif di WordPress. Yang paling sulit untuk diprediksi adalah atribut ukuran meskipun WordPress berkinerja baik dalam hal memasukkan semua ukuran yang tersedia dalam atribut srcset . Ini adalah tugas atribut ukuran untuk menjelaskan browser tentang seberapa lebar gambar akan berada di setiap viewport yang tersedia. Namun hasilnya dapat berbeda tergantung pada gaya yang tersedia dengan tema pengguna, memberikan default yang wajar yaitu 'sizes=” (max width: {{image-width}}) 100 vw, {{image-width}}”

Dengan atribut ukuran, pengguna dapat mencapai terutama dua hal. Pertama, memastikan ketersediaan atribut ukuran yang valid dalam gambar yang kini telah menjadi prasyarat sejauh menyangkut spesifikasi. Kedua, mencegah browser menyediakan sumber gambar yang lebih banyak dibandingkan dengan lebar asli yang diminta. Namun manfaat dari atribut ukuran default menjadi kurang setiap kali CSS memanipulasi ukuran gambar pada lebar viewport yang sama sekali berbeda.

Pengembang tema dapat menyesuaikan atribut ukuran yang sesuai dengan setiap gambar dengan bantuan kait filter untuk memastikan pengiriman atribut ukuran yang sempurna selama setiap titik henti sementara. Oleh karena itu, sebaiknya pastikan bahwa tema tidak bergantung pada atribut ukuran default saat menawarkan dukungan gambar responsif yang akurat. Alasan utamanya adalah fakta bahwa browser tidak diizinkan untuk memodifikasi atau mengubah sumber gambar dengan atribut ukuran default selama contoh di mana ukuran viewport lebih kecil dibandingkan dengan ukuran gambar asli yang diminta. Namun jika gambar telah diubah dengan CSS pada breakpoint, maka sumbernya juga tidak dapat diubah.

Jika Anda adalah individu yang memiliki akses ke Basis Kode WordPress atau jika Anda adalah pengembang tema, maka Anda perlu memfilter gambar dalam tema untuk memberikan atribut ukuran yang akurat. Ini harus menjadi hal terpenting yang harus dilakukan setelah versi baru dirilis.

Konfigurasi Gambar Responsif untuk Tema Anda

Sejumlah kait baru diperkenalkan bersama dengan fungsi baru yang dapat digunakan untuk memberikan tingkat dukungan gambar responsif yang disesuaikan dengan tema Anda. Lebar maksimum gambar yang harus disertakan dalam atribut srcset dapat difilter oleh pengembang tema melalui kait max_srcset_image_width. Atribut srcset dari gambar dapat difilter dengan menghubungkan ke wp_calculate_image_srcset sedangkan atribut size dapat dikustomisasi oleh pengembang tema agar sesuai dengan breakpoint gambar dalam tema mereka dengan cara memfilter wp_calculate_image_sizes.

Gambar konten dapat difilter dengan wp_calculate_image_sizes sedangkan gambar mini posting/gambar unggulan dapat difilter dengan fungsi wp_get_attachment_image_attributes. Kebutuhan akan dua fungsi yang berbeda diperlukan karena tema berubah untuk cara gambar unggulan ditampilkan di titik henti sementara yang berbeda dan sama sekali berbeda dibandingkan dengan cara gambar konten ditampilkan dalam situasi yang sama. Jadi WordPress 4.4 menawarkan pengembang tema kesempatan yang lebih baik untuk memfilter gambar dengan berbagai cara dan dengan demikian menjadi sespesifik mungkin.

Semua ini menyoroti manfaat instan yang dapat dicapai pengguna dan pengembang tema dengan dukungan gambar responsif melalui pembaruan WordPress 4.4. Ini juga memungkinkan pengembang tema untuk memasukkan gambar yang jelas dan tajam terlepas dari ukuran viewport dan kepadatan piksel dan dengan demikian meningkatkan kinerja situs web, karena halaman web dapat menghindari waktu tambahan yang diperlukan untuk memuat gambar yang lebih besar. Meskipun ini merupakan prosedur otomatis untuk pengguna, pengembang tema bertanggung jawab dalam menyesuaikan atribut ukuran gambar dengan menghabiskan waktu di file functions.php di dalam tema. Selain itu, harus diingat bahwa membuat dan menggabungkan plugin Gambar Responsif lebih merupakan upaya tim.