SİTE PERFORMANSI WEB SİTESİ

İlerlemeli (progressive) jpeg nedir? – Site Performansını Geliştirme

İlerlemeli (progressive) jpeg nedir? - Site Performansını Geliştirme

Giriş

Web sitesi optimizasyonunda en önemli görevlerden biri de resimlerdir. Çoğu web geliştiricisi sitesindeki resimleri optimize etmeyi unutur. Önceki rehberlerimizin birinde ölçekli resim sunarak site performansını etkili bir şekilde nasıl geliştireceğimizi öğrendik. Bu rehberde, bir adım daha ileri götürüp temel JPEG görüntülerini ilerlemeli resimlere dönüştürerek, resimleri nasıl optimize edeceğimizi öğreneceğiz.

İlerlemeli JPEG nedir? Normal JPEG’den farkı nedir?

Genellikle, JPEG görüntüleri üstten alta doğru yüklenir. İlerlemeli JPEG görüntülerinin farkı, verinin bir bölümü yüklenirken aynı zamanda da görüntünün tamamının gösteriliyor olmasıdır. Bu da, görüntü tam olarak yüklenene kadar biraz pikselli görünebileceği anlamına gelir. Aşağıda, daha iyi anlamanız için bir örnek ekledim.

Normal JPEG yüklenmesi:

Normal JPEG Yüklenmesi

İlerlemeli JPEG yüklenmesi:

İlerlemeli JPEG Yüklenmesi

İlerlemeli JPEG kullanmak web sitesi performansını nasıl geliştirir?

Daha iyi görsel deneyim sağlamasına ilaveten, ilerlemeli JPEG görüntüleri, normal JPEG görüntülerine kıyasla %2 ila %10 daha küçük olduğundan, ilerlemelei JPEG kullanmak web sitenizin yükünü ve genel performansını artıracaktır. Sunucuya olan talepleriniz daha kısa ve daha verimli olacak ve bu da bant genişliği, disk alanı gibi kaynak kullanımınızı azaltacaktır. Sitenizi özellikle ücretsiz veya paylaşımlı hosting planlarında barındırıyorsanız, ilerlemeli JPEG resimleri son derece etkilidir. Çok sayıda normal JPEG resimlerine sahip olan web siteleri, ilerlemeli JPEG görüntülerindeki kayıplı sıkıştırmadan dolayı büyük fayda sağlayacaktır. Ayrıca, ilerlemeli JPEG resimleri kullanırsanız, web sitenize mobil cihaz veya yavaş internet bağlantısı üzerinden erişen ziyaretçileriniz genel olarak daha iyi bir görsel deneyime sahip olacaktır we sitenizi daha hızlı yükleyecektir.

ÖNEMLİ! Bazı tarayıcılar (örneğin, Windows 7’den önceki Internet Explorer) ilerlemeli JPEG resimlerini desteklemez. Sonraki tüm sürümler ilerlemeli JPEG destekler.

Nelere ihtiyacınız olacak?

Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız var:

  • FTP erişimi

Adım 1 — Sitenizi analiz etmek

İlerlemeli JPEG resimlerle değiştirilebilen normal JPEG resimlerini bulmak için, WebPageTest.org‘u kullanacağız. Bu araç gerçekten harikadır. Ek araç kullanmadan normal JPEG görüntüsünün ilerlemeli sürümünü elde edebilirsiniz.

Bir test sitesini analiz ettikten sonra Performans İnceleme (Performance Review) bölümünün sonuçları:

Site Analizi

Adım 2 — İlerlemeli JPEG resimlerini indirmek

Normal JPEG görüntülerini ilerlemeli olarak değiştirebilmenizi sağlayacak çeşitli araçlar bulunur. İşte birkaçı:

Seçenek 1 — Normal JPEG resimlerini WebPageTest.org kullanarak sıkıştırmak

Değiştirilebilecek görüntülerin listesini bulduktan sonra, Ayrıntılar (Details) bölümüne gidin ve Tüm Görüntüleri Göster’e (View All Images) tıklayın.

Resim Sıkıştırma

Bu bölüm, sayfanızdaki tüm resimleri görüntüler. Bu rehberin 1. Adımını uygulayarak listelediğiniz her resmin üzerindeki JPEG’i Analiz Et (Analyze JPEG) bağlantısına tıklayın ve aşağıya doğru ilerleyin.

JPEG Analizi

Websitenizi barındırmanın daha iyi bir yolunumu arıyorsunuz?

Websitenizi 7/24 özel desteğe sahip en hızlı hosting platformuna taşıyın.

Burada orjinal resminizin Quality 85 Image‘ını bulacaksınız. Tüm Quality 85 Image’ları bilgisayarınıza kaydedin ve bir sonraki adıma geçin. Görüntüleri, orijinal resimlerle aynı dosya adında kaydetmenizi öneririz; bu şekilde, değiştirme prosedürü çok daha kolay olacaktır.

Seçenek 2 — Normal JPEG resimlerini Optimizilla kullanarak ilerlemeli JPEG resimlerine dönüştürmek

Gelecekte sitenize daha fazla resim yüklemeyi düşünüyorsanız veya web siteniz henüz yüklenmediyse, normal JPEG görüntülerinizi ilerlemeli JPEG resimlere dönüştürmek için Optimizilla’yı kullanabilirsiniz. Bu aracı kullanarak, 20’ye kadar resmi optimize edebilir ve kayıplı sıkıştırma algoritmaları kullanarak Quality 85’e veya daha da azına küçültebilirsiniz.

Resim Optimizasyonu

ÖNEMLİ! 85’in altına düşmek kalite kaybına neden olabilir. Dikkatli olun.

Seçenek 3 — İçerik yönetimi sistemi eklentileri ile resimleri optimize etmek

WordPress blogunuz varsa, WP Smush kullanarak normal JPEG resimlerinizi kolayca optimize edebilirsiniz. WP Smush‘ın nasıl kullanılacağı ile ilgili ayrıntılı talimatlar için bu rehbere göz atın.

Adım 3 — Eski resimleri değiştirmek

ÖNEMLİ! Devam etmeden önce web sitenizi veya değiştirmeyi planladığınız resimleri yedeklediğinizden emin olun.

Dosya Yöneticisi‘ni veya herhangi bir FTP istemcisini kullanarak, 1. Adımda listesini elde ettiğiniz görüntüleri bulun. Adım 2’de edindiğiniz yeni Quality 85 Görüntüleri ile değiştirin. 404 hatalarını veya yükleme sorunlarını önlemek için aynı dosya adına sahip olduklarından emin olun.

Adım 4 — Değişiklikleri test etmek

Tüm resimler yüklendikten sonra tarayıcınızın önbelleğini temizleyin ve her şeyin düzgün yüklenip yüklenmediğini görmek için web sitenizi ziyaret edin. Daha sonra, WebPageTest.org ile web sitenizi analiz ederek her şeyin doğru yapılıp yapılmadığını kontrol edebilirsiniz. Detaylar (Details) bölümünde görmeniz gereken sonuçlar:

Site Analizi

Sonuç

Bu rehberde, ilerlemeli JPEG görüntüleri kullanarak web sitenizin hızını artırmayı öğrendik. Daha pürüzsüz görsel deneyim ve daha düşük boyut, sizi ve ziyaretçilerinizi mutlu hale getirirken aynı zamanda sitenin kaynak kullanımını azaltarak SEO ve web sitesi performansını geliştirir. Temel olarak herkesin kazançlı çıktığı bir durum olur.

Yorum Ekle

Yorum göndermek için buraya tıklayın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Dünya çapında binlerce aboneye katılın

ve mükemmel fırsatlarla en yeni rehberler e-posta adresinize gelsin

Please wait...

Abone olduğunuz için teşekkürler!

Şimdi kazanmaya başlayın!

Hepsi bir arada web hosting & alan adı yalnızca

6
25 TL
/ay