Görsel Optimizasyon ile Daha Hızlı Web Sayfaları

Ağustos 2018
YouTube'ta Takip Et

Resimleri optimize ederek sitenizin daha hızlı ve verimli kullanımını sağlayabilirsiniz. Bunun için görüntü kalitesi kaybı yaşamadan görsellerin nasıl optimize edileceğini, resimlerin nasıl küçültebileceğinizi öğrenmeniz gerekiyor.

Görseller web sitemizin önemli elemanlarından biridir. Blog sayfalarında, banner reklamlarında ve daha birçok noktada sayfanın güzel ve etkileyici görünmesini sağlarlar. Ancak olması gerekenden daha büyük ve yüksek boyutlu imajların görüntülenmesi web sitenizin arama motorları sıralamasına olumsuz etki yaratır ve sizi aşağıya doğru çeker.

Sayfa Hızı Nedir?

Tarayıcının sayfadaki tüm içeriği görüntülemesi için gereken sürenin ölçülmesidir sayfa hızı. Bir web sayfasına girdiğinizde, tarayıcınız sayfadan bayt cinsinden veri indirir. Web sayfalarında bu genellikle megabyte boyutlarındadır. Sayfadaki metinler, görsel unsurlar, animasyonlar, menüler, ne ne olursa olsun indirilir ve bu indirim byte’ının fazla olması, sayfanın yüklenme süresini artırır. Bu da negatif etki yaratır.

Sayfa Hızının Önemi

Yüklenmesi geç olan web sitelerinde kullanıcı, site içinde gezinmek istemez. Bu etki de kullanıcının sayfayı kapamasına kadar gidebilir. Sayfanın geç yüklenmesi kimsenin tahammül edeceği bir durum değil. Ancak tam tersine hızlı yüklenen bir web sitesinde kullanıcı sitede daha fazla zaman geçirir ve daha çok sayfada gezer.

Sayfa hızı Google’da üst sıralara çıkmak için de önemli etkenlerden biri. Google sayfa hızlarını dikkate alıyor ve site sahipleri Google’da üst sıralara çıkmak için sayfalarını daha hızlı olsun diye optimize ediyor.

Sayfa Hızı Nasıl Artırılır?

Sayfa hızınızı, web sitenizin görünümünü değiştirmeden artırmanın bazı yolları var. Web sitelerinde en çok yer kaplayan öğeler görsel elemanlardır. Bir web sitesi hız ölçüm sitesine sitenizi yazdığınızda bunu daha iyi bir biçimde görebiliriniz. Görsellerin optimize edilmesi sayfanın yğklenme hızına büyük oranda etki eder. Bu işleme görüntü optimizasyonu ya da görüntü sıkıştırma adı verilir.

Sayfa hızlandırmak için gereksiz sorgu kullanımlarını kaldırabilir, JS, CSS ve HTML dosyalarını birleştirebilir, web fontları kullanabilirsiniz, bunların her biri önemlidir elbette, ancak sayfanın yüklenme hızını büyük ölçüde etkileyen faktör imajlardır.

Resim Formatları

Web için kullanılan en çok iki format vardır. Web sitenizde kullandığınız imajların bu kriterlere uyup uymadığını kontrol ederek işe başlayabilirsiniz.

JPEG: Ekran görüntüleri, fotoğraflar için JPG kullanın. JPG de deniliyor, JPEG de. Bu formatlar yüksek sıkıştırma oranlarıyla görsellerinizin daha az yer kaplamasını sağlayabilir. Yüksek sıkıştırma, görüntü kalitesini de azaltır elbette. BUnu deneyip ne kadar kaliteli sonuç aldığınıza kendiniz bakmalısınız.

PNG: Logolar, keskin geometrik şekiller ve şeffaf arkaplana sahip imajlar için PNG kullanabilirsiniz. PNG formatları JPG’lerden daha temiz görünürler. Kayıpsız sıkıştırma söz konusudur. Bu da JPEG versiyonlarından daha çok yer kaplaması anlamına gelir. Blogunuzda seyahat fotoğraflarını paylaşırsanız mesela, bunları PNG yapmayın, ama logo gibi ufak ve önemli nesneleri PNG’ye çevirebilirsiniz.

Piksel sayısını azaltmak

Görüntülerin piksel sayısı da dosya boyutunda önemlli yeri var. Örneğin çektiğiniz bir fotoğraf 3000 piksele kadar büyüyebilir, ama siz bunu web’de gösterirken 3000 piksel yerine, web sitenize uygun oranlarda küçültmelisniz. Mesela 800 piksele küçülttüğünüzde web sitesinde, fotoğrafınızın sergilendiği alan için yeterli olabilir. Tabii bu sayfanıza bağlı, sayfanızın hangi boyutları kurtarabileceğini bilmeniz gerekir. Bu işlemler gereksiz piksel fazlalığını azaltıp, dosya boyutunu küçültecek, sayfanızı hızlandıracak ve Google tarafından pozitif olarak algılanacaktır.

Kalite ayarını üşürmek

Fodoğrafınızı, Photoshop gibi görsel editörlerden en kaliteyi ayarlayabileceğiniz bir çubukla karşılaşırsınız. 1 ile 100 arasında değere sahip olan bu sürgüyü düşürerek kaliteyi de düşürebilirsiniz. 100 maksimum kalite anlamına gelir. Görüntünün kalitesinin ne kadarını feda etmek istediğinizi belirtir bu alan. Ben çektiğim fotoğrafları internet sayfama koyarken sıkıştırma oranını 50%’lerde gezdiriyorum ve bu da bana yetiyor. Genellikle 100 değer ile 50 değer arasında kaydadeğer bir görüntü kalitesi farkı yoktur, ama kilobyte cinsinden boyut farkı fazladır. 40’lardan da aşağı düşürdüğünüzde resminizin kalitesinin bozulmaya başladığını farkedersiniz.

Bu kriterleri sağladığınız takdirde sayfa hızınızda büyük artış gözlemleyebilirsiniz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.