GTmetrix gibi site hızı ve performansı değerlendirme araçlarında en sık karşılaşılan sorunlardan biri de Serve Scaled images uyarısıdır. Serve Scaled images (Ölçeklendirilmiş Görüntülerin Sunulması), web sitelerinin performanslarını iyileştirmeye ve sitenin bayt tasarrufu sağlamasına yardım etmektedir. Bir web sitesini ziyaret eden kullanıcı, 300×300 pixel boyutlarında görseli görüntülerken, sitesi alt yapısında aynı görseli 30×30 pixel şeklinde barındırıyorsa, tarayıcılar ilk olarak büyük dosyayı indirmekte ve ardından ölçeklendirme yapmaktadır.

Serve Scaled images İçin Yapılması Gerekenler

Web sitelerinde kullanılan görseller, bazı durumlarda farklı boyutlarda görüntülenebilmektedir. Böyle bir durumda, belirlenmiş görüntü kaynağına hizmet eden görsellerin ölçeklendirilmesi için, görsellere ait sayfalarda HTML ve CSS kullanımı gerekmektedir. Örnek olarak, web sitesine ait bir logo 400×400 pixel boyutlarında iken 40×40 pixel küçültülmüş sürümünü de elde etmek mümkün olmaktadır.

Siteyi ziyaret eden kullanıcı, iki farklı boyuttaki dosyayı indirmek zorunda kalmadan, daha küçük boyutlardaki görselin yeniden ölçeklendirilmesi için biçimlendirme yapılmaktadır. Bir görsele ait görüntü boyutu, sayfada bulunan örneklerden herhangi biri ile eşleştiğinde, 400×400 pixel boyutlarında oluşturulan görsel de anlamlı hale gelmektedir. Web sitesinde kullanılan ölçeklendirilmiş görsellerden çok daha büyük bir görsel sunulduğunda, özellikle mobil görünümde, daha yüksek baytlar gönderilmiş olmaktadır.

Görsellerin, web sitesinde kullanılan en büyük boyutlarda ölçeklendirilmesi için, resim düzenleyicilerden yararlanılmaktadır. Bu sorunun çözümü için, görsellere ait boyutların, web sayfasında da tanımlanması gerekmektedir.

Ölçeklendirilmiş Görsel Kullanımı ve Avantajları

Ölçeklendirilmiş görsel, boyutları CSS ya da HTML dosyalarında tanımlanmış olan boyut ile aynı olan görüntülerdir. Site ziyaretçisi, 500×500 pixel boyutlarında bir resim yüklediğinde, HTML ve CSS dosyaları aynı görseli 50×50 pixel olarak tanımlandığında, tarayıcılar mevcut görselin önce büyük boyutlu formatını indirir ve görüntüleme gerçekleşmeden önce ölçeklendirilir.

Böyle bir durum ise direk olarak Serve Scaled images hatasına neden olur. Serve Scaled images hatasının en basit çözümü ise söz konusu görselin 50×50 pixel olarak yeniden boyutlandırılması ile sağlanmaktadır. Gerçekleştirilen işlem sonrasında, tarayıcılarda görüntüleri gereksiz şekilde indirmek ve ölçeklendirmek durumunda kalınmaz.

Web sitesinde ölçeklendirilmiş görsel kullanımı, hem kullanıcı hem de tarayıcı aşısından avantajlar sunan etkili bir yöntemdir. Uygun boyutlarda kullanılan görseller, düşük bayt kullanımı ile veri tasarrufu sağlamaktadır. Özellikle akıllı telefon ve tabletlerde sitenin performansını bu şekilde arttırmak mümkün olmaktadır. Ölçeklendirilmiş görsellerin avantajları aşağıdaki şekilde sıralanmaktadır.

  • Daha az yer kaplamaktadır
  • Çok daha hızlı yüklenmektedir
  • Kaynak kullanımlarını etkili oranda azaltmaktadır

Ölçeklendirilmiş görsel kullanımı, web sitesi optimizasyonu için de büyük önem taşımaktadır. Yapılan Serve Scaled images güncellemeleri ile sitenin arama motoru sonuç sayfalarındaki yerini de geliştirilmektedir.

Serve Scaled images Hatası Nedir? Nasıl Çözülür?

Web geliştiriciler, sitelerin performanslarının ölçümlenmesi için GTmetrix gibi araçlardan yararlanmaktadır. Site hızı ve performansını değerlendiren bu araçlarda, Serve Scaled images gibi hatalarla sıkça karşılaşılır. Serve Scaled images hatası, sitede bulunan görsellerin, görüntülenme boyutlarına uygun olarak ölçümlendirilmediğini göstermektedir. Web sitelerinin hızını etkileyen faktörlerden biri de görsel boyutlarının yanlış biçimlendirilmesi olmaktadır.

Sitelerde yer alan görsellerin boyutları, sitenin açılış ve yükleniş hızlarını değiştirmektedir. Serve Scaled images hatası, bir görselin boyutu ile barındırıldığı konumdaki boyut farklılık gösterdiğinde ortaya çıkmaktadır. Bu durum da sitenin açılma hızında yavaşlamaya neden olmaktadır. Google Chrome gibi sık kullanılan tarayıcıların, sitelerin yüklenme hızlarına çok önem verdiği bilinen bir gerçektir. SEO çalışmalarının temelinde yer alan site hızı konusu, görsel optimizasyonu ile büyük ölçüde geliştirilmektedir.

WordPress İçin Serve Scaled images Çözümü

Web geliştiricilerin sıklıkla kullanmış oldukları WordPress üzerinden bu çözümü, kolay kullanımlı eklentiler ile sağlanabiliyor. Serve Scaled images çözümü için önerilen WordPress eklentileri ise şöyledir;

Lazy Load By Optimole 

Smush / Lazy Load images

Yukarıda önerilen eklentiler ile WordPress’de Serve Scaled images hatasını kolay bir şekilde çözmek mümkündür. Sisteme yüklenen bu eklentiler, web sitesinde barındırılan tüm görsellerin ölçeklendirme işlemlerini uygun şekilde gerçekleştirebilir.

HTML İle Serve Scaled images Çözümü

Web sitelerinde yer alan tek bir görselin ölçeklendirilmesi, tarayıcıların da desteklemiş olduğu HTML yöntemi ile de yapılabiliyor. Seçilen görsel için kullanılacak kod dizilimini aşağıda bulabilirsiniz.

Belirtilen kod dizilimin işlevi ise, web sitesinde kullanılan gerçek görselin, 3 farklı boyutuyla site içerisinde yüklenmesini sağlamaktır.

  • 400w olarak tanımlanan küçük görselin genişliği 400 pixel olarak görüntülenecektir.
  • 800w şeklinde tanımlanan orta görsel, 800 pixel genişliğe sahip olacaktır.
  • 1200w olarak belirtilen büyük görselin genişliği ise 1200 pixel olarak görünecektir.

Bu şekilde farklı boyutlarda görsel oluşturmanın amacı ise yapılan bu tanımlamalar ile kullanıcıların ekran boyutları değiştiğinde, görsellerin de bu duruma uyumlu olarak değişmesini sağlamaktır.

PicResize İle Serve Scaled images Çözümü

PicResize, oldukça kolay kullanımlı bir görsel optimizasyon aracıdır. Web sitesinde yer alan görsellerin ölçeklendirilmesi için, öncelikle optimize edilecek görsellerin indirilmesi gerekir. İşlem yapılacak site görseli ya da görselleri FTP istemcisi üzerinden indirilmektedir. PicResize aracı ile indirilmiş olan görseller, tarayıcılara uygun değerlere göre ölçeklendirme yapılmaktadır. Farklı boyutlarda ölçeklendirilen görsellerin, her birinin ayrı şekilde adlandırılması, sistemde yaşanacak karışıklığın önüne geçmektedir. Bu yöntem ile eski görseller değiştirilirken de mevcut kodlarda değişiklik yapılmasını gerektirmez. Siteye ait görsellerin ölçeklendirilmesi tamamlandıktan sonra, sitenin mutlaka yeniden test edilmesi önerilmektedir. Tüm işlemler doğru bir şekilde gerçekleştirildiğinde çıkan sonuç ise aşağıdaki gibi görüntülenmektedir.

Sık Karşılaşılan Hatalar ve Çözümleri