Nasıl kullanılır
- Bir WebP dosyasını bırakma alanına sürükleyin, seçmek için tıklayın veya bir görsel yapıştırın. PNG ve JPEG dosyaları da kabul edilir.
- Başka bir biçimden WebP oluşturmak için "Hedef biçim" olarak WebP'yi seçin ve "Kalite" değerini ayarlayın.
- İsterseniz bir "Maks. genişlik" belirleyin, ardından orijinal boyutla Base64 boyutunu karşılaştırın.
- Data URI, ham Base64, HTML img etiketi, CSS background-image veya Markdown çıktısını kopyalayın ya da indirin.
WebP nedir?
WebP, Google'ın 2010'da yayımladığı bir görsel biçimidir. VP8 video codec'ine dayalı kayıplı sıkıştırmayı, ayrı bir kayıpsız modu, alfa kanalını ve animasyonu tek bir biçimde sunar. MIME türü image/webp olur ve dosya bir RIFF kapsayıcısı olduğu için Base64 çıktısı UklGR ile başlar. Google'ın verilerine göre kayıpsız WebP dosyaları PNG'den yaklaşık %26, kayıplı dosyalar ise benzer kalitede JPEG'den %25 ila %34 daha küçüktür.
WebP neden data URI'lere uygundur
Base64 her dosyaya aynı üçte birlik artışı ekler; bu yüzden en küçük kaynak en kısa dizeyi verir. Bu da WebP'yi doğal bir seçenek yapar: WebP'ye dönüştürülen saydam bir PNG simgesi saydamlığını korur ve genellikle küçülür, bir JPEG fotoğrafı da benzer görsel kalitede küçülür. Çok yüksek kalite ayarları optimize edilmiş bir orijinalden daha büyük bir dosya üretebilir, bu nedenle kopyalamadan önce Base64 boyutunu kontrol edin.
Animasyonlu WebP dosyaları, değiştirilmeden kodlandığında tüm karelerini korur. Dönüştürme veya yeniden boyutlandırma ise yalnızca tek bir kareyi yeniden çizer.
Tarayıcı ve istemci desteği
Güncel tüm büyük tarayıcılar WebP'yi gösterir: Chrome, Edge, Firefox, Opera ve Safari 14 ve sonrası. Yalnızca Internet Explorer gibi çok eski tarayıcılarda destek yoktur. E-postada durum farklıdır: Windows için Outlook dahil birçok masaüstü e-posta istemcisi WebP'yi görüntülemez; bu yüzden e-posta şablonlarında PNG veya JPEG kullanın.
JavaScript ile WebP data URI'leri oluşturma
// Kullanıcının seçtiği bir dosyayı okuyun
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Bir canvas'ı %80 kaliteyle WebP olarak yeniden kodlayın
const uri = canvas.toDataURL('image/webp', 0.8);Tarayıcı WebP kodlayamıyorsa toDataURL sessizce PNG'ye geri döner; bu nedenle sonucun data:image/webp ile başladığını kontrol edin.
Sıkça sorulan sorular
PNG veya JPEG'i burada WebP Base64'e dönüştürebilir miyim?
Evet. Görseli yükleyin, "Hedef biçim" olarak WebP'yi seçin ve "Kalite" değerini ayarlayın. Dönüştürme, tarayıcınızda yerleşik olan kodlayıcıyı kullanır ve sonuç data:image/webp olarak kodlanır.
Base64, WebP animasyonunu korur mu?
Evet, hiçbir dönüştürme seçilmediği ve "Maks. genişlik" belirlenmediği sürece. Bu durumda Base64 dizesi, tüm kareleriyle birlikte dosyanın birebir aynısını içerir.
Tüm tarayıcılar data:image/webp görsellerini gösterir mi?
Chrome, Edge, Firefox, Opera ve Safari'nin güncel sürümlerinin tümü gösterir. Internet Explorer ve 14'ten önceki Safari sürümleri göstermez.