Web sitemize eklediğimiz görselleri optimize etmediğimiz zaman web sitemizi yavaşlatabilirler. Çünkü doğru boyuta sahip olmayan ve sıkıştırılmamış resimlerin dosya boyutları yüksek olabiliyor bu da hali ile web sitemizin geç açılmasına neden oluyor.
Görsel Optimizasyonu Neden Önemlidir?
Görsellerimizi optimize etmemiz web sitemizin hızlı açılmasını sağlar. Optimize etmek sadece dosya boyutu ile alakalı da değildir. Görüntü kalitesi ve SEO için de optimize etmemiz gerekmektedir. Bu makalemizde sizlere en önemli görsel optimizasyonu ayarlarından bahsedeceğiz.
1. Adım: Doğru Boyuta Sahip Görseller
Görsellerimizi doğru boyutlarda web sitemiz eklemeliyiz örneğin Genişlik 1500 x Yükseklik 900 boyutunda bir görsel yüklemek istiyorsunuz fakat bu web sitenizde 300 genişlik 150 yükseklik şeklinde görünecek ise ilgili resmin boyutunu web sitenizde görünecek oranlarda küçültmeniz gerekecektir. Çünkü gereksiz yere dosya boyutu yüksek bir resim yüklemiş olacaksınız ve web sitenizin yavaşlamasına neden olabilirsiniz.
2. Adım: Görsel Dosya Boyutu Sıkıştırma
Görsellerin dosya boyutunu sıkıştırdığımız zaman resim kalitesini bozmadan görselin dosya boyutun ciddi bir oranda düşürebiliyoruz. Web sitenize eklediğiniz görseller örneğin dosya boyutu 800 KB ise bunu 76-100 KB gibi oranlara düşürebilirsiniz. Görselleri manuel optimize etmek için ben Tiny PNG web sitesini kullanıyorum. Wordpress’de bu sıkıştırmayı otomatik yapan eklentiler mevcuttur, dilerseniz onları kullanabilir veya kendiniz sıkıştırıp web sitenize ekleyebilirsiniz.
3. Adım: Görselleri Yeni Nesil Formatlarda Sunma
Google PageSpeed Insights ve benzeri hız ölçüm araçlarında web sitelerimizin hız ölçümlerini yaptığımız zaman sık karşılaştığımız hata “Resimleri yeni nesil biçimlerde yayınlayın” hatasıdır. Bunun nedeni PNG ve JPG kullanımıdır. Tabi ki bu hatadan kurtulmak için bir çözüm var! Görsellerimizi WEBS ve SVG formatında yayınlamak bu saya de hem web sitelerimiz daha hızlı açılacaktır. Resimleri WEBS ve SVG formatına çevirmek için Photoshop programı veya dosya formatı çevirici web sitelerini kullanarak resimlerinizi WEBS ve SVG formatına çevirebilirsiniz.
4. Adım: Görsel SEO Ayarlarının Doğru Yapılması
SEO( Arama motoru optimizasyonu ) bir çoğumuzun başının belasıdır : ) Peki bu görsellerin SEO ayarlarını nasıl yapılandırırız? Web sitemize giren arama motorları botları görsellerimizin isimlerine dikkat etmektedir. Yazdığınız konu ile görsel ismi alakalı olmalıdır. Mesela bu konuda görsel optimizasyonundan bahsediyoruz, yukarda ki görselin ismi ise gorsel-seo-ayarlarinin-dogru-yapilmasi.webp şeklinde eklendi. Fakat bu görselin ismini alakasız kelime ve harflerden oluşturur isem arama motorları resmi anlamakta zorluk çeker.
Bunun yanında görsellerin alt text eklememiz görsellerin SEO ayalarında kritik rol oynar. Alt text etiketi kullanırken görsel hakkında bilgi verilmelidir. Örneğin yeni çıkmış bir telefon modeli resmi yüklediniz o telefonun markası ve modelini alt texte ekliyebilirsiniz. Bu etiket görsellerin yüklenmediği durumlarda ziyaretçilerinize bilgi verme ve görme engelli ziyaretçilerinizin ekran okuyucular arayıcılığı ile görselleriniz hakkında bilgi edinmesini sağlar. Alt etiketi kullanmanızı öneriyoruz. Alt etiketler <img src=”xx-marka-telefon-modeli.png” alt=”xx markanın yeni telefon modeli ″> şeklinde eklenmelidir. Alt=”” alanını görsellinizin alakasına göre düzenleyebilirsiniz.
5. Adım: Gecikmeli Yüklenen Görseller
Görseller sayfalarımızın yüklenme hızını çok ciddi etkilemektedir. Çok sayıda görsel kullandığımız zamanlar web sayfalarımızı yavaşlatmaktadır. Bunun önüne geçmek için ” lazy load” görselleri ertelemeli olarak yükletme yöntemini kullanmanızı tavsiye ederiz. Wordpress web sitelerde bunu eklentiler ile yapabilirsiniz. Web sitelerinize kod ile de müdahale ederek “lazy load” ayarlarınızı yapılandırabilirsiniz.
Bu makalemizde görsel optimizasyonu ve SEO ayarlarından bahsettik. Web sitenizde ki görselleri optimize etmekte sorun yaşıyorsanız, bizler ile iletişime geçerseniz web sitelerinizin görsel optimizasyonunu yapabiliriz.
