Resim Optimizasyonu
Web siteniz hızlı olsun ve arama motorları bunu ödüllendirsin mi istiyorsunuz ? İşte bu sorunun cevabı olan resim optimizasyonu bu makalemizde anlatacağız.
1. Adımımız: Resimlerde Boyut Etiketleme
Genellikle web sitenize koyduğunuz resimler default(varsayılan) olarak xhtml ve css olarak boyutlandırılır.
Ayrıca xhtml kaynaklı resimlere hiçbir boyutlandırma yapılmamış olabilir. Böyle bir durumda sitenizde ki resimleri veya yeni koyacağınız resimler sitenizin yavaş açılmasına sebebiyet verebilir. Web tarayıcıları hiçbir optimizasyon yapılmayan resimleri öncellikle tam boyut olarak açar, sonra orijinal boyutuna geri getirir.
Eğer siz sitenizde resim optimizasyonu yapmamış ve yapmıyorsanız bu arama motorları optimizasyonu için büyük bir eksi puandır.
Öncellikle yapmamız gereken ilk adım xhtml kaynaklı resimlerimizi örnekte ki gibi;
<img src=”image.jpg” alt=”” width=”90″ height=”90″ />
veya
<img src=”image.jpg” alt=”” style=”width: 90px; height: 90px;” />
height=90
width=”90″
Bu boyutlara getirdiğimiz resimlerimizi tarayıcımız kolay okuyarak sitemizin daha hızlı açılmasını sağlar.
Ve buda arama motoru optimizasyonumuz için bulunmaz bir nimmettir.
2. Adımımız Resimlerin Sıkıştırılması:
Web sitemizde kullandığımız resimlerimizin boyutları ve kalitesi baskı ve web olarak karşımıza çıkar.
Peki bunu nasıl çözüp resimimizin kalitesinde ödün vermesine izin vermeden kapladığı alanı(boyutunu) düşürebiliriz ?
Öyle birşey yapmalıyız ki hem sitemiz çok daha hızlı açılsın hemde resimlerimizin kalitesi bozulmasın.
Photoshop gibi programlarla bu sorun aslında çözülebiliyor. Resim boyutumuzu ve çözünürlüğümüzü ayarlayıp sitemizin daha hızlı açılmasını sağlayabiliriz. Bu sayede resimimizin kalitesinden de ödün vermemiş oluruz. Ancak photoshop gibi program daha karmaşık bir yapıya sahip olduğundan kullanım alanları çok geniş olmakta.
Benim kullandığım ve kullanımının çok sabit olduğu ”JPEGMini” adlı program burada sizin yardımınıza koşuyor olacak.
Daha ileri ki makalemizde “JPEGMini” ile ilgi bir video hazırlamayı planlıyorum daha detaylı bilgiliyi o makalemde bulabileceksiniz
3. Adımımız Resim Boyut Optimizasyonu(ÖNEMLİ)
Bunca şeyi anlattık peki bunu nasıl yapacağız diyorsanız bu bölüm tam size göre olacaktır. Resim boyut optimizasyonu bence bu adımlardan en önemlisi ve en etki edeni. Aslında bu olmayınca anlattıklarımızın hiçbirinin bir önemi de kalmıyor.
Şimdi resim optimizasyonu ile neler yapabiliriz biraz onlara bakalım
Sitenize default(varsayılan) olarak koyduğunuz resimler hemen hemen her zaman orijinal boyutları ile kullanılmaz.
Yani bu ne demek oluyor şöyle açıklarsak ben siteme bir resim koyuyorum örneğin 750×700 pixel boyutunda olsun.
Ancak web tarayıcım bu resmin çıktısını genellikle bana 350×300 olarak verir ve resmin kaynağı 750×700 pixellik olduğundan bu sitemizi yavaşlatmaktan başka bir işe yaramaz.
Bu sebeple kullanılması gereken bölümde daha yüksek bir pixel boyutuna ait bir resim olmuş olur.
Yapmamız gereken şey ise 350×300 lük bir çıktısı olan fotoğrafı 350×300 olarak kullanmak sitemize bir artı puan daha kazandıracaktır.
4. Adımımız RESİM FORMATI:
Sitenizde kullanacağınız resimlerinde formatını optimize etmek size bir artı daha kazandıracaktır.
Kullanacağınız resimlerin uzantısı jpg, png, gif… uzar da gider ancak üç nokta ile sıraladıklarımdan çok bu 3 uzantıyı kullanmanız da özellikle fayda vardır. Resimlerinizin şıkıştırılması ve boyutlandırılması uzantısı ile farklılık gösterebilir. Nasıl mı örneğin bir jpg uzantılı resminiz 300kb yer kaplarken png uzantılı fotoğrafınız kaliteye paralel olarak 50 mblara kadar çıkabilir.
Bir sonra ki makalemde photoshop kullanmadan “jpegmini” ile uygulamalı olarak resim optimizasyonundan bahsedeceğim.
Makalemizin devamı için bizi takip etmeye devam edin.
