Sık Sorulan Sorular

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

WebP nedir? Neden kullanmalıyım?

WebP, web'de bulunan çok çeşitli fotoğraf, 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ırmanın düzeyi, kullanıcının dosya boyutu ile resim kalitesi arasındaki dengeyi seçebilmesi için ayarlanabilir. WebP, resim kalitesi kaybı olmadan genellikle JPEG ve JPEG 2000'e kıyasla ortalama% 30 daha fazla sıkıştırma elde eder (Karşılaştırmalı Çalışma bölümüne bakın).

WebP biçimi, web'i daha hızlı hale getirebilecek daha küçük, daha iyi görünen resimler oluşturmayı amaçlar.

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

Site performansını iyileştirmek isteyen web yöneticileri, mevcut görüntüleri için optimize edilmiş WebP alternatiflerini kolayca oluşturabilir ve WebP'yi destekleyen tarayıcılara hedeflenmiş bir şekilde sunabilir.

  • WebP kayıp desteği
    • Google Chrome (masaüstü) 17+
    • Android için Google Chrome 25 sürümü
    • Microsoft Edge 18 ve sonraki sürümler
    • Firefox 65 ve üzeri
    • Opera 11.10 ve sonraki sürümler
    • Yerel web tarayıcısı, Android 4.0 ve sonraki sürümler (ICS)
  • WebP kayıplı, kayıpsız &alfa desteği
    • Google Chrome (masaüstü) 23 ve sonraki sürümleri
    • Android için Google Chrome 25 sürümü
    • Microsoft Edge 18 ve sonraki sürümler
    • Firefox 65 ve üzeri
    • Opera 12.10 ve sonraki sürümler
    • Yerel web tarayıcısı, Android 4.2 ve sonraki sürümler (JB-MR1)
    • Uçan Ay 26+
  • WebP Animasyon desteği
    • Google Chrome (masaüstü ve Android) 32+
    • Microsoft Edge 18 ve sonraki sürümler
    • Firefox 65 ve üzeri
    • Opera 19 ve üstü

Wikipedia WebP makalesini de inceleyin.

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

WebP resimlerini yalnızca bunları düzgün bir şekilde görüntüleyebilen müşterilere sunmak ve bunu yapamayan müşteriler için eski biçimlere geri çevirmek istersiniz. Neyse ki WebP desteğini algılamak için hem istemci hem sunucu tarafında çeşitli teknikler bulunmaktadır. Bazı CDN sağlayıcıları, hizmetlerinin bir parçası olarak WebP desteği algılama özelliği sunar.

Üstbilgiler aracılığıyla sunucu tarafı içerik pazarlığı

Web müşterilerinin genellikle hangi içerik biçimlerini kabul etmek istediklerini belirten bir "Kabul" istek başlığı göndermesi yaygın görülen bir durumdur. Bir tarayıcı, image/webp biçimini kabul edeceğini önceden gösterirse web sunucusu, WebP görüntülerini güvenli bir şekilde gönderebileceğini bilir ve içerik pazarlığını önemli ölçüde basitleştirir. Daha fazla bilgi için aşağıdaki bağlantılara bakın.

Modernizasyon

Modernizr, web tarayıcılarında HTML5 ve CSS3 özellik desteğini kolayca tespit etmek için kullanılan 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 fazla alternatif resim hedefini öncelik sırasına göre listelemenize olanak tanıyan bir <picture> öğesini destekler. Böylece müşteri, düzgün bir şekilde gösterebileceği ilk aday resmini ister. HTML5 Rocks hakkındaki bu tartışmaya göz atın. <picture> öğesi her zaman daha fazla tarayıcı tarafından desteklenmektedir.

Kendi JavaScript'inizde

Başka bir tespit yöntemi de, belirli bir özelliği kullanan çok küçük bir WebP görüntüsünün kodunu çözmeye çalışmak ve başarı 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ükleme işleminin engellenmediğini ve eşzamansız olduğunu unutmayın. Yani, WebP desteğine bağlı tüm kodların tercihen geri çağırma işlevine yerleştirilmesi gerekir.

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

Açık kaynak modelinin önemine içtenlikle inanıyoruz. Açık kaynaktaki WebP ile herkes bu biçimle çalışabilir ve geliştirmeler önerebilir. Sağladığınız bilgi ve öneriler sayesinde WebP'nin zaman içinde grafik biçiminde daha 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 bilgi için WebP'yi kullanma bölümüne bakın.

Dönüştürülecek çok sayıda resminiz varsa işlemi kolaylaştırmak 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 için 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ürüp PNG dosyalarını herhangi bir tarayıcıda veya resim görüntüleyicide görüntüleyebilirsiniz. WebP kalitesi hakkında hızlı bir fikir edinmek için yan yana fotoğraf karşılaştırmaları yapmak üzere bu sitedeki Galeri'ye bakın.

Kaynak kodu nasıl alabilirim?

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

WebP resimleri en fazla ne boyutta olabilir?

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

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

VP8 bit akışıyla uyumlu olan güzel 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 fazla ayrıntı için RFC 6386'nın Biçime Genel Bakış, VP8 Veri Biçimi ve Kod Çözme Kılavuzu başlıklı 2. Bölüme bakın.

Losless WebP, yalnızca RGBA biçimiyle çalışır. WebP Lossless Bitstream spesifikasyonuna bakın.

WebP resimleri kaynak resminden daha büyük olabilir mi?

Evet, genellikle kayıplı bir biçimden WebP'ye kayıplı veya Bunun başlıca nedeni, renk alanı farkı (YUV420 veya ARGB) ile bunlar arasındaki dönüşümdür.

Üç tipik durum vardır:

  1. Kaynak resim kayıpsız ARGB biçimindeyse YUV420 mekansal alt alan örneklemesi, orijinal resimlere göre sıkıştırılması daha zor olan yeni renkler sunar. Bu durum genellikle kaynak birkaç renge sahip PNG biçiminde olduğunda ortaya çıkabilir: kayıp WebP'ye dönüştürme (veya benzer şekilde kayıplı bir JPEG dosyasına dönüştürme) dosya boyutunun daha büyük olmasıyla sonuçlanabilir.
  2. Kaynak kayıplı biçimdeyse kaynağın kayıplı yapısını yakalamak için kayıpsız WebP sıkıştırması genellikle daha büyük bir dosya oluşturur. Bu, 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ı bir biçimdeyse ve daha yüksek kalitede bir ayarla kayıplı WebP olarak sıkıştırmaya çalışıyorsanız. Örneğin, 80 numaralı kaliteye kaydedilmiş bir JPEG dosyasını 95 kaliteye sahip bir WebP dosyasına dönüştürmeye çalışmak, her iki biçimde de kayıp olmasına rağmen 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 büyükse hedef WebP kalitesini düşürmeniz ö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üçlü olabilir.

Bir JPEG kaynağını kayıp WebP'ye veya PNG kaynağını kayıplı WebP'ye dönüştürmenin dosya boyutu sürprizlerine açık olmadığını unutmayın.

WebP progresif veya taramalı ekran desteği içeriyor mu?

WebP, JPEG veya PNG biçiminde aşamalı veya aralıklı kod çözme yenileme hizmeti sunmaz. Her yenileme etkinliği sıkıştırma sisteminden tam olarak geçtiğinden bu durum, kod çözme istemcisinin CPU ve belleğine çok fazla bastırabilir.

Ortalama olarak, bir progresif JPEG resminin kodunu çözmek, referans değerin kodunu 3 kez çözmekle eşdeğerdir.

Alternatif olarak WebP, artımlı kod çözme yöntemini sunar. Bu kod sayesinde, bit eşlemin mevcut tüm gelen baytları mümkün olan en kısa sürede görüntülenebilir bir örnek satır oluşturmaya çalışır. Bu işlem istemcinin bellek, CPU ve yeniden boyama çalışmalarını azaltırken indirme durumu hakkında görsel ipuçları sağlar. Artımlı kod çözme özelliği Gelişmiş Kod Çözme API'si üzerinden kullanılabilir.

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

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

Elips'te kitaplığı oluşturma:

  1. NDK araçlarıyla birlikte ADT eklentisinin yüklü olduğundan ve NDK yolunuzun doğru şekilde ayarlandığından (Tercihler > Android > NDK) emin olun.
  2. Yeni bir proje oluşturun: File > New > Project > Android Application Project.
  3. libwebp'i yeni projede jni adlı bir klasöre klonlayın veya paketinden çıkarın.
  4. swig/libwebp_java_wrap.c öğesini LOCAL_SRC_FILES listesine ekleyin.
  5. Yeni projeyi sağ tıklayın ve derlemeye kitaplığı dahil etmek için Android Araçları > Yerel Destek Ekle ... seçeneğini belirleyin.
  6. Proje özelliklerini açın ve C/C++ Build > Davranış bölümüne gidin. libwebp'i 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 özelliğini ayarlamak, genel olarak 32 bit derleme performansını iyileştirir.

  7. swig/libwebp.jar öğesini libs/ proje klasörüne ekleyin.

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

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

Kitaplığın ndk-build ve dahil olan Android.mk ile manuel olarak oluşturulabileceğini unutmayın. Bu durumda yukarıda açıklanan adımlardan bazıları yeniden kullanılabilir.

libwebp'i 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#'a aktarılabilir.

  1. libwebp.dll'yi oluşturun. Bu işlem, WEBP_EXTERN API API işlevlerini düzgün şekilde dışa aktaracak ş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ırsanız döndürülen arabellekleri serbest bırakmak için WebPFree() çağrısı yapmanız gerekir.

    [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);
    }
    

Animasyonlu WebP'yi neden kullanmalıyım?

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

  1. GIFP'nin 8 bit rengi ve 1 bit alfa ile karşılaştırıldığında WebP, 8 bit alfa kanalına sahip 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&93; kayıplı sıkıştırma teknikleri, giderek artan ve popüler bir animasyonlu resim kaynağı olan gerçek videolardan oluşturulan animasyonlu resimlere çok uygundur.

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

  4. WebP uygulamasının, arama yapıldığında kodu çözmek daha az zaman alır. yanıp sönme özelliğiyle kaydırma veya değiştirme sekmeleri resimleri görüntüleyebilir ve gösterebilir. Bu da animasyonların duraklatılıp başka bir noktaya atlamasına neden olur. Animasyonların kareleri bırakmasıyla sonuçlanan aşırı CPU kullanımı, kod çözücünün animasyonda ilerlemesini de gerektirebilir. Bu senaryolarda, animasyonlu WebP'nin GIF biçiminde toplam kod çözme süresi 0,57 kat daha fazladır2.Böylece, kaydırma sırasında daha az sarsıntı olur ve CPU kullanımındaki ani yükselişlerden daha hızlı bir kurtarış elde edilir. Bunun nedeni, WebP'nin GIF'e göre iki avantajıdır:

    • WebP görüntüleri, her karenin alfa içerip içermediği hakkında meta verileri depolayarak bu kararı vermek için çerçevenin kodunu çözme gereksinimini ortadan kaldırır. Bu, belirli bir çerçevenin önceki karelerden hangisinde bağımlı olduğuna dair daha doğru çıkarımlar yapılmasını sağlar ve böylece önceki karelerin gereksiz kod çözmelerini azaltır.

    • Tıpkı modern bir video kodlayıcı gibi, WebP kodlayıcı da düzenli aralıklarla (bazen GIF kodlayıcıların genellikle eklemediği) mantıksal bir şekilde animasyon kareleri ekler. Bu özellik, uzun animasyonlarda arama yapmayı önemli ölçüde iyileştirir. WebP, resim boyutunu önemli ölçüde artırmadan bu tür karelerin eklenmesini kolaylaştırmak için GIF'in kullandığı çerçeve silme yöntemine ek olarak her kare için bir 'harmanlama yöntemi' işareti ekler. Bu, bir animasyon karesinin, önceki kareyi tam boyutlu olmaya zorlamadan tüm resim arka plan rengine temizlenmiş gibi çizilmesini sağlar.

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

  1. Arama olmadığında WebP'nin düz satır halinde kod çözme işlemi GIF'e kıyasla CPU açısından daha yoğundur. Kayıplı WebP için kod çözme süresi GIF'ten 2,2 kat, kayıpsız WebP ise 1,5 kat fazladır.

  2. WebP desteği, GIF desteği kadar yaygın değildir. GIF desteği de etkili bir şekilde evrenseltir.

  3. Tarayıcılara WebP desteğinin eklenmesi, kodun 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 tarafı WebP resim kod çözücüsü dahil). WebP ve WebM daha sık kullanılan kod çözme kodlarını paylaşıyorsa veya WebP özelliklerinin WebM'de yer alması halinde bu sorunun gelecekte azaltılabileceğini unutmayın.

Neden <img> dilinde WebM'yi desteklemiyorsunuz?

<img> etiketini kullanarak video biçimlerini desteklemek uzun vadede mantıklı olabilir. Ancak şimdi bunu yapmak, <img> dilinde WebM'nin animasyonlu WebP'nin önerilen rolünü tamamlayabilmesi amacıyla sorunludur:

  1. Önceki kareleri temel alan bir çerçevenin kodunu çözerken WebM, önceki kare sayısını3 aşmayacak şekilde animasyonlu WebP'ye göre% 50 daha fazla bellek gerektirir.

  2. Video codec'i ve kapsayıcı desteği tarayıcılar ile cihazlar arasında büyük farklılıklar gösterir. Otomatik içerik kodunu 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 desteklediği biçimleri belirten kabul başlıkları eklemesi gerekir. Bu durum bile yeterli olmayabilir. Bunun nedeni, "video/webm" veya "video/mpeg" gibi MIME türlerinin codec desteğini belirtmemesidir (ör. VP8 ile VP9). Öte yandan, WebP biçimi etkili bir şekilde dondurulmuştur. Ayrıca, gönderim yapan satıcılar animasyonlu WebP'yi göndermeyi kabul ederse WebP'nin tüm UA biçimlerindeki davranışının tutarlı olması gerekir. "quot;image/webp" kabul başlığı" zaten WebP desteğini belirtmek için kullanıldığından, yeni kabul edilen başlık değişikliklerine gerek yoktur.

  3. Chromium video yığını, sorunsuz oynatma için optimize edilmiştir ve tek seferde yalnızca bir veya iki videonun oynatıldığını varsayar. Dolayısıyla uygulama, oynatma kalitesini en üst düzeye çıkarmak için sistem kaynaklarını (mesaj dizileri, bellek vb.) tüketmede agresiftir. Bu tür bir uygulama, aynı anda birçok videoya uygun şekilde ölçeklendirilemez. Ayrıca, resim ağırlıklı web sayfalarıyla kullanıma uygun olması için yeniden tasarlanması gerekir.

  4. WebM şu anda WebP'deki tüm sıkıştırma tekniklerini dahil etmemektedir. Sonuç olarak, bu resim WebP ile sıkıştırıldığında alternatiflerden önemli ölçüde daha iyidir:


1 Animasyonlu GIF ve animasyonlu WebP arasındaki tüm karşılaştırmalar için web'den rastgele çekilen yaklaşık 7.000 animasyonlu GIF görselinden yararlandık. Bu resimler, varsayılan ayarlar (10.08.2013 itibarıyla libwebp kaynak ağacının en son sürümü kullanılarak oluşturulmuştur) kullanılarak 'gif2webp' aracı kullanılarak animasyonlu WebP'ye dönüştürüldü. Karşılaştırmalı sayılar, bu resimlerdeki ortalama değerlerdir.

2 Kod çözme süreleri, 08/18/2013 tarihi itibarıyla en son libwebp + ToT Blink kullanılarak karşılaştırma aracı kullanılarak hesaplanmıştır. "işlemin yapıldığı zamanın kodunu çöz" ilk beş karenin kodunu çözme, kare arabelleği önbelleğini temizleme, sonraki beş karenin kodunu çözme ve benzeri işlemler şeklinde hesaplanır.

3 WebM, 4 YUV referans çerçevesini bellekte tutar. Her kare depolama (genişlik+96)*(yükseklik+96) piksel olarak hesaplanır. YUV 4:2:0 için 6 piksel başına 4 bayta (veya piksel başına 3/2 bayt) ihtiyacımız vardır. Bu nedenle, bu referans çerçeveleri 4*3/2*(width+96)*(height+96) bayt bellek kullanır. Öte yandan WebP'nin yalnızca önceki kareye (RGBA cinsinden) sahip olması gerekir. Bu da 4*width*height baytlık bellek anlamına gelir.

4 Animasyonlu WebP oluşturma işlemi için Google Chrome 32+ sürümü gerekir