Görsel optimizasyonu web sitesinde yer alan resimler, fotoğraflar, vektörel çizimler, logolar gibi tüm görsellerin küçültülmesi veya sıkıştırılması işlemidir. Site kurulumu yapılır yapılmaz başlatılmalıdır.
Yazı İçeriği
Görsel Optimizasyonu Yapmak Neden Önemli?
Standart bir web sitesinin %50’den fazlası görsellerden oluşur. Sadece sizin ekledikleriniz değil, temaya ait yerleşik görseller de olur. Görseller site hızına büyük etki ettiğinden görsel optimizasyonu her site için gereklidir.
SEO Açısından En Önemli Unsurlardan Biridir
Bazı web siteleri çok yavaştır. Bu yavaşlığın birincil sebebi çoğu zaman görsellerdir. Pek çok kullanıcı örneğin cep telefonuyla çektiği yüksek çözünürlüklü fotoğrafı hiç optimize etmeden yazıya aynen yükler. Bu tip sitelerin okunma ve tıklanma şansı yoktur.
Yüksek boyutlu görseller siteyi mutlak derecede yavaşlatır. Site hızı çok ama çok önemli olduğundan, web tasarımı işi ile iştigal eden herkesin görsel optimizasyonu ilk site kurulumundan itibaren yapması gerekir.
Görsel Optimizasyonu Kullanıcı Açısından Önemlidir
Son yıllarda internet kullanıcıları masaüstünden mobile kaydı. Mobil kullanıcılar ise interneti bir kota ile kullanıyor. Bununla birlikte, büyük resimler ziyaretçilerin mobil internet kotasını tüketiyor.
Google buna bile dikkat ediyor. Bu nedenle, kısıtlı kaynakların en verimli şekilde kullanılması adına, web sitenize yüklediğiniz HER BİR GÖRSELİ optimize etmelisiniz.
Resim ve Fotoğraflar Nasıl Optimize Edilir?
Optimizasyon iyileştirme anlamında kullanılır. Görsel, görünen tüm resim, fotoğraf, vektörel çizimler anlamına gelir. Dolayısıyla görsel optimizasyonu, sitenizdeki tüm görselleri elden geçirmeniz demektir.
Görsel optimizasyonu yapmak için iki yol var. WordPress sitesi kullanıyorsunuz görsel optimizasyonlarını eklenti kullanarak yapabilirsiniz. Bu açıdan en iyi eklenti nedir, bunu bulmak lazım. İkinci seçenek olarak, görselleri daha siteye yüklemeden önce optimize edebilirsiniz. Tercih etmeniz gereken yöntem ikincisidir.
Görselleri Siteye Yüklemeden Önce Optimize Edin
Nasılsa daha sonradan optimizasyon yaparım diyerek görselleri olduğu gibi siteye atmayın. Veritabanında büyük yer işgal etmesi bir yana, daha sonra bunları optimize ettiğinizde dahi ilk yüklenirken alacağınızdan daha iyi sonuçlar elde edemezsiniz.
Yazınıza ekleyeceğiniz görseli yazıya uygun şekilde isimlendirin. Örneğin bir fotoğrafı yükleyeceksiniz, dosya adını şu formatta yazın: “bu-benim-fotografim” yani aralarına “-” TİRE koyarak dosya ismi yazın çünkü Google bu tireleri boşluk olarak görecektir .
Görseli TinyPNG gibi online sıkıştırma programlarından birinde sıkıştırın. İdeal görsel büyüklüğü 50-150 KB arasındadır. İdeal piksel ise 700-750 piksel arasındadır. Görselinizin büyüklüğü bu aralıklardaysa görseli sitenize yükleyebilirsiniz. Ayrıca, görseli küçültün ama büyütmeyin.
- Küçük Resim: 150 piksel x 150 piksel
- Orta: Büyük olan değer 300 piksel
- Orta Büyük: 768 piksel genişlik örneğin 768×300 piksel
- Büyük: Büyük olan değer 1024 piksel
- Tam: Orijinal görüntü.
İşlem bu kadar basit. Daha sonradan milyon tane eklenti ile uğraşacağınıza bu yöntemle en baştan görsel optimizasyonu sorununu halledersiniz. Görseli siteye yükledikten sonra alt başlık eklemeyi unutmayın.
Blogger kullanıyorsanız görsellerinizi Google Fotoğraflara yükleyin, yükleme esnasında size görseli küçültmek isteyip istemediğinizi soracak. Küçültün ve blogunuza o şekilde ekleyin. Platform ne olursa olsun görselinize, yazıya uygun bir dosya ismi vermeyi unutmayın.
Görsel Optimizasyonu İçin Gzip Kullanmak
Pingdom gibi site hızını ölçen platformların çok sevdiği Gzip, sitenizdeki tüm görselleri toplu halde sıkıştırmaya yarıyor. Böylece, görsellerin sitede kapladığı yer ciddi şekilde düşüyor ve görsel optimizasyonu yapılmış oluyor.
Yüzlerce görselin olduğu ve daha önce görsel optimizasyonu yapılmamış bir sitede Gzip kullanmayı denedim ama site çöktü. Yani bu yöntemi kullanmanın riskleri var. Dosyalarınızın ve veritabanınızın yedeğini aldıktan sonra deneyebilirsiniz. Yeni eklenen fotoğrafları da birinci yöntemde anlattığım gibi yüklersiniz.
Görsel Optimizasyonu için Eklenti Kullanmak
WordPress eklenti veritabanında görsel optimizasyonu yapabileceğiniz pek çok eklenti bulunuyor. Eklentiler çok değişken olduğundan size en iyi eklentiler şunlardır diyemem. Söyleyebileceğim tek şey, CACHE eklentilerinin veya GÜVENLİK eklentilerinin yan ürün olarak sunduğu resim optimizasyonu seçeneklerini kullanmayın ve sadece görsel optimizasyonu işi yapan eklentilerle bu işlemi tamamlayın.
Görsellerde Doğru Dosya Formatları Kullanmaya Çalışın
Ben sitedeki görsellerimde ağırlıklı olarak jpeg ve png kullanıyorum. Bununla beraber, aşağıdaki unsurları dikkate almanızda fayda var.
- Daha büyük fotoğraflar veya resimler için JPEG seçin.
- Arka plan saydamlığını korumak istiyorsanız PNG kullanın ama PNG dosyalar daha büyüktür.
- Eğer sitenize yüklediğiniz eklentilerden biri (litespeed cache gibi) yapabiliyorsa, JPEG ve PNG yerine WebP kullanın. Daha küçük dosya boyutlarıyla yüksek kaliteli sonuçlar üretir.
- İleri kullanıcı iseniz logolar ve simgeler için SVG kullanın çünkü CSS veya JavaScript yardımıyla resimleri SVG formatında yönetebilirsiniz. Örneğin kalite kaybı olmadan resimleri yeniden boyutlandırabilirsiniz.
Gereksiz, konuyla alakasız görsel kullanmayın, az öz olsun, mümkünse yazıda hikayesi olsun görsellerin. Eskiden tabiri caizse ne bulursak yazıya ekliyorduk, o devir bitti. Google ve diğer arama motorları görselleri çok önemsiyor. Kullanıcının hoşuna gitmeli ve sıkıştırılmış dahi olsa görsel net olmalı. Ayrıca, lazy load kullanmanızı önermem.
Bunları da Okuyabilirsiniz
Temayı Türkçe Yapma – Eklentisiz: Yazıda temayı Türkçe yapma konusunda basit adımlardan oluşan bir rehber yer alıyor. Sitenizi eklentisiz tamamen Türkçe yapmayı anlattım
2021 Ücretsiz ve Kaliteli 10 WordPress Eklentisi: Eklentiler arasında en iyisini bulmak bazen gerçekten zor olabiliyor ve kullanıcı yorumları arıyoruz. Bu yazı, benim en iyi eklentiler listem