Tingkatkan Performa Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage

Diterbitkan: 2020-04-22

Pengoptimalan Gambar, menurut Lighthouse, adalah salah satu masalah paling umum dari kecepatan dan kinerja situs web yang buruk.

Ada kemungkinan bahwa gambar yang tidak dioptimalkan memperlambat kecepatan pemuatan halaman Anda lebih dari 9 detik, dalam beberapa kasus bahkan lebih.

Halaman yang lambat mengarah ke rasio pentalan yang lebih besar dan pemosisian SERP yang lebih rendah, yang sebagai imbalannya berarti lebih sedikit lalu lintas dan lebih sedikit pelanggan yang membayar.

Apa yang termasuk dalam pengoptimalan gambar?

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 1

Optimalisasi semua gambar di situs web Anda adalah pekerjaan yang sangat kompleks, yang membutuhkan keahlian dan beberapa jam untuk melakukannya dengan benar.

Plugin dapat membantu menghemat waktu, tetapi mereka juga dapat merusak seluruh struktur situs web Anda dan menghapus beberapa media Anda secara permanen jika tidak ditangani dengan benar.

Untuk melihat mengapa kami menganggap ini sebagai pekerjaan yang rumit, berikut adalah daftar periksa 20 poin dari apa yang Cloudimage anggap penting untuk pengoptimalan gambar yang tepat:

  1. Memasukkan pengiriman CDN
  2. Optimalkan TTFB
  3. Gunakan tampilan produk 360 derajat
  4. Pastikan gambar Anda responsif
  5. Ubah ukuran gambar dengan benar
  6. Gunakan format gambar yang tepat
  7. Kompres gambar
  8. Optimalkan atribut alt
  9. Caption gambar dengan jelas
  10. Jaga sudut produk Anda
  11. Tahu cara mencampur warna
  12. Buat visual yang menyatu dengan emosi
  13. Gunakan latar belakang yang sesuai dengan produk
  14. Optimalkan gambar mini Anda
  15. Gunakan peta situs gambar
  16. Terapkan subsampling kroma
  17. Memuat lambat gambar non-kritis
  18. Terapkan spriting gambar
  19. Mulai caching aset gambar
  20. Pramuat aset gambar penting

Dari aspek teknis, poin terpenting, dari daftar di atas, adalah pengubahan ukuran, pengoptimalan format, Lazy load, kompresi gambar, responsivitas, dan pengiriman CDN.

Jika Anda memiliki katakanlah 11.000 gambar di situs web Anda.

Berapa lama waktu yang dibutuhkan untuk menyelesaikan pengoptimalan?

Sekarang bayangkan bisa melakukannya secara otomatis!

Inilah yang dilakukan Cloudimage.

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 2
Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 3

Anda dapat mengunggah semua gambar secara massal melalui perangkat lunak kami dan mereka akan secara otomatis diuangkan dan diunggah ke cloud.

Setelah itu datang optimasi.

Mengubah Ukuran Gambar

Server pengubahan ukuran Cloudimage, yang terletak di tiga pusat data di seluruh dunia (Kanada, Prancis, dan Singapura) akan mengunduh gambar asli Anda dari origin_image_url, mengubahnya berdasarkan parameter operasi dan filter, dan terakhir, menampilkannya di situs web atau aplikasi seluler Anda melalui roket -CDN cepat.

Contoh dengan gambar asli yang dihosting di server web Anda, bucket Amazon S3, atau penyimpanan lainnya yang dapat diakses melalui HTTP.

Saat Anda menentukan lebar dan tinggi, proporsi gambar asli dapat diabaikan atau dipertahankan. Juga, Anda dapat memilih untuk menambahkan padding ke gambar. Cloudimage menyediakan mode pengubahan ukuran berikut:

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 4

Tanaman

Menjaga proporsi gambar memotong gambar agar sesuai dengan lebar dan tinggi yang ditentukan.

Bugar

Mengubah ukuran gambar menjaga proporsi menambahkan padding untuk memenuhi dimensi yang diinginkan.

Melompat

Mencoba mengubah ukuran gambar sambil menjaga proporsi. Mirip dengan fit tapi tanpa bantalan.

Menutupi

Mengubah ukuran gambar ke lebar dan tinggi yang diberikan dengan mengabaikan proporsi gambar asli.

Memutar

Memutar gambar dengan sudut tertentu, berlawanan arah jarum jam

Memangkas

Menghapus bingkai satu warna di sekitar gambar.

Kompresi gambar

Anda dapat mengubah kompresi (format dan kualitas output) gambar Anda dengan menggunakan filter kompresi.

Anda dapat menggunakan filter kompresi bersama operasi pengubahan ukuran dan filter gambar.

Secara default, Cloudimage mengirimkan gambar sebagai WebP. Jika format tidak didukung oleh browser klien, format akan kembali ke JPEG atau PNG.

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 5

Optipress – Kompresi gambar berbasis Machine Learning

Tantangan utama dengan kompresi JPEG adalah menemukan faktor kompresi yang paling optimal untuk setiap gambar yang berbeda.

Gambar berbeda yang dikompresi dengan parameter kompresi yang sama dapat menghasilkan persepsi kualitas yang berbeda.

Selain itu, gambar yang sama dalam ukuran yang berbeda mungkin memerlukan strategi kompresi yang berbeda untuk mencapai peningkatan ukuran maksimum tanpa kehilangan kualitas yang terlihat.

Untuk mengatasinya, kami telah mengembangkan algoritma kompresi Optipress JPEG.

Optipress menemukan pendekatan kompresi JPG terbaik dengan menganalisis fitur gambar tertentu dan parameter kompresi saat ini.

Model Machine Learning menentukan strategi kompresi terbaik untuk gambar ini.

Kualitas kemudian dievaluasi berdasarkan model simulasi Sistem Visual Manusia untuk mencapai kompresi optimal tanpa penurunan kualitas persepsi.

Prasetel transformasi

Jika Anda ingin menerapkan transformasi yang sama pada banyak gambar, Anda dapat menentukan preset dan menerapkan transformasi hanya menggunakan nama preset (X).

p=X

Transformasi pengubahan ukuran atau filter gambar apa pun dapat dimasukkan dalam preset, serta tanda air dan parameter kompresi gambar.

Ini memungkinkan proses pengoptimalan massal yang menghemat lebih dari 50% waktu pengoptimalan gambar dan dapat dilakukan dengan mudah oleh siapa saja yang terlibat.

Gambar Responsif menjadi mudah

Gambar responsif menyesuaikan ukuran gambar sesuai dengan ukuran layar pengguna akhir, sehingga memungkinkan situs web atau aplikasi seluler Anda memuat lebih cepat di berbagai ukuran layar.

Tim Cloudimage telah mengembangkan plugin JS untuk mengotomatiskan semuanya untuk Anda.

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 6
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

Cloudimage JS lib akan mengadaptasi semua URL Anda secara otomatis dan menawarkan Desain Responsif bawaan, Lazyloading, dan banyak lagi fitur lainnya untuk membuat situs web Anda responsif, cepat, dan menambahkan efek pemuatan yang bagus ke gambar Anda.

Dengan Lazy Loading dan cache-enabled, Anda dapat yakin bahwa waktu pemuatan situs web Anda akan meningkat setidaknya 40%. Tambahkan CDN ke dalamnya dan persentasenya naik hingga 60%.

Jaringan Pengiriman Konten

Cloudimage memanfaatkan Jaringan Pengiriman Konten untuk mempercepat pengiriman gambar Anda ke seluruh dunia. Kami bekerja dengan beberapa penyedia CDN untuk mengoptimalkan pengiriman gambar Anda dan memberikan keandalan yang luar biasa.

Tingkatkan Kinerja Situs Web dengan Mengoptimalkan Semua Gambar Anda Secara Otomatis untuk Perangkat Apa Pun dengan Cloudimage 7

Selain mempercepat gambar Anda, CDN menyediakan perlindungan DDoS (Distributed Denial of Service), yang akan bertindak sebagai perisai ke server Anda dan menghindari waktu henti.

CDN biasanya menyimpan gambar selama gambar diminta oleh pengguna akhir.

Diimplementasikan dalam hitungan menit

Yang membuat Cloudimage sangat unik adalah layanannya dapat diimplementasikan dengan sangat cepat.

Jika situs web Anda mengalami puncak lalu lintas yang gila, Anda selalu dapat menjangkau cloudimage, mengoptimalkan gambar Anda, dan memastikan puncak tersebut akan diserap secara instan.

Ini memberi Anda kinerja sempurna dan kecepatan pemuatan halaman yang cepat di berbagai perangkat.

Selain itu, implementasinya sangat mudah dan membuat proses kolaborasi antar tim (tim yang bertanggung jawab atas situs web mulai dari produksi konten hingga posting dan pemantauan) menjadi sederhana dan efisien.

Ini sangat penting ketika sebagian besar dari kita terpaksa menggunakan kantor rumah kita dalam periode waktu berikutnya.
Untuk informasi lebih lanjut tentang cara kerja layanan Cloudimage, kunjungi kami di cloudimage.io