Eric Portis bergabung dengan saya untuk menggali dunia gambar responsif.
Kami mulai dari dasar. Gambar responsif adalah gambar khusus dalam HTML dan ada karena keinginan untuk performa yang lebih baik. Gambar mungkin adalah penyebab terbesar dalam bobot keseluruhan situs web. Jika kita dapat menghindari pengiriman terlalu banyak piksel ke seluruh jaringan, kita harus melakukannya. Lagi pula, layar yang hanya selebar 720 piksel tidak membutuhkan gambar selebar 2000 piksel, meski itu layar 2x.
Masalahnya adalah, browser sangat agresif dalam mengunduh aset seperti gambar. Itu bagus, karena itulah mengapa web (bisa) secepat itu. Tetapi itu juga berarti bahwa kita perlu memberikan banyak informasi tentang gambar kita langsung di HTML. Tidak bisakah browser tahu seberapa besar gambar itu? Tentu bisa, setelah mengunduhnya. Tidak dapatkah browser mengetahui seberapa besar gambar yang akan ditampilkan di halaman? Tentu bisa, setelah itu mengunduh semua CSS dan melakukan tata letak. Sintaks gambar responsif mencoba untuk maju dari semua itu dengan memberikan informasi itu tepat di sintaks. Mencari tahu sintaks itu rumit! Ada srcset, sizes, dan elemen, dan ada ton untuk membungkus pikiran Anda di sekitar sana.
Ini menjadi lebih rumit lagi.
Sintaks yang perlu Anda bangun didasarkan pada memiliki banyak salinan gambar itu untuk membangun sintaks di sekitarnya. Bagaimana Anda membuatnya? Berapa banyak yang harus Anda buat? Berapa ukurannya?
Untungnya, ada beberapa perkakas otomatis yang bermunculan di sekitar gambar responsif. WordPress adalah pemain awal. Di luar kotak, WordPress akan membuat beberapa versi dari gambar yang Anda unggah dan mengeluarkan srcsetsintaks yang membantu . Tapi Anda bisa melakukan lebih baik. Anda dapat memberikan sizesatribut yang benar-benar cocok dengan apa yang dilakukan tema Anda dan bagaimana ukuran gambar tersebut.
Selain itu, WordPress tidak menggunakan kecerdasan khusus untuk membuat banyak salinan dari gambar yang Anda unggah. Tapi, bisa. Alat seperti generator breakpoint gambar responsif memang menggunakan beberapa kecerdasan untuk mencari tahu berapa banyak gambar berbeda yang dapat Anda buat, sehingga Anda dapat mencapai keseimbangan antara memiliki gambar yang mendekati sempurna untuk pekerjaan itu dan tidak perlu membuat ratusan atau ribuan salinan saya t. Alat itu memiliki API!
Ini menjadi lebih rumit lagi.
Browser yang berbeda mendukung format gambar yang berbeda. Misalnya, WebP. Ada penghematan kinerja yang bisa didapat dengan menyajikan format gambar yang tepat ke browser yang tepat. Sintaks gambar responsif dapat membantu, tetapi ini memperumit sintaks. Banyak format gambar juga memiliki pengertian tentang kualitas. Pada kualitas apa Anda menyimpan banyak salinan ini?
Pada titik ini, inilah saat yang tepat untuk menyebutkan Cloudinary. Saya sudah mengintegrasikannya sekarang di CSS-Tricks, dan ini membantu banyak hal ini. Saya harus menyebutkan bahwa saya adalah pelanggan Cloudinary yang membayar, dan screencast ini tidak disponsori, tetapi Cloudinary telah mensponsori CSS-Tricks dalam bentuk dua posting bersponsor yang sangat terkait:
- Gambar Responsif di WordPress dengan Cloudinary, Bagian 1
- Gambar Responsif di WordPress dengan Cloudinary, Bagian 2
Singkatnya, berikut ini cara kerjanya pada CSS-Tricks sekarang:
- Saya mengunggah gambar seperti yang selalu saya lakukan dengan WordPress.
- Daripada
srcsetinformasi yang dihasilkan dengan WordPress, itu dihasilkan oleh API yang lebih cerdas ini. - Gambar juga diunggah ke Cloudinary.
- Ketika WordPress memfilter dan mengeluarkan HTML untuk gambar, semua data yang baik
srcset(dan khusussizes) itu diterapkan. URL mengarah ke URL Cloudinary. - URL Cloudinary menggunakan kemampuan Cloudinary untuk secara otomatis menyesuaikan format dan kualitas secara otomatis (menggunakan teknologi canggih mereka) untuk memastikan semuanya berjalan sebaik mungkin untuk browser tertentu yang meminta gambar.
- Gambar lama yang tidak diunggah ke Cloudinary awalnya masih mendapat manfaat dari semua kebaikan Cloudinary. Mereka tidak memiliki
srcsetdata yang cerdas , tetapi mereka masih menggunakan "ambil" URL yang berarti mereka dapat memperoleh keuntungan dari pemformatan otomatis dan kualitas otomatis (yang mungkin merupakan sedikit peningkatan kinerja yang layak).
Singkatnya, saya tidak hanya menggunakan gambar responsif di sini di CSS-Tricks untuk membantu kinerja, integrasi Cloudinary secara serius meningkatkan permainan itu.
Saya juga senang bahwa ini bukan ketergantungan yang sulit. Jika plugin Cloudinary dimatikan, semuanya kembali ke gambar responsif WordPress normal.