Jaringan penayangan konten gambar (CDN) sangat baik dalam mengoptimalkan gambar untuk web. Mengalihkan situs Anda ke CDN gambar dapat menghasilkan Hemat 40–80% pada gambar dan dalam kebanyakan kasus, mereka dapat mengoptimalkan gambar Anda dengan lebih baik daripada skrip pengoptimalan gambar waktu build.
Apa itu CDN gambar?
CDN gambar memiliki spesialisasi dalam transformasi, pengoptimalan, dan penayangan gambar. Anda dapat menganggapnya sebagai API untuk mengakses dan memanipulasi image yang digunakan di situs Anda. Untuk gambar yang dimuat dari CDN gambar, URL gambar menunjukkan bahwa hanya gambar mana yang akan dimuat, tetapi juga parameter seperti ukuran, format, dan kualitas. Dengan demikian, Anda dapat membuat variasi gambar untuk berbagai kasus penggunaan.
CDN gambar berbeda dari skrip pengoptimalan gambar waktu build karena membuat versi baru gambar sesuai kebutuhan. Oleh karena itu, CDN umumnya lebih cocok untuk membuat gambar yang sangat disesuaikan untuk individu klien dibandingkan skrip build.
Cara CDN gambar menggunakan URL untuk menunjukkan opsi pengoptimalan
URL gambar yang digunakan oleh CDN gambar menyampaikan informasi penting tentang gambar dan transformasi dan pengoptimalan yang harus diterapkan padanya. Format URL bervariasi, tergantung pada CDN gambar yang Anda gunakan, tetapi pada tingkat tinggi, semuanya memiliki fitur serupa. Berikut adalah beberapa fitur yang paling umum.
Asal
CDN gambar dapat berada di domain Anda sendiri atau domain CDN gambar Anda. CDN gambar pihak ketiga biasanya menawarkan opsi penggunaan domain kustom untuk biaya. Dengan menggunakan domain Anda sendiri, peralihan CDN gambar akan lebih mudah di kemudian hari karena perubahan URL tidak diperlukan.
Contoh sebelumnya menggunakan domain CDN gambar ("example-cdn.com") dengan elemen subdomain yang dipersonalisasi, bukan domain kustom.
Gambar
CDN gambar biasanya dapat dikonfigurasi untuk mengambil gambar secara otomatis dari
lokasi yang ada saat dibutuhkan. Kemampuan ini sering dicapai dengan
menyertakan URL lengkap gambar yang ada dalam URL untuk gambar tersebut
yang dihasilkan oleh CDN gambar. 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, JPG) mungkin tidak sama dengan
format file gambar yang ditampilkan (dalam contoh, WebP). HTTP content-type
{i>header <i}memberi tahu browser dalam format URL mana sehingga dapat memproses URL
dengan tepat. Hal ini dapat menyebabkan kebingungan jika
file disimpan ke dalam {i>disk<i} dan digunakan oleh
program lain yang mengharapkan format
sesuai dengan ekstensi file.
Cara lain yang didukung secara luas untuk mengupload gambar ke CDN gambar adalah dengan mengirimkannya dalam permintaan POST HTTP ke API CDN gambar.
Kunci keamanan
Kunci keamanan mencegah orang lain membuat versi baru gambar Anda. Dengan mengaktifkan fitur ini, setiap versi baru dari sebuah gambar memerlukan kunci keamanan.
Jika seseorang mencoba mengubah parameter URL gambar, tidak memberikan kunci keamanan yang valid, mereka tidak akan dapat membuat kunci keamanan baru . CDN gambar Anda menangani detail pembuatan dan pelacakan kunci keamanan untuk Anda.
Transformasi
CDN gambar menawarkan puluhan, dan dalam beberapa kasus, ratusan, gambar yang berbeda transformasi. Transformasi ini ditentukan dalam {i>string<i} URL, dan tidak ada batasan untuk menggunakan beberapa transformasi sekaligus. Untuk performa web, transformasi gambar yang paling penting adalah ukuran, piksel, kepadatan, format, dan kompresi. Transformasi ini adalah alasan beralih ke CDN gambar biasanya membuat file gambar situs Anda lebih kecil.
Karena biasanya ada setelan terbaik secara objektif untuk kinerja sebagian besar CDN gambar mendukung proses "auto" mode ini untuk transformasi. Misalnya, alih-alih menetapkan bahwa gambar diubah ke format WebP, Anda dapat membiarkan CDN secara otomatis memilih dan menyajikan format yang optimal. CDN gambar dapat menentukan cara terbaik untuk mengubah gambar menggunakan sinyal berikut, di antaranya:
- Petunjuk klien (misalnya, lebar area pandang, DPR, dan lebar gambar)
Save-Data{i>header<i}- Agen Pengguna header permintaan
- Network Information API
Misalnya, CDN gambar dapat menyajikan AVIF ke browser Chrome, WebP ke Edge dan JPEG ke {i>browser<i} yang sangat tua. Setelan otomatis sangat populer karena memungkinkan Anda memanfaatkan CDN gambar dalam mengoptimalkan gambar tanpa perlu mengubah kode Anda untuk mengadopsi teknologi baru saat CDN gambar dimulai mendukung mereka.
Jenis CDN Gambar
Ada dua kategori utama CDN gambar: dikelola sendiri dan dikelola oleh pihak ketiga.
CDN gambar yang dikelola sendiri
CDN yang dikelola sendiri dapat menjadi pilihan bagus untuk situs dengan staf engineering yang nyaman dalam memelihara infrastruktur mereka sendiri.
- Thumbor adalah layanan pengelolaan mandiri yang paling populer CDN gambar. Open source dan gratis untuk digunakan, tetapi memiliki lebih sedikit fitur daripada sebagian besar CDN komersial, dan dokumentasinya agak terbatas. Situs yang menggunakan thumbor mencakup Wikipedia, Persegi, dan 99design. Lihat Cara menginstal CDN gambar Thumbor untuk petunjuk bagaimana cara menyiapkannya.
- Imajinasi
- Imagor
CDN gambar pihak ketiga
CDN gambar pihak ketiga menyediakan CDN gambar sebagai layanan. Dengan cara yang sama seperti penyedia cloud menyediakan server dan infrastruktur lain dengan biaya, CDN gambar menyediakan pengoptimalan dan penayangan gambar dengan biaya tambahan. Karena gambar pihak ketiga CDN mempertahankan teknologi yang mendasarinya, Anda biasanya dapat mulai menggunakan dengan cukup cepat, meskipun migrasi lengkap untuk situs besar mungkin memakan waktu lebih lama. Harga CDN gambar pihak ketiga biasanya didasarkan pada tingkat penggunaan, dengan sebagian besar CDN gambar menyediakan paket gratis atau uji coba gratis agar Anda produk mereka.
Pilih CDN gambar
Ada banyak pilihan CDN gambar yang bagus. Beberapa memiliki lebih banyak fitur daripada yang lain, tetapi salah satunya dapat membantu Anda menghemat byte pada gambar Anda dan karena itu memuat laman dengan lebih cepat. Selain set fitur, faktor lain yang perlu dipertimbangkan saat 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 web, jadi gambar faktor penting dalam Largest Contentful Paint suatu situs. Berikut beberapa hal yang perlu diingat jika Anda memutuskan untuk menggunakan CDN gambar:
- Gambar yang ditayangkan dari CDN dapat berasal dari server lintas asal, yang dapat meningkatkan waktu penyiapan koneksi di situs Anda. Jika memungkinkan, coba gunakan gambar CDN yang melakukan proxy melalui asal utama sehingga Anda tidak menambahkan origin tambahan untuk disambungkan dengan browser. Ini memiliki efek yang sama dengan gambar yang dihosting sendiri pada origin utama.
- Sebaiknya gunakan nilai atribut
fetchprioritysebesar"high"pada elemen gambar LCP sehingga browser dapat mulai memuat gambar tersebut segera mungkin. - Jika gambar tidak langsung dapat ditemukan di HTML awal, pertimbangkan untuk menggunakan
rel=preloadpetunjuk untuk gambar kandidat LCP, sehingga browser dapat memuat gambar tersebut lebih awal baik. - Jika Anda tidak dapat menggunakan proxy melalui origin, dan browser tidak akan mengetahui gambar mana yang perlu dimuat menyiapkan koneksi ke CDN gambar lintas origin sedini mungkin guna mempersingkat fase pemuatan resource untuk gambar kandidat LCP potensial.