Jaringan penayangan konten (CDN) gambar sangat baik dalam mengoptimalkan gambar untuk web. Mengalihkan situs Anda ke CDN gambar dapat menghasilkan penghematan sebesar 40–80% untuk ukuran file gambar, dan pada umumnya, CDN dapat mengoptimalkan gambar Anda lebih baik daripada skrip pengoptimalan gambar waktu build.
Apa itu CDN gambar?
CDN Gambar memiliki spesialisasi dalam mentransformasi, mengoptimalkan, dan menayangkan gambar. Anda juga dapat menganggapnya sebagai API untuk mengakses dan memanipulasi gambar yang digunakan di situs Anda. Untuk gambar yang dimuat dari CDN gambar, URL gambar tidak hanya menunjukkan gambar yang akan dimuat, tetapi juga parameter seperti ukuran, format, dan kualitas. Hal ini memungkinkan Anda membuat variasi gambar untuk berbagai kasus penggunaan.
CDN gambar berbeda dari skrip pengoptimalan gambar waktu build karena membuat versi gambar baru sesuai kebutuhan. Oleh karena itu, CDN umumnya lebih cocok untuk membuat gambar yang sangat disesuaikan untuk setiap klien daripada skrip build.
Cara CDN gambar menggunakan URL untuk menunjukkan opsi pengoptimalan
URL gambar yang digunakan oleh CDN gambar menyampaikan informasi penting tentang gambar serta transformasi dan pengoptimalan yang harus diterapkan pada gambar. Format URL bervariasi, bergantung pada CDN gambar yang Anda gunakan, tetapi pada tingkat yang tinggi, semuanya memiliki fitur yang serupa. Berikut adalah beberapa fitur yang paling umum.
Origin
CDN gambar dapat aktif di domain Anda sendiri atau domain CDN gambar Anda. CDN gambar pihak ketiga biasanya menawarkan opsi untuk menggunakan domain kustom dengan biaya tambahan. Menggunakan domain Anda sendiri akan mempermudah pengalihan CDN gambar di kemudian hari karena tidak diperlukan perubahan URL.
Contoh sebelumnya menggunakan domain CDN gambar ("example-cdn.com") dengan subdomain yang dipersonalisasi, bukan domain kustom.
Gambar
CDN gambar biasanya dapat dikonfigurasi untuk mengambil gambar secara otomatis dari lokasi yang ada saat diperlukan. Kemampuan ini sering kali dicapai dengan menyertakan URL lengkap dari gambar yang ada dalam URL untuk gambar yang dihasilkan oleh gambar CDN. Misalnya, Anda mungkin melihat URL yang terlihat seperti ini: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
URL ini akan mengambil dan mengoptimalkan gambar yang ada di https://flowers.com/daisy.jpg.
Format file yang diminta (dalam contoh ini) mungkin tidak sama dengan
format file gambar yang ditampilkan (dalam contoh, WebP). Header HTTP content-type
memberi tahu browser tentang format URL yang digunakan agar dapat memproses URL
dengan tepat. Hal ini dapat menyebabkan kebingungan jika file disimpan ke disk dan digunakan oleh
program lain yang mengharapkan formatnya cocok dengan ekstensi file.
Cara lain yang didukung secara luas untuk mengupload gambar ke CDN gambar adalah mengirimkannya dalam permintaan POST HTTP ke API CDN gambar.
Kunci keamanan
Kunci keamanan mencegah orang lain membuat versi baru gambar Anda. Dengan diaktifkannya fitur ini, setiap versi baru gambar memerlukan kunci keamanan yang unik.
Jika seseorang mencoba mengubah parameter URL gambar tetapi tidak memberikan kunci keamanan yang valid, ia tidak akan dapat membuat versi baru. CDN gambar menangani detail pembuatan dan pelacakan kunci keamanan untuk Anda.
Transformasi
CDN gambar menawarkan puluhan, dan dalam beberapa kasus, ratusan, transformasi gambar yang berbeda. Transformasi ini ditentukan dalam string URL, dan tidak ada batasan penggunaan beberapa transformasi secara bersamaan. Untuk performa web, transformasi gambar yang paling penting adalah ukuran, kepadatan piksel, format, dan kompresi. Transformasi ini adalah alasan mengapa beralih ke CDN gambar biasanya memperkecil file gambar situs Anda.
Karena biasanya ada setelan terbaik secara objektif untuk transformasi performa, beberapa CDN gambar mendukung mode "otomatis" untuk transformasi ini. Misalnya, daripada menetapkan agar gambar diubah ke format WebP, Anda dapat membiarkan CDN secara otomatis memilih dan menayangkan format yang optimal. CDN gambar dapat menentukan cara terbaik untuk mengubah gambar menggunakan sinyal berikut, antara lain:
- Petunjuk klien (misalnya, lebar area pandang, DPR, dan lebar gambar)
- Header
Save-Data - Header permintaan User-Agent
- Network Information API
Misalnya, CDN gambar dapat menayangkan AVIF ke browser Chrome, WebP ke browser Edge, dan JPEG ke browser yang sangat lama. Setelan otomatis sangat populer karena memungkinkan Anda memanfaatkan keahlian CDN gambar dalam mengoptimalkan gambar tanpa perlu mengubah kode untuk mengadopsi teknologi baru saat CDN gambar mulai mendukungnya.
Jenis CDN Gambar
Ada dua kategori utama CDN gambar: dikelola sendiri dan dikelola pihak ketiga.
CDN gambar yang dikelola sendiri
CDN yang dikelola sendiri dapat menjadi pilihan tepat untuk situs dengan staf teknik yang nyaman dalam memelihara infrastruktur mereka sendiri.
- Thumbor adalah CDN gambar yang dikelola sendiri yang paling populer. CDN ini bersifat open source dan gratis, tetapi memiliki lebih sedikit fitur daripada sebagian besar CDN komersial, dan dokumentasinya agak terbatas. Situs yang menggunakan thumbor meliputi Wikipedia, Square, dan 99designs. Lihat Cara menginstal CDN gambar Thumbor untuk mengetahui petunjuk penyiapannya.
- Imajinasi
- Imagor
CDN gambar pihak ketiga
CDN gambar pihak ketiga menyediakan CDN gambar sebagai layanan. Sama seperti penyedia cloud yang menyediakan server dan infrastruktur lainnya dengan biaya tambahan, CDN gambar memberikan pengoptimalan dan pengiriman gambar dengan biaya tambahan. Karena CDN gambar pihak ketiga mempertahankan teknologi yang mendasarinya, biasanya Anda dapat mulai menggunakan salah satunya dengan cukup cepat, meskipun migrasi lengkap untuk situs besar mungkin memerlukan waktu lebih lama. CDN gambar pihak ketiga biasanya diberi harga berdasarkan tingkat penggunaan. Sebagian besar CDN gambar menyediakan paket gratis atau uji coba gratis agar Anda dapat mencoba produk mereka.
Pilih CDN gambar
Ada banyak opsi yang bagus untuk CDN gambar. Beberapa fitur memiliki lebih banyak fitur dibandingkan yang lain, tetapi salah satunya dapat membantu Anda menghemat byte pada gambar, sehingga halaman Anda dapat dimuat lebih cepat. Selain set fitur, faktor lain yang perlu dipertimbangkan ketika memilih CDN gambar adalah biaya, dukungan, dokumentasi, dan kemudahan penyiapan atau migrasi.
Efek pada Largest Contentful Paint (LCP)
Gambar adalah bagian penting dari pengalaman pengguna di banyak situs, sehingga merupakan faktor penting dalam Largest Contentful Paint situs. Berikut adalah beberapa hal yang perlu diingat jika Anda memutuskan untuk menggunakan CDN gambar:
- Gambar yang disalurkan dari CDN dapat berasal dari server lintas origin, yang dapat meningkatkan waktu penyiapan koneksi situs Anda. Jika memungkinkan, coba gunakan CDN gambar yang melakukan proxy melalui asal utama, sehingga Anda tidak menambahkan origin tambahan untuk terhubung ke browser. Hal ini memiliki efek yang sama seperti gambar yang di-hosting sendiri pada asal utamanya.
- Sebaiknya gunakan nilai atribut
fetchprioritydari"high"pada elemen gambar LCP agar browser dapat mulai memuat gambar tersebut sesegera mungkin. - Jika gambar tidak langsung dapat ditemukan di HTML awal, pertimbangkan untuk menggunakan
petunjuk
rel=preloaduntuk gambar kandidat LCP Anda sehingga browser dapat memuat gambar tersebut sebelumnya. - Jika Anda tidak dapat melakukan proxy melalui origin, dan browser tidak akan mengetahui gambar mana yang harus dimuat hingga halaman dimuat nanti, siapkan koneksi ke CDN gambar lintas origin secepat mungkin untuk mempersingkat fase pemuatan resource untuk gambar kandidat LCP potensial.