Eric Portis bergabung dengan saya untuk menggali dunia gambar responsif.
Kami bermula dari asasnya. Imej responsif secara khusus adalah gambar dalam HTML dan wujud kerana keinginan untuk prestasi yang lebih baik. Gambar mungkin merupakan penyebab terbesar dalam keseluruhan laman web. Sekiranya kita dapat menghindari pengiriman terlalu banyak piksel ke seluruh rangkaian, kita seharusnya. Bagaimanapun, layar yang hanya seluas 720 piksel tidak memerlukan gambar seluas 2000 piksel, walaupun itu adalah paparan 2x.
Masalahnya, penyemak imbas sangat agresif dalam memuat turun aset seperti gambar. Itu bagus, kerana itulah web (boleh) secepat yang ada. Tetapi ini juga bermaksud bahawa kita perlu memberikan banyak maklumat mengenai gambar kita dalam HTML. Tidak boleh penyemak imbas mengetahui seberapa besar imej itu? Tentu boleh, setelah memuat turunnya. Tidak boleh penyemak imbas mengetahui seberapa besar gambar yang akan ditunjukkan di halaman? Tentu boleh, setelah memuat turun semua CSS dan tata letak yang dilakukan. Sintaks gambar responsif cuba mendahului semua itu dengan memberikan maklumat tersebut tepat di sintaks. Mengetahui bahawa sintaks itu sukar! Terdapat srcset, sizesdan elemen, dan terdapat satu tan untuk membalut fikiran anda di sekitar sana.
Ia menjadi lebih rumit.
Sintaks yang perlu anda bangunkan berdasarkan mempunyai banyak salinan gambar tersebut untuk membina sintaks. Bagaimana anda membuatnya? Berapa banyak yang harus anda buat? Apa ukurannya?
Nasib baik, terdapat beberapa alat automatik yang muncul di sekitar gambar responsif. WordPress adalah pemain awal. Di luar kotak, WordPress akan membuat pelbagai versi gambar yang anda muat naik dan srcsetsintaks yang berguna . Tetapi anda boleh melakukan yang lebih baik. Anda boleh memberikan sizesatribut yang benar-benar sesuai dengan tema anda dan bagaimana ukuran gambar tersebut.
Juga, WordPress tidak menggunakan kepintaran khas untuk membuat banyak salinan gambar yang anda muat naik. Tetapi, ia boleh. Alat seperti penjana pemecah gambar responsif menggunakan beberapa kepintaran untuk mengetahui berapa banyak gambar yang boleh anda buat, jadi anda dapat mengimbangi antara gambar yang hampir sempurna untuk pekerjaan dan tidak perlu membuat ratusan atau ribuan salinan ia. Alat itu mempunyai API!
Ia menjadi lebih rumit.
Penyemak imbas yang berbeza menyokong format gambar yang berbeza. Contohnya, WebP. Terdapat penjimatan prestasi yang dapat dilakukan dengan melayani format gambar yang betul ke penyemak imbas yang betul. Sintaks gambar responsif dapat membantu dengan itu, tetapi menyukarkan sintaksnya. Banyak format gambar mempunyai konsep kualiti juga. Pada kualiti apa anda menyimpan banyak salinan ini?
Pada ketika ini, ini adalah masa yang tepat untuk menyebut Cloudinary. Saya telah mengintegrasikannya sekarang dengan CSS-Tricks, dan banyak membantu dengan perkara ini. Saya harus menyebutkan bahawa saya adalah pelanggan Cloudinary yang membayar, dan screencast ini tidak ditaja, tetapi Cloudinary telah menaja CSS-Tricks dalam bentuk dua siaran tajaan yang sangat berkaitan:
- Imej Responsif di WordPress dengan Cloudinary, Bahagian 1
- Imej Responsif di WordPress dengan Cloudinary, Bahagian 2
Ringkasnya, inilah cara semuanya berfungsi pada CSS-Tricks sekarang:
- Saya memuat naik gambar seperti yang selalu saya lakukan dengan WordPress.
- Daripada
srcsetmaklumat yang dihasilkan dengan WordPress, ia dihasilkan oleh API yang lebih pintar ini. - Gambar itu juga dimuat naik ke Cloudinary.
- Apabila WordPress menyaring dan mengeluarkan HTML untuk gambar, semua data yang baik
srcset(dan khusussizes) digunakan. Titik URL ke URL Cloudinary. - URL Cloudinary menggunakan kemampuan Cloudinary untuk menyesuaikan format dan kualiti secara automatik secara automatik (menggunakan teknologi mewah mereka) untuk memastikan perkara-perkara yang terbaik untuk penyemak imbas tertentu yang meminta gambar.
- Gambar lama yang tidak dimuat naik ke Cloudinary pada asalnya masih mendapat manfaat dari semua kebaikan Cloudinary. Mereka tidak memiliki
srcsetdata yang pintar , tetapi mereka masih menggunakan "ambil" makna URL mereka dapat memperoleh keuntungan dari pemformatan dan kualiti automatik (yang mungkin merupakan peningkatan prestasi yang baik, bagaimanapun).
Ringkasnya, bukan sahaja saya menggunakan gambar responsif di sini di CSS-Tricks untuk membantu prestasi, integrasi Cloudinary serius meningkatkan permainan itu.
Saya juga gembira bahawa ini bukan pergantungan yang sukar. Sekiranya pemalam Cloudinary pernah dimatikan, semuanya akan kembali kepada gambar responsif WordPress biasa.