Menggunakan CDN gambar untuk mengoptimalkan gambar

Jeremy Wagner

Katie Hempenius

Barry Pollard

Mengapa menggunakan CDN gambar?

Jaringan penayangan konten (CDN) gambar sangat baik dalam mengoptimalkan gambar. Beralih ke CDN gambar dapat menghasilkan penghematan ukuran file gambar sebesar 40–80%. Secara teori, Anda dapat mencapai hasil yang sama hanya dengan menggunakan skrip build, tetapi dalam praktiknya ini jarang terjadi.

Apa itu CDN gambar?

CDN Gambar memiliki spesialisasi dalam transformasi, pengoptimalan, dan penayangan 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 memudahkan pembuatan variasi gambar untuk berbagai kasus penggunaan.

CDN Gambar berbeda dari skrip pengoptimalan gambar waktu build. Di sini, CDN versi membuat gambar versi 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 tersebut. Format URL akan bervariasi bergantung pada CDN gambar, tetapi pada tingkat tinggi, semuanya memiliki fitur yang serupa. Mari kita pelajari 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 di atas 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 biasanya dicapai dengan menyertakan URL lengkap gambar yang ada di 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.

Cara lain yang didukung secara luas untuk mengupload gambar ke CDN gambar adalah mengirimkannya melalui permintaan POST HTTP ke API CDN gambar.

Kunci keamanan

Kunci keamanan mencegah orang lain membuat versi baru gambar Anda. Jika fitur ini diaktifkan, setiap versi baru gambar memerlukan kunci keamanan yang unik. Jika seseorang mencoba mengubah parameter URL gambar, tetapi tidak memberikan kunci keamanan yang valid, pengguna tersebut tidak akan dapat membuat versi baru. CDN gambar 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 melalui string URL, dan tidak ada batasan penggunaan beberapa transformasi secara bersamaan. Dalam konteks performa web, transformasi gambar yang paling penting adalah ukuran, kepadatan piksel, format, dan kompresi. Transformasi ini adalah alasan mengapa beralih ke CDN gambar biasanya menghasilkan penurunan ukuran gambar yang signifikan.

Biasanya ada setelan terbaik secara objektif untuk transformasi performa, sehingga beberapa CDN gambar mendukung mode "otomatis" untuk transformasi ini. Misalnya, daripada menetapkan agar gambar diubah ke format WebP, Anda dapat mengizinkan CDN untuk otomatis memilih dan menayangkan format yang optimal. Sinyal yang dapat digunakan CDN gambar untuk menentukan cara terbaik untuk mengubah gambar meliputi:

• Petunjuk klien (misalnya, lebar area pandang, DPR, dan lebar gambar)
• Header Save-Data
• Header permintaan User-Agent
• Network Information API

Misalnya, CDN gambar mungkin menyajikan AVIF ke browser Chrome, WebP ke browser Edge, dan JPEG ke browser yang sangat lama. Setelan otomatis sangat populer karena memungkinkan Anda memanfaatkan keahlian signifikan CDN gambar dalam mengoptimalkan gambar tanpa perlu melakukan perubahan kode untuk mengadopsi teknologi baru setelah didukung oleh CDN gambar.

Jenis CDN Gambar

CDN Gambar dapat dibagi menjadi dua kategori: dikelola sendiri dan dikelola pihak ketiga.

CDN gambar yang dikelola sendiri

CDN yang dikelola sendiri dapat menjadi pilihan tepat untuk situs dengan staf engineering yang nyaman dalam memelihara infrastruktur mereka sendiri.

• Thumbor adalah CDN gambar yang dikelola sendiri yang paling populer. Meskipun bersifat open source dan gratis, ini umumnya memiliki lebih sedikit fitur daripada sebagian besar CDN komersial, dan dokumentasinya agak terbatas. Wikipedia, Square, dan 99designs adalah tiga situs yang menggunakan Thumbor. Lihat postingan 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 menyediakan pengoptimalan dan pengiriman gambar dengan biaya tambahan. Karena CDN gambar pihak ketiga mempertahankan teknologi yang mendasarinya, proses memulainya cukup sederhana dan biasanya dapat diselesaikan dalam waktu 10-15 menit, 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 untuk memberi Anda kesempatan mencoba produk mereka.

Memilih CDN gambar

Ada banyak opsi yang bagus untuk CDN gambar. Beberapa di antaranya akan memiliki lebih banyak fitur dibandingkan yang lain, tetapi semuanya mungkin akan membantu Anda menghemat byte pada gambar dan karenanya memuat halaman Anda lebih cepat. Selain set fitur, faktor lain yang perlu dipertimbangkan ketika memilih CDN gambar adalah biaya, dukungan, dokumentasi, dan kemudahan penyiapan atau migrasi.

Mencobanya sendiri sebelum mengambil keputusan juga dapat membantu. Di bawah ini Anda dapat menemukan codelab yang berisi petunjuk tentang cara memulai beberapa CDN gambar dengan cepat.

Efek pada Largest Contentful Paint (LCP)

Gambar merupakan bagian penting dari pengalaman pengguna di banyak situs, dan dengan demikian memengaruhi performa situs dalam hal Largest Contentful Paint. Berikut adalah beberapa hal yang perlu diingat jika Anda memutuskan untuk menggunakan CDN gambar:

1. Gambar yang disalurkan dari CDN mungkin berasal dari server lintas asal, yang memerlukan waktu penyiapan koneksi tambahan. Jika memungkinkan, coba gunakan CDN gambar yang menjadi proxy melalui origin utama sehingga Anda tidak menambahkan origin tambahan untuk terhubung ke browser. Ini memiliki efek yang sama dengan gambar yang di-hosting sendiri pada asal utama.
2. Sebaiknya gunakan nilai atribut fetchpriority dari "high" pada elemen gambar LCP agar browser dapat mulai memuat gambar tersebut sesegera mungkin.
3. Jika gambar tidak langsung dapat ditemukan di HTML awal, pertimbangkan untuk menggunakan petunjuk rel=preload untuk gambar kandidat LCP Anda sehingga browser dapat memuat gambar tersebut sebelumnya.
4. Jika proxy melalui origin tidak memungkinkan, dan gambar persis yang akan dimuat tidak akan diketahui hingga nanti selama pemuatan halaman, Anda harus menyiapkan koneksi ke CDN gambar lintas origin secepat mungkin untuk mempersingkat fase pemuatan resource dari gambar kandidat LCP halaman Anda.

CDN Gambar adalah alat yang sangat diperlukan yang menghilangkan kerja keras dalam mengoptimalkan gambar secara manual, dan harus dipertimbangkan. Namun, seperti biasa, ada kompromi yang perlu dipertimbangkan, dan dengan memperhatikan gambar kandidat LCP situs Anda, serta menambahkan petunjuk yang sesuai, dapat mengurangi latensi tambahan ke permintaan kunci tersebut.