Jpg, Png, Webp ? Hangi görüntü formatını kullanmalıyım ?

• Web sitenizin yüklenmesi 3 saniyeden uzun sürerse ziyaretçilerinizin yüzde 50’sini kaybedebileceğinizi biliyor muydunuz?
• Mobil internet kullanıcılarının% 73’ü, yüklenmesi çok yavaş olan bir web sitesiyle karşılaştıklarını söylüyor.
• Mobil internet kullanıcılarının% 51’i, kilitlenen, donan veya bir hata alan bir web sitesiyle karşılaştıklarını söylüyor.
• Mobil internet kullanıcılarının% 38’i mevcut olmayan bir web sitesiyle karşılaştıklarını söylüyor.
• Tüketicilerin% 47’si bir web sayfasının 2 saniye veya daha kısa sürede yüklenmesini bekliyor.
• İnsanların% 40’ı, yüklenmesi 3 saniyeden uzun süren bir web sitesini terk ediyor.
• Sayfa yanıtında 1 saniyelik bir gecikme, dönüşümlerde% 7’lik bir azalmaya neden olabilir.
• Bir e-ticaret sitesi günde 100.000 TL kazanıyorsa, 1 saniyelik bir sayfa gecikmesi potansiyel olarak her yıl 2,5 milyon TL satış kaybına mal olabilir

Peki içeriklerinizde hangi resim formatını, PNG veya JPG’yi kullanmalısınız? Sonuçta, resimler doğrudan sayfa yükleme süresini ve UX’i etkiler. Hangisi senin için daha iyi?

PNG ve JPEG Karşılaştırması

JPG veya JPEG, Joint Photographic Experts Group’tur (resim kodlama standardını geliştiren bir ekip). Boyut olarak nispeten daha küçük olan görüntülerin kayıplı bir sıkıştırmasıdır.

PNG, Taşınabilir Ağ Grafikleridir. Daha net ve şeffaf bir arka plana sahip bir görüntünün kayıpsız sıkıştırılmasıdır. Nispeten daha büyük boyuttadır.

JPG ve PNG arasındaki fark, görüntüleri sıkıştırmak için kullandıkları algoritmadır. JPG’ler daha küçük olma eğilimindedir, ancak kayıplı sıkıştırma kullanırlar, yani onları her kaydettiğinizde bir miktar kalite kaybedersiniz. PNG’ler daha büyüktür ancak kalite kaybı olmaz.

Mutlaka Oku !  Mobil uygulama optimizasyonu

En kaliteli görüntü formatı nedir?

Tüm resimler sıkıştırılmamış olduğundan, mevcut en yüksek kaliteli resim formatı TIFF’dir. PNG görüntüleri kayıpsız bir sıkıştırma formatı kullanır, bu nedenle depolama için sıkıştırıldıklarında hiçbir kalite kaybı olmaz.

Aşağıda Webp, Png, Jpg ve Gif formatlarının hangi özellikleri desteklediğini görebilirsiniz.

Hangi görüntü formatını kullanmalı ?

Temel kural, görsel metin ağırlıklıysa , PNG gitmeniz gereken şeydir çünkü daha nettir ve yüksek netliğe sahiptir. Ek olarak, grafikler, diyagramlar ve infografikler gibi materyaller daha iyi okunabilmeleri için hepsi PNG formatında olmalıdır.

Öte yandan, görüntü yalnızca normal bir fotoğraf veya gerçek hayattan bir görüntü ise, JPG daha iyi bir seçimdir. Çünkü sadece okumak için değil, okumak içindir; görüntünün kenarları bulanık olsa bile, çok fazla sorun olmayacak.

Görüntüler nasıl sıkıştırılır?

Daha önce de birçok yazımda bahsettiğim gibi, büyük medya dosyaları yükleme süresini artırır. Bu nedenle, ağır yüklenen ve yüksek boyutlu görüntülerden kaçının . Eğer çok büyüklerse sıkıştırın. Görüntüleri sıkıştırmak için kullanabileceğiniz bazı online siteler.

• Compress JPG
• Compress PNG
• TinyJPG
• Png2Jpg

Ayrıca photoshop programı ile görüntü kalitesini değiştirerek kendi bilgisayarınızda da boyutlar ile oynayabilirsiniz. Web sitenizin hızını buradan kontrol edin ve herhangi bir resmin web sayfanızı yavaşlatıp yavaşlatmadığını görün. Varsa, küçültün.

JPG’nin tercih edildiği bazı örnekler:

• Sosyal medyada paylaşmanız gereken resimler (Facebook, Twitter, vb.)
• Daha hızlı yükleme süresinin çok önemli olduğu web siteleri, bloglar ve çevrim içi dergiler için kullanılan resimler
• Kalitenin o kadar önemli olmadığı küçük çözünürlüklü resimler
• Diğer biçimlerin desteklenemeyebileceği üçüncü taraf hizmetlere yüklenmesi gereken resimler

PNG’nin tercih edildiği bazı örnekler:

• Uzun vadeli görüntü arşivleme
• Şeffaf bir arka plana ihtiyaç duyan resimler
• Mümkün olan en iyi kalitede görüntüler
• Kolayca ithal ve ihraç edilebilen firma logoları

Resim formatları ile ilgili genel olarak ;

Görüntü formatları kalite ve boyut sınırlamaları açısından farklılık gösterir, bu nedenle en önemli olanlara bir göz atalım:

• JPEG , kalite ve boyutun dengelenmesine izin veren en yaygın görüntü türüdür. Kalite kaybı ile gelen sıkıştırılmış bir görüntü dosyası türüdür.
• PNG daha iyi kalite sağlar ancak size daha büyük bir dosya boyutu bırakır. Ayrıca arka plan şeffaflığını korumanıza da olanak tanır. Genelde fotoğraflar için JPEG ve infografikler ve çeşitli tasarım öğeleri dahil olmak üzere neredeyse her şey için PNG kullanılması önerilir.
• BMP , yüksek kaliteli grafiklere izin veren ve Google tarafından indekslenen başka bir formattır. JPEG veya PNG’ye dönüştürmediğiniz sürece BMP dosyalarını sıkıştıramazsınız.
• WebP , güçlü sıkıştırma açısından umut verici olan nispeten yeni bir formattır. Boyuttaki etkileyici küçültme, site hızınızı artırabilir. Sorun şu ki, her tarayıcı şu anda WebP’yi desteklemiyor. 
• SVG , logolar ve simgeler için kullanılır. Bunlar, bir web sitesinde bulunan en küçük görsel öğelerdir. Bu basit ve evrensel bir biçimdir, ancak yazı tipleriyle ilgili olası sorunlar gibi tasarıma özgü bazı dezavantajları vardır. 
• GIF , ziyaretçileri ve paylaşımları çekebilecek ilgi çekici bir içerik türüdür. Google, GIF’leri tıpkı diğer görüntü türleri gibi tarar, ancak bariz dezavantajı, GIF’lerin bir web sitesini yavaşlatabilmesidir.