Sık Sorulan Sorular

WebP nedir? Neden kullanmalıyım?

WebP, web'de bulunan çok çeşitli fotoğrafik, yarı saydam ve grafik resimlerde kullanılabilen kayıplı ve kayıpsız sıkıştırma yöntemidir. Kayıplı sıkıştırma derecesi ayarlanabilir. Böylece kullanıcı, dosya boyutu ve görüntü kalitesi arasında bir denge kurabilir. WebP, genellikle JPEG ve JPEG 2000'e kıyasla ortalama% 30 daha fazla sıkıştırma sağlar ve görüntü kalitesinde kayıp olmaz (bkz. Karşılaştırmalı Çalışma).

WebP biçimi, web'in daha hızlı olmasına yardımcı olabilecek daha küçük ve daha iyi görünümlü resimler oluşturmayı amaçlar.

Hangi web tarayıcıları WebP'yi yerel olarak destekler?

Site performansını artırmak isteyen web yöneticileri, mevcut resimleri için kolayca optimize edilmiş WebP alternatifleri oluşturabilir ve bunları WebP'yi destekleyen tarayıcılara hedefli olarak sunabilir.

  • WebP kayıplı desteği
    • Google Chrome (masaüstü) 17 veya daha yeni sürümler
    • Android için Google Chrome 25 veya sonraki sürümler
    • Microsoft Edge 18+
    • Firefox 65 veya üst sürümleri
    • Opera 11.10+
    • Yerel web tarayıcısı, Android 4.0+ (ICS)
    • Safari 14 ve sonraki sürümler (iOS 14 ve sonraki sürümler, macOS Big Sur ve sonraki sürümler)
  • WebP kayıplı, kayıpsız ve alfa desteği
    • Google Chrome (masaüstü) 23 veya sonraki sürümler
    • Android için Google Chrome 25 veya sonraki sürümler
    • Microsoft Edge 18+
    • Firefox 65 veya üst sürümleri
    • Opera 12.10 ve sonraki sürümler
    • Yerel web tarayıcısı, Android 4.2+ (JB-MR1)
    • Pale Moon 26 veya daha yeni sürümler
    • Safari 14 ve sonraki sürümler (iOS 14 ve sonraki sürümler, macOS Big Sur ve sonraki sürümler)
  • WebP animasyon desteği
    • Google Chrome (masaüstü ve Android) 32 veya daha yeni bir sürüm
    • Microsoft Edge 18+
    • Firefox 65 veya üst sürümleri
    • Opera 19+
    • Safari 14 ve sonraki sürümler (iOS 14 ve sonraki sürümler, macOS Big Sur ve sonraki sürümler)

Şuna da bakabilirsiniz:

WebP için tarayıcı desteğini nasıl algılayabilirim?

WebP resimlerini yalnızca bunları düzgün şekilde görüntüleyebilen istemcilere sunmak ve görüntüleyemeyen istemciler için eski biçimlere geri dönmek isteyebilirsiniz. Neyse ki hem istemci tarafında hem de sunucu tarafında WebP desteğini tespit etmek için çeşitli teknikler vardır. Bazı CDN sağlayıcılar, hizmetlerinin bir parçası olarak WebP desteği algılama özelliği sunar.

Kabul üstbilgileri aracılığıyla sunucu tarafında içerik anlaşması

Web istemcilerinin, yanıtta hangi içerik biçimlerini kabul etmeye hazır olduklarını belirten bir "Accept" istek başlığı göndermesi yaygın bir durumdur. Bir tarayıcı, image/webp biçimini "kabul edeceğini" önceden belirtirse web sunucusu, WebP resimlerini güvenli bir şekilde gönderebileceğini bilir ve içerik anlaşmasını büyük ölçüde basitleştirir. Daha fazla bilgi için aşağıdaki bağlantılara bakın.

Modernizr

Modernizr, web tarayıcılarında HTML5 ve CSS3 özellik desteğini kolayca algılamak için kullanılan bir JavaScript kitaplığıdır. Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha ve Modernizr.webp.animation özelliklerini bulun.

HTML5 <picture> öğesi

HTML5, <picture> öğesini destekler. Bu öğe, birden fazla alternatif resim hedefini öncelik sırasına göre listelemenize olanak tanır. Böylece istemci, düzgün şekilde görüntüleyebileceği ilk aday resmi ister. HTML5 Rocks'taki bu tartışmaya göz atın. <picture> öğesi, her zaman daha fazla tarayıcı tarafından desteklenir.

Kendi JavaScript'inizde

Başka bir algılama yöntemi de belirli bir özelliği kullanan çok küçük bir WebP resmini kod çözmeye çalışmak ve başarılı olup olmadığını kontrol etmektir. Örnek:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Resim yüklemenin engelleyici olmayan ve eşzamansız bir işlem olduğunu unutmayın. Bu nedenle, WebP desteğine bağlı olan tüm kodlar tercihen geri çağırma işlevine yerleştirilmelidir.

Google neden WebP'yi açık kaynak olarak yayınladı?

Açık kaynak modelinin önemine yürekten inanıyoruz. WebP açık kaynaklı olduğundan herkes bu biçimle çalışabilir ve iyileştirme önerilerinde bulunabilir. Geri bildirimleriniz ve önerilerinizle WebP'nin zaman içinde grafik biçimi olarak daha da kullanışlı hale geleceğine inanıyoruz.

Kişisel resim dosyalarımı nasıl WebP'ye dönüştürebilirim?

Kişisel resim dosyalarınızı WebP biçimine dönüştürmek için WebP komut satırı yardımcı programını kullanabilirsiniz. Daha fazla bilgi için WebP'yi kullanma bölümüne bakın.

Dönüştürülecek çok sayıda resminiz varsa işlemi basitleştirmek için platformunuzun kabuğunu kullanabilirsiniz. Örneğin, bir klasördeki tüm jpeg dosyalarını dönüştürmek için aşağıdakileri deneyin:

Windows:

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

WebP görüntü kalitesini nasıl değerlendirebilirim?

Şu anda WebP dosyalarını kayıpsız sıkıştırma kullanan ortak bir biçime (ör. PNG) dönüştürerek ve ardından PNG dosyalarını herhangi bir tarayıcıda veya resim görüntüleyicide görüntüleyerek inceleyebilirsiniz. WebP kalitesi hakkında hızlı bir fikir edinmek için bu sitedeki Galeri bölümünde yan yana fotoğraf karşılaştırmalarına göz atın.

Kaynak kodunu nasıl alabilirim?

Dönüştürücü kodu, WebP açık kaynak projesi sayfasının indirmeler bölümünde mevcuttur. Basit kod çözücü ve VP8 spesifikasyonunun kodu WebM sitesinde yer alır. Kapsayıcı spesifikasyonu için RIFF Kapsayıcısı sayfasına bakın.

WebP resimlerinin maksimum boyutu nedir?

WebP, VP8 ile bit akışı uyumludur ve genişlik ile yükseklik için 14 bit kullanır. WebP resimlerinin maksimum piksel boyutları 16383 x 16383'tür.

WebP biçimi hangi renk uzaylarını destekler?

VP8 bit akışıyla tutarlı olarak kayıplı WebP yalnızca 8 bit Y'CbCr 4:2:0 (genellikle YUV420 olarak adlandırılır) görüntü biçimiyle çalışır. Daha ayrıntılı bilgi için lütfen RFC 6386, VP8 Veri Biçimi ve Kod Çözme Kılavuzu'nun Bölüm 2, "Biçime Genel Bakış" bölümüne bakın.

Kayıpsız WebP yalnızca RGBA biçimiyle çalışır. WebP Lossless Bitstream spesifikasyonunu inceleyin.

Kayıpsız WebP dosyam neden orijinalinden farklı?

Simple Encoding API işlevleri (WebPEncodeLosslessRGB(), WebPEncodeLosslessBGR(), WebPEncodeLosslessRGBA(), WebPEncodeLosslessBGRA()), kitaplığın varsayılan ayarlarını kullanır. Kayıpsız için bu, "tam"ın devre dışı bırakıldığı anlamına gelir. Tamamen şeffaf alanlardaki (yani alfa değerleri 0 olan alanlar) RGB değerleri, sıkıştırmayı iyileştirmek için değiştirilir. Bunu önlemek için WebPEncode() kullanın ve WebPConfig::exact değerini 1 olarak ayarlayın. Advanced Encoding API belgelerine göz atın.

WebP resmi, kaynak resminden daha büyük olabilir mi?

Evet, genellikle kayıplı bir biçimden kayıpsız WebP'ye veya tam tersi yönde dönüştürme yaparken. Bu durumun temel nedeni, renk alanı farkı (YUV420 ve ARGB) ve bunlar arasındaki dönüşümdür.

Üç tipik durum vardır:

  1. Kaynak resim kayıpsız ARGB biçimindeyse YUV420'ye mekansal alt örnekleme, orijinal renklerden daha zor sıkıştırılan yeni renkler ortaya çıkarır. Bu durum genellikle kaynak az renkli PNG biçimindeyken ortaya çıkabilir: Kayıplı WebP'ye (veya benzer şekilde kayıplı JPEG'ye) dönüştürme işlemi, dosya boyutunun büyümesine neden olabilir.
  2. Kaynak kayıplı biçimdeyse kaynağın kayıplı yapısını yakalamak için kayıpsız WebP sıkıştırması kullanmak genellikle daha büyük bir dosya oluşturur. Bu durum WebP'ye özgü değildir ve örneğin, bir JPEG kaynağını kayıpsız WebP veya PNG biçimlerine dönüştürürken ortaya çıkabilir.
  3. Kaynak, kayıplı biçimdeyse ve daha yüksek kalite ayarıyla kayıplı WebP olarak sıkıştırmaya çalışıyorsanız. Örneğin, 80 kalitesinde kaydedilmiş bir JPEG dosyasını 95 kalitesinde bir WebP dosyasına dönüştürmeye çalışmak, her iki biçim de kayıplı olsa bile genellikle daha büyük bir dosya oluşturur. Kaynağın kalitesini değerlendirmek genellikle mümkün değildir. Bu nedenle, dosya boyutu sürekli olarak daha büyükse hedef WebP kalitesini düşürmeniz önerilir. Bir diğer olasılık da kalite ayarını kullanmaktan kaçınmak ve bunun yerine cwebp aracındaki -size seçeneğini veya eşdeğer API'yi kullanarak belirli bir dosya boyutunu hedeflemektir. Örneğin, orijinal dosya boyutunun% 80'ini hedeflemek daha sağlam bir yaklaşım olabilir.

JPEG kaynağını kayıplı WebP'ye veya PNG kaynağını kayıpsız WebP'ye dönüştürmenin bu tür dosya boyutu sürprizlerine yol açmadığını unutmayın.

WebP, progresif veya aralıklı görüntülemeyi destekliyor mu?

WebP, JPEG veya PNG anlamında aşamalı ya da iç içe geçmeli kod çözme yenileme özelliği sunmaz. Her yenileme etkinliği, sıkıştırmayı açma sisteminde tam bir geçiş içerdiğinden bu durum, kod çözme istemcisinin CPU'su ve belleği üzerinde çok fazla baskı oluşturabilir.

Aşamalı bir JPEG görüntüsünün kodu çözülürken ortalama olarak temel görüntünün kodu 3 kez çözülür.

Alternatif olarak WebP, artımlı kod çözme sunar. Bu yöntemde, bit akışının mevcut tüm gelen baytları, mümkün olan en kısa sürede görüntülenebilir bir örnek satır oluşturmak için kullanılır. Bu sayede hem istemcide bellek, CPU ve yeniden çizme çabası tasarruf edilir hem de indirme durumu hakkında görsel ipuçları sağlanır. Artımlı kod çözme özelliği, Advanced Decoding API aracılığıyla kullanılabilir.

Android projemde libwebp Java bağlamalarını nasıl kullanırım?

WebP, swig/ dizinindeki basit kodlayıcı ve kod çözücü arayüzlerine yönelik JNI bağlamaları için destek içerir.

Kitaplığı Eclipse'te oluşturma:

  1. NDK araçlarıyla birlikte ADT eklentisinin yüklendiğinden ve NDK yolunuzun doğru şekilde ayarlandığından emin olun (Tercihler > Android > NDK).
  2. Yeni bir proje oluşturun: File (Dosya) > New (Yeni) > Project (Proje) > Android Application Project (Android Uygulama Projesi).
  3. Yeni projede Clone (Klonla) seçeneğini kullanın veya libwebp'yi jni adlı bir klasöre açın.
  4. swig/libwebp_java_wrap.c uygulamasını LOCAL_SRC_FILES listesine ekleyin.
  5. Yeni projeyi sağ tıklayın ve kitaplığı derlemenize dahil etmek için Android Araçları > Yerel Destek Ekle ...'yi seçin.

  6. Proje özelliklerini açın ve C/C++ Build > Behaviour'a (Davranış) gidin. libwebp'yi paylaşılan kitaplık olarak oluşturmak için ENABLE_SHARED=1 öğesini Build (Incremental build) bölümüne ekleyin.

    Not: NDK_TOOLCHAIN_VERSION=4.8 ayarı genellikle 32 bit derleme performansını artırır.

  7. swig/libwebp.jar dosyasını libs/ proje klasörüne ekleyin.

  8. Projenizi oluşturun. Bu işlem libs/<target-arch>/libwebp.so oluşturur.

  9. Kitaplığı çalışma zamanında yüklemek için System.loadLibrary("webp") öğesini kullanın.

Kitaplığın ndk-build ve dahil edilen Android.mk ile manuel olarak oluşturulabileceğini unutmayın. Yukarıda açıklanan adımların bazıları bu durumda yeniden kullanılabilir.

libwebp'yi C# ile nasıl kullanırım?

WebP, libwebp API'yi dışa aktaran bir DLL olarak oluşturulabilir. Bu işlevler daha sonra C# diline aktarılabilir.

  1. libwebp.dll dosyasını oluşturun. Bu işlem, API işlevlerini dışa aktarmak için WEBP_EXTERN'i doğru şekilde ayarlar.

    libwebp> nmake /f Makefile.vc CFG=release-dynamic

  2. Projenize libwebp.dll dosyasını ekleyin ve istediğiniz işlevleri içe aktarın. Basit API'yi kullanıyorsanız döndürülen arabellekleri boşaltmak için WebPFree() işlevini çağırmanız gerektiğini unutmayın.

    [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                 float quality_factor, out IntPtr output);
[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPFree(IntPtr p);

void Encode() {
  Bitmap source = new Bitmap("input.png");
  BitmapData data = source.LockBits(
      new Rectangle(0, 0, source.Width, source.Height),
      ImageLockMode.ReadOnly,
      PixelFormat.Format32bppArgb);
  IntPtr webp_data;
  const int size = WebPEncodeBGRA(data.Scan0,
                                  source.Width, source.Height, data.Stride,
                                  80, out webp_data);
  // ...
  WebPFree(webp_data);
}

Neden animasyonlu WebP kullanmalıyım?

Animasyonlu WebP'nin animasyonlu GIF'e kıyasla avantajları

  1. WebP, GIF'in 8 bit renk ve 1 bit alfa değerine kıyasla 8 bit alfa kanalıyla 24 bit RGB rengini destekler.

  2. WebP hem kayıplı hem de kayıpsız sıkıştırmayı destekler. Hatta tek bir animasyon, kayıplı ve kayıpsız kareleri birleştirebilir. GIF yalnızca kayıpsız sıkıştırmayı destekler. WebP'nin kayıplı sıkıştırma teknikleri, gerçek dünya videolarından oluşturulan animasyonlu resimler için uygundur. Bu tür resimler, animasyonlu resimlerin giderek daha popüler bir kaynağıdır.

  3. WebP, GIF'ten daha az bayt gerektirir1. Kayıplı WebP'ye dönüştürülen animasyonlu GIF'ler% 64 daha küçükken kayıpsız WebP'ler% 19 daha küçüktür. Bu durum özellikle mobil ağlarda önemlidir.

  4. WebP, arama işlemi sırasında daha kısa sürede kod çözülür. Blink'te, kaydırma veya sekmeleri değiştirme işlemleri resimleri gizleyip gösterebilir. Bu durum, animasyonların duraklatılmasına ve ardından farklı bir noktaya atlanmasına neden olur. Animasyonlarda karelerin düşmesine neden olan aşırı CPU kullanımı, kod çözücünün animasyonda ileriye doğru arama yapmasını da gerektirebilir. Bu senaryolarda, animasyonlu WebP, GIF'e kıyasla 0,57 kat daha fazla toplam kod çözme süresi2 gerektirir.Bu da kaydırma sırasında daha az takılmaya ve CPU kullanımındaki ani artışlardan daha hızlı kurtulmaya yol açar. Bunun nedeni, WebP'nin GIF'e kıyasla iki avantajı olmasıdır:

    • WebP resimlerinde, her karenin alfa içerip içermediğiyle ilgili meta veriler depolanır. Bu sayede, bu belirlemeyi yapmak için karenin kodunun çözülmesi gerekmez. Bu sayede, belirli bir karenin hangi önceki karelere bağlı olduğu daha doğru şekilde çıkarımlanır ve önceki karelerin gereksiz yere kod çözme işlemi azaltılır.

    • Modern bir video kodlayıcıya benzer şekilde, WebP kodlayıcı, düzenli aralıklarla sezgisel olarak anahtar kareler ekler (bu, çoğu GIF kodlayıcının yapmadığı bir işlemdir). Bu, uzun animasyonlarda arama işlemini önemli ölçüde iyileştirir. WebP, bu tür karelerin resim boyutunu önemli ölçüde artırmadan eklenmesini kolaylaştırmak için GIF'in kullandığı kare silme yöntemine ek olarak her kare için bir "karıştırma yöntemi" işareti ekler. Bu, önceki karenin tam boyutlu olması zorunlu kılınmadan, tüm görüntü arka plan rengine temizlenmiş gibi bir anahtar karenin çizilmesine olanak tanır.

Animasyonlu WebP'nin animasyonlu GIF'e kıyasla dezavantajları

  1. Arama yapılmadığında WebP'nin doğrusal kod çözme işlemi, GIF'e kıyasla daha fazla CPU yoğunluğu gerektirir. Kayıplı WebP, GIF'e kıyasla 2,2 kat daha fazla kod çözme süresi gerektirirken kayıpsız WebP, 1,5 kat daha fazla süre gerektirir.

  2. WebP desteği, neredeyse evrensel olan GIF desteği kadar yaygın değildir.

  3. Tarayıcılara WebP desteği eklemek, kod ayak izini ve saldırı yüzeyini artırır. Blink'te bu, yaklaşık 1.500 ek kod satırı (WebP demux kitaplığı ve Blink tarafındaki WebP resim kod çözücüsü dahil) anlamına gelir. WebP ve WebM daha fazla ortak kod çözme kodu paylaşırsa veya WebP'nin özellikleri WebM'nin özelliklerine dahil edilirse bu sorunun gelecekte azalabileceğini unutmayın.

Neden <img>'de WebM'yi desteklemiyorsunuz?

Uzun vadede <img> etiketi içindeki video biçimlerini desteklemek mantıklı olabilir. Ancak <img> içindeki WebM'nin, animasyonlu WebP'nin önerilen rolünü doldurması amacıyla bunu yapmak sorunludur:

  1. Önceki çerçevelere dayanan bir çerçeve çözülürken WebM, minimum sayıda önceki çerçeveyi tutmak için animasyonlu WebP'den% 50 daha fazla bellek gerektirir3.

  2. Video codec'i ve kapsayıcı desteği, tarayıcılar ve cihazlar arasında büyük farklılıklar gösterir. Otomatik içerik dönüştürmeyi kolaylaştırmak için (ör. bant genişliğinden tasarruf sağlayan proxy'ler için) tarayıcıların, resim etiketlerinin hangi biçimleri desteklediğini belirten kabul başlıkları eklemesi gerekir. "video/webm" veya "video/mpeg" gibi MIME türleri codec desteğini (ör. VP8 ve VP9) belirtmediğinden bu bile yeterli olmayabilir. Diğer yandan, WebP biçimi etkili bir şekilde dondurulmuştur ve bunu gönderen satıcılar animasyonlu WebP'yi göndermeyi kabul ederse tüm kullanıcı aracıları genelinde WebP'nin davranışı tutarlı olmalıdır. Ayrıca, WebP desteğini belirtmek için "image/webp" kabul başlığı zaten kullanıldığından yeni kabul başlığı değişiklikleri yapılması gerekmez.

  3. Chromium video yığını, sorunsuz oynatma için optimize edilmiştir ve aynı anda yalnızca bir veya iki video oynatıldığını varsayar. Sonuç olarak, oynatma kalitesini en üst düzeye çıkarmak için sistem kaynaklarını (iş parçacıkları, bellek vb.) yoğun bir şekilde kullanır. Bu tür bir uygulama, aynı anda oynatılan çok sayıda videoya iyi ölçeklenmez ve resim ağırlıklı web sayfalarında kullanıma uygun olması için yeniden tasarlanması gerekir.

  4. WebM şu anda WebP'deki tüm sıkıştırma tekniklerini içermemektedir. Sonuç olarak, bu resim, alternatiflerine kıyasla WebP ile çok daha iyi sıkıştırılıyor:

1 Animasyonlu GIF ile animasyonlu WebP arasındaki tüm karşılaştırmalar için web'den rastgele alınmış yaklaşık 7.000 animasyonlu GIF resimden oluşan bir gövde kullandık. Bu resimler, varsayılan ayarlar kullanılarak "gif2webp" aracıyla animasyonlu WebP'ye dönüştürülmüştür (10.08.2013 itibarıyla en son libwebp kaynak ağacından oluşturulmuştur). Karşılaştırmalı sayılar, bu resimlerdeki ortalama değerlerdir.

2 Kod çözme süreleri, 10.08.2013 itibarıyla en yeni libwebp + ToT Blink kullanılarak karşılaştırma aracı ile hesaplanmıştır. "Aramayla kod çözme süresi", "İlk beş karenin kodunu çöz, kare arabellek önbelleğini temizle, sonraki beş karenin kodunu çöz vb." şeklinde hesaplanır.

3 WebM, bellekte 4 YUV referans karesi tutar. Her karede (genişlik+96)*(yükseklik+96) piksel depolanır. YUV 4:2:0 için 6 piksel başına 4 bayt (veya piksel başına 3/2 bayt) gerekir. Bu nedenle, bu referans kareler 4*3/2*(width+96)*(height+96) bayt bellek kullanır. Diğer yandan WebP'nin yalnızca önceki karenin (RGBA olarak) kullanılabilir olması gerekir. Bu da 4*width*height baytlık bir bellek anlamına gelir.

4 Animasyonlu WebP oluşturma için Google Chrome 32 veya sonraki bir sürümü gerekir.