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% dalam ukuran file gambar, dan dalam sebagian besar kasus, CDN gambar dapat mengoptimalkan gambar Anda dengan lebih baik daripada skrip pengoptimalan gambar waktu build.

Apa itu CDN gambar?

CDN gambar dikhususkan untuk mengubah, mengoptimalkan, dan mengirimkan 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. Dengan begitu, Anda dapat membuat variasi gambar untuk berbagai kasus penggunaan.

Menunjukkan 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 CDN gambar membuat versi baru gambar 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 padanya. Format URL bervariasi bergantung pada CDN gambar yang Anda gunakan, tetapi secara umum, semuanya memiliki fitur yang serupa. Berikut adalah beberapa fitur yang paling umum.

URL gambar biasanya terdiri dari komponen berikut: origin, 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 untuk menggunakan domain kustom dengan biaya tertentu. Menggunakan domain Anda sendiri akan memudahkan Anda beralih CDN gambar di kemudian hari karena tidak perlu mengubah 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 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 yang digunakan sehingga browser 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 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 yang 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 akan 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 yang objektif untuk transformasi performa, beberapa CDN gambar mendukung mode "otomatis" untuk transformasi ini. Misalnya, daripada menentukan bahwa gambar diubah ke format WebP, Anda dapat mengizinkan CDN memilih dan menyajikan format yang optimal secara otomatis. CDN gambar dapat menentukan cara terbaik untuk mentransformasi gambar menggunakan sinyal berikut, antara lain:

Misalnya, CDN gambar mungkin menyajikan 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: yang dikelola sendiri dan yang dikelola pihak ketiga.

CDN gambar yang dikelola sendiri

CDN yang dikelola sendiri dapat menjadi pilihan yang baik untuk situs dengan staf engineering yang nyaman mengelola infrastruktur mereka sendiri.

  • Thumbor adalah CDN gambar yang dikelola sendiri dan paling populer. CDN ini bersifat 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, Square, dan 99designs. Lihat Cara menginstal CDN gambar Thumbor untuk mengetahui petunjuk cara menyiapkannya.
  • Imaginary
  • 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 tertentu, CDN gambar menyediakan pengoptimalan dan pengiriman gambar dengan biaya tertentu. Karena CDN gambar pihak ketiga mengelola 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 dan memuat halaman 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, sehingga gambar 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 meningkatkan 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 oleh browser. Hal ini memiliki efek yang sama dengan menghosting gambar sendiri di origin utama.
  • Pertimbangkan untuk menggunakan nilai atribut fetchpriority "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=preload untuk gambar kandidat LCP Anda agar browser dapat memuat gambar tersebut lebih awal.
  • Jika Anda tidak dapat melakukan proxy melalui origin, dan browser tidak akan mengetahui gambar mana yang harus dimuat hingga nanti dalam pemuatan halaman, siapkan koneksi ke CDN gambar lintas origin sedini mungkin untuk mempersingkat fase pemuatan resource untuk gambar kandidat LCP potensial.