Google olarak, web sayfalarının daha hızlı yüklenmesini sağlayacak yöntemler üzerinde sürekli olarak çalışıyoruz. Bunu yapmanın bir yolu, web resimlerini küçültmektir. Görseller, çoğu web sayfasında baytların %60-65'ini oluşturur ve sayfa boyutu, toplam oluşturma süresinde önemli bir faktördür. Sayfa boyutu, özellikle daha küçük resimlerin hem bant genişliğinden hem de pil ömründen tasarruf sağladığı mobil cihazlar için önemlidir.
WebP, Google tarafından geliştirilen ve Chrome, Opera ile Android'de desteklenen, web'de daha hızlı ve daha küçük resimler sunmak için optimize edilmiş yeni bir resim biçimidir. WebP resimleri, eşdeğer görsel kalitedeki PNG ve JPEG resimlerine kıyasla yaklaşık % 30 daha küçüktür. Ayrıca WebP resim biçimi, diğer biçimlerle de aynı özelliklere sahiptir. Şunları destekler:
Kayıplı sıkıştırma: Kayıplı sıkıştırma, VP8 anahtar kare kodlamasına dayanır. VP8, VP6 ve VP7 biçimlerinin halefi olarak On2 Technologies tarafından oluşturulan bir video sıkıştırma biçimidir.
Kayıpsız sıkıştırma: Kayıpsız sıkıştırma biçimi, WebP ekibi tarafından geliştirilmiştir.
Şeffaflık: 8 bit alfa kanalı, grafik resimler için kullanışlıdır. Alfa kanalı, kayıplı RGB ile birlikte kullanılabilir. Bu özellik şu anda başka hiçbir biçimde kullanılamaz.
Animasyon: Gerçek renkli animasyonlu resimleri destekler.
Meta veriler: EXIF ve XMP meta verileri (ör. kameralar tarafından kullanılır) içerebilir.
Renk Profili: Yerleşik bir ICC profili olabilir.
Resimlerin daha iyi sıkıştırılması ve tüm bu özelliklerin desteklenmesi nedeniyle WebP, PNG, JPEG veya GIF gibi çoğu resim biçiminin mükemmel bir alternatifi olabilir. Daha da iyisi, WebP'nin şeffaflık içeren kayıplı resimler için destek gibi yeni resim optimizasyonu fırsatları sunduğunu biliyor muydunuz? Evet. WebP, resim biçimlerinin İsviçre çakısıdır.
Peki, bu sihir nasıl gerçekleşiyor? Kollarımızı sıvayıp işin içine girelim.
Veri kaybına uğrayan WebP
WebP'nin kayıplı sıkıştırması, kareleri (video) tahmin etmek için VP8 ile aynı metodolojiyi kullanır. VP8, blok öngörme temellidir ve tüm blok tabanlı codec'ler gibi VP8 de kareyi makro blok adı verilen daha küçük segmentlere böler.
Kodlayıcı, her makro blokta daha önce işlenmiş bloklara dayalı olarak gereksiz hareket ve renk bilgilerini tahmin edebilir. Resim çerçevesi, yalnızca makro blokların her birinin yakınındaki uzamsal komşuluğunda kod çözme işlemi uygulanmış pikselleri kullandığı ve bunların bilinmeyen kısmını doldurmaya çalıştığı için "anahtar"dır. Buna tahmini kodlama denir (VP8 videosunun kare içi kodlaması bölümüne bakın).
Gereksiz veriler daha sonra bloktan çıkarılabilir. Bu da daha verimli sıkıştırma sağlar. Geriye kalan tek şey, sıkıştırılmış biçimde aktarılacak küçük bir farktır (kalan).
Matematiksel olarak tersine çevrilebilir bir dönüştürme işlemine (Dijital Kosinüs Dönüşümünün kısaltması olan ünlü DCT) tabi tutulduktan sonra, artık değerler genellikle çok daha etkili bir şekilde sıkıştırılabilen birçok sıfır değeri içerir. Sonuç daha sonra kesirli hale getirilir ve entropi kodlanır. İlginç bir şekilde, bitlerin kayıplı bir şekilde atılacağı tek adım kesme adımıdır (aşağıdaki şemada QPj'ye bölme işlemini arayın). Diğer tüm adımlar geri döndürülebilir ve kayıpsızdır.
Aşağıdaki şemada, WebP kayıplı sıkıştırma işleminde uygulanan adımlar gösterilmektedir. JPEG ile karşılaştırıldığında ayırt edici özellikler kırmızı daire içine alınmıştır.
WebP, blok örnekleme kullanır ve bitleri farklı resim segmentlerine uyarlanabilir şekilde dağıtır: düşük entropi segmentleri için daha az bit, yüksek entropi segmentleri için daha fazla bit. WebP, aritmetik entropi kodlaması kullanır ve JPEG'de kullanılan Huffman kodlamasına kıyasla daha iyi sıkıştırma sağlar.
VP8 İç Tahmin Modları
VP8 dahili tahmin modları üç tür makro blokla kullanılır:
- 4x4 luma
- 16x16 luma
- 8x8 renk perdesi
Bu makro bloklar tarafından paylaşılan dört yaygın dahili tahmin modu vardır:
H_PRED (yatay tahmin). Bloktaki her sütunu sol sütunun (L) bir kopyasıyla doldurur.
V_PRED (dikey tahmin). Bloktaki her satırı, yukarıdaki satırın (A) bir kopyasıyla doldurur.
DC_PRED (DC tahmini). A'nın üzerindeki satırdaki ve L'nin solundaki sütundaki piksellerin ortalamasını kullanarak bloğu tek bir değerle doldurur.
TM_PRED (TrueMotion tahmini). Adını On2 Technologies tarafından geliştirilen bir sıkıştırma tekniğinden alan bir mod. TM_PRED, A satırı ve L sütununa ek olarak bloğun üstündeki ve solundaki P pikseli kullanır. A'daki pikseller arasındaki yatay farklılıklar (P'den başlayarak), her satırı başlatmak için L'deki pikseller kullanılarak yayılır.
Aşağıdaki şemada, WebP kayıplı sıkıştırmasında kullanılan farklı tahmin modları gösterilmektedir.
4x4 luma blokları için V_PRED ve H_PRED'ye benzer ancak farklı yönlerde pikselleri tahmin etmeye karşılık gelen altı ek dahili mod vardır. Bu modlarla ilgili daha fazla bilgiyi VP8 Bitstream Kılavuzu'nda bulabilirsiniz.
Uyarlanabilir Blok Kuantajı
Bir resmin kalitesini iyileştirmek için resim, görünür şekilde benzer özelliklere sahip alanlara bölünür. Bu segmentlerin her biri için sıkıştırma parametreleri (ör. kesme adımları, filtreleme gücü) bağımsız olarak ayarlanır. Bu sayede bitler en yararlı oldukları yere yeniden dağıtılarak verimli sıkıştırma elde edilir. VP8, en fazla dört segmente izin verir (VP8 bit akışının bir sınırlaması).
WebP (kayıplı) neden JPEG'den daha iyidir?
Tahmin kodlaması, WebP'nin JPEG'e karşı kazanmasının başlıca nedenlerinden biridir. Uyarlanabilir blok örnekleme de büyük fark yaratır. Filtreleme, orta/düşük bit hızlarında yardımcı olur. Boole aritmetik kodlaması, Huffman kodlamasına kıyasla %5-10 oranında sıkıştırma kazancı sağlar.
Kayıpsız WebP
WebP kayıpsız kodlaması, resmi çeşitli teknikler kullanarak dönüştürmeye dayanır. Ardından, dönüşüm parametreleri ve dönüştürülmüş resim verileri üzerinde entropi kodlaması yapılır. Resme uygulanan dönüştürme işlemleri arasında piksellerin uzamsal tahmini, renk alanı dönüştürme, yerel olarak ortaya çıkan paletlerin kullanılması, birden fazla pikseli tek bir piksele sığdırma ve alfa değiştirme yer alır. Entropi kodlaması için, mesafe değerlerinin ve kompakt seyrek değerlerinin 2D kodlamasını kullanan LZ77-Huffman kodlamasının bir varyantını kullanırız.
Tahmine Dayalı (Uzamsal) Dönüşüm
Mekansal tahmin, komşu piksellerin genellikle ilişkili olması gerçeğinden yararlanarak entropi azaltmak için kullanılır. Tahminci dönüştürme işleminde, mevcut piksel değeri, kod çözme işlemi uygulanmış piksellerden tahmin edilir (tarama satırı sırasına göre) ve yalnızca artık değer (gerçek - tahmin edilen) kodlanır. Tahmin modu, kullanılacak tahmin türünü belirler. Resim birden fazla kare bölgeye bölünür ve bir karedeki tüm pikseller aynı tahmin modunu kullanır.
13 farklı olası tahmin modu vardır. En yaygın olanlar sol, üst, sol üst ve sağ üst piksellerdir. Geri kalanlar ise sol, üst, sol üst ve sağ üst değerlerinin kombinasyonlarıdır (ortalamaları).
Renk (korelasyon giderme) dönüşümü
Renk dönüştürme işleminin amacı, her pikselin R, G ve B değerlerinin korelasyonunu kaldırmaktır. Renk dönüştürme, yeşil (G) değerini olduğu gibi tutar, kırmızıyı (R) yeşile göre, maviyi (B) ise yeşile ve ardından kırmızıya göre dönüştürür.
Tahminci dönüştürme işleminde olduğu gibi, önce görüntü bloklara bölünür ve bir bloktaki tüm pikseller için aynı dönüştürme modu kullanılır. Her blok için üç tür renk dönüştürme öğesi vardır: green_to_red, green_to_blue ve red_to_blue.
Yeşil Dönüşüm'ü Çıkarma
"Yeşili çıkarma dönüşümü", her pikselin kırmızı ve mavi değerlerinden yeşil değerleri çıkarır. Bu dönüştürme işlemi mevcut olduğunda, kod çözücünün yeşil değeri hem kırmızıya hem de maviye eklemesi gerekir. Bu, yukarıdaki genel renk dekorelasyon dönüşümünün özel bir durumudur ve kesme noktasını gerektirecek kadar sık görülür.
Renk dizine ekleme (paletter) dönüştürme
Çok fazla benzersiz piksel değeri yoksa bir renk dizini dizisi oluşturmak ve piksel değerlerini dizinin dizinleriyle değiştirmek daha verimli olabilir. Renk dizine ekleme dönüşümü bunu sağlar. Renk dizine ekleme dönüşümü, resimdeki benzersiz ARGB değerlerinin sayısını kontrol eder. Bu sayı bir eşiğin (256) altındaysa bu ARGB değerlerinin bir dizisi oluşturulur ve daha sonra piksel değerlerini ilgili dizinle değiştirmek için kullanılır.
Renk Önbelleği Kodlaması
Kayıpsız WebP sıkıştırması, yeni pikselleri yeniden oluşturmak için daha önce görmüş olduğunuz resim parçalarını kullanır. İlginç bir eşleşme bulunamazsa yerel bir palet de kullanılabilir. Bu palet, son kullanılan renklerin yeniden kullanılabilmesi için sürekli olarak güncellenir. Aşağıdaki resimde, tarama aşağı doğru ilerlerken yerel renk önbelleği işlevini görürsünüz. Bu işlev, en son kullanılan 32 renkle kademeli olarak güncellenir.
LZ77 Geriye Dönük Referansı
Geriye dönük referanslar, uzunluk ve mesafe kodundan oluşan tuple'lerdir. Uzunluk, tarama satırı sırasına göre kaç pikselin kopyalanacağını belirtir. Mesafe kodu, daha önce görülen bir pikselin konumunu belirten ve piksellerin kopyalanacağı bir sayıdır. Uzunluk ve mesafe değerleri, LZ77 ön ek kodlaması kullanılarak depolanır.
LZ77 ön ek kodlaması, büyük tam sayı değerlerini iki bölüme ayırır: ön ek kodu ve ek bitler. Önek kodu bir entropi kodu kullanılarak depolanırken ek bitler olduğu gibi (entropi kodu olmadan) depolanır.
Aşağıdaki diyagramda, LZ77 (2D varyantı) kelime eşleştirmeyle (piksel yerine) gösterilmektedir.
Alfa içeren kayıplı WebP
Kayıplı WebP (RGB renkleri) ve kayıpsız WebP'e (alfa içeren kayıpsız RGB) ek olarak, RGB kanalları için kayıplı kodlamaya ve alfa kanalı için kayıpsız kodlamaya izin veren başka bir WebP modu da vardır. Bu tür bir olasılık (kaybedilen RGB ve kayıpsız alfa) mevcut resim biçimlerinden hiçbirinde kullanılamamaktadır. Günümüzde şeffaflığa ihtiyaç duyan web yöneticileri, resimleri PNG biçiminde kayıpsız olarak kodlamak zorundadır. Bu da önemli ölçüde boyut artışı yaşanmasına neden olur. WebP alfa, resimleri piksel başına düşük bit sayısıyla kodlar ve bu tür resimlerin boyutunu küçültmenin etkili bir yolunu sunar. Alfa kanalının kayıpsız sıkıştırması, kayıplı (kalite 90) WebP kodlamasına kıyasla yalnızca % 22 bayt ekler.
Şeffaf PNG'nin kayıplı+alfa WebP ile değiştirilmesi, ortalama olarak %60-70 oranında boyut tasarrufu sağlar. Bu, simge açısından zengin mobil siteler (ör. everything.me) için kullanıcıların ilgisini çeken harika bir özellik olarak onaylanmıştır.
