Optimalkan Imej Anda Dengan Saiz Imej Yang Ditetapkan [Tip Petua]

Mengoptimumkan imej di laman web adalah tugas yang menakutkan. Anda boleh memilih untuk menggunakan imej yang lebih sedikit, imej termampat, sprite atau svg; senarai terus. Satu tempat di mana banyak tapak WordPress tersandung adalah dalam menentukan saiz imej, iaitu aspek penting dalam mengoptimumkan tapak berat kandungan.

Saiz imej adalah penting kerana imej dibuat secara automatik mengikut saiz yang diberikan apabila imej dimuat naik. Ini memastikan bahawa walaupun anda mempunyai imej asli yang lebar 3000px, ia tidak akan digunakan jika imej 600px sudah cukup. Sebaiknya ruang luas 600px sepatutnya menggunakan imej 600px lebar dan bukannya menurunkan yang lebih besar.

Dalam artikel ini saya akan memandu anda saiz imej apa dan bagaimana untuk mentakrifkan mereka.

Bagaimana WordPress Menangani Imej

Jika anda pernah memasukkan imej dalam artikel WordPress, anda sepatutnya datang dengan pemilih saiz imej. Ini membolehkan anda memasukkan versi imej kecil, sederhana dan besar. Saiz sebenar untuk ini boleh diubah suai dalam tetapan WordPress.

Setiap kali anda memuat naik imej melalui WordPress, ia menghasilkan versi imej ini dan menyimpannya secara berasingan. Sebagai contoh, jika anda memuat naik imej 1200 × 800, WordPress boleh membuat 100 × 100, 600 × 400 dan 900 × 600 versi. Apabila anda memasukkan imej dan memilih "sederhana", versi medium sebenar akan digunakan, berbanding versi merosot asli.

Ini sangat bermanfaat kerana ia memelihara lebar jalur pada pelayan dan masa memproses pada komputer klien. Saya fikir ia tidak menghairankan bahawa memuat turun imej 600 × 400 lebih cepat daripada memuat turun imej 1200 × 800.

Jika imej yang lebih besar digunakan, yang perlu dikurangkan, pelayar perlu menjaga pengiraan untuk membuat ini berlaku. Walaupun ini tidak akan mengambil masa berjam-jam, ia mungkin kelihatan di laman web imej yang berat.

Imej Kanan Di Tempat Yang Benar

Matlamat utama adalah untuk sentiasa menggunakan saiz imej yang sesuai. Jika anda memerlukan imej 440 × 380, kemudian ambil imej dengan saiz yang tepat dari pelayan. Terdapat dua tempat utama di mana anda akan menggunakan imej yang dimuat naik: imej pilihan dan imej dalam pos - Saya akan menasihati memfokuskan pada imej pilihan terlebih dahulu.

Dalam semua tetapi artikel yang paling diarahkan secara visual itu tidak begitu penting jika imej dalam pasang adalah 220px atau 245px lebar. Versi mana yang anda ada akan sama digunakan. Imej yang diketengahkan bagaimanapun biasanya ditunjukkan pada saiz biasa. Untuk senarai artikel anda boleh menggunakan gambar kecil 178 × 178, untuk tajuk artikel anda boleh menggunakan imej lebar 1200 × 600.

Sebagai tambahan kepada ini, anda juga mungkin mahu menyimpan gambar kecil / saiz sederhana / besar yang berasingan seperti yang ditakrifkan dalam tetapan kepada memberikan anda akses mudah ke dimensi tertentu apabila menambah imej ke siaran.

Oleh itu, apa yang menjadi kenyataan adalah: Tidakkah ia hebat jika kita mempunyai dua saiz imej tambahan yang boleh kita gunakan untuk imej yang dipaparkan? Saiz imej ini akan dibuat tepat bersama sisanya apabila imej dimuat naik. Berita baiknya adalah bahawa WordPress mempunyai anda dilindungi dengan fungsi yang cukup mudah.

Mewujudkan Saiz Imej

Dengan menggunakan add_image_size () fungsi anda boleh menentukan semua saiz imej yang diperlukan oleh laman web anda. Mari buat dua contoh yang disebutkan di atas. Letakkan kod di bawah dalam fail functions.php tema anda atau dalam fail plugin.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Seperti yang anda dapat lihat, fungsi ini memerlukan empat parameter. Parameter pertama membolehkan anda menetapkan nama untuk saiznya. Parameter kedua ialah lebar maksimum, ketiga, ketinggian maksimum. Parameter keempat menetapkan penanaman keras. Jika ditetapkan kepada benar, imej akan dibuat pada saiz yang tepat yang anda tentukan.

Sebaik sahaja ini telah ditambah pada tema anda atau plugin dua versi baru setiap fail yang anda muat naik akan dibuat oleh WordPress.

Menggunakan Saiz Imej

Saiz imej ini boleh digunakan dalam beberapa fungsi yang menangani pengambilan media. Mari lihat imej yang dipaparkan terlebih dahulu. the_post_thumbnail () biasanya digunakan untuk memaparkan imej pilihan pos. Kod berikut boleh diletakkan dalam gelung WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

Parameter pertama fungsi ini membolehkan anda menentukan saiz imej untuk digunakan. Oleh kerana saya telah menyatakan "featured_thumbnail", versi 178 × 178 fail ini akan digunakan.

Terdapat beberapa fungsi lain seperti wp_get_attachment_image ()dan wp_get_attachment_image_src () yang juga menggunakan parameter saiz imej. Setiap kali anda menggunakan fungsi sedemikian, anda harus sentiasa menentukan saiz imej yang sesuai.

Menjana semula imej kecil

Sekiranya anda sudah mempunyai laman web, anda tidak akan dapat mengoptimumkan artikel anda secara retrospektif hanya dengan menentukan saiz imej. Saiz imej hanya diambil kira apabila imej baru dimuat naik, jadi ia tidak digunakan pada imej yang sudah ada dalam sistem.

Jangan takut, plugin Thumbnail Regenerate akan menjadikan semuanya lebih baik! Plugin ini boleh menjana semula imej kecil untuk semua imej anda, dengan mengambil kira semua saiz imej yang ditetapkan. Ia juga boleh sasarkan imej tertentu, yang berguna jika anda hanya mempunyai beberapa, atau anda melakukan beberapa ujian.

Setelah imej kecil anda diregangkan, anda harus melihat versi yang dioptimumkan dimuatkan di laman web anda. Anda boleh menyemak ini dengan melihat sumber imej. Jika anda memuat naik 'example.jpeg' dan anda melihat 'example.jpeg' sebagai sumber untuk imej pilihan anda, sesuatu tidak betul. Jika anda lihat “contoh-178 × 178.jpeg” maka semuanya baik; imej yang dioptimumkan ditunjukkan.

Imej Responsif

Satu kesukaran untuk mengekalkan tapak yang dioptimumkan ialah respons. Apabila saya melihat artikel di iPad, imej dalam pos yang saiz besar akan dilepaskan kerana lebar maksimum akan menjadi 786px atau lebih.

Penyelesaian yang paling mudah adalah menggunakan plugin seperti Hammy. Hammy berfungsi berdasarkan lebar kandungan tema anda (berbanding dengan lebar tingkap penyemak imbas) dan boleh memberikan imej yang dioptimumkan berdasarkan itu. Ini amat berguna untuk pengguna mudah alih di mana pemprosesan kuasa dan jalur lebar mungkin menjadi masalah.

Pengoptimuman Imej Lagi

Seperti yang saya nyatakan dalam pengenalan terdapat banyak cara untuk mengoptimumkan imej. Dari sprite ke pemampatan imej banyak teknik boleh digunakan untuk mengurangkan masa beban yang datang dengan tangan dengan gambar. Ashutosh KS telah menulis artikel hebat yang mempamerkan 9 Plugin WordPress Untuk Meningkatkan Prestasi Imej, saya cadangkan memberikan bacaan!

Saya juga mencadangkan untuk melihat Imej Responsif Percuma Hassle yang menunjukkan kepada anda bagaimana untuk menambah sokongan untuk elemen gambar, sesuatu yang anda mahu gunakan jika anda mahu menulis kod anda sendiri.