Web Görüntü Efektleri Performans Gösterisi

Tarayıcılar grafik oluşturma yeteneklerini sürekli olarak geliştirdikçe, içlerinde gerçekten tasarım yapma yeteneği daha fazla gerçek oluyor. Birkaç satırlık kod artık hızlı ve çarpıcı bir görsel etkiye sahip olabilir ve çok fazla çaba harcamadan tutarlılık sağlayabilir . Ve web geliştirmedeki çoğu şeyde olduğu gibi, genellikle aynı etkiyi elde etmenin birçok yolu vardır.

Bu gönderide, en popüler görüntü efektlerinden biri olan gri tonlamaya göz atacağız ve HTML tuvali, SVG, CSS filtreleri ve CSS harmanlama modlarının hem uygulama kolaylığını hem de performans etkilerini değerlendireceğiz. Hangisi kazanacak?

SmashingMag'de Daha Fazla Okuma :

• Web Görüntü Efektleri Performans Gösterisi
• HTML5: Gerçekler ve Mitler
• ImageMagick ile Etkili Görüntü Yeniden Boyutlandırma
• Akıllı JPEG Optimizasyon Teknikleri

Web'deki filtreler, bir görüntünün üzerine yerleştirilmiş bir mercek gibi çalışır. Tarayıcı düzeni ve ilk boyayı oluşturduktan sonra görüntüye uygulanırlar. Destekleyen tarayıcılarda, filtreler tek tek veya üst üste katmanlar halinde uygulanabilir. İlk oluşturma işleminden sonra görüntü değişiklikleri olarak uygulanabildikleri ve muhtemelen bir geliştirme oldukları için, filtreler, onları desteklemeyen tarayıcılarda yalnızca görünmeyerek zarif bir şekilde bozulur.

CSS Filtreleri

Gri tonlama efekti üretmenin en basit yöntemiyle başlayalım: mütevazı ama güçlü CSS filtresi.

Bu efekti elde etmek için, tek bir CSS satırı ekleriz: filter: grayscale(1) . Bu filtre görüntüyü desatüre eder ve 0 ile 1 (veya %0 ile %100) arasında herhangi bir sayısal veya yüzde tabanlı değerle kullanılabilir. Not: Şu anda, WebKit tabanlı tarayıcılar için filtrelerin önüne -webkit- eklenmelidir. Ancak, Autoprefixer gibi bir çözüm, bunları elle ekleme ihtiyacını ortadan kaldıracaktır.

Canlı Demo – CSS Filtresi

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

Arka Plan Karışım Modu

CSS karışım modları, görüntü efekti kombinasyonları için sonsuz çeşitlilikte seçenekler sunar. Karışım modlarını kullanmanın iki yolu vardır: mix-blend-mode özelliği ve background-blend-mode özelliği.

• mix-blend-mode , öğenin arkasındaki içerikle nasıl karışacağını açıklayan özelliktir.
• background-blend-mode birden fazla arka plana sahip öğeler için kullanılır ve bu arka planlar arasındaki ilişkiyi tanımlar.

Örneğimizde gri bir arka plan üzerinde parlaklık kanallarını çekmek için background-blend-mode: luminosity kullanacağız, bu da gri tonlamalı bir görüntüyle sonuçlanacaktır. Unutulmaması gereken bir şey, arka plan düzeninin sabit olmasıdır: efektlerin düzgün bir şekilde oluşturulabilmesi için arka plan resimleri her zaman düz renklerden veya degrade arka planlardan önce sıralanmalıdır . Renk, son arka plan katmanı olmalıdır. Bu aynı zamanda background-blend-mode desteklemeyen eski tarayıcılara karşı da bir korumadır - görüntü yine de efekt olmadan oluşturulacaktır.

background-blend-mode: luminosity modları ve CSS filtresi arasındaki tek fark, artık birden fazla arka plana sahip olmamız ve en üstteki görüntüden (kuş test cihazı) parlaklık değerlerini alan ve bu parlaklık değerlerini bir gri ikinci arka plan.

Canlı Demo – Arka Plan Karışım Modu

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

Şu anda, bu en yeni ve dolayısıyla en az desteklenen seçenektir, ancak yine de Chrome ve Firefox'ta iyi çalışır ve kısmi Safari desteğine sahiptir. Not: Safari, HSL tabanlı karışım modları dışında tüm karışım modlarını destekler: ton, doygunluk, renk ve parlaklık.

HTML5 Tuval

HTML5 <canvas> , her bir pikselin verilerine (özellikle canvasContext.getImageData aracılığıyla) erişimimiz olduğundan ve her birini JavaScript aracılığıyla değiştirebildiğimizden, görüntü işleme söz konusu olduğunda bir ton esneklik sağlar. Ancak bu yöntem en karmaşık olanıdır ve en fazla ek yükü beraberinde getirir. Ayrıca güvenlik endişeleri nedeniyle çapraz kaynaklı sorunlarda birkaç nüansı vardır.

Chrome'daki çapraz kaynak hatasını düzeltmek için resminizin GitHub Pages veya Dropbox gibi bir çapraz kaynak paylaşımı (CORS) dostu sitede barındırılması ve crossOrigin="Anonymous" belirtmesi gerekir. Bir gösteri için canlı örneğe bakın.

<canvas> ile gri tonlama efekti elde etmenin yolu, parlaklık seviyesini (parlaklık) korurken kırmızı, yeşil ve mavi bileşenleri piksel değerindeki herhangi bir dış değerden çıkarmaktır. Bunu yapmanın bir yolu, RGB değerlerini şu şekilde ortalamaktır: grayscale = (red + green + blue) / 3; .

Aşağıdaki örnekte, görüntü verilerinde (R,G,B,a) formatındaki RGBa değerlerini kullanıyoruz; kırmızı kanal data[0] , yeşil kanal data[1] vb. Daha sonra bu kanalların her birinin parlaklık seviyesini (parlaklık) alırız ve görüntüyü gri tonlamaya çevirmek için bunların ortalamasını alırız.

Canlı Demo – HTML5 Kanvas

SVG Filtresi

SVG filtreleri en geniş desteğe sahiptir (Internet Explorer ve Edge'de bile!) ve ayrıca (neredeyse) kullanımı doğrudan CSS filtreleri kadar kolaydır. Bunları aynı filter özelliği ile kullanabilirsiniz. Aslında, CSS filtreleri SVG filtrelerinden türetilmiştir. Tuvalde olduğu gibi, SVG filtreleri, daha da karmaşık sonuçlar oluşturmak için WebGL gölgelendirmesinden yararlanabileceğiniz için, iki boyutlu efektlerin düz düzlemini aşmanıza olanak tanır.

Bir SVG filtresi uygulamanın birkaç yolu vardır, ancak bu durumda, tutarlılık için CSS filtresi örneğinde olduğu gibi, arka plan görüntüsünde filter özelliğini kullanmaya devam edeceğiz. SVG filtrelerinden en büyük farkı, bu filtreyi uygun yol ile dahil etmeye ve bağlantı vermeye özen göstermemiz gerektiğidir. Bu , SVG'yi kullandığımız öğenin üzerindeki sayfada içe aktarmamız gerektiği anlamına gelir (bu, şablonlama motoru ve include ifadeleri kullanılarak daha kolay hale getirilebilir).

Canlı Demo – SVG Filtresi

 <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); }

Filtre Performansı

Peki, konu ilk render performansına geldiğinde bunlar nasıl birikiyor? Her biri için bir test sayfası hazırladım ve Chrome 47'de WebPagetest karşılaştırma özelliğini kullandım. Her testin biraz farklı sonuçlar verdiğini akılda tutarak, genel eğilim şu şekilde özetlenebilir:

CSS filtresi, SVG filtresi ve CSS karışım modu yöntemlerinin tümü nispeten benzer zaman dilimlerinde yüklenir. Bazen SVG filtresi, CSS harmanlama modundan daha hızlıydı (ancak her zaman zorlukla) ve tam tersi. CSS filtresi genellikle en hızlı yüklenenler arasındaydı ve <canvas> her zaman en yavaş olanıydı. Bu, toplanan en önemli içgörüdür. <canvas> , görüntüyü oluşturmada düzenli olarak diğer yöntemlerin gerisinde kalıyordu.

Adil olmak adına, birden fazla görüntünün yükleme süresini de karşılaştırmak istedim. Her birinin (sadece bir tane yerine) on yorumunu oluşturdum ve testleri tekrar çalıştırdım:

Sonuçlar benzerdi (her testte küçük farklılıklar olduğunu unutmayın). Bu durumda CSS filtresi 0.1 ms daha yavaştı, bu da CSS filtreleri, karışım modları ve SVG filtreleri arasında sonuçların en hızlı yöntem için yetersiz olduğunu gösteriyor. Ancak, HTML5 <canvas> , karşılaştırıldığında gözle görülür şekilde geride kaldı.

JavaScript oluşturma ve boyama oluşturma süresi aracılığıyla sayfa yükleme süresine daha derinlemesine bakıldığında, bu eğilimin devam ettiğini görebilirsiniz.

Yine, <canvas> oluşturması en uzun ve boyaması en uzun süreyi alırken, iki CSS seçeneği en hızlısıydı, SVG ortada geliyordu.

Bu sonuçlar mantıklı, çünkü <canvas> her bir pikseli alıyor ve biz herhangi bir görüntü göremeden önce bu piksel üzerinde bir işlem yapıyor. Bu, oluşturma zamanında çok fazla işlem gücü gerektirir. Normalde vektör grafikleri için SVG'ler kullanılsa da, raster görüntü efektleriyle uğraşırken bunları <canvas> yerine şiddetle tavsiye ederim. SVG yalnızca daha hızlı olmakla kalmaz, aynı zamanda DOM içinde kullanımı çok daha kolay ve daha esnektir. Genel olarak, CSS filtreleri, tarihsel olarak SVG filtrelerinden çıkan kısayollar olduklarından ve dolayısıyla tarayıcılarda optimize edildiğinden, SVG filtrelerinden daha da optimize edilmiştir.

#filtresiz

Filtresiz kullanmaya ne dersiniz? Genel olarak en hızlı yöntemimizi (bir CSS filtresi ekleyerek) görselinizi yüklemeden önce fotoğraf düzenleme yazılımında düzenlemekle karşılaştırdım (doygunluğu gidermek için Mac OS X'te Önizleme'yi kullandım). Görüntüyü önceden düzenlerken, testlerimde tutarlı bir 0.1ms performans artışı buldum:

Çözüm

Görüntü filtreleri, web üzerinde görsel birlik ve estetik çekicilik sağlamanın eğlenceli ve etkili bir yoludur. Hafif bir performans artışı ile geldiklerini, aynı zamanda tarayıcıda hızlı tasarımın avantajları ve etkileşim tasarlama fırsatı ile geldiklerini unutmayın.

Basit görüntü efektleri için, en geniş desteğe ve en basit kullanıma sahip oldukları için CSS filtrelerini kullanın. Daha karmaşık görüntü efektleri için SVG filtrelerine veya CSS karışım modlarına bakın. SVG filtre efektleri, kanal işleme yetenekleri ve feColorMatrix nedeniyle özellikle iyidir. CSS karışım modları, sayfada örtüşen öğelerle gerçekten güzel görsel efektler de sunar. SVG içinde ( feBlend gibi) benzer karışım modlarını kullanabilirsiniz, ancak bunlar, etkileşimin mix-blend-mode izin verdiği gibi çevreleyen öğelerle değil, SVG'nin kendisiyle ilgili olması anlamında CSS background-blend-mode benzer. Sadece filtreler için <canvas> kullanmayın.