Resimler, gelişen teknoloji dünyasının en hızlı fikir aktarma araçları durumuna videolardan sonra zaman geçtikçe gelen ortam dosyalarıdır. Teknoloji dünyasında bu kadar sık karşılaşılan resimler, haliyle web ortamında da önemli bir yere sahip olmuştur. Bu tanımlama ile birlikte en yaygın bloglar olmak üzere veya herhangi bir amaç ile kurulmuş web sitelerinde içeriklerin genellikle %25'ini resimler oluşturmaktadır. Bu kadar sık tercih ve kullanım oranına sahip resimler, web sayfalarında yüklenme konusunda sayfalara en fazla ağırlık veren veya yavaşlamasına sebep olan dosya türlerinin de başındadır. Yüksek performans için maksimum 300-500 KB sayfa boyutu tavsiyesine rağmen resimler tek başına bu değerden daha fazla boyuta sahip olabilirler. Bu konuda yardımımıza sayfa hızı arttırma çalışmalarında büyük öneme sahip olan resim optimizasyonu adımı yardımımıza koşmaktadır.

Resim optimizasyonu nedir?

Resim optimizasyonu, web sayfalarında yoğun yüke neden olabilen resimlerin normal boyutundan genellikle kalite kaybı olmadan daha düşük boyutlara düşürülmesini sağlayan çalışmadır. Büyük olasılıkla görüntü kalite kaybı olmadan yapılırken, çok daha iyi performans alınması amaçlandığında görüntü kalitesinden de taviz verilebilmektedir. Resim optimizasyonu araçlarının yanı sıra, orijinal resim boyutundan kullanılacak resim boyut(lar)una indirgemek de bu optimizasyon çalışmalarına dahil olmaktadır. Resimleri harici bir sunucudan çekmek ve ikon boyutunda yer alan küçük boyutlu resimleri ortak bir adresten çekerek sunucuya verilen yükü düşürmek de resimlerin daha performas verici şekilde yüklenmesini sağlayabilmektedir. Dilerseniz bu maddelere tek tek de değinerek yazımızın asıl ağırlık vereceğimiz kısmına geçelim.

Resimlerin Boyutunu Düşürmek

Resim optimizasyonu denildiğinde akla, en doğal şekilde ilk başta akla gelen resimlerin boyutunu düşürmek mantığı gelir ve bu en popüler web site hızlandırma yollarından biridir. Bazen ziyaretçilere daha hızlı bir site sergileyebilmek adına kaliteden bile gereksinim verilebilmektedir. Resim boyutu düşürmek için herhangi bir grafik uygulamasında web için kaydet veya harici web sitelerinde yükleyip, optimizasyonlu halini indirip kullanabilirsiniz.

Harici web sitelerinden en çok tercih edileni https://tinypng.com/ adresi olmak ile birlikte kullanıcıların deneyimi üzerinde, resim KB boyutunda çok büyük düşüş yapan facebook'a yükleyip, tekrar indirdikten sonra kullanmak da hafife alınmayacak bir uygulamadır.

Resimlerin Boyutlarını İndirgemek

Önceki maddeye başlık itibari ile benzese de tamamen farklı yapıda iki adımdır. Yapılan işlemi örnek vererek anlatmak daha uygun olacağı için direk örnekleme ile başlayalım. Örneğin elimizde 1920x1080 boyutlarına sahip bir resim olsun. Bu resimi web sitemizde blogların öne çıkarılan resimi olarak kullanacağız. Bunun yanı sıra öne çıkarılan resim olacağı için blog yazımız web sitemizin ana sayfasında veya sidebarlarda gözükürken de ekstra bir boyut daha düşecek. Bu iki şekil için iki farklı resim yükleyeceğiz fakat normal boyut olan en büyük boyuttaki resimden kat ve kat daha düşük KB boyutuna sahip olacak.

Genellikle blog yazı sayfalarında 750x430 boyutu, ana sayfalarda veya sidebalarda ise 210x136 boyutları kullanılmaktadır. Herhangi bir resim düzenleme programı ile orjinal boyutumuzdaki resimi bu iki boyutlara indirgeyip ayrı ayrı kullanıyoruz. Böylece ana resimi o boyutlarda kullanmamamıza rağmen yüklemiş olmayacağız. Wordpress sistemlerde her kullanılacak bölüm için resimin o boyuta indirgenmiş hali yüklenebilmektedir. Bu yüzden wordpress sistemlerinde ekstra bu adımı uygulamanıza gerek yoktur.

Resimleri CDN yardımı ile hızlı yüklemek

CDN'ler ana sunucuya yardım olarak kullanılan lokasyonları farklı veya ziyaretçilere göre daha yakın olarak kullanılan sunuculardır. Bunlar sayesinde resimler ziyaretçinin daha yakın olduğu yerden çekilerek daha hızlı yüklenir. 

Küçük boyutlu resimleri tek adresden çekmek

İkon boyutlarında(64x64,125x125) küçük resimleri tek bir resim gibi çekerek daha hızlı bir performans almanızı sağlayabilirsiniz. HTTP/2 web 2.0 teknolojisi ile birlikte sunuculara artık otomatik talimat vermesi sağlanarak, kullanıcının ekstra bir şeyler yapmasına gerek kalmamakta.

Bu bölüme kadar yazımızda siz değerli takipçilerimize, resim optimizasyonu nedir ve hangi adımlar uygulanmalıdır konusunda aklınızda şüphe bırakmayacak derecede açıklamalarda bulunduk. Yazımız hakkında görüş, fikir ve düşüncelerinizi yorum kısmından iletebilir, eksik kaldığınız konularda yardım talebini iletişim adreslerimizden gönderebilirsiniz.

Yorumlar
Henüz yorum yapılmamış. İlk yapan olmak ister misiniz?

Yorum Yap