PNG WebP Çevirme (PNG to WebP)

PNG WebP çevirme nedir, bu araç ne yapar?

PNG WebP çevirme, kayıpsız PNG dosyalarını Google'ın geliştirdiği WebP biçimine dönüştürmek demektir. Amaç çoğu zaman aynı görüntüyü daha küçük bir dosyada tutmak ve web sayfasının daha hızlı açılmasını sağlamaktır. Bu sayfadaki araç işi tarayıcınızın içinde yapar; dolayısıyla dosyanız cihazınızdan çıkmaz.

Araç şunları yapar:

• Girdiyi kendisi tanır: Biçimi dosyanın ilk baytlarından okur, uzantıya bakmaz. Uzantısı yanlış olan bir dosyayı bile doğru tanır.
• Şeffaflığı korur: PNG'deki saydam alanlar WebP'de de saydam kalır.
• Kayıplı WebP üretir: Kalite kaydırıcısı varsayılan olarak %92'dedir ve istediğiniz an değiştirebilirsiniz.
• Piksel ölçüsünü değiştirmez: Genişlik ve yükseklik aynı kalır. Boyutu küçültmek için Resim küçültme aracını kullanın.

Biz web sitesi projelerinde bu dönüşümü yayına almadan önce yaparız. Çünkü hazır tasarımlardan gelen şeffaf PNG'ler sayfayı en çok ağırlaştıran dosyalar arasında yer alır. Konuyu daha geniş görmek isterseniz web sitesi görsel optimizasyonu rehberimize göz atın.

PNG WebP çevirme sitenizi neden hızlandırır?

Görseller çoğu sayfada en ağır dosyalardır; bu yüzden onları küçültmek, sayfa hızına en doğrudan dokunan işlerden biridir. Google'ın WebP belgesine göre kayıpsız WebP görseller PNG'den %26 daha küçüktür. Kayıplı WebP ise eşdeğer SSIM kalitesindeki JPEG dosyalarından %25-34 küçük olur.

Google ayrıca şunu belirtir: kayıplı sıkıştırma kabul edilebiliyorsa, şeffaflık taşıyan WebP görseller PNG'ye göre tipik olarak 3 kat küçük dosya verir. Bu aracın çalıştığı senaryo tam olarak budur. Yine de bunlar ortalama değerlerdir; sizin dosyanızın sonucu içeriğe göre farklı çıkar.

Küçük dosyanın sitenize etkisi üç yerde belli olur:

• Yükleme süresi: Sayfadaki en büyük öğe çoğu kez bir görseldir. Bu yüzden görsel boyutu, Core Web Vitals içindeki LCP süresini doğrudan etkiler.
• Mobil veri: Ziyaretçiniz daha az veri indirir; bu da yavaş bağlantıda fark yaratır.
• Sıralama: Hız tek başına sıralamayı belirlemez, ancak site hızının SEO'ya etkisi kullanıcı deneyimi üzerinden kendini gösterir.

Kısacası PNG WebP çevirme, tek başına mucize yaratmaz; fakat tasarım dosyalarıyla dolu bir sayfada en ucuz ve en hızlı kazançlardan biridir.

Şeffaflık WebP'de de kalıyor mu?

Evet, korunur. WebP alfa kanalını, yani saydam alanları destekler. Google'ın belgesine göre kayıpsız WebP, şeffaflığı yalnızca %22 ek bayt karşılığında taşır. Bu araçta da PNG'deki saydam arka plan, yarı saydam gölgeler ve yumuşak kenarlar WebP çıktısında yerinde durur.

Bu durum JPG'den temel farkıdır. JPG şeffaflık taşımaz; bu yüzden hedefi JPG yaptığınızda araç saydam alanları beyaza, siyaha ya da seçtiğiniz özel renge boyar. WebP hedefinde böyle bir doldurma gerekmez. Logonuzu koyu ve açık zeminde birlikte kullanacaksanız WebP bu yüzden uygun seçimdir.

Bir uyarı yapalım: kayıplı sıkıştırmada kalite düştükçe saydamlığın sınır çizgileri ve yumuşak gölgeler ilk bozulan yerler olur. Bu yüzden şeffaf görselleri indirdikten sonra hem beyaz hem koyu bir zeminde gerçek boyutunda açın. Kenarda halka ya da tırtık görürseniz kaliteyi yükseltin. JPG gerektiren bir yer için PNG JPG çevirme sayfasını kullanabilirsiniz.

Kalite kaydırıcısı WebP dosya boyutunu nasıl etkiler?

Bu araç WebP'yi kayıplı üretir; kayıpsız WebP seçeneği yoktur. Kalite kaydırıcısı varsayılan olarak %92'dedir. Değeri düşürdükçe dosya boyutu düşer, fakat ayrıntı da azalır. PNG'nin kayıpsız yapısı bu yüzden WebP çıktısında birebir aynen sürmez; çoğu görselde gözünüz farkı yakalayamaz, ancak sert kenarlı çizimlerde ve küçük yazılarda önce siz fark edersiniz.

Dengeyi bulmak için şu sırayı deneyin:

1. Kaliteyi %92'de bırakın ve satırdaki önceki ile sonraki boyuta bakın.
2. Kazanç yetmiyorsa kaydırıcıyı küçük adımlarla düşürün; araç her değişiklikte listeyi yeniden dönüştürür.
3. Sonucu indirip gerçek boyutunda açın, çünkü satırdaki önizleme küçüktür ve kusuru saklar.
4. Gradyan alanlarında bant ya da kenarlarda halka görürseniz bir adım geri dönün.

Hedefi PNG'ye çevirirseniz kaydırıcı kaybolur, çünkü PNG kayıpsızdır ve kalite ayarı almaz. Ayrıca her zaman orijinal PNG'yi saklayın. Kayıplı bir WebP'yi sonradan PNG'ye çevirmek, kaybedilen ayrıntıyı geri getirmez.

Logo, ikon ve ürün görselinde PNG WebP çevirme ne zaman mantıklı?

Her PNG'nin WebP'ye dönmesi gerekmez. Kararı görselin türü ve kullanım yeri verir:

• Büyük logo ve şeffaf grafikler: Web sitesinde gösterilecekse WebP iyi bir seçimdir. Logonuz vektör (SVG) olarak elinizdeyse, basit çizgili logolar için onu kullanmak çoğu zaman daha doğrudur.
• Ürün fotoğrafları: Şeffaf kesim ya da beyaz fonlu ürün görselleri en büyük kazancı sağlayan gruptur. Mağaza ve katalog sayfalarında yüzlerce görsel olduğu için kazanç birikir. Ayrıntı için e-ticaret danışmanlığı sayfamıza ve ürün sayfası rehberimize bakabilirsiniz.
• Blog görselleri ve ekran görüntüleri: Fotoğraf ağırlıklıysa WebP kazandırır. Metin ağırlıklıysa yazı kenarlarını kontrol edin.
• Çok küçük ikonlar: Dosya zaten birkaç KB ise kazanç da küçük olur. Satırdaki değişim yüzdesine bakın.

PNG'de kalması gerekenler de vardır: baskıya gidecek kaynak dosyalar, ileride yeniden işleyeceğiniz tasarımlar ve piksel hassasiyeti isteyen çizimler. Kısacası WebP yayın kopyası, PNG ise arşiv kopyası olsun.

WordPress ve tarayıcılar WebP'yi destekliyor mu?

Evet, destekliyor. WordPress, 5.8 sürümünden beri WebP görselleri medya kitaplığına yüklemenize ve tıpkı JPG ya da PNG gibi kullanmanıza izin verir. Sunucunuzun görsel kitaplığı (Imagick ya da GD) bazı ayrıntıları etkileyebilir; Site Health ekranı hangi biçimlerin desteklendiğini gösterir. Eklenti ya da tema seçimi netleşmemişse WordPress mi özel kodlama mı yazımıza göz atın.

Tarayıcı tarafı da rahattır. MDN'ye göre Chrome, Edge, Firefox, Opera ve Safari WebP'yi gösterir. Safari'de iki şart vardır: Safari 14 ya da üstü olmalı, macOS'ta da Big Sur (11) ya da daha yeni bir sürüm bulunmalıdır.

Kaydetme tarafında ise küçük bir ayrıntı var. Araç, WebP dosyasını tarayıcınızın kodlayıcısıyla üretir. Tarayıcınız WebP kaydetmeyi desteklemiyorsa araç bunu açıkça söyler ve sessizce başka bir biçim vermez. Böyle bir durumda aynı sayfayı başka bir güncel tarayıcıda açmanız yeterlidir.

Eski sistemler için yedek biçimi nasıl hazırlarsınız?

Yedek biçim, WebP'yi açamayan bir ortam için hazırda tuttuğunuz PNG ya da JPG kopyasıdır. Bazı formlar, e-posta uygulamaları ve eski yazılımlar WebP'yi kabul etmeyebilir. Bu yüzden yüklemeden önce kuralları okuyun.

İki yol işinizi görür:

• Sayfa içinde yedek: MDN'nin önerdiği gibi <picture> öğesi içinde önce bir <source type="image/webp">, sonra PNG ya da JPG yedeği yazın. Tarayıcı WebP'yi anlıyorsa onu, anlamıyorsa yedeği kullanır.
• Dosya düzeyinde yedek: Aynı görseli bu araçta hedef biçimi PNG ya da JPG yaparak yeniden indirin. Geri dönüşüm için WebP PNG çevirme sayfası da hazırdır.

Yedek hazırlarken orijinal PNG'yi silmeyin. Dosya adını ve alt metni aynı bırakın; SEO danışmanlığında gördüğümüz kadarıyla bunlar, biçimden bağımsız olarak arama motorlarına görselin konusunu anlatır. Uzantı değişince görselin adresi de değişir; bu yüzden eski adresi kullanan sayfaları güncelleyin.