Daha Hızlı Sayfalar için PNG'den WebP'ye Dönüştürücü

PNG keskin grafikler ve şeffaflık için mükemmeldir, ama ağırdır. Tek bir tam genişlikte ekran görüntüsü birkaç megabayt olabilir; bu sayfaları yavaşlatır ve mobil veri kullanan ziyaretçilere maliyet çıkarır. WebP, aynı görünümü çok daha az alanda tutmak için Google tarafından tasarlandı ve 2020'den beri tüm büyük tarayıcılar tarafından destekleniyor.

Yeniden boyutlandırmadan veya kırpmadan PNG dosya boyutunu küçültmek istiyorsanız biçim değiştirmek çoğu zaman tek başına en büyük kazançtır. Düz renkli grafikler ve PNG olarak kaydedilmiş fotoğraflar sıklıkla yüzde 50 ila 80 küçülür ve fark ekranda zor fark edilir.

İki biçim nasıl karşılaştırılır

WebP ile PNG'yi karşılaştırdığınızda ikisi de şeffaflığı destekler ve ikisi de kayıpsız mod sunar. PNG eski masaüstü yazılımları ve baskı süreçlerince daha yaygın kabul görür. WebP, tasarrufun çoğunun geldiği isteğe bağlı bir kayıplı mod ekler ve animasyonu da destekler. Tarayıcıda gösterilen her şey için WebP genellikle daha iyi bir sunum biçimidir.

Tarayıcınız her PNG'yi çözer, alfa kanalı korunarak gizli bir tuvale çizer ve bu tuvali seçtiğiniz ayarda WebP olarak kodlar. Bunların hepsi sekmenin içinde gerçekleşir. Hiçbir sunucu görsellerinizi almaz; bu, sıra olmadığı ve cihazınızın belleği dışında dosya sayısı sınırı olmadığı anlamına da gelir.

Chrome, Edge ve Firefox bu şekilde WebP dosyaları oluşturabilir. Safari'nin bazı sürümleri WebP'yi gösterebilir ama kodlayamaz; Safari'li bir Mac kullanıyorsanız araç bunu size söyler ve başka bir tarayıcı önerir.

PNG'yi toplu olarak WebP'ye dönüştürme

Bütün bir klasör mü lazım? Aynı anda 50'ye kadar dosya seçin veya bırakın. Bir ilerleme çubuğuyla birbiri ardına işlenirler ve sonuçlar tek tek veya birlikte kaydedilebilir. Adlar korunur, yani header.png header.webp olur; bu da onları bir projede değiştirmeyi kolaylaştırır.

Kayıplı kalite ayarları

Kaydırıcı PNG'den WebP'ye kaliteyi 50 ila 100 ölçeğinde kontrol eder. Varsayılan 85 çoğu fotoğraf ve illüstrasyona uyar. Küçük yazılı ekran görüntüleri için 90 veya üzeri harfleri net tutar. Büyük ana fotoğraflar için 75 ila 80 çoğu zaman ekranda aynı görünür ama çok daha hafiftir. Sevdiğiniz dengeyi bulana kadar boyut sütununu izleyin ve önizlemeyi karşılaştırın.

Kayıpsız PNG'den WebP'ye

Her pikselin tam olarak olduğu gibi kalması gerektiğinde Kayıpsız'ı işaretleyin; örneğin piksel sanatı, arayüz taslakları veya yeniden düzenleyeceğiniz görseller. Kayıpsız WebP genellikle optimize edilmiş bir PNG'den yaklaşık dörtte bir daha küçüktür. Kayıplı mod kadar küçülmez, ama hiçbir şey atılmaz.

Şeffaf alanları korumak

Logolar, simgeler ve kesilmiş ürünler şeffaf arka planlara dayanır. Bu araç PNG'yi hem kayıplı hem kayıpsız modda şeffaflığı koruyarak WebP'ye dönüştürür, böylece sonuç her sayfa rengine temiz oturur. Tersine, örneğin bir pazar yeri için düz bir arka plana ihtiyacınız varsa arka plan araçlarımız yardımcı olabilir.

Web sitesi için PNG'yi WebP'ye dönüştürmek istiyorsanız en kolay yol aynı dosya adlarını koruyup HTML'nizde veya CSS'inizde uzantıyı güncellemektir. Birçok geliştirici WebP kaynağı ve yedek olarak orijinal PNG ile bir picture öğesi kullanır, ancak güncel tarayıcı desteğiyle yedeğe nadiren ihtiyaç duyulur.

WordPress için PNG'den WebP'ye dönüştürülmüş dosyaları doğrudan ortam kütüphanesine yükleyin; sunucunuzun görsel kütüphanesi desteklediği sürece WordPress 5.8 sürümünden beri WebP'yi kabul eder. Shopify, Wix, Squarespace ve çoğu modern site oluşturucu da WebP yüklemelerini kabul eder.

E-posta, sosyal medya ve belgeler

WebP tarayıcılar için yapılmıştır, bu yüzden web dışında kullanmadan önce iki kez düşünün. Birçok e-posta istemcisi, eski ofis paketleri ve bazı sosyal ağlar onu hâlâ dönüştürür veya reddeder; matbaalar da genellikle JPG, PNG veya PDF bekler. Bu hedefler için orijinal PNG'yi saklayın veya dönüştürücümüzle bir JPG kopyası oluşturun. WebP'yi parladığı yerde kullanın: kontrol ettiğiniz sayfalar ve uygulamalar; orada kazanılan her kilobayt deneyimi her cihazda ve bağlantıda her ziyaretçi için hızlandırır.

Core Web Vitals'a yardımcı olur mu?

Görseller çoğu zaman bir sayfadaki en büyük öğedir, bu yüzden daha hafif dosyalar Largest Contentful Paint puanına yardımcı olur ve mobil ziyaretçilerin veri kullanımını azaltır. Biçim değişikliğini doğru genişlik ve yükseklik öznitelikleriyle ve ekranın altındaki görseller için tembel yüklemeyle eşleştirin; en yaygın iki hız uyarısını ortadan kaldırırsınız.

Önce yeniden boyutlandırın, sonra dönüştürün

Biçim hikâyenin yalnızca yarısıdır. 800 piksellik bir sütunda gösterilen 4.000 piksellik bir ekran görüntüsü WebP olarak bile bant genişliğini boşa harcar. Görselleri görünecekleri genişliğin yaklaşık iki katına ölçekleyin; bu onları yüksek yoğunluklu ekranlarda net tutar; ardından dönüştürün. Görsel yeniden boyutlandırıcımız ilk adımı aynı gizli, tarayıcı içi şekilde halleder.

Metni ve ince çizgileri kontrol edin

Kayıplı sıkıştırma ince çizgileri ve küçük harfleri yumuşatabilir. Bir ekran görüntüsünü, grafiği veya şemayı dönüştürdükten sonra önizlemede yakınlaştırın ve orijinalle karşılaştırın. Kenarlar bulanık görünüyorsa kaydırıcıyı beş veya on puan yükseltin ya da kayıpsıza geçin. Fotoğraflar çok daha toleranslıdır ve nadiren varsayılandan fazlasına ihtiyaç duyar.

Dosyaları mantıklı adlandırın

Arama motorları dosya adlarını küçük bir alaka işareti olarak okur ve insanlar görsellerinizi indirdiklerinde onları görür. Bu yüzden kirmizi-kosu-ayakkabisi.webp gibi açıklayıcı bir ad IMG_2041.webp'den daha iyidir. PNG'lerinizi dönüştürmeden önce yeniden adlandırın, yeni dosyalar bu adları devralır ve sonradan düzeltilecek bir şey kalmaz. Görselleri bir sayfaya yerleştirirken anlamlı alt metin ekleyin ve yüklenirken düzen kaymasın diye genişlik ve yükseklik belirleyin.

Bir dosya dönüşmediğinde

Bir dosya reddedilirse gerçekten PNG olduğundan emin olun; araç yalnızca uzantıyı değil dosya imzasını kontrol eder. Yarım inmiş veya bozuk görseller çözülemez, bu yüzden yeniden indirin. Her dosya başarısız oluyorsa tarayıcınız muhtemelen WebP kodlayamıyordur; Chrome, Edge veya Firefox'a geçmek sorunu çözer.

Mac'te PNG'yi WebP'ye dönüştürmek için bu sayfayı Chrome, Edge veya Firefox'ta açın ve dosyaları doğrudan Finder'dan sürükleyin. Windows ve Chromebook'ta aynı tarayıcılar hiçbir şey kurmadan çalışır. Android'de PNG'yi WebP'ye dönüştürmek için sayfayı Chrome'da açın, bırakma alanına dokunun, galerinizden veya dosyalarınızdan görselleri seçin ve sonuçları İndirilenler'e kaydedin.

WebP PNG'den küçük mü? Neredeyse her zaman, özellikle kayıplı modda; fark en çok PNG olarak kaydedilmiş fotoğraflarda büyüktür. Nadir istisna, PNG'nin zaten iyi sıkıştırdığı çok küçük, düz bir simgedir; bu olursa boyut sütunu size gösterir ve orijinali tutabilirsiniz.

Peki WebP ile AVIF? AVIF daha da küçük olabilir, ama kodlama daha yavaştır, onu oluşturmak için tarayıcı desteği daha dağınıktır ve birçok CMS platformu ve e-posta istemcisi onu hâlâ reddeder. WebP güvenilir orta yoldur: yaygın destekli, hızlı üretilen ve PNG'den çok daha hafif. Sonradan düzenlemeniz veya basmanız gerekirse diye orijinal PNG dosyalarınızı ana kopya olarak saklayın.