WebP'den Base64'e Dönüştürücü: WebP Resimlerini Kodlayın

WebP’yi Base64’e Dönüştürme

WebP, Google’ın JPEG ve PNG’den daha küçük dosyalar üretirken karşılaştırılabilir kaliteyi korumak için tasarlanmış resim formatıdır. Kayıplı sıkıştırma, kayıpsız sıkıştırma ve animasyonu destekler. Bu araç, WebP dosyalarını HTML, CSS veya API yüklerine gömmek için Base64’e kodlar.

Nasıl Kullanılır

1. Yükleme alanına bir WebP dosyası bırakın veya göz atmak için tıklayın
2. Araç dosyayı yerel olarak okur ve kodlar
3. Çıktı formatını seçin: düz Base64, data URI veya CSS arka plan
4. Sonucu kopyalayın

Base64 Gömme İçin Neden WebP

WebP’nin JPEG/PNG’ye göre temel avantajı dosya boyutudur. Daha küçük dosyalar, HTML veya CSS’e gömüldüğünde önemli olan daha kısa Base64 stringleri üretir:

HTML/CSS’te satır içi resimler için WebP’nin boyut avantajı Base64 artışı ile birleşir. 180 KB’lık bir WebP, 240 KB Base64’e kodlanırken, aynı görüntünün JPEG versiyonu 333 KB olur.

Base64’te Korunan WebP Özellikleri

Kayıplı ve kayıpsız modlar

WebP her iki sıkıştırma modunu da destekler. Kayıplı WebP (varsayılan) JPEG’e benzer ancak daha verimlidir. Kayıpsız WebP, PNG ile rekabet eder. Base64 kodlaması, dosyanın kullandığı modu korur.

Alfa şeffaflık

JPEG’den farklı olarak WebP, hem kayıplı hem de kayıpsız modlarda şeffaflığı destekler. Şeffaflık içeren kayıplı bir WebP, aynı içeriğe sahip bir PNG’den tipik olarak çok daha küçüktür. Bu, WebP’yi şeffaf arka plan gerektiren Base64 gömülü resimler için güçlü bir seçim haline getirir.

Animasyon

Animasyonlu WebP, GIF’e dramatik olarak daha iyi sıkıştırma ile bir alternatiftir. Ancak animasyonlu görüntüler büyük Base64 stringleri üretir. Animasyonlu içerik için dosyaya bağlantı vermeyi düşünün.

Tarayıcı Desteği

WebP data URI’ları, WebP resimlerini destekleyen tüm tarayıcılarda çalışır:

• Chrome: sürüm 17’den beri (2012)
• Firefox: sürüm 65’ten beri (2019)
• Safari: sürüm 14’ten beri (2020)
• Edge: sürüm 18’den beri (2018)

Küresel tarayıcı desteği %97’yi aşar. Kalan ~%3 için (iOS 13 ve altı eski Safari), PNG veya JPEG’e geri dönüş gerekir.

Modern İş Akışlarında WebP Base64

Next.js ve framework resim optimizasyonu

Next.js gibi modern framework’ler resimleri otomatik olarak WebP’ye dönüştürür. Kritik bir ekran üstü resmi satır içine almanız gerekiyorsa, WebP çıktısını Base64’e dönüştürmek mümkün olan en küçük satır içi yükü verir.

Aşamalı iyileştirme

WebP Base64’i CSS’te PNG geri dönüşü ile kullanabilirsiniz:

.hero {
  background-image: url(data:image/png;base64,...);
}

@supports (background-image: url("data:image/webp;base64,UklGR")) {
  .hero {
    background-image: url(data:image/webp;base64,...);
  }
}

Canvas dışa aktarımı

canvas.toDataURL('image/webp', quality) metodu, canvas içeriğini doğrudan WebP data URI’si olarak dışa aktarmanızı sağlar. Kalite parametresi (0.0 ila 1.0) kayıplı sıkıştırma seviyesini kontrol eder.

Diğer resim formatları için JPG’den Base64’e, PNG’den Base64’e, SVG’den Base64’e veya genel Resimden Base64’e dönüştürücüye bakın. Base64’ü resme dönüştürmek için Base64’ten Resme kullanın.