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ılabilecek kayıplı ve kayıpsız bir sıkıştırma yöntemidir. Kayıplı sıkıştırma derecesi ayarlanabilir. Böylece kullanıcı, dosya boyutu ve resim kalitesi arasındaki dengeyi seçebilir. WebP, resim kalitesinde kayıp yaşamadan JPEG ve JPEG 2000'e kıyasla genellikle ortalama% 30 daha fazla sıkıştırma sağlar (Karşılaştırmalı Çalışma bölümüne bakın).

WebP biçimi temel olarak web'i hızlandırmaya yardımcı olabilecek daha küçük ve daha iyi görünen resimler oluşturmayı amaçlar.

WebP'yi yerel olarak destekleyen web tarayıcıları hangileridir?

Site performansını iyileştirmek isteyen web yöneticileri, mevcut resimleri için optimize edilmiş WebP alternatiflerini kolayca oluşturabilir ve bunları WebP'yi destekleyen tarayıcılara hedefli bir şekilde sunabilirler.

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

Şuna da bakabilirsiniz:

WebP için tarayıcı desteğini nasıl tespit edebilirim?

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

Kabul başlıkları aracılığıyla sunucu tarafı içerik görüşmesi

Web istemcilerinin, yanıt olarak hangi içerik biçimlerini kabul edeceklerini belirten bir "Kabul Et" 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 bu da içerik anlaşmasını büyük ölçüde basitleştirir. Daha fazla bilgi için aşağıdaki bağlantılara göz atın.

Modernizatör

Modernizr, web tarayıcılarında HTML5 ve CSS3 özellik desteğini kolayca tespit etmenizi sağlayan bir JavaScript kitaplığıdır. Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha ve Modernizr.webp.animation özelliklerini arayın.

HTML5 <picture> öğesi

HTML5, birden çok alternatif resim hedefini öncelik sırasına göre listelemenize olanak tanıyan bir <picture> öğesini destekler. Bu öğe, bir istemcinin düzgün bir şekilde görüntüleyebileceği ilk aday resmi ister. HTML5 Rocks ile ilgili bu tartışmaya bakın. <picture> öğesi, her zaman daha fazla tarayıcı tarafından desteklenir.

Kendi JavaScript'inizde

Diğer bir algılama yöntemi de belirli bir özelliği kullanan çok küçük bir WebP görüntüsünün kodunu çözmeyi deneyerek başarısı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 engellemediğini ve eşzamansız olduğunu unutmayın. Bu, WebP desteğine dayalı tüm kodların tercihen geri çağırma işlevine yerleştirilmesi gerektiği anlamına gelir.

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

Açık kaynak modelin önemine yürekten inanıyoruz. Açık kaynak WebP sayesinde, herkes biçimi kullanarak çalışabilir ve iyileştirme önerebilir. Görüşleriniz ve önerileriniz ile WebP'nin zaman içinde bir grafik biçimi olarak daha da yararlı hale geleceğine inanıyoruz.

Kişisel resim dosyalarımı WebP'ye nasıl 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 ayrıntı için WebP'yi kullanma bölümüne bakın.

Dönüştürülecek çok sayıda görüntünüz 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 resim kalitesini kendim açısından nasıl değerlendirebilirim?

Şu anda WebP dosyalarını, PNG gibi kayıpsız sıkıştırma kullanan yaygın bir biçime dönüştürerek görüntüleyebilir ve ardından PNG dosyalarını herhangi bir tarayıcıda veya resim görüntüleyicide görüntüleyebilirsiniz. WebP kalitesi hakkında hızlıca fikir edinmek amacıyla yan yana fotoğraf karşılaştırmaları için bu sitedeki Galeriye bakın.

Kaynak kodunu nasıl alırım?

Dönüştürücü kodu, WebP açık kaynak proje sayfasının indirmeler bölümünde bulunur. Hafif kod çözücünün kodu ve VP8 spesifikasyonunu WebM sitesinde bulabilirsiniz. Kapsayıcı özellikleri için RIFF Container sayfasına bakın.

Bir WebP resmi en fazla ne boyutta olabilir?

WebP, VP8 ile bit akışıyla uyumludur ve genişlik ile yükseklik için 14 bit kullanır. Bir WebP resminin maksimum piksel boyutu 16383x16383'tür.

WebP biçimi hangi renk alanları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) resim biçimiyle çalışır. Daha ayrıntılı bilgi için lütfen RFC 6386'nın "Biçime Genel Bakış", VP8 Veri Biçimi ve Kod Çözme Kılavuzu'na bakın.

Kayıpsız WebP, yalnızca RGBA biçimiyle çalışır. WebP Kayıpsız Bit Akışı spesifikasyonuna bakın.

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

Evet, genellikle kayıplı bir biçimden WebP'ye kayıpsız bir biçimden veya tam tersi bir biçime dönüştürürken. Bu durum, temel olarak renk alanı farkından (YUV420 ve ARGB) ve bunlar arasındaki dönüşümden kaynaklanır.

Üç tipik durum vardır:

  1. Kaynak resim kayıpsız ARGB biçimindeyse YUV420'ye boyutsal aşağı örnekleme işlemi, orijinal resimlerden daha zor sıkıştırılan yeni renkler sağlar. Bu durum genellikle kaynak birkaç renkte PNG biçiminde olduğunda meydana gelir: Kayıplı WebP'ye (veya kayıplı bir JPEG'ye benzer şekilde) dönüştürmek, potansiyel olarak daha büyük bir dosya boyutuna yol açar.
  2. Kaynak kayıplı biçimdeyse kaynağın kayıplı yapısını yakalamak için kayıpsız WebP sıkıştırması kullanıldığında genellikle daha büyük bir dosya elde edilir. Bu durum WebP'ye özel 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ına sahip kayıplı bir WebP olarak sıkıştırmaya çalışıyorsanız. Örneğin, 80 kalitede kaydedilmiş bir JPEG dosyasını 95 kalitede WebP dosyasına dönüştürmeye çalışmak, her iki biçimde de kayıp olsa bile genellikle daha büyük bir dosyayla sonuçlanır. Kaynağın kalitesini değerlendirmek genellikle imkansızdır. Bu nedenle, dosya boyutu sürekli olarak daha büyükse hedef WebP kalitesinin düşürülmesi önerilir. Diğer bir 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 güvenilir 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 açık olmadığını unutmayın.

WebP, progresif veya aralıklı ekranı destekler mi?

WebP, JPEG veya PNG anlamında progresif veya aralıklı kod çözme yenilemesi sunmaz. Her yenileme etkinliği sıkıştırma sisteminden tam geçiş içerdiğinden, bu durum kod çözme istemcisinin CPU'suna ve belleğine çok fazla baskı uygulanmasına neden olur.

Progresif bir JPEG görüntüsünün kodunu çözmek ortalama olarak referans çizginin kodunu 3 kez çözmekle eşdeğerdir.

Alternatif olarak WebP, artımlı kod çözme özelliği sunar. Bu özellikte, bit akışının mevcut tüm gelen baytları en kısa sürede görüntülenebilir bir örnek satır oluşturmaya çalışmak için kullanılır. Bu şekilde, indirme durumu hakkında görsel ipuçları sağlarken istemcide bellek, CPU ve yeniden boyama çabasından tasarruf edilir. Artımlı kod çözme özelliği Advanced Decoding API aracılığıyla kullanılabilir.

Android projemde libwebp Java bağlamalarını nasıl kullanabilirim?

WebP, swig/ dizinindeki basit kodlayıcı ve kod çözücü arayüzlerine JNI bağlama desteği sunar.

Eclipse'de kitaplığı oluşturma:

  1. NDK araçlarıyla birlikte ADT eklentisini yüklediğinizden ve NDK yolunuzun doğru ayarlandığından emin olun (Tercihler > Android > NDK).
  2. Yeni bir proje oluşturun: Dosya > Yeni > Proje > Android Uygulama Projesi.
  3. Yeni projede libwebp'yi jni adlı bir klasöre klonlayın veya paketi açın.
  4. swig/libwebp_java_wrap.c adlı yeri LOCAL_SRC_FILES listesine ekleyin.
  5. Kitaplığı derlemenize eklemek için yeni projeyi sağ tıklayın ve Android Araçları > Yerel Destek Ekle ... seçeneğini belirleyin.
  6. Proje özelliklerini açın ve C/C++ Derleme > Davranış'a gidin. libwebp'yi paylaşılan bir kitaplık olarak oluşturmak için Build (Incremental build) bölümüne ENABLE_SHARED=1 ekleyin.

    Not NDK_TOOLCHAIN_VERSION=4.8 ayarını yapmak genel olarak 32 bit derleme performansını iyileştirir.

  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. Çalışma zamanında kitaplığı yüklemek için System.loadLibrary("webp") öğesini kullanın.

Kitaplığın ndk-build ve birlikte verilen 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. Daha sonra bu işlevler C#'ta içe aktarılabilir.

  1. libwebp.dll dosyasını oluşturun. Bu işlem, API işlevlerini dışa aktarmak için WEBP_EXTERN düzgün şekilde ayarlanır.

    libwebp> nmake /f Makefile.vc CFG=release-dynamic
    
  2. Projenize libwebp.dll'yi ekleyin ve istediğiniz işlevleri içe aktarın. Basit API'yi kullanıyorsanız döndürülen arabellekleri serbest bırakmak için WebPFree() yöntemini ç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'lere kıyasla avantajları

  1. GIF'in 8 bit rengi ve 1 bit alfasına kıyasla WebP, 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 sadece kayıpsız sıkıştırmayı destekler. WebP'nin kayıplı sıkıştırma teknikleri, giderek popüler olan animasyonlu resim kaynağı olan gerçek dünyadan videolardan oluşturulan animasyonlu resimlere çok uygundur.

  3. WebP, GIF1'e göre daha az bayt gerektirir. Kayıplı WebP'lere dönüştürülen animasyonlu GIF'ler% 64 daha küçüktür. Kayıpsız WebP'ler ise% 19 daha küçüktür. Bu, özellikle mobil ağlarda önemlidir.

  4. WebP'nin sarmalama varken kodu çözmesi daha az zaman alır. Yanıp sönme özelliğinde, sekmeleri kaydırma veya değiştirme işlemi resimleri gizleyebilir ve gösterebilir. Bu da animasyonların duraklatılmasına ve ardından farklı bir noktaya atlanmasına neden olur. Animasyonların karelerinin düşmesine neden olan aşırı CPU kullanımı da kod çözücünün animasyonda ileri sarmasını gerektirebilir. Bu senaryolarda, animasyonlu WebP'nin GIF'e kıyasla 0,57 kat daha fazla kod çözme süresi2 kullanılır.Bu sayede, kaydırma sırasında daha az sorun yaşanır ve CPU kullanımındaki ani artışlardan daha hızlı kurtarma sağlanır. Bunun nedeni WebP'nin GIF'e kıyasla iki avantajıdır:

    • WebP görüntüleri, her karede alfa olup olmadığıyla ilgili meta verileri depolar. Böylece bu tespiti yapabilmek için karenin kodunu çözme ihtiyacı ortadan kalkar. Bu, belirli bir karenin hangi önceki karelere bağlı olduğu konusunda daha doğru bir çıkarım yapılmasına ve böylece önceki karelerin gereksiz yere kod çözme işleminin azalmasına yol açar.

    • Modern bir video kodlayıcıya çok benzer şekilde WebP kodlayıcı da düzenli aralıklarla anahtar kareler ekler (çoğu GIF kodlayıcı bunu yapmaz). Bu özellik, uzun animasyonlarda arama sürecini önemli ölçüde iyileştirir. WebP, resim boyutunu önemli ölçüde artırmadan bu tür kareleri eklemeyi kolaylaştırmak amacıyla GIF'in kullandığı kare silme yöntemine ek olarak her kare için bir "harmanlama yöntemi" işareti ekler. Bu şekilde, bir animasyon karesinin, önceki kareyi tam boyutlu olmaya zorlamadan, resmin tamamı arka plan rengine geçmiş gibi çizim yapmasına olanak tanır.

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

  1. Sarmalama olmadığında, WebP'nin düz çizgi kodunu çözme işlemi GIF'e kıyasla daha fazla CPU kullanır. Lossy WebP, GIF'e kıyasla 2,2 kat daha fazla kod çözme süresi kullanırken kayıpsız WebP, 1,5 kat daha uzun süre kullanır.

  2. WebP desteği, neredeyse evrensel bir 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ıdır (WebP demux kitaplığı ve Blink-side WebP görüntü kod çözücü dahil). WebP ve WebM daha yaygın kod çözme kodunu paylaşırsa veya WebP'nin özellikleri WebM'lerin kapsamına dahil edilirse bu sorunun gelecekte azalabileceğini unutmayın.

Neden <img> ürününde WebM'yi desteklemiyorsunuz?

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

  1. WebM, önceki karelere dayanan bir karenin kodunu çözerken önceki karelerin minimum sayısını tutmak için animasyonlu WebP'ye kıyasla% 50 daha fazla bellek gerektirir3.

  2. Video codec'i ve kapsayıcı desteği, tarayıcı ve cihazlar arasında büyük farklılıklar gösterir. Otomatik içerik kodu dönüştürmeyi kolaylaştırmak için (ör. bant genişliğinden tasarruf eden proxy'ler için) tarayıcıların, resim etiketlerinin hangi biçimleri desteklediğini belirten üst bilgileri kabul etmeleri gerekir. "video/webm" veya "video/mpeg" gibi MIME türleri hâlâ codec desteğini belirtmediğinden (ör. VP8 veya VP9) bu bile yeterli olmayabilir. Öte yandan, WebP biçimi etkili bir şekilde dondurulur ve bunu gönderen tedarikçi firmalar animasyonlu WebP göndermeyi kabul ederse WebP'nin tüm UA'lardaki davranışı tutarlı olmalıdır. "image/webp" kabul başlığı zaten WebP desteğini belirtmek için kullanıldığından, yeni kabul edilen başlık değişiklikleri gerekli değildir.

  3. Chromium video grubu, sorunsuz oynatma için optimize edilmiştir ve aynı anda yalnızca bir veya iki videonun oynatıldığı varsayılır. Bu nedenle uygulama, oynatma kalitesini en üst düzeye çıkarmak için sistem kaynaklarının (iş parçacıkları, bellek vb.) kullanılması açısından agresif olur. Böyle bir uygulama, birçok eş zamanlı videoda iyi ölçeklenemez ve çok fazla resim içeren web sayfalarında kullanılabilecek şekilde yeniden tasarlanması gerekir.

  4. WebM şu anda WebP'deki tüm sıkıştırma tekniklerini kullanmamaktadır. Sonuç olarak bu görüntü, WebP ile alternatiflerden önemli ölçüde daha iyi sıkıştırılır:


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

2 Kod çözme süreleri, 08.10.2013 itibarıyla en yeni libwebp + ToT Blink kullanılarak karşılaştırma aracı kullanılarak hesaplanmıştır. "Sırmayla sürenin kodunu çözme", "İlk beş karenin kodunu çözme, çerçeve arabellek önbelleğini temizleme, sonraki beş karenin kodunu çözme vb." şeklinde hesaplanır.

3 WebM, her bir kare (genişlik+96)*(yükseklik+96) pikseli depolayacak şekilde bellekte 4 YUV referans çerçevesi tutar. YUV 4:2:0 için 6 piksel başına 4 bayta (veya piksel başına 3/2 bayta) ihtiyacımız vardır. Dolayısıyla bu referans çerçeveleri 4*3/2*(width+96)*(height+96) bayt bellek kullanır. Öte yandan WebP'nin yalnızca önceki karenin (RGBA cinsinden) kullanılabilir olması gerekir. Bu da 4*width*height bayt bellek demektir.

4 Animasyonlu WebP oluşturma işlemi için Google Chrome 32 veya daha yeni bir sürüm gerekir