Showdown Kinerja Efek Gambar Web

Karena browser terus meningkatkan kemampuan rendering grafisnya, kemampuan untuk benar-benar mendesain di dalamnya menjadi lebih nyata. Beberapa baris kode sekarang dapat memiliki dampak visual yang cepat dan dramatis, dan memungkinkan konsistensi tanpa banyak usaha . Dan seperti kebanyakan hal dalam pengembangan web, seringkali ada banyak cara untuk mencapai efek yang sama.

Dalam posting ini, kita akan melihat salah satu efek gambar paling populer, skala abu-abu, dan menilai kemudahan implementasi dan implikasi kinerja kanvas HTML, SVG, filter CSS, dan mode campuran CSS. Yang mana yang akan menang?

Bacaan Lebih Lanjut tentang SmashingMag:

• Showdown Kinerja Efek Gambar Web
• HTML5: Fakta Dan Mitos
• Mengubah Ukuran Gambar yang Efisien Dengan ImageMagick
• Teknik Pengoptimalan JPEG yang Cerdas

Filter di web berfungsi seperti lensa yang diletakkan di atas gambar. Mereka diterapkan pada gambar setelah browser membuat tata letak dan cat awal. Dalam mendukung browser, filter dapat diterapkan secara individual atau berlapis di atas satu sama lain. Karena mereka dapat diterapkan sebagai modifikasi gambar setelah render awal, dan kemungkinan merupakan peningkatan, filter menurun dengan anggun hanya dengan tidak terlihat di browser yang tidak mendukungnya.

Filter CSS

Mari kita mulai dengan metode paling mudah untuk menghasilkan efek skala abu-abu: filter CSS yang sederhana namun kuat.

Untuk mencapai efek ini, kami menambahkan satu baris CSS: filter: grayscale(1) . Filter ini menghilangkan saturasi gambar dan dapat digunakan dengan nilai berbasis numerik atau persentase antara 0 dan 1 (atau 0% hingga 100%). Catatan: saat ini, filter untuk browser berbasis WebKit harus diawali dengan -webkit- . Namun, solusi seperti Autoprefixer akan menghilangkan kebutuhan untuk menambahkannya secara manual.

Demo Langsung – Filter CSS

 .cssfilter-gray { -webkit-filter: grayscale(1); background: url('img/bird.jpg'); filter: grayscale(1); }

Mode Campuran Latar Belakang

Mode campuran CSS menyediakan berbagai pilihan tanpa akhir untuk kombinasi efek gambar. Ada dua cara untuk menggunakan blend mode: properti mix-blend-mode dan properti background-blend-mode .

• mix-blend-mode adalah properti yang menjelaskan bagaimana elemen akan menyatu dengan konten di belakangnya.
• background-blend-mode digunakan untuk elemen dengan banyak latar belakang, dan menjelaskan hubungan antara latar belakang ini.

Kami akan menggunakan background-blend-mode: luminosity untuk menarik saluran luminositas di atas latar belakang abu-abu dalam contoh kami, menghasilkan gambar skala abu-abu. Satu hal yang perlu diperhatikan adalah urutan latar belakang konstan: gambar latar belakang harus selalu diurutkan sebelum warna solid atau latar belakang gradien agar efek ditampilkan dengan benar . Warna harus menjadi lapisan latar belakang terakhir. Ini juga merupakan perlindungan terhadap browser lama yang tidak mendukung background-blend-mode – gambar akan tetap ditampilkan tanpa efek.

Satu-satunya perbedaan dengan mode campuran dan filter CSS adalah bahwa kita sekarang memiliki banyak latar belakang, dan menggunakan background-blend-mode: luminosity , yang mengambil nilai luminositas dari gambar atas (penguji burung) dan melapisi nilai kecerahan tersebut di atas latar belakang abu-abu kedua.

Demo Langsung – Mode Campuran Latar Belakang

 .cssfilter-gray { background: url('img/bird.jpg'), gray; background-blend-mode: luminosity; }

Saat ini, ini adalah opsi terbaru dan paling tidak didukung, meskipun masih berfungsi dengan baik di Chrome dan Firefox, dan memiliki dukungan Safari sebagian. Catatan: Safari mendukung semua mode campuran kecuali mode campuran berbasis HSL: rona, saturasi, warna, dan luminositas.

Kanvas HTML5

HTML5 <canvas> memungkinkan banyak fleksibilitas dalam hal manipulasi gambar, karena kami memiliki akses ke setiap data piksel individu (khususnya melalui canvasContext.getImageData ) dan dapat memanipulasi masing-masing piksel melalui JavaScript. Metode ini, bagaimanapun, adalah yang paling kompleks dan datang dengan overhead yang paling. Ini juga memiliki beberapa nuansa dalam masalah lintas-asal karena masalah keamanan.

Untuk memperbaiki kesalahan lintas asal di Chrome, gambar Anda perlu dihosting di situs ramah berbagi sumber daya lintas asal (CORS) seperti GitHub Pages atau Dropbox, dan tentukan crossOrigin="Anonymous" . Lihat contoh langsung untuk demonstrasi.

Cara untuk mencapai efek skala abu-abu dengan <canvas> adalah dengan menghapus komponen merah, hijau, dan biru dari nilai terluar dalam nilai piksel sambil mempertahankan tingkat luminositas (kecerahan). Salah satu cara untuk melakukannya adalah dengan merata-ratakan nilai RGB seperti: skala abu- grayscale = (red + green + blue) / 3; .

Pada contoh di bawah ini, kami menggunakan nilai RGBa dalam format (R,G,B,a) dalam data gambar; saluran merah adalah data[0] , saluran hijau adalah data[1] , dan seterusnya. Kami kemudian mendapatkan tingkat luminositas dari masing-masing saluran ini (kecerahan) dan rata-rata untuk mengubah gambar skala abu-abu.

Demo Langsung – Kanvas HTML5

Filter SVG

Filter SVG memiliki dukungan terluas (bahkan di Internet Explorer dan Edge!) dan juga (hampir) mudah digunakan seperti filter CSS secara langsung. Anda dapat menggunakannya dengan properti filter yang sama. Faktanya, filter CSS berasal dari filter SVG. Seperti kanvas, filter SVG memungkinkan Anda melampaui bidang datar dari efek dua dimensi, karena Anda dapat memanfaatkan bayangan WebGL untuk menciptakan hasil yang lebih kompleks.

Ada beberapa cara untuk menerapkan filter SVG, tetapi dalam kasus ini kita akan tetap menggunakan properti filter pada gambar latar belakang, seperti contoh filter CSS untuk konsistensi. Perbedaan terbesar dengan filter SVG adalah kita harus berhati-hati untuk menyertakan dan menautkan ke filter ini dengan jalur yang benar. Ini berarti kita perlu mengimpor SVG pada halaman di atas elemen yang kita gunakan (yang dapat dibuat lebih mudah dengan menggunakan mesin templating dan menyertakan pernyataan).

Demo Langsung – Filter SVG

 <svg> <filter> <feColorMatrix type="saturate" values="0"/> </filter> </svg>

 .svgfilter-gray { background: url('img/bird.jpg'); -webkit-filter: url(#grayscale-filter); filter: url(#grayscale-filter); }

Filter Kinerja

Jadi bagaimana ini menumpuk ketika datang ke kinerja render awal? Saya membuat halaman pengujian untuk masing-masing dan menggunakan fitur perbandingan WebPagetest di Chrome 47. Perlu diingat bahwa setiap pengujian memberikan hasil yang sedikit berbeda, tren keseluruhan dapat diringkas sebagai berikut:

Filter CSS, filter SVG, dan metode mode campuran CSS semuanya dimuat dalam kerangka waktu yang relatif sama. Terkadang filter SVG lebih cepat daripada mode campuran CSS (tetapi selalu hampir tidak) dan sebaliknya. Filter CSS umumnya termasuk yang tercepat untuk dimuat, dan <canvas> selalu yang paling lambat. Ini adalah wawasan paling signifikan yang diperoleh. <canvas> secara teratur tertinggal di belakang metode lain dalam merender gambar.

Demi keadilan, saya juga ingin membandingkan waktu buka untuk banyak gambar. Saya membuat sepuluh rendisi masing-masing (bukan hanya satu) dan menjalankan tes lagi:

Hasilnya serupa (perlu diingat ada sedikit variasi di setiap tes). Filter CSS 0,1 ms lebih lambat dalam kasus ini, menunjukkan bahwa antara filter CSS, mode campuran, dan filter SVG, hasilnya tidak meyakinkan untuk metode tercepat. Namun, HTML5 <canvas> sangat tertinggal dibandingkan.

Melihat lebih dalam ke waktu buka halaman melalui perenderan JavaScript dan waktu perenderan cat, Anda dapat melihat tren ini terus berlanjut.

Sekali lagi, <canvas> membutuhkan waktu paling lama untuk merender dan melukis, sementara dua opsi CSS adalah yang tercepat, SVG berada di tengah.

Hasil ini masuk akal, karena <canvas> mengambil setiap piksel individu dan melakukan operasi padanya sebelum kita dapat melihat gambar sama sekali. Ini membutuhkan banyak kekuatan pemrosesan pada waktu render. Meskipun biasanya SVG digunakan untuk grafik vektor, saya tetap akan sangat merekomendasikannya di atas <canvas> ketika berhadapan dengan efek gambar raster. SVG tidak hanya lebih cepat, tetapi juga lebih mudah untuk ditangani dan lebih fleksibel di dalam DOM. Umumnya, filter CSS bahkan lebih dioptimalkan daripada filter SVG, karena secara historis mereka adalah pintasan yang muncul dari filter SVG dan, dengan demikian, dioptimalkan di browser.

#nofilter

Bagaimana dengan tidak menggunakan filter? Saya membandingkan metode tercepat kami secara keseluruhan (menambahkan filter CSS) untuk mengedit gambar Anda di perangkat lunak pengedit foto sebelum mengunggahnya (saya menggunakan Pratinjau di Mac OS X untuk menghilangkan saturasi). Saat melakukan pra-edit gambar, saya menemukan peningkatan kinerja 0,1 ms yang konsisten dalam pengujian saya:

Kesimpulan

Filter gambar adalah cara yang menyenangkan dan efektif untuk memberikan kesatuan visual dan daya tarik estetika di web. Ingatlah bahwa mereka datang dengan sedikit peningkatan kinerja, tetapi juga dengan manfaat dari desain cepat di browser dan kesempatan untuk mendesain interaksi.

Untuk efek gambar sederhana gunakan filter CSS, karena mereka memiliki dukungan terluas dan penggunaan paling sederhana. Untuk efek gambar yang lebih kompleks, lihat filter SVG atau mode campuran CSS. Efek filter SVG sangat bagus karena kemampuan manipulasi saluran dan feColorMatrix . Mode campuran CSS juga menawarkan beberapa efek visual yang sangat bagus dengan elemen yang tumpang tindih di halaman. Anda dapat menggunakan mode campuran serupa dalam SVG (seperti feBlend ), meskipun mereka mirip dengan background-blend-mode CSS dalam arti bahwa interaksi berkaitan dengan SVG itu sendiri dan bukan dengan elemen sekitarnya, seperti yang dimungkinkan mix-blend-mode . Hanya saja, jangan gunakan <canvas> untuk filter.