Ketika mengembangkan atau memperbarui sebuah website, beberapa tujuan utamamu harus memberikan pengalaman optimal kepada pengguna akhir dan meningkatkan koversi website, karena dua aspek ini adalah kunci untuk membawa pendapatan dan meningkatkan garis bawah perusahaanmu. Namun satu masalah yang mungkin kamu temui adalah sementara terjadi peningkatan penggunaan gambar yang menghasilkan desain yang menarik, itu dapat mempengaruhi secara negatif kinerja websitemu. Hari ini, gambar memiliki andil 60% konten yang diunduh pada sebuah web page, jadi mengoptimalkan gambar dapat menghasilkan peningkatan kinerja yang signifikan. Bagaimana pun juga, optimasi gambar merupakan baik seni dan sains, memerlukan evaluasi yang hati-hati terhadap bermacam parameter dan sebuah keseimbangan yang halus antara konten, format, kualitas, dan dimensi. Apakah aplikasi webmu mendukung gambar yang diupload user, kamu membawakan gambar statis, atau kamu menampilkan gambar profil dari jejaring sosial, kamu mungkin perlu memanipulasi mereka untuk mencocokkan dengan desain grafis situsmu. Dalam tutorial ini, kita akan menjelajah fitur-fitur yang ditawarkan secara komprehensif tentang solusi manajemen gambar dan video berbasis cloud dari Cloudinary. Kamu akan melihat bagaimana itu dapat membantu mengoptimasi gambar dan secara mutlak meningkatkan kinerja website.
Seleksi Otomatis Format Paling Efisien
Format gambar dapat memiliki dampak yang signifikan terhadap waktu loading. Namun menentukan format optimal setting encoder secara manual untuk tiap konten gambar dapat menjadi kompleks dan tidak efisien. Cloudinary secara dinamis menentukan dan mengirimkan setiap gambar dalam format paling efisien, berdasarkan konten gambar dan browser. Gambar dapat diupload ke Cloudinary dalam berbagai format dan dengan mudah diubah ke format lainnya. Misalnya, itu dapat secara otomatis membawa gambar sebagai WebP ke Chrome atau JPEG-XR ke Internet Explorer. Dalam beberapa kasus, PNG dipilih ketika kamu ingin mempertahankan transparansi. Ada banyak alasan kamu ingin mengubah format gambar yang dikirimkan:
JPEG untuk foto yang kamu ingin muat dengan cepat (atau WebP jika penggunamu menggunakan Chrome atau pada aplikasi mobile yang kamu kontrol).
GIF, jika gambar mengandung gambar dengan hanya beberapa warna.
PNG (24 bit) untuk ilustrasi berkualitas tinggi dengan background yang transparan.
Untuk menyampaikan gambar dalam format yang berbeda, cukup tentukan format baru sebagai ekstensi file dari URL. Ketika menggunakan Cloudinary SDK, kamu dapat menentukan format baru sebagai sebuah ekstensi ke nama sumber atau menggunakan parameter format. Contoh:
Penyesuaian yang tepat akan kualitas kompresi dan pengaturan encoding dapat mengurangi ukuran file secara signifikan tanpa penurunan yang dapat dikenali akan kualitas visual. Menemukan pengaturan yang benar untuk tiap gambar, bagaimana pun juga, lebih rumit dari kedengarannya. Cloudinary mengotomatisasi ukuran file terhadap keputusan berdampak kualitas. Algoritma kualitas dan encoding yang pintar milik Cloudinary menganalisa setap gambar untuk menemukan keseimbangan optimal, dan menghasilkan sebuah gambar yang bagus sembari meminimalkan ukuran file. Dengan menganalisa tiap gambar secara individu untuk menemukan level kompresi optimal dan pengaturan encoding gambar membolehkan penyesuaian yang tepat dari level kompresi dilengkapi oleh pengaturan encoding yang baik dan secara signifikan dapat mengurangi ukuran file tanpa penurunan yang dapat dikenali mata manusia. Contoh:
Lihat Demo. Kamu dapat melihat transformasi gambar di sini.
Mengubah Skala dan Crop Gambar Secara Otomatis Untuk Mencocokkan Dengan Tiap Layout Halaman
Menyampaikan gambar pada dimensi yang lebih besar daripada yang diperlukan ukuran layar menggunakan bandwidth yang tidak diperlukan dan memperlambat loading halaman. Namun membuat berbagai versi secara manual untuk tiap gambar yang mencocokkan dengan variasi resolusi layar dapat menjadi intensif. Cloudinary membuatmu dapat mengubah skala resolusi gambar secara dinamis untuk melayani versi optimal yang cocok dengan resolusi perangkat pengguna dan dimensinya, tanpa menampilkan pixel yang tidak perlu. Sebagai tambahan, gambar sering memerlukan cropping untuk mencocokkan layout responsif dan dimensi perangkat yang lebar. Algoritma content-aware cropping dari Cloudinary menggunakan sebuah kombinasi heuristis untuk mendeteksi secara otomatis daerah menarik dalam tiap gambar dan kemudian melakukan crop. Kemampuan cropping pintar ini memastikan bahwa fokus untuk tiap gambar dicantumkan dalam hasil sumber, tidak hanya untuk foto dengan wajah, namun untuk jenis konten apapun. Tiap gambar dianalisa secara individu untuk menemukan daerah optimal untuk difokuskan. Gambar Asli: Contoh mode crop yang berbeda: Lihat Demo. Untuk melihat gambar via transformation URL, lihat di sini.
URL Dinamis
Cloudinary membolehkanmu untuk dengan mudah mengubah gambar saat berjalan ke format, style dan dimensi apapun yang diperlukan, dan juga mengoptimasi gambar untuk mendapatkan ukuran file minimal dalam sebuah pengalaman user dan menghemat bandwidth. Di jantung solusi Cloudinary adalah kemampuan untuk menyampaikan gambar menggunakan URL dinamis via sebuah content delivery network (CDN) yang cepat dan mendunia. URL mengandung public ID dari gambar yang diminta, ditambah parameter transformasi yang opsional. Public ID ini merupakan pengidentifikasi gambar yang unik dan ditentukan kita mengupload gambar ke akun Cloudinary, atau secara otomatis ditentukan oleh Cloudinary. Tiap petunjuk pengubahan (manipulasi) dapat ditambahkan pada public ID dalam penyampaian URL. Ketika URL pertama diakses, gambar dibuat sambil berjalan dan dikirimkan ke pengguna. Gambar ini juga mendapatkan cache pada CDN dan secara langsung tersedia untuk semua pengguna yang meminta gambar yang sama.
Kesimpulan
Tips ini hanya sebagian kecil cara yang dapat dilakukan Cloudinary untuk membantu mengoptimalkan gambar websitemu, dengan tujuan untuk meningkatkan kinerja dan pengalaman pengguna akhir.
Leave a Comment