Bir web sitesinin hızlı olması ziyaretçiler ve arama motoları için çok önemli bir etkendir. Bu yazımızda resim optimizasyonu nasıl yapılır bunlara değineceğiz.
Resim Optimizasyonu Boyut Etiketi Ekleyerek Nasıl Yapılır ?
Resim optimizasyonu yaparak web sitenizin page speed değerinde yüksek artış görebilirsiniz.
Web sitelerinde resimler xhtml veya css kaynaklı olarak boyutlandırılırlar. Xhtml kaynaklı resimlerde bir ölçü tanımı yapılmamışsa resimlerin geç yüklenmesine sebep olabilir.
Boyut etiketsiz görseller etiket verilenlere göre daha geç yüklenir ve bu da diğer sitelere göre avantajsız duruma düşmenize sebep olur. Hiçbir ölçü girilmeyen sitelerde tarayıcı resmi önce tam boyutta açar sonra orijinal boyuta getirir. Bu işlemler saniye veya saliselere denk gelsede yüzlerce resimde büyük bir zaman oluşturur.
Bu sebeple xhtml kaynaklı kullanılan resimlere height=”100″ width=”100″ şeklinde resim etiket boyutu getirilmelidir.
Görsellerin Sıkıştırılması ile Yapılan Görsel Optimizasyon
Görsellerin kalitesi çoğunlukla baskı kalitesi ve web şeklinde belirlenir. Ancak bunlar büyük boyutlara denk gelmektedir. Resimleri sıkıştırarak % 70 veya % 80 oranında kod tasarruf sağlayabilirsiniz. Bu tasarruf aynı zamanda sizlere sayfa hızı olarak da olumlu yansıyacaktır.
Resimleri photoshop ile pixel ölçülerini orantılı şekilde küçültebilir veya kalitesini seçerekte düşürebilirsiniz. Ancak en etkili Yöntem online sıkıştırma uygulamalarıdır.
Tinypng adresinden resimlerinizi % 70 % 80 oranında kalitesi bozulmadan kolaylıkla toplu olarak sıkıştırabilirsiniz.
Görsellerin Url Yapısını Değiştirerek Optimizasyon
Resimlerin kaynak kodları içerisinde görsel url yapısı site hızında etkisi olacak derecededir. Doğrudan resimlerle alakalı olmasada dikkat edilmesi gereken unsurlardandır.
Örnek verecek olursak;
<img src=”https://barisdayak.com/images/logolar/logo.svg” alt=”Web Seo Hizmetleri” width=”135″ height=”80″/>Şeklinde url yapısını her görsel için kullandığımızda her görsel için ayrı ayrı gereksiz olarak https://barisdayak.com/ uzantısını kullanmış oluyoruz. 100 hatta 1000lerce görseli bu yöntemler çağırdığımızda büyük bir kaynak büyümesine sebep olacaktır.
<img src=”/images/logolar/logo.svg” alt=”Web Tasarım Uzmanı” width=”135″ height=”80″/>Şeklinde görsel çağırmak ise çok büyük bir kaynak kod tasarrufu sağlayacaktır. Web sitenizde sayfa hızı çok yetersiz ise bizlerle iletişime geçerek teknik bilgi ve destek alabilirsiniz.
Farklı bir yazımız Google Spam Cezaları nelerdir? Nelere Dikkat Etmeliyiz ? konusu hakkında bilgi edinebilirsiniz.
