Statistik terus berulang kepada kami tentang korelasi kuat antara penurunan kecepatan muat halaman situs dan peningkatan rasio pentalan dengan penurunan konversi. Saya tidak akan menemukan Amerika jika saya mengatakan bahwa situs tersebut diperlambat oleh muatan "membengkak" (dengan gambar yang tidak dioptimalkan dengan baik dan kode HTML yang berlebihan). Ini memaksa server untuk melakukan pekerjaan yang tidak perlu. Lapisan besar dari pekerjaan ini dikaitkan dengan masalah pengoptimalan gambar.
Gambar yang dipilih dengan benar, dengan sendirinya, menarik perhatian dengan baik dan membantu meningkatkan konversi, menyebarkan informasi di jejaring sosial dan interaksi pengunjung lainnya. Oleh karena itu, mereka terus diposting secara aktif di halaman web. Tapi bagaimana hal ini mempengaruhi kecepatan memuat halaman-halaman ini adalah pertanyaan yang menarik. Itu semua tergantung pada strategi optimasi.
Menurut saya, strategi yang mengandalkan tesis bahwa gambar adalah konten statis tidak terlalu efektif (saya akan mengembangkan ide ini dan memberikan argumen di seluruh artikel). Perangkat seluler sekarang menyumbang sebagian besar lalu lintas Internet, tetapi ada masalah: perangkat ini memiliki ukuran, resolusi layar, sistem operasi, dan perangkat lunak aplikasi yang berbeda (misalnya, browser). Bagaimana cara membuat halaman web dengan cepat (!) Dan memuat dengan benar di platform apa pun dan terlihat sama pada saat yang bersamaan?
Pada artikel ini, kami akan mengurangi solusi untuk pengoptimalan gambar pada tahap pengembangan, perakitan proyek, dan / atau pada tahap pemeliharaan situs web yang telah selesai.
Benar, beberapa strategi pengoptimalan dapat secara signifikan memperumit proses desain dan pengembangan, serta menambah masalah pemeliharaan. Saya biasanya diam tentang pemborosan sumber daya dan waktu selama perakitan. Ada banyak metode dan alat untuk mengoptimalkan gambar. Tetapi beberapa di antaranya tidak mudah digunakan tanpa mengotomatiskan proses yang kompleks dan berulang. Kami akan melihat empat strategi dan mencari tahu mana yang memungkinkan Anda mengotomatiskan dengan lebih baik dan membuat pengoptimalan gambar yang fleksibel (dinamis) untuk perangkat yang berbeda.
Kami akan menguji empat strategi. Pertama, tanpa pengoptimalan gambar, kami hanya akan memberi makan kode adaptif sederhana ke server dengan semua titik putus dan opsi gambar untuk mereka. Kemudian kita akan melihat pengoptimalan pada tahap pembuatan, di mana alat dan layanan khusus membantu menyiapkan varian gambar yang diperlukan. Strategi ketiga adalah pengoptimalan waktu berjalan: sebelum mengirimkan halaman, alat otomatis atau layanan online menerapkan pengoptimalan pada gambar sesuai dengan template yang diberikan atau berdasarkan informasi dari browser. Strategi terakhir adalah menggunakan informasi tentang perangkat dan browser yang diperoleh melalui layanan khusus lainnya untuk menghasilkan dan mengirimkan gambar yang dioptimalkan (saya pasti akan membicarakannya di akhir artikel).
Perhatian! Spoiler!
Strategi pengoptimalan gambar khusus perangkat akan memberikan hasil terbaik. Dalam artikel ini, kita akan melihat pro dan kontra dari penerapan setiap strategi dan dampaknya pada proses pengembangan aplikasi web.
Tujuan akhir dari pengoptimalan gambar adalah untuk meningkatkan kecepatan memuat halaman web. Saya menggunakan Google PageSpeed Insight untuk mengaudit halaman . Ini memungkinkan Anda untuk dengan mudah menganalisis keefektifan strategi individu. Seperti yang saya tulis di atas, kami akan mengaudit halaman seluler.
Strategi # 1: kode responsif tanpa pengoptimalan
Saya mengambil kode responsif standar tanpa menggunakan pengoptimalan gambar apa pun: browser, berdasarkan ukuran layar, cukup memilih opsi yang kurang lebih sesuai dari serangkaian gambar identik dengan ukuran berbeda. Ada beberapa breakpoint dalam kode untuk gambar dengan ukuran berbeda. Mereka ditentukan oleh ukuran tampilan ponsel, tablet, dan komputer desktop.
Tapi di sini lagi masalahnya: ada ribuan konfigurasi seperti itu, dan setiap hari ada lebih banyak lagi. Kami harus menambahkan lebih banyak breakpoint. Namun, ini membutuhkan lebih banyak waktu pengembangan, menyebabkan pertumbuhan berlebih dari basis kode dan, di masa depan, kebingungan dan kesalahan.
Berikut adalah contoh dengan empat breakpoint di atribut srcset:
<img srcset = "image-1920.jpg 1920w,
image-1280.jpg 1280w, image-640.jpg 640w, image-480.jpg 480w" size = "(min-width: 36em) 50vw, 100vw" src = " image-320.jpg "alt =" Sintaks gambar responsif "/>
Sekarang pikirkan tentang seberapa banyak kode ini yang dapat Anda miliki dalam proyek Anda ...
Selain itu, gambar untuk setiap ukuran yang terdaftar perlu dibuat secara terpisah. Ini membutuhkan waktu, serta ruang penyimpanan tambahan.
Anda juga dapat mengimplementasikan responsivitas dengan kueri media CSS. Atau, Anda dapat menggunakan new and elements
<source>
, di mana <picture> adalah wadah untuk satu atau beberapa elemen <source & gt dan satu elemen <img & gt. Namun, semua pendekatan ini tidak memungkinkan adanya solusi yang dapat diskalakan.
Akhirnya, pendekatan ini tidak memperhitungkan spesifikasi perangkat. Setiap kali Anda menulis kode seperti ini, Anda hanya mencoba menebak breakpoint mana yang akan digunakan dan ukuran gambar apa yang Anda perlukan. Selain itu, tidak ada jaminan bahwa opsi yang Anda pilih dengan baik hari ini akan berfungsi besok.
Manfaat:
- tidak perlu membeli perangkat lunak atau membayar langganan perangkat lunak atau layanan tambahan;
- Relatif mudah untuk menulis kode responsif berdasarkan standar yang terdokumentasi dengan baik.
Kekurangan:
- ruang tambahan diperlukan untuk menyimpan gambar dengan ukuran berbeda;
- waktu dan upaya tambahan diperlukan untuk menerapkan "multivarian adaptif" seperti itu;
- pertumbuhan kode dan kerumitan pemeliharaannya;
- Kode ini tidak bekerja sama di semua browser;
- tidak bergantung pada konteks perangkat;
- Penskalaan memerlukan CDN (Jaringan Pengiriman Konten) terpisah;
- butuh banyak waktu untuk menyelesaikan perangkat baru, format gambar, dan sebagainya.
Hasil tes
Pengujian menunjukkan bahwa saya tidak memilih format terbaik, dan bahkan tanpa kompresi. Dan gambar saya terlalu besar.
Strategi # 2: Pengoptimalan Waktu Bangun
Salah satu cara untuk mempermudah pembuatan variasi gambar adalah dengan menggunakan layanan pengeditan atau kompresi gambar khusus seperti Kraken , Compressor.io , mozjpeg, dan squoosh.
Anda mengunggah gambar Anda dan proses layanan dan mengoptimalkan gambar di servernya. Kemudian Anda dapat menggunakan gambar yang dioptimalkan dalam proyek Anda. Anda dapat menetapkan pengaturan pengoptimalan standar atau kustom: kompresi lossy atau lossless, pengubahan ukuran, penurunan skala, dan sebagainya. Beberapa layanan dapat menyediakan beberapa versi gambar yang sama sekaligus sesuai dengan dimensi yang dibutuhkan.
Bagaimana jika Anda bangkrut dan menggunakan pembuat Grunt atau Gulp untuk mengoptimalkan gambar Anda ? Untuk melakukan ini, cukup dengan menetapkan tugas yang sesuai untuk dilakukan selama pembuatan. Pemrosesan gambar itu sendiri dapat ditangani oleh paket imagemin js .
Ini dapat diinstal melalui npm atau digunakan melalui antarmuka baris perintah. Ini adalah solusi modular dengan plugin untuk mengompresi berbagai format gambar: misalnya, imagemin menggunakan mozjpeg untuk JPEG dan pngquant untuk kompresi PNG. Menyetel opsi pengoptimalan gambar mirip dengan banyak alat SaaS.
Saat menerapkan strategi ini, beban terbesar jatuh pada pengembang. Mereka harus terlebih dahulu mengotomatiskan pemrosesan batch gambar dengan mengutak-atik alat pihak ketiga, lalu memperbarui kode mereka secara berkala untuk mendukung format gambar baru.
Manfaat:
- pengoptimalan gambar dilakukan di server asing;
- layanan memproses gambar dengan cukup cepat;
- kontrol pengoptimalan dapat dibangun ke dalam alur kerja pengembangan dan penerapan Anda;
- layanan memiliki antarmuka yang mudah digunakan untuk mengatur parameter pengoptimalan;
- banyak alat gratis (atau paket gratis) dengan fungsionalitas yang cukup kaya.
Kekurangan:
- sekali lagi, perlu banyak waktu untuk menerapkan multivarian adaptif;
- masih tidak ada ketergantungan pada konteks perangkat (ukuran, resolusi layar, dan sebagainya);
- masih membutuhkan ruang untuk menyimpan banyak gambar;
- masih membutuhkan CDN;
- bahkan lebih banyak jam kerja diperlukan untuk menerapkan integrasi lebih lanjut dengan produk pihak ketiga melalui API;
- setiap kali varian gambar baru muncul, Anda juga perlu menjalankan seluruh proses pengoptimalan untuk varian yang sudah ada;
Hasil tes
Dari segi poin, ini sedikit lebih baik dari strategi pertama. Keluhan tentang kompresi telah mereda, tetapi tentang format dan ukuran yang terlalu besar - tetap ada.
Penting untuk dicatat bahwa total muatan telah turun menjadi 1,4 MB. Ini 80% kurang dari solusi tanpa strategi memberi kita, dan 50% kurang dari strategi dengan kode adaptif.
Strategi # 3: Pengoptimalan Run-time
Saat kami mengunjungi halaman dari perangkat tertentu, browser mengirimkan permintaan dengan header HTTP ke server. Header menyimpan informasi tentang konteks akses dan format gambar.
Pengoptimalan run-time berjalan di server, tepat sebelum respons (konten) dikirim ke browser. Tujuan dari pengoptimalan ini adalah untuk mengurangi jumlah data yang dikirimkan untuk mempercepat pemuatan halaman web.
Misalnya, header dari browser Chrome terlihat seperti ini:
image / avif, image / webp, image / apng, image / *, * / *; q = 0.8
Dengan munculnya Petunjuk Klien, Anda dapat mentransfer lebih banyak informasi sebagai tambahan. bidang, misalnya, DPR (rasio piksel perangkat, "kepadatan piksel", nilai yang mirip dengan resolusi) dan Viewport-Width (lebar layar).
Petunjuk Klien adalah protokol di mana browser, di header permintaan HTTP, dapat memberi tahu server jenis konten apa yang ingin diterimanya. Petunjuk Klien menambahkan bidang tambahan ke header permintaan HTTP yang berisi informasi tentang browser. Salah satu fitur utama dari protokol ini adalah memberi tahu server tentang ukuran gambar yang dibutuhkan halaman.
Dengan menggunakan data ini, pengoptimal run-time menentukan cara mengompresi gambar dan dalam format apa untuk mengeluarkannya. Namun, untuk pengubahan ukuran yang fleksibel, Anda masih perlu mengimplementasikan logika adaptif secara manual berdasarkan breakpoint.
Tugas ini dilakukan oleh pengoptimal SaaS seperti Cloudinary dan imgix. Platform ini biasanya memiliki opsi pengoptimalan otomatis saat server gambar atau proxy memutuskan cara terbaik untuk mengoptimalkan konten. Tetapi Anda juga dapat menyesuaikan sendiri parameter pengoptimalan menggunakan API (biasanya menggunakan parameter URL sederhana).
ImgIx adalah add-on CDN (Amazon CloudFront) yang memungkinkan pemrosesan gambar secara real-time sebelum ditambahkan ke cache. ImgIx menyediakan semua fungsionalitas yang diperlukan untuk pemrosesan gambar, serta sejumlah fungsi tambahan, misalnya, Monokrom, Buram, Halftone.
Seringkali layanan seperti itu juga dapat berfungsi sebagai CDN. Dan Cloudinary memiliki sistem DAM (Digital Asset Management) sendiri.
Semuanya baik-baik saja, tetapi pengoptimal tersebut belum dapat menganalisis konteks perangkat. Header HTTP dapat menyampaikan data agen pengguna dan memberi sinyal bahwa halaman telah dibuka, misalnya, dari browser Chrome di perangkat Android. Tapi ini tidak cukup. Tidak ada yang dikatakan tentang apakah itu ponsel atau tablet, dan apa resolusi layarnya diagonal.
Gambar juga disimpan di server platform, bukan di sumber daya Anda sendiri. Namun, Anda biasanya memiliki kuota tetap ruang disk dengan beberapa margin untuk gambar baru.
Manfaat:
- sangat sedikit usaha yang diperlukan untuk mengoptimalkan gambar;
- run-time CDN ;
- , , DAM ;
- URL;
- , /
- , ;
:
- , ;
- src , , -;
- - ;
- biasanya bekerja lebih lambat pada permintaan pertama, karena layanan harus mendapatkan gambar dari sumber pihak ketiga dan kemudian mengoptimalkannya tanpa cache sama sekali.
Hasil tes
Keluhan tentang kompresi dan format hampir hilang, tetapi Anda masih dapat
menemukan kesalahan dengan ukurannya.
Dibandingkan dengan dua strategi sebelumnya, payload turun 88%. Sekarang hanya 897 KB.
Strategi # 4: Mengoptimalkan Konteks Perangkat
Seperti pada strategi sebelumnya, kita membutuhkan layanan dengan server gambar. Ini harus menggunakan header permintaan untuk pengoptimalan sensitif konteks dinamis. Misalnya, browser dapat mendeklarasikan dukungan untuk AVIF melalui Terima dalam permintaan HTTP. Kemudian layanan akan memikirkan gambar seperti apa yang harus ditampilkan dalam format AVIF. Dan di sinilah "keajaiban" dimulai.
Misalnya, pertimbangkan layanan ImageEngine . Ia bisa mendapatkan informasi lengkap tentang perangkat dari konteks akses menggunakan pustaka js WURFL... Selain browser dan OS, ini dapat menentukan secara tepat merek dan model perangkat, serta karakteristik layar (resolusi, PPI, dan banyak lainnya). Ini juga mendukung Petunjuk Klien, termasuk header simpan-data, yang tidak dapat digunakan oleh semua layanan.
Hal ini memungkinkan pengoptimal tersebut menawarkan opsi gambar yang lebih relevan untuk semua kesempatan, sekaligus memastikan keseimbangan optimal muatan dan kualitas gambar.
Layanan ini juga menggunakan CDN untuk mempercepat pengiriman gambar dan meningkatkan kecepatan cache ditemukan. Pendekatan ini memiliki keuntungan besar di segmen seluler Internet, karena ada begitu banyak perangkat dengan parameter layar yang berbeda.
Strategi ini hampir tidak memerlukan penyelesaian kode. Cukup mudah untuk memperbarui nilai atribut src dari tag img dengan menautkannya ke layanan pengoptimalan. Dan itu saja.
Manfaat:
- membutuhkan sedikit usaha dalam pengembangan dan pemeliharaan;
- dapat dikonfigurasi dan dilupakan secara efektif (saat menggunakan pengaturan pengoptimalan otomatis);
- pengoptimalan otomatis dan manual gambar menggunakan arahan di URL;
- penghematan terbesar dalam muatan gambar sambil mempertahankan kualitas maksimum;
- Anda dapat menerapkan dan mulai menggunakan strategi ini dalam hitungan menit;
- layanan pengoptimalan biasanya menawarkan rasio harga / bandwidth terbaik;
- tidak ada pertumbuhan berlebih dari basis kode: tidak ada kode adaptif dan tidak ada titik putus.
Kekurangan:
- src , , - ( );
- ;
- , , .
Sekarang Google PageSpeed Insights senang.
Sebagian besar indikator telah meningkat secara signifikan. Layanan secara otomatis mulai menggunakan format gambar baru (misalnya, AVIF dengan kompresi optimal sesuai dengan konteks akses). Selain itu, untuk ukuran layar yang berbeda, gambar secara otomatis mengubah panjang dan lebar, dan juga diskalakan.
Muatan total kami menurun sekitar 95%:
Dan Anda akan bahagia
Seperti yang Anda lihat, semua strategi memiliki pro dan kontra. Tidak diragukan lagi bahwa layanan pengoptimalan gambar, terutama yang berbasis pada konteks perangkat, memiliki keunggulan.
Strategi ketiga dan keempat akan memungkinkan Anda membangun proses pengembangan secara rasional dengan masalah minimal pada tahap pembuatan, pemeliharaan, dan penyimpanan gambar. Selain itu, Anda tidak perlu menulis kode responsif yang berbelit-belit dan tidak dapat diskalakan. Pengoptimalan gambar akan bekerja dengan andal dan fleksibel untuk memenuhi persyaratan dan kebutuhan bisnis baru.
Jangan khawatir kehilangan kendali atas setelan pengoptimalan gambar Anda, karena Anda dapat membuat penyesuaian menggunakan API atau parameter URL sederhana.
Tentu saja, Anda harus membayar untuk kesenangan seperti itu. Tetapi perwakilan dari layanan tersebut memastikan bahwa rencana tarif murah disediakan untuk individu, serta untuk usaha kecil dan menengah.
Cloud VDS dari Macleod sangat bagus untuk hosting situs web.
Daftar menggunakan tautan di atas atau dengan mengklik spanduk dan dapatkan diskon 10% untuk bulan pertama menyewa server dengan konfigurasi apa pun!
