Aşamalı Görsellerin Durumuna ve Kullanıcı Algısına Bakmak

“Progresif Görüntüler” bugünlerde sıcak bir konu. Bir görüntünün yükleneceği boş bir alanı göstermekten nasıl kaçınılacağına dair teknikleri açıklayan makalelerle sık sık karşılaşıyoruz. Medium ve Facebook, bu kalıbı uygulayan web siteleri ve mobil uygulamalara örnektir.

Geçenlerde SVG'yi yer tutucu olarak kullanmanın farklı yolları hakkında yazdım ve bu yılki PerfPlanet'in Performans Takvimi, bulanık SVG'lere dayalı bir teknik olan SQIP'yi daha ayrıntılı açıklayan iki gönderi içeriyordu: Kesişme Gözlemcisi ve SQIP ve SQIP - Performanslı Önizlemeler için Belirsiz Vektörler kullanılarak Aşamalı Görüntü Yükleme.

Medium'un görüntü yükleme tekniğini ilk belgelediğimde, çoğunlukla tekniklerini tersine mühendislikle ilgileniyordum. Yavaş bir uçak içi bağlantıda Medium'da gezinmenin etkisini görmüştüm. Küçük bir görüntüyü erken oluşturmanın, tembel yüklemenin ve son sürüme geçişin iyi bir fikir olduğunu düşündüm.

Bu tekniklerin bir kullanıcının algılanan performansını iyileştirdiğini varsayıyoruz . Hızlı oluşturma, yavaş oluşturmayı yener. Nihai içerik olmasa bile kullanıcının ekranına erken bir şey koymak.

Bundan emin miyiz?

Reddit'teki bazı yorumları gözden geçirdiğimde, birçok anlayışlı (ve olumsuz) görüş buldum. İşte bunlardan ikisi:

“Sonuncusu yüklenmeden önce bir görüntünün bulanık bir versiyonunu gösteren web sitelerinden nefret ediyorum. Gözlerimle oynuyor. Okumaya devam etmeden önce başka tarafa bakıp yapılıp yapılmadığına bakmam gerekiyor. Keşke bu işlevi devre dışı bırakmanın bir yolu olsaydı."
— rocky1138, Hacker Haberleri

"İnsanlar, yüklenecek görüntünün düşük bilgi sürümünün yer tutucu olarak gösterilmesinin daha hızlı algılanan bir yük ile sonuçlandığı sonucuna nasıl ulaştı? Bana göre tüm bu etkiler sadece saçma ve dikkat dağıtıcı görünüyor, hiçbir faydası yok - kesinlikle hız algısı değil. Süslü yer tutucumuzla zaten tam olarak yüklenmeden görüntünün gerçekte ne olduğunu anlayabileceğim gibi değil."
— dwb, Hacker Haberleri

Kullanıcıların Algıları İle İlgili Çalışmalar Bulmaya Çalışmak

Görüntüleri yüklemek için bu tekniklerin faydalı olduğunu (ya da olmadığını) destekleyebilecek bazı bilimsel araştırmalar bulmak istedim. Bu bir meydan okuma olduğunu kanıtladı. Resim yüklenmeden önce bulanık küçük resim gibi bir şey göstermenin kullanıcının algısını iyileştirdiğini kanıtlayan herhangi bir çalışma bulamadım. Sonra aşamalı JPEG'leri düşündüm.

Temele Dön: Aşamalı JPEG'ler

Belli bir şekilde, uzun süredir görüntülere desteklenen benzer bir “aşamalı görüntü yükleme tekniğimiz” var. Aşamalı JPEG iyi bir örnektir.

Aşamalı JPEG'ler, özellikle yavaş ağlarda kullanılan siteler için, görüntüler için iyi bir uygulama olarak önerilmiştir. Ann Robson, şimdi beş yıl önce Aşamalı JPEG'leri teşvik eden bir yazı yazdı ve burada neden üstün olduklarını özetledi:

"Aşamalı JPEG'ler daha iyi çünkü daha hızlılar. Daha hızlı görünmek daha hızlı olmaktır ve algılanan hız, gerçek hızdan daha önemlidir . Ne sunmaya çalıştığımız konusunda açgözlü olsak bile, aşamalı JPEG'ler bize mümkün olan en kısa sürede mümkün olan en kısa sürede fazlasını veriyor."

Aşamalı bir JPEG, görüntüyü birkaç taramaya kodlar. İlk tarama, tam görüntüyü düşük kalitede işler ve daha fazla tarama yapıldıkça iyileştirilir. Bir alternatif, görüntünün yukarıdan aşağıya kodunun çözüldüğü JPEG'in temel modudur.

Ek bir not olarak, JPEG kodlaması, farklı tarama komut dosyaları kullanılarak özelleştirilebilir. Bu, temel ve aşamalı arasında karma bir modda kodlanmış görüntüler oluşturmak için kullanılabilir.

Blur-up, SQIP gibi aşamalı teknikler, kullanıcının algı açısından aşamalı JPEG'lere benzer. Tarayıcı önce düşük kaliteli bir görüntü oluşturur ve yüklendiğinde bunu son görüntüyle değiştirir.

İlginç bir şekilde, JPEG resimlerin büyük çoğunluğu temel modu kullanır. Bazı kaynaklara göre, aşamalı JPEG'ler tüm JPEG'lerin en fazla %7'sini temsil eder. Bu tekniklerin kullanıcının algılanan performansını iyileştirdiği konusunda hemfikir görünüyorsak, aşamalı JPEG'ler neden temel JPEG'lerden daha yaygın olarak kullanılmıyor?

Çalışma

Sadece “Progressive Image Rendering - Good or Evil?” isimli bu konuya ışık tutmaya çalışan bir çalışma bulabildim.

"Progresif JPEG yönteminde olduğu gibi, görüntü yorumlama, başlangıçta kaba bir görüntünün keskin bir odakla birleştiği iki aşamalı bir süreç olduğunda, bilişsel akıcılık engellenir ve beynin gösterileni anlamak için biraz daha fazla çalışması gerekir. ”

Araştırmaya göre, ilk bakışta deneyimin daha iyi olduğunu düşünsek de, kullanıcılar aşamalı JPEG'leri işlemeyi daha zor buluyor.

Geçenlerde LQIP (Düşük Kaliteli Görüntü Yer Tutucuları) hakkında bir konuşmada çalışmadan bahsetmiştim. Yakında, çalışmanın titizliğini sorgulayan bazı cevaplar aldım:

Yine de birçok insan bu çalışmanın geçerliliğini sorguladı. Progresif renderlemenin faydaları hakkında varsaydığımız her şeye aykırıdır ve benzer bulgulara sahip 2. bir çalışma ile henüz kimse ortaya çıkmamıştır. Daha fazla veriye ihtiyacımız var.

— Tobias Baldauf (@tbaldauf) 9 Aralık 2017

Çalışma çok sınırlı ve tartışmalıydı. Kanıtlamak veya çürütmek için büyük ölçekli veriler, herhangi bir sonuca varmak esastır.

— Yoav Weiss (@yoavweiss) 9 Aralık 2017

Şimdiye kadar şüpheyle karşılanan tek bir çalışmamız var. Başka neyimiz var? Algılanan performansı bir vekil olarak ölçmek için mevcut araçları kullanabilir miyiz?

Algılanan Yükleme Süresinin Ölçülmesi

Bir siteden kaydedilen şu iki varsayımsal film şeridini hayal edin:

Genel anlaşma, kullanıcının B Sürümünün A Sürümünden daha hızlı yüklendiğini algılayacağı yönündedir. Bunun nedeni, sayfanın bölümlerinin A Sürümü'nden daha önce oluşturulmuş olmasıdır.

Bir bakıma durum, aşamalı görüntülere benzer, ancak daha büyük ölçekte. Sonuncusu olmasa bile, mümkün olduğunca erken kısmi içerik.

1,2 saniyelik bir sayfa yükleme süresi bize hikayenin bir kısmını anlatır, ancak kullanıcının bu süre içinde ne gördüğünü açıklamaz. Bu günlerde bir sayfanın ne kadar hızlı yüklendiğini değerlendirmek için Hız İndeksi gibi metrikleri kullanıyoruz. Hız İndeksi, sayfanın görsel olarak tamamlanmayan alanını ölçer. Bu, aralıklarla alınan birkaç ekran görüntüsünde yapılır. Sayı ne kadar düşükse o kadar iyidir.

Aşamalı görüntü yükleme teknikleri hakkında düşünürsek, görüntü yüklendikçe Hız İndeksi nasıl değişecek? Düşük kaliteli bir yer tutucu kullanırsak, bu alan "görsel olarak tamamlanmış" olarak kabul edilecek mi?

Başlangıçta Hız İndeksi, her bir ana renk (kırmızı, yeşil, mavi) için bir tane olacak şekilde histogramların mesafesini karşılaştıran ilerlemeyi ölçtü. Buna Ortalama Histogram Farkı denir. Amaç, sayfadaki tüm öğelerin birkaç piksel kaydırıldığı yeniden akışlar gibi değişikliklerin hesaplama üzerinde büyük bir etkisi olmasını önlemektir. Algoritma hakkında daha fazla bilgi için Hız İndeksi belgesinin Görsel İlerlemeyi Ölçme bölümünü okuyun.

Webpagetest'i düşük kaliteli yer tutucular gösteren bir sayfada denemeye karar verdim (WebPageTest raporuna bakın):

Saniye 8 ile 10 arasında görüntünün yüklendiğini fark edebiliriz. Bulanık yer tutucu, görsel eksiksizlik yüzdesini %75'ten %83'e çıkarır. Son görüntüyü yüklemek, onu %83'ten %93'e çıkarır.

Bir yer tutucunun, Hız İndeksi tarafından ölçülen sayfanın görsel bütünlüğüne katkıda bulunduğunu görüyoruz. Ayrıca yer tutucunun tamamen görsel olarak tamamlanmış bir alan olarak sayılmadığını da gözlemleyebiliriz.

Sayfamızın ne kadar hızlı işlendiğini ölçmek için kullanabileceğimiz tek ölçüm Hız İndeksi değildir. Chrome Geliştirici Araçları, Performans denetimi yapma seçeneği içerir. Audits → Denetim Perform an audit → Check 'Performance' → Run audit seçeneğine gidin.

Bir denetim çalıştırmak şuna benzer bir rapor oluşturur:

Raporlanan metriklerden biri “Algısal Hız İndeksi”. Bu çalıştırmada değer 4,245 . Ama bu terim tam olarak ne anlama geliyor? Webpagetest'in “Hız Endeksi” ile aynı mı?

Hız İndeksi'nin “Ortalama Histogram Farkı” olarak da adlandırılan piksel bazında benzerliği ölçme yaklaşımının bazı dezavantajları vardır. MHD, şekil, renk veya nesne benzerliğine ilişkin görsel algıyı yakalamaz.

Çoğu durumda, görsel bir bütünlük değerlendirmesi çalıştırırken bu büyük bir fark yaratmaz. Pratikte Hız İndeksi ile Algısal Hız İndeksi arasında yüksek bir korelasyon vardır:

"Yaptığımız büyük ölçekli ampirik çalışmalarda (WebPagetest aracılığıyla toplanan 500'den fazla Alexa en iyi mobil web sayfası videosunu kullanarak), SI ve PSI'nin doğrusal olarak ilişkili olduğunu (kesin olarak 0.91'de) bulduk." — Katlamanın Üstü Web Performansını Ölçmek için Algısal Hız Endeksi (PSI)

Algısal Hız İndeksi

Google'ın Lighthouse belgelerine göre Algısal Hız İndeksi, Speedline adlı bir düğüm modülü kullanılarak hesaplanır. Bu paket, orijinal hız endeksiyle aynı prensibe dayalı olarak algısal hız endeksini hesaplar, ancak histogram mesafesi yerine SSIM'yi kullanarak kareler arasındaki görsel ilerlemeyi hesaplar .

SSIM (Yapısal Benzerlik), iki görüntü arasındaki benzerliği ölçmek için kullanılır. Bu yöntem, insanların görüntüleri nasıl algıladığını modellemeye çalışır ve şekil, renk ve nesne benzerliğini yakalar. SSIM'in başka ilginç uygulamaları da vardır: Bunlardan biri, en yüksek JPEG sıkıştırma seviyesini seçen ve yeterince yakın bir SSIM'e sahip bir görüntü oluşturan cjpeg-dssim gibi görüntü sıkıştırma ayarlarını optimize etmektir.

Aşağıda, Primitive kullanılarak oluşturulan SVG görüntüleri için Image SSIM JS puanlarını görebilirsiniz. Ne kadar çok şekil kullanırsak, orijinal görüntüye o kadar yakın olur (SSIM = 1).

SSIM'e daha yeni alternatifler, butteraugli (Google'ın Perceptually Guided JPEG Encoder'ı olan Guetzli tarafından kullanılır) ve SSIMULACRA (Cloudinary tarafından kullanılır).

Çözüm

Bir kullanıcının zaman içinde yüklenen bir resim algısını sentezlemenin basit bir yolu yoktur. Bazı kullanıcılar aynı fikirde olmasa da, nihai içerik olmasa bile, daha önce göstermenin daha iyi olduğu hissiyle hareket ediyoruz.

Geliştiriciler olarak performansı ölçmemiz gerekiyor . Onu iyileştirmek için hedefler belirlememizin ve bir performans bütçesini ne zaman karşılayamadığımızı bilmemizin tek yolu budur. Aşamalı görüntü yükleme üzerine bahis oynamanın avantajı, bunu kullanıcının algısına dayalı araçlarla ölçebilmemizdir. Bize bir puan veriyorlar, tekrarlanabilir ve ölçeklenebilirler. İş akışımıza ve araçlarımıza uyuyorlar ve burada kalacaklar.

Web geliştiricileri olarak, oluşturduğumuz web sitelerinin yükleme deneyimine daha fazla önem vermeliyiz. Aşamalı görüntü yükleme tekniklerini kullanmanın etkisini kolayca ölçmemize yardımcı olabilecek WebPageTest ve Lighthouse gibi araçlara sahip olmamız harika. Daha fazla bahane yok!