Bir çok otorite kaynağa göre artık siteniz yavaş yükleniyorsa bu muhtemele seo başarınızada olumsuz etki edecektir. Hız adına yapılabilecek seçimlerden birisi de sitenizde kullandığınız resim formatlarıdır. Hangi durumda hangi resim formatını seçmelisiniz.
- 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.
En kaliteli görüntü formatı nedir?
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.
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.
Sonuç
Sonuç olarak, görüntü dosyası formatlarında herkese uyan tek bir boyut bulamayacağınız gerçeğine alışmamız gerekir. Farklı koşullara ve ihtiyaçlara bağlı olarak, hem PNG hem de JPG formatları geçerli alternatiflerdir. Makalemizin size bilinçli bir karar vermeniz ve vaka başına doğru dosya biçimini seçmeniz için gereken tüm bilgileri sağladığını umuyoruz.
Profesyonel GRAFİKler firmalar için ve projeler için yüksek önem arzetmektedir. Kurumsallığın en büyük göstergelerinden birisidir.
merhaba …siteme webp formatında resim yüklüyorum ancak tarayıcıda görünmüyor…hata veriyor.. bilgisi olan var mı?
Selamlar,
Webp formatı Google Chrome, Firefox, Edge ve Opera tarayıcıları tarafının güncel versiyonları tarafından desteklenmektedir.
Avif formatı hakkında görüşlerinizi merak ediyorum. Webp’ye göre çok daha efektif sonuç veriyor. Şimdilik tarayıcı desteği kısıtlı olsa da source olarak webp’den önde kullanmakta problem yoktur diye düşünüyorum.
170 kb olan webp’yi avif ile 81 kb’a düşürebiliyorsunuz. Muhteşem sonuçlar!
İşin açığı sizden duyup inceledim harika görünüyor :)