Bu sayfa, Cloud Translation API ile çevrilmiştir.

Sık Sorulan Sorular

WebP nedir? Bu özelliği neden kullanmalıyım?

WebP, büyük bir alanda kullanılabilecek kayıplı ve kayıpsız bir sıkıştırma yöntemidir. Web'de bulunan çeşitli fotoğrafik, yarı saydam ve grafik resimler. Kayıplı sıkıştırma derecesi kullanıcı tarafından seçilebilmesi için arasında bir denge var. WebP genellikle JPEG ve JPEG 2000'e göre ortalama% 30 daha fazla sıkıştırma (resim kaybı olmadan) bilgi edinin (Karşılaştırmalı Çalışma bölümüne bakın).

WebP biçimi, temel olarak daha küçük, daha iyi görünen görseller bazı araçlar mevcut.

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

Site performansını artırmakla ilgilenen web yöneticileri, Google Analytics 4'te kullanarak mevcut resimleri için optimize edilmiş WebP alternatifleri oluşturabilir ve bunları Tarayıcılar'ı kullanarak WebP'yi destekleyen tarayıcılara yönelik olarak desteklenir.

WebP kayıplı desteği
- Google Chrome (masaüstü) 17+
- Android için Google Chrome sürüm 25+
- Microsoft Edge 18 ve sonraki sürümler
- Firefox 65 ve daha yeni sürümler
- 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+)
WebP kayıplı, kayıpsız ve alfa desteği
- Google Chrome (masaüstü) 23+
- Android için Google Chrome sürüm 25+
- Microsoft Edge 18 ve sonraki sürümler
- Firefox 65 ve daha yeni sürümler
- Opera 12.10+
- Yerel web tarayıcısı, Android 4.2 ve sonraki sürümler (JB-MR1)
- Uçuk Ay 26+
- Safari 14 ve sonraki sürümler (iOS 14 ve sonraki sürümler, macOS Big Sur+)
WebP Animasyon desteği
- Google Chrome (masaüstü ve Android) 32+
- Microsoft Edge 18 ve sonraki sürümler
- Firefox 65 ve daha yeni sürümler
- Opera 19+
- Safari 14 ve sonraki sürümler (iOS 14 ve sonraki sürümler, macOS Big Sur+)

Şuna da bakabilirsiniz:

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

WebP resimlerini yalnızca bunları görüntüleyebilen müşterilere sunmak istersiniz ve bunu yapamayan istemciler için eski biçimlere dönülebilir. Neyse ki WebP desteğini tespit etmek için kullanılan birden fazla teknik vardır. iki tarafı da içerir. Bazı CDN sağlayıcıları, WebP desteği algılama özelliği sunar kapsamında değerlendirilecektir.

Kabul etme başlıkları aracılığıyla sunucu tarafı içerik pazarlığı

Web istemcilerinin genellikle bir "Kabul et" gösteren istek başlığını, kabul ettikleri içerik formatlarını ifade eder. tarayıcının "kabul edeceğini" önceden belirtmesi image/webp biçiminde olmalıdır. web sunucusu, WebP resimlerini güvenli bir şekilde gönderebileceğini bilir. Bu da, müzakere tekniklerini konuşacağız. Daha fazla bilgi için aşağıdaki bağlantılara göz atın.

Modernizr

Modernizr, HTML5 ve sonraki sürümlerin kolayca algılanması için Web tarayıcılarında CSS3 özellik desteği. Tesisleri arayın Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha ve Modernizr.webp.animation olarak ayarlayın.

HTML5 `<picture>` öğesi

HTML5, birden fazla öğe listelemenize olanak tanıyan <picture> öğesini destekler. alternatif resim hedeflerini öncelik sırasına göre sıralar. Böylece istemci, düzgün şekilde görüntüleyebileceği ilk aday resimdir. Görüntüleyin HTML5 Rocks ile ilgili bu tartışmaya göz atın. <picture> öğesi daha fazla tarayıcı tarafından desteklenir.

Kendi JavaScript'inizde

Diğer bir algılama yöntemi ise, başka bir algılama yöntemi, çok küçük bir WebP görüntüsünün kodunu çözmeyi kullanıp kullanmadığını kontrol edebilir ve başarılı olup olmadığını kontrol edebilirsiniz. Ö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 engellemeyen ve eşzamansız olduğunu unutmayın. Yani, sisteme WebP desteğine bağlı bir kod tercihen geri çağırma işlevine eklenmelidir. işlevini kullanın.

Google neden WebP'yi açık kaynak olarak kullanıma sundu?

Açık kaynak modelinin önemine yürekten inanıyoruz. WebP ile herkes bu biçimle çalışabilir ve iyileştirmeler önerebilir. Entegre ve önerilerinizi göz önünde bulundurduğunuzda, WebP'nin daha da faydalı hale geleceğine inanıyoruz. bir grafik biçimi olarak da gösterilir.

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

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

Dönüştürülecek çok sayıda resminiz varsa platformunuzun kabuğunu kullanarak daha basit hale getirmektir. Örneğin, bir klasördeki tüm jpeg dosyalarını dönüştürmek için şu:

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ı ortak bir biçime dönüştürerek görüntüleyebilirsiniz (PNG gibi kayıpsız sıkıştırma kullanan) bir resim dosyası yükleyebilir ve ardından PNG dosyalarını Herhangi bir tarayıcı veya resim görüntüleyici. WebP kalitesi hakkında hızlı bir fikir edinmek için Yan yana fotoğraf için bu sitedeki Galeri en iyi uygulamaları görelim.

Kaynak kodunu nasıl alırım?

Dönüştürücü kodu, WebP açık kaynak projesinin indirmeler bölümü sayfasını ziyaret edin. Hafif kod çözücü ve VP8 spesifikasyonunun kodu açık WebM sitesine gidin. Bkz. Kapsayıcının RIFF Kapsayıcı sayfası bakın.

Bir WebP görselinin maksimum boyutu nedir?

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

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

VP8 bit akışıyla tutarlı olarak kayıplı WebP, 8 bit Y'CbCr 4:2:0 (genellikle YUV420 olarak adlandırılır) görüntü biçimi. Daha fazla bilgi için 2, "Biçime Genel Bakış" RFC 6386'ya uymalısınız. VP8 Veri Biçimi ve Kod Çözme Kılavuzu inceleyebilirsiniz.

Kayıpsız WebP yalnızca RGBA biçimiyle çalışır. Bkz. WebP Kayıpsız Bit Akışı spesifikasyonu.

Bir WebP görseli, kaynak resminden daha büyük hale gelebilir mi?

Evet, genellikle kayıplı bir biçimden WebP kayıpsız veya ve bu böyle devam eder. Bu temel olarak renk alanı farkından kaynaklanır (YUV420 ve ARGB) ve bunlar arasındaki dönüşümü gösterir.

Üç tipik durum vardır:

Kaynak resim kayıpsız ARGB biçimindeyse mekansal aşağı örnekleme yeni renklerle birlikte, sıkıştırılması daha zor olan orijinal olanları görebilirsiniz. Bu durum genellikle kaynağın birkaç renk içeren PNG biçimindedir: kayıplı WebP'ye dönüştürme (veya benzer şekilde, daha büyük bir dosya boyutuna neden olabilir.
Kaynak kayıplı biçimdeyse kayıpsız WebP sıkıştırması kullanılması olduğunu tespit etmek genellikle oluşturmanız gerekir. Bu, WebP'ye özel değildir ve örneğin bir JPEG kaynağını kayıpsız WebP veya PNG biçimlerine dönüştürme.
Kaynak kayıplı biçimdeyse ve sıkıştırmaya çalışıyorsanız daha yüksek kalite ayarına sahip kayıplı bir WebP olarak değiştirebilirsiniz. Örneğin, ekip arkadaşlarınızın 80 kalitede kaydedilmiş bir JPEG dosyasını 95 kalitesinde bir WebP dosyasına dönüştürme sonuçta, her iki biçim de kayıplı olsa bile genellikle daha büyük bir dosya oluşturur. Kaynağın kalitesini değerlendirmek çoğu zaman mümkün değildir; bu nedenle, dosya boyutu tutarlı olarak daha büyükse hedef WebP kalitesini düşürme. Diğer bir olasılık da kalite ayarını kullanmaktan kaçınmak cwebp aracındaki -size seçeneğini kullanarak belirli bir dosya boyutunu hedeflemek veya eşdeğer API. Örneğin, orijinal dosyanın% 80'inin hedeflenmesi daha güçlü olabilir.

JPEG kaynağını kayıplı WebP'ye veya PNG kaynağını kayıpsız WebP'ye dönüştürdüğünü unutmayın. WebP, bu tür dosya boyutu sürprizlerine eğilimli değildir.

WebP, progresif veya aralıklı ekranı destekliyor mu?

WebP, JPEG'de aşamalı veya aralıklı kod çözme yenilemesi sunmaz ya da PNG anlamlıdır. Bu durum büyük olasılıkla cihazın CPU ve belleği üzerinde her yenileme etkinliği geçiş işlemi arasında tam bir geçiş gerektirdiğinden bir sistemdir.

Ortalama olarak, progresif bir JPEG resminin kodunu çözmek, referans değerini bir kez 3 kez tıklayın.

Alternatif olarak, WebP artımlı kod çözme çözümü sunar; burada tüm mevcut bit akışının baytı, aşağıdaki gibi görüntülenebilir bir örnek satır üretmek için kullanılır: en kısa sürede değiştirmelisiniz. Böylece hem bellekten, CPU'dan hem de yeniden boyama işleminde indirme durumuyla ilgili görsel ipuçları sağlar. Artımlı özelliği aracılığıyla Gelişmiş Kod Çözme API'si.

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

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

Eclipse'te kitaplığı oluşturma:

ADT eklentisi NDK araçlarıyla birlikte yüklü ve NDK yolunuz doğru ayarlanmış (Tercihler > Android > NDK).
Yeni proje oluşturun: Dosya > Yeni > Proje > Android Uygulama Projesi.
Klonlama veya libwebp'yi yeni projedeki jni adlı bir klasöre açın.
swig/libwebp_java_wrap.c öğesini LOCAL_SRC_FILES listesine ekleyin.
Yeni projeyi sağ tıklayın ve Android Araçları > Ekle Yerel Destek ... ile kitaplığı derlemenize dahil edin.
Proje özelliklerini açın ve C/C++ Derleme'ye gidin > Davranış. Ekle Oluşturmak için Build (Incremental build) bölümüne ENABLE_SHARED=1 libwebp'yi paylaşılan bir kitaplık olarak kullanın.

Not NDK_TOOLCHAIN_VERSION=4.8 politikasının ayarlanması genel olarak daha iyi hale getirilecektir 32 bit derleme performansı.
swig/libwebp.jar dosyasını libs/ proje klasörüne ekleyin.
Projenizi oluşturun. Bu işlem libs/<target-arch>/libwebp.so oluşturur.
Kitaplığı çalışma zamanında yüklemek için System.loadLibrary("webp") öğesini kullanın.

Kitaplığın ndk-build ve birlikte verilen Android.mk. Bu durumda, yukarıda açıklanan adımlardan bazıları 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 C#'ya aktarılır.

libwebp.dll'yi oluşturun. Bu işlem, API'yi dışa aktarmak için WEBP_EXTERN adresini doğru şekilde ayarlar işlevlerine dahildir.
```
libwebp> nmake /f Makefile.vc CFG=release-dynamic
```

Projenize libwebp.dll öğesini ekleyin ve istediğiniz işlevleri içe aktarın. basit API döndürülen arabellekleri serbest bırakmak için WebPFree() öğesini çağırmalısınız.

[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ı

WebP, 8 bit alfa kanalına kıyasla 24 bit RGB rengini destekler. GIF'in 8 bit rengi ve 1 bit alfa.
WebP hem kayıplı hem de kayıpsız sıkıştırmayı destekler; aslında tek bir animasyon, kayıplı ve kayıpsız kareleri birleştirebilir. Yalnızca GIF desteklenir kayıpsız sıkıştırmayı sağlar. WebP'nin kayıplı sıkıştırma teknikleri, videolardan oluşturulan animasyonlu resimlere animasyonlu resim kaynağı.
WebP, GIF¹'ten daha az bayt gerektirir. Kayıplı WebP'lere dönüştürülen animasyonlu GIF'ler% 64 daha küçük ve kayıpsızdır WebP'ler% 19 daha küçüktür. Bu, özellikle mobil ağlarda önemlidir.
Arama yapıldığında WebP'nin kodu çözmesi daha kısa sürer. İçinde Yanıp sönme, kaydırma veya değiştirme işlemleri Resimleri gizle ve göster, bu da animasyonların duraklatılmasına ve ardından farklı bir noktaya atlandı. Aşırı CPU kullanımı animasyonlar için kod çözücünün ileri doğru gitmesini de tıklayın. Bu senaryolarda animasyonlu WebP'nin boyutu toplamda 0, 57 kat daha fazladır kod çözme zamanı² GIF olarak oluşturulur ve aksama süresini azaltır ve CPU kullanımındaki ani artışlardan daha hızlı kurtarma işlemini destekler. Bu WebP'nin GIF'e göre iki avantajı vardır:
- WebP resimleri, her bir karenin alfa veya Bu tespiti yapmak için karenin kodunu çözme ihtiyacını ortadan kaldırır. Bu, belirli bir verinin önceki karelerinden hangilerinde daha doğru bir çıkarım kod çözme işlemini kolaylaştırır, böylece önceki çerçeveler.
- Modern bir video kodlayıcı gibi, WebP kodlayıcısı da sezgisel olarak animasyon karelerini düzenli aralıklarla izleyin (çoğu GIF kodlayıcı bunu yapmaz). Bu özellik, uzun animasyonlarda sarmayı önemli ölçüde iyileştirir. Kolaylaştırmak için resim boyutunu önemli ölçüde artırmadan bu tür kareleri ekleme, WebP bir ekler "harmanlama yöntemi" işaretle ve GIF'in kullandığı kare silme yöntemine ek olarak her kare için ayrı ayrı gösterilir. Bu işlem, animasyon karesinin tüm resim temizlenmiş gibi çizim yapmasına olanak tanır. önceki kareyi kadraja almaya zorlamadan tam boyutlu olarak görüntüleyebilirsiniz.

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

Aramanın olmadığı durumlarda WebP'nin doğrudan kodunu çözme GIF'e göre CPU'yu daha çok kullanır. Kayıplı WebP, diğer çözümlere kıyasla 2,2 kat daha fazla kod çözme süresi GIF ise kayıpsız WebP'nin boyutu 1, 5 kat daha fazladır.
WebP desteği GIF desteği kadar yaygın değildir; etkili bir şekilde evrensel hale getirilebilir.
Tarayıcılara WebP desteği eklemek, kodun ayak izini artırır ve saldırıya uğrayan yüzeylere bakın. Blink'te bu yaklaşık 1.500 ek satırdır (WebP demux kitaplığı ve Blink-side WebP görüntüsü dahil) kod çözücü) ekleyin. Bu sorunun giderilebileceğini unutmayın. WebP ve WebM daha yaygın kod çözme kodunu paylaşıyorsa veya WebP'ler özellikleri WebM'ye dahil edilir.

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

<img> içindeki video biçimlerini uzun vadede desteklemek mantıklı olabilir kapanış etiketinin hemen öncesine yapıştırın. Ancak, <img> içindeki WebM'nin doldurabileceği amaç, animasyonlu WebP'nin önerilen rolünün sorunlu olduğu söylenebilir:

Önceki karelere dayalı bir karenin kodunu çözerken WebM, Animasyonlu WebP'den% 50 daha fazla bellekle önceki karelere³.
Video codec'i ve kapsayıcı desteği tarayıcılar arasında ve cihazlar. İçeriklerin otomatik olarak kod dönüştürmesini kolaylaştırmak için (ör. tasarruf sağlayan proxy'ler kullanıyorsanız, tarayıcıların bir cihazda kabul edilen Bu da resim etiketlerinin hangi biçimleri desteklediğini gösteriyor. Bu bile "video/webm" gibi MIME türleri olarak yetersiz veya "video/mpeg" sabit codec desteğini belirtmeyin (ör. VP8 ve VP9). Diğer WebP biçimi etkili bir şekilde dondurulur ve paketi gönderen tedarikçi firmalar WebP'nin tüm UA'lardaki davranışı olan animasyonlu WebP'yi göndermeyi kabul eder Tutarlı olmalıdır, ve "image/webp" etiketinden itibaren başlığı kabul et WebP desteğini belirtmek için zaten kullanılıyor, yeni kabul edilen üstbilgi değişiklikleri yok gereklidir.
Chromium video grubu şunun için optimize edilmiştir: olduğu varsayılır ve aynı cihazda yalnızca bir veya iki videonun oynatıldığı gerekir. Sonuç olarak, sistem tüketme konusunda agresif bir yaklaşım benimsenmiştir. kaynakları (iş parçacıkları, bellek vb.) kullanarak oynatma kalitesini artırın. Böyle bir birçok eşzamanlı video için iyi ölçeklenmez ve resim içeren web sayfalarında kullanılmaya uygun olacak şekilde yeniden tasarlanması gerekir.
WebM şu anda tüm sıkıştırma tekniklerini uygulamamaktadır diğeri ise WebP'den. Sonuç olarak, bu resmi aşağıdaki alternatiflere kıyasla WebP ile önemli ölçüde daha iyi sıkıştırılır:

¹ Animasyonlu GIF ve animasyonlu WebP arasındaki tüm karşılaştırmalarda kullanmıştır. Bu resimler, "gif2webp" kullanılarak animasyonlu WebP'ye dönüştürüldü aracı kullanarak varsayılan ayarlar (en son libwebp kaynak ağacı 08.10.2013 itibarıyla). Karşılaştırma sayıları, söz konusu üç aylık dönemlerin resim.

² Kod çözme süreleri en son libwebp + ToT kullanılarak hesaplanmıştır 08.10.2013 itibarıyla Blink karşılaştırma aracı kullanarak. "Kod çözme zamanı sarmayla" şu şekilde hesaplanır: "İlk beş karenin kodunu çözün, önbellek ekleme, sonraki beş karenin kodunu çözme ve benzeri işlemleri gerçekleştirmeniz gerekir."

³ WebM, her kare için 4 YUV referans çerçevesini bellekte tutar (genişlik+96)*(yükseklik+96) piksel depolama. YUV 4:2:0 için 6 başına 4 bayta ihtiyacımız var. piksel (veya piksel başına 3/2 bayt). Bu referans çerçeveleri, 4*3/2*(width+96)*(height+96) bayt bellek. Öte yandan WebP önceki karenin (RGBA'daki) kullanılabilir olması gerekir. Bu, 4*width*height bayt bellek.

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