Görsel Optimizasyonu Nedir?

Web sitenizin yavaş açılmasına neden olan en önemli şey görsellerdir. Sitenizdeki büyük boyutlardaki resimler, web sitenizi yavaşlatarak yavaş açılmasına neden olur. Olumsuz kullanıcı deneyimine neden olur.

Görsel Optimizasyonu
Görsel Optimizasyonu

Görsel optimizasyonu ise, sitenizdeki görselleri sıkıştırıp dosya boyutlarını küçültmenize yarar ve bu da sayfanın yüklenme süresini hızlandırır. Kayıplı ve kayıpsız sıkıştırma yaygın olarak kullanılan iki yöntemdir.

Araştırma sonuçlarına göre, resimler toplam web sayfasının boyutunun ortalama %21’ini oluşturuyor.

Sayfa Başına Ortalama Bayt (KB)

Bu istatistik sektörlere göre değişiklik göstermektedir. Örneğin bir e-ticaret sitesi için web sitesindeki görsellerin boyutu sayfanın toplam boyutunun %70’ini oluşturabilmektedir.

Görsel optimizasyonu nasıl yapılır?

Doğru Görsel Formatını Seçin:

Resimlerinizi değiştirmeye başlamadan önce , en iyi görsel formatını seçtiğinizden emin olun . Kullanabileceğiniz birkaç görsel türü vardır:

  • PNG – daha yüksek kaliteli görüntüler üretir, ancak aynı zamanda daha büyük bir dosya boyutuna sahiptir. Kayıpsız bir görüntü formatı olarak oluşturuldu, ancak kayıplı da olabilir.
  • JPEG – kayıplı ve kayıpsız optimizasyon kullanır . İyi bir kalite ve dosya boyutu dengesi için kalite düzeyini ayarlayabilirsiniz.
  • GIF – yalnızca 256 renk kullanır. Animasyonlu görüntüler için en iyi seçimdir. Yalnızca kayıpsız sıkıştırma kullanır.
  • WebP – Google tarafından geliştirilmiş olup, JPEG, PNG veya GIF resim biçimlerine kıyasla daha küçük veya daha iyi görünen resimler oluşturmak için tasarlanmıştır.

JPEG XR de vardır fakat tüm tarayıcılar tarafından evrensel olarak desteklenmeyebilir . İdeal olarak, çok renkli görüntüler için JPEG veya JPG basit görüntüler için PNG veya WebP kullanabilirsiniz.

Sıkıştırma Kalitesi ve Boyut

Bir görüntüyü çok fazla sıkıştırırsanız görüntü kalitesi bozulur.

Görsel Optimizasyonu Örnek
Görsel Optimizasyonu Örnek

İlki, çok düşük kaliteli bir görüntü ile sonuçlanan çok yüksek bir sıkıştırma oranı kullanılmıştır . İkincisi, en yüksek kaliteyle sonuçlanan (ancak daha büyük dosya boyutu) çok düşük bir sıkıştırma oranı kullanmaktır. Not: orijinal görüntü 2.06 MB’dir.

Peki görsel sıkıştırmak için hangi araçlar kullanılabilir?

  • TinyJPG – JPEG resimlerinizin dosya boyutunu küçültür.
  • TinyPNG – PNG dosyalarınızın dosya boyutunu küçültmek için akıllı kayıplı sıkıştırma teknikleri kullanır
  • Kraken.io – Ultra hızlı bir görüntü iyileştirici ve sıkıştırıcıdır

Kraken.io teknolojisini API kullanarak kendi sistemlerinize entegre edip optimizasyon yapabilirsiniz.

Kayıplı ve Kayıpsız Optimizasyon Nedir?

Kullanabileceğiniz iki tür sıkıştırma metodu vardır bunlar kayıplı ve kayıpsız dır.

Kayıplı – bu, verilerin bir kısmını ortadan kaldıran bir filtredir. Bu, görüntüyü bozar, bu nedenle görüntüyü ne kadar küçülteceğinize dikkat etmeniz gerekir. Dosya boyutu büyük miktarda azaltılabilir. Bir görüntünün kalite ayarlarını yapmak için Adobe Photoshop, Affinity Photo veya diğer görüntü düzenleyiciler gibi araçları kullanabilirsiniz. Yukarıda kullandığımız örnek kayıplı sıkıştırma kullanıyor.

Kayıpsız – bu, verileri sıkıştıran bir filtredir. Bu kaliteyi düşürmez, ancak görüntülerin oluşturulmadan önce sıkıştırılmamış olmasını gerektirir. Photoshop, FileOptimizer veya ImageOptim gibi araçları kullanarak masaüstünüzde kayıpsız bir sıkıştırma gerçekleştirebilirsiniz .

Her bir görüntü veya format için en iyisinin ne olduğunu görmek için sıkıştırma tekniklerinizi denemek en iyisidir. Görüntüyü web için kaydettiğinizden emin olun. Bu, birçok görüntü düzenleyicide bulunan bir seçenektir ve optimum sıkıştırmayı gerçekleştirebilmeniz için size kalite ayarlamaları sağlar. Kalitenin bir kısmını kaybedersiniz, bu nedenle görüntüleri pikselleştirmeden yapabileceğiniz en iyi dengeyi bulmaya çalışın.

Görsel Sıkıştırma Örneği
Görsel Sıkıştırma Örneği

Görselleri Yeniden Boyutlandırma

Görselleri uygun boyutlarda kaydedin. Görseli koyacağınız alan küçük ise,  alanın kapladığı boyutu öğrenmelisiniz daha sonra da resmi küçültüp ilgili alanın boyutlarına göre boyutlandırmalısınız. Resimlerinizi yeniden boyutlandırmak için HTML veya CSS kullanmanız gerekiyorsa, bu yöntemlerle sakın yapmayın.

Dosya boyutunu küçültmek için görüntüyü kapladığı alanın boyutuna göre kaydedin ve web sitenize o şekilde koyun aksi halde sayfanın açılmasını yavaşlatacaktır ve web site hızınızın puanı düşecektir.

 

Bir cevap yazın