Site Hızlandırma ve Görsel Optimizasyon | editorcum

Site Hızlandırma ve Görsel Optimizasyon

Görüntüler web sitesinin kaçınılmaz parçasıdır. Web sitemde çok fazla resim kullanıyorum ve hangi optimizasyonu yapmalıyım? Cevap basit, sayfanızdaki her görüntünün, kullanıcı deneyimini doğrudan etkileyen yükleme hızını etkilemesidir. Hiç kimse yavaş yükleme alanlarından hoşlanmaz ve bu nedenle görüntü optimizasyonu konularına en yüksek önceliğe sahip olmanız gerekir. Web sitenizin sayfa yükleme hızını yükseltmek için yapmanız gerekenler görüntü optimizasyonu şu şekilde ;

Görüntü sayısını azaltın ;

Sayfadaki her bir görüntü, sunucunuza ayrı bir HTTP isteği gönderir ve indirilmesi zaman alır. Görüntüleri yalnızca gerekli olduğunda kullanın. Daha az görüntü, daha az sayıda sunucu isteği ve hızlı yükleme sayfası anlamına gelir.

Görselleri Sıkıştırın ;

Sayfa yüklendiğinde tarayıcının görüntüleri sunucunuzdan indirmesi gerekir. Her KB boyutunun küçültülmesi performansa bağlı olacaktır; bu nedenle görüntüleri uygun sıkıştırma işleminden sonra sunmayı unutmayın. Örneğin, görüntüler konum, kamera ayrıntıları vb. Gibi meta verilere sahiptir. Açık bir şekilde gerekmediği sürece, görüntülerin boyutunu azaltmak için eklentiler kullanarak bu verileri silin. Ayrıca Google’ da resim sıkıştırma şeklinde arama yaparsanız , hazır resimlerinizi sıkıştırabileceğiniz web sayfaları işinizi görecektir.

Doğru Görüntü Boyutunu Kullan ;

Görüntüleri tam olarak sitede nasıl görüntülemek istiyorsanız ona göre hazırlayın. 600×350 görüntüye ihtiyacınız olduğunda, 1200×700 boyutunda görüntü kullanmak sayfa hızınıza zarar verecektir. WordPress ‘ te resim boyutlarını ayarlayabileceğiniz eklentiler mevcut. Ben WP-Smushit eklentisini kullandım. Sizlere de tavsiye ederim.

HTML / CSS İçinde Yeniden Boyutlandırma Yapmayın!!

İnsanlar resmi tarayıcıya indirdikten sonra yeniden boyutlandırmak için HTML ve CSS kullanıyor. Tarayıcının görüntüyü istenen boyuta getirmesi için ek zamana ihtiyaç duyması nedeniyle yükleme işlemine biraz daha zaman kazandıracaktır. Örneğin, 90×90 piksel görüntü yüklemek ve aşağıdaki HTML koduyla boyutu küçültmeye çalışmak iyi bir uygulama değildir.

<img src=”resim URL” height=45 width=45>

Uygun Resim Formatını Seçin ;

Evrensel olarak desteklenen üç resim formatı vardır – GIF, PNG ve JPEG. Her birinin bir artıları ve eksileri vardır.

  • Animasyona ihtiyacınız olduğunda GIF kullanın
  • PNG, yüksek çözünürlüklü ve fotoğraf görüntüleri gibi yüksek kaliteli görüntüler için kullanılabilir. Ancak PNG resimlerin boyutu daha büyük olacaktır.
  • JPEG, normal ekran görüntüleri ve düşük görüntü boyutu ve düşük kalitede web görüntüleri için (PNG’ye kıyasla) daha uygundur.

8 Comments

  1. Daha cahil zamanlarımda web siteme çok ağır görseller yüklemiştim. Bir sürü üstelik, bol fotolu moda ve dekorasyon konularına mesela. Photoshop ile boyutlandır, webe uyarla falan; bunlardan hiç haberim yoktu. Öğrendiğim yıllar oldu, siteyi hala tamamen hafifletemedim. Yap yap bitmiyor.

    1. Sitenizdeki resimleri toplu şekilde optimize edebileceğiniz uygulamaları araştırın derim. WordPress kullanıyorsanız Smush eklentisini öneririm. Saygı ve sevgilerimle 🙂

    1. Hocam ben de Smush eklentisi kullanıyorum bir zararını görmedim. WordPress eklenti > yeni ekle > arama bölümüne smush yazarsanız eklentiye ulaşabilirsiniz.

  2. Bir internet sitesi için gerekli olan tüm adımları burada saymışsınız. Bizlerde sitemiz de bunları uyguluyoruz. Ve diğer insanlara da bu adımlardan bazılarını uygulamalarını söylüyoruz. Ruhan doğru konuları seçiyorsunuz tebrik ediyorum seni.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir