Google'da sürekli olarak web sayfalarının daha hızlı yüklenmesini sağlamanın yollarını arıyoruz. Bunu yapmanın bir yolu web görsellerini küçültmektir. Resimler, çoğu web sayfasında baytların %60-%65'ini oluşturur. Sayfa boyutu, toplam oluşturma süresini önemli ölçüde etkileyen bir faktördür. Sayfa boyutu, küçük resimlerin hem bant genişliğinden hem de pil ömründen tasarruf sağladığı mobil cihazlar için özellikle önemlidir.

WebP, Google tarafından geliştirilen ve Chrome, Opera ve Android'de desteklenen yeni bir resim biçimidir. Bu biçim, web'de daha hızlı ve daha küçük boyutlu görsellerin kullanılabilmesi için optimize edilmiştir. WebP resimlerinin boyutu, 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 benzer özelliklere sahiptir. Şunları destekler:

• Kayıplı sıkıştırma: Kayıplı sıkıştırma, VP8 anahtar kare kodlamasına dayanır. VP8, On2 Technologies tarafından VP6 ve VP7 biçimlerinin yerini alacak 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 yararlıdır. Alfa kanalı, kayıplı RGB ile birlikte kullanılabilir. Bu özellik şu anda başka hiçbir biçimde kullanılamıyor.

• Animasyon: Gerçek renkli animasyonlu resimleri destekler.

• Meta veri: EXIF ve XMP meta verileri (örneğin, kameralar tarafından kullanılır) içerebilir.

• Renk Profili: Yerleştirilmiş bir ICC profili olabilir.

Resimlerin daha iyi sıkıştırılması ve tüm bu özelliklerin desteklenmesi nedeniyle WebP, çoğu resim biçimi (PNG, JPEG veya GIF) için mükemmel bir alternatif olabilir. Daha da iyisi, WebP'nin şeffaflıkla kayıplı resimleri desteklemek gibi yeni görsel optimizasyonu fırsatları sağladığını biliyor muydunuz? Evet. WebP, resim biçimlerinin İsviçre ordu bıçağıdır.

Peki, bu sihir nasıl yapılır? Giysilerin kolları sıvayıp kavisli altına bakalım.

Kayıplı WebP

WebP'nin kayıplı sıkıştırması, video karelerini tahmin etmek için VP8 ile aynı yöntemi kullanır. VP8, engelleme tahminine dayanır ve tüm blok tabanlı codec'ler gibi VP8 de çerçeveyi makro bloklar adı verilen daha küçük segmentlere böler.

Her makro blokta, kodlayıcı daha önce işlenmiş bloklara dayanarak gereksiz hareket ve renk bilgilerini tahmin edebilir. Resim çerçevesi yalnızca makro blokların her birinin yakın uzamsal mahallesinde kodu önceden çözülmüş pikselleri kullanması ve bunların bilinmeyen kısmını doldurmaya çalışması bakımından "anahtar"dır. Buna tahmine dayalı kodlama denir (VP8 videosunun kare içi kodlamasını inceleyin).

Böylece gereksiz veriler bloktan çıkarılabilir ve daha verimli bir sıkıştırma elde edilir. Elimizde yalnızca sıkıştırılmış biçimde iletimi sağlamak için artık adı verilen küçük bir fark kalır.

Artıklar, matematiksel olarak ters çevrilebilir bir dönüşüme (Ayrık Kosinüs Dönüşümü anlamına gelen ünlü DCT) tabi tutulduktan sonra genellikle birçok sıfır değeri içerir. Bu değerler çok daha etkili bir şekilde sıkıştırılabilir. Sonuç daha sonra nicelenir ve entropi ile kodlanır. Nicel bir şekilde, bitlerin kayıplı bir şekilde atıldığı tek adım nicelemedir (aşağıdaki diyagramda QPj'ye göre bölme işlemini arayın). Diğer tüm adımlar ters çevrilebilir ve kayıpsızdır.

Aşağıdaki şemada, WebP kayıplı sıkıştırma işlemi uygulama adımları gösterilmektedir. JPEG'den farklı olan özellikler kırmızı renkle daire içine alınmıştır.

WebP, blok nicelemeyi kullanır ve bitleri farklı görüntü segmentlerine uyarlamalı olarak dağıtır. Düşük entropi segmentleri için daha az, yüksek entropi segmentleri için daha yüksek bitler. WebP, Aritmetik entropi kodlaması kullanarak JPEG'de kullanılan Huffman kodlamasına kıyasla daha iyi bir sıkıştırma sağlar.

VP8 Tahmin İçi Modlar

VP8 tahmin içi modları üç tür makro blokla kullanılır:

• 4x4 luma
• 16x16 luma
• 8x8 renk

Bu makro bloklar, yaygın olarak kullanılan dört tahmin içi moda sahiptir:

• H_PRED (yatay tahmin). Bloğun her sütununu sol sütunun bir kopyasıyla (L) doldurur.

• V_PRED (dikey tahmin). Blokun her satırını yukarıdaki satırın bir kopyası olan A ile doldurur.

• DC_PRED (DC tahmini). A'nın üzerindeki satırda ve L'nin solundaki sütunda bulunan 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ünde ve solunda bulunan P pikselini kullanır. A'daki pikseller arasındaki yatay farklılıklar (P'den başlayarak), her bir satırın başlangıcı için L'den gelen pikseller kullanılarak yayılır.

Aşağıdaki şemada, WebP kayıplı sıkıştırmada kullanılan farklı tahmin modları gösterilmektedir.

4x4 luma bloklar için V_PRED ve H_PRED'ye benzeyen, ancak farklı yönlerdeki piksellerin tahmin edilmesine karşılık gelen altı ek içi mod vardır. Bu modlarla ilgili daha fazla bilgiyi VP8 Bit Akış Kılavuzu'nda bulabilirsiniz.

Uyarlanabilir Blok Miktarı Belirleme

Bir resmin kalitesini iyileştirmek için, görsel olarak benzer özelliklere sahip alanlar bölünür. Bu segmentlerin her biri için sıkıştırma parametreleri (nicelleştirme adımları, filtreleme gücü vb.) bağımsız olarak ayarlanır. Bu, bitleri en yararlı oldukları yerlere yeniden dağıtarak etkili bir sıkıştırma sağlar. VP8, en fazla dört segmente izin verir (VP8 bit akışının sınırı).

WebP (kayıplı) neden JPEG'den daha iyidir?

Tahmin kodlaması, WebP'nin JPEG'i kazanmasının ana nedenlerinden biridir. Uyarlanabilir nicelemeyi engelleme de büyük bir fark yaratır. Filtreleme, orta/düşük bit hızlarında yardımcı olur. Boole aritmetik kodlaması, Huffman kodlamasına kıyasla %5-%10 sıkıştırma kazancı sağlar.

Kayıpsız WebP

WebP kayıpsız kodlama, resmin birkaç farklı teknik kullanılarak dönüştürülmesine dayanır. Ardından, dönüştürme parametreleri ve dönüştürülen görüntü verileri üzerinde entropi kodlaması gerçekleştirilir. 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ımı, birden fazla pikseli bir pikselde paketleme ve alfa değiştirme yer alır. Entropi kodlaması için, mesafe değerlerinin ve kompakt seyrek değerlerin 2D kodlamasını kullanan LZ77-Huffman kodlamasının bir varyantını kullanırız.

Tahmin Aracı (Uzamsal) Dönüşüm

Üç boyutlu tahmin, komşu piksellerin genellikle korelasyona sahip olduğu gerçeğinden yararlanarak entropiyi azaltmak için kullanılır. Tahmin aracı dönüşümünde, geçerli piksel değeri, kodu önceden çözülmüş piksellerden tahmin edilir (tarama çizgisi sırasına göre) ve yalnızca artık değer (gerçek - tahmini) kodlanır. Tahmin modu, kullanılacak tahmin türünü belirler. Görüntü birden fazla kare bölgeye bölünmüştü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. Geriye kalanlar sol, üst, sol üst ve sağ üst kombinasyonlarıdır (ortalamaları).

Renk (korelasyon) Dönüşümü

Renk dönüşümünün amacı her bir pikselin R, G ve B değerlerini uygun hale getirmektir. Renk dönüşümü, yeşil (G) değerini olduğu gibi korur, yeşile göre kırmızıya (R) dönüşür ve yeşile göre maviye (B) ve ardından kırmızıya göre maviye (B) dönüşür.

Önleyici dönüşümde 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: yeşil_kırmızı, yeşil_mavi ve kırmızı_mavi.

Yeşili Çıkarma Dönüşümü

"Yeşili çıkarma dönüşümü" işlemi, her pikselin kırmızı ve mavi değerlerinden yeşil değerleri çıkarır. Bu dönüşüm mevcut olduğunda kod çözücünün hem kırmızı hem de maviye yeşil değeri eklemesi gerekir. Bu, yukarıda gösterilen genel renk süsleme dönüşümünün özel bir durumudur ve bir kesimi garanti edecek kadar sıktır.

Renk Dizine Ekleme (paletler) Dönüşümü

Çok sayıda benzersiz piksel değeri yoksa renk dizini dizisi oluşturmak ve piksel değerlerini dizinin dizinleriyle değiştirmek daha verimli olabilir. Bunu, renk dizine ekleme dönüşümüyle gerçekleştirir. 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ğerlerinden bir dizi oluşturur. Daha sonra bu dizi, piksel değerlerini karşılık gelen 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 önceden görülen resim parçalarını kullanır. İlginç bir eşleşme bulunmazsa yerel bir palet de kullanılabilir. Bu palet, son renklerin yeniden kullanılması için sürekli olarak güncellenir. Aşağıdaki resimde, tarama aşağı indikçe yerel renk önbelleğinin, son kullanılan 32 renkle kademeli olarak güncellendiğini görebilirsiniz.

LZ77 Geriye Dönük Referans

Geriye atıflar, uzunluk ve mesafe kodundan oluşan parçalardır. Uzunluk, tarama satırı sırasında kaç pikselin kopyalanacağını belirtir. Mesafe kodu, piksellerin kopyalanacağı önceden görülen bir pikselin konumunu belirten bir sayıdır. Uzunluk ve mesafe değerleri, LZ77 ön ek kodlaması kullanılarak saklanır.

LZ77 ön ek kodlaması, büyük tam sayı değerlerini iki bölüme ayırır: ön ek kodu ve ekstra bitler. Önek kodu bir entropi kodu kullanılarak, ekstra bitler ise (entropi kodu olmadan) oldukları gibi depolanır.

Aşağıdaki şemada, kelime eşleştirmeli (piksel yerine) LZ77 (2D varyant) gösterilmektedir.

Alfa ile Lossy WebP

Kayıplı WebP (RGB renkleri) ve kayıpsız WebP'ye (alfa ile kayıpsız RGB) ek olarak, RGB kanalları için kayıplı kodlama ve alfa kanalı için kayıpsız kodlamaya olanak tanıyan başka bir WebP modu vardır. Böyle bir olasılık (kayıplı RGB ve kayıpsız alfa), günümüzde mevcut resim biçimlerinin hiçbirinde kullanılamıyor. Günümüzde, şeffaflığa ihtiyaç duyan web yöneticileri, resimleri kayıpsız bir şekilde PNG biçiminde kodlamak zorunda kalıyorlar. Bu da boyutun önemli ölçüde büyümesine neden oluyor. WebP alfa, piksel başına düşük bitli resimleri kodlar ve bu tür resimlerin boyutunu küçültmenin etkili bir yolunu sunar. Alfa kanalının kayıpsız sıkıştırılması, kayıplı (kalite 90) WebP kodlamasına kıyasla yalnızca % 22 bayt ekler.

Genel olarak şeffaf PNG'nin kayıplı+alfa WebP ile değiştirilmesi ortalama %60-70 oranında boyut tasarrufu sağlar. Bunun, simge açısından zengin mobil siteler (örneğin everything.me) için mükemmel bir çekici özellik olduğu onaylanmıştır.