Menggunakan CDN gambar untuk mengoptimalkan gambar

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

Jaringan penayangan konten (CDN) gambar sangat baik dalam mengoptimalkan gambar untuk web. Mengalihkan situs Anda ke CDN gambar dapat menghasilkan penghematan 40–80% pada ukuran file gambar, dan dalam sebagian besar kasus, CDN gambar dapat mengoptimalkan gambar Anda dengan lebih baik daripada skrip pengoptimalan gambar waktu build.

Apa yang dimaksud dengan CDN gambar?

CDN gambar berspesialisasi dalam mengubah, 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 mana yang akan dimuat, tetapi juga parameter seperti ukuran, format, dan kualitas. Hal ini memungkinkan Anda membuat variasi gambar untuk berbagai kasus penggunaan.

Menampilkan alur permintaan/respons antara CDN gambar dan klien. Parameter seperti ukuran dan format digunakan untuk meminta variasi gambar yang sama.
Contoh transformasi yang dapat dilakukan CDN gambar berdasarkan parameter di URL gambar.

CDN gambar berbeda dengan skrip pengoptimalan gambar waktu build karena membuat versi gambar baru sesuai kebutuhan. Akibatnya, CDN umumnya lebih cocok untuk membuat image 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 tersebut. Format URL bervariasi bergantung pada CDN gambar yang Anda gunakan, tetapi pada tingkat tinggi, semuanya memiliki fitur yang serupa. Berikut adalah beberapa fitur yang paling umum.

URL gambar biasanya terdiri dari komponen berikut: asal, gambar, kunci keamanan, dan transformasi.
Bagian dasar URL gambar dari CDN gambar.

Asal

CDN gambar dapat berada di domain Anda sendiri atau domain CDN gambar Anda. CDN gambar pihak ketiga biasanya menawarkan opsi penggunaan domain kustom dengan biaya. Menggunakan domain Anda sendiri akan mempermudah peralihan CDN gambar di lain waktu 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 gambar yang ada dalam URL untuk gambar 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 (JPG, dalam contoh) mungkin tidak sama dengan format file gambar yang ditampilkan (WebP, dalam contoh). Header HTTP content-type memberi tahu browser format URL sehingga dapat memproses URL dengan benar. 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 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 image memerlukan kunci keamanan unik.

Jika seseorang mencoba mengubah parameter URL gambar, tetapi tidak memberikan kunci keamanan yang valid, dia tidak akan dapat membuat versi baru. CDN gambar Anda 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 untuk menggunakan 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 membuat file gambar situs Anda lebih kecil.

Karena biasanya ada setelan terbaik secara objektif untuk transformasi performa, beberapa CDN gambar mendukung mode "otomatis" untuk transformasi ini. Misalnya, alih-alih menentukan bahwa gambar diubah ke format WebP, Anda dapat mengizinkan CDN otomatis memilih dan menayangkan format yang optimal. CDN gambar dapat menentukan cara terbaik untuk mengubah gambar menggunakan sinyal berikut, antara lain:

Misalnya, CDN gambar dapat menayangkan AVIF ke browser Chrome, WebP ke browser Edge, dan JPEG ke browser yang sangat lama. Setelan otomatis 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 mandiri dapat menjadi pilihan yang baik untuk situs dengan staf engineer yang nyaman mengelola infrastruktur mereka sendiri.

  • Thumbor adalah CDN gambar mandiri yang paling populer. CDN ini bersifat open source dan gratis untuk digunakan, tetapi memiliki lebih sedikit fitur dibandingkan dengan sebagian besar CDN komersial, dan dokumentasinya agak terbatas. Situs yang menggunakan thumbor mencakup Wikipedia, Square, dan 99designs. Lihat Cara menginstal CDN gambar Thumbor untuk mengetahui petunjuk cara menyiapkannya.
  • Imaginaris
  • 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 lainnya dengan biaya, CDN gambar menyediakan pengoptimalan dan pengiriman gambar dengan biaya. Karena CDN gambar pihak ketiga mempertahankan teknologi yang mendasarinya, Anda biasanya dapat mulai menggunakannya dengan cukup cepat, meskipun migrasi lengkap untuk situs besar mungkin memerlukan waktu lebih lama. CDN gambar pihak ketiga biasanya diberi harga berdasarkan tingkat penggunaan, dengan sebagian besar CDN gambar menyediakan paket gratis atau uji coba gratis agar Anda dapat mencoba produk mereka.

Memilih CDN gambar

Ada banyak opsi yang bagus untuk CDN gambar. Beberapa memiliki lebih banyak fitur daripada yang lain, tetapi semuanya dapat membantu Anda menghemat byte pada gambar sehingga memuat halaman lebih cepat. Selain kumpulan fitur, faktor lain yang perlu dipertimbangkan saat memilih CDN gambar adalah biaya, dukungan, dokumentasi, dan kemudahan penyiapan atau migrasi.

Pengaruh 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 beberapa hal yang perlu diingat jika Anda memutuskan untuk menggunakan CDN gambar:

  • Gambar yang ditayangkan dari CDN dapat berasal dari server lintas origin, yang dapat memperpanjang waktu penyiapan koneksi situs Anda. Jika memungkinkan, coba gunakan CDN gambar yang melakukan proxy melalui origin utama sehingga Anda tidak menambahkan origin tambahan untuk dihubungkan browser. Hal ini memiliki efek yang sama seperti menghosting sendiri gambar di origin utama.
  • Pertimbangkan untuk menggunakan nilai atribut fetchpriority dari "high" pada elemen gambar LCP sehingga browser dapat mulai memuat gambar tersebut sesegera mungkin.
  • Jika gambar tidak dapat langsung ditemukan di HTML awal, pertimbangkan untuk menggunakan petunjuk rel=preload untuk gambar kandidat LCP Anda sehingga browser dapat memuat gambar tersebut terlebih dahulu.
  • Jika Anda tidak dapat menggunakan proxy melalui origin, dan browser tidak akan tahu gambar mana yang akan dimuat hingga nanti saat pemuatan halaman, siapkan koneksi ke CDN gambar lintas origin sesegera mungkin untuk mempersingkat fase pemuatan resource untuk gambar kandidat LCP potensial.