Grafik Ögeleri ve Dosya Ağırlıkları

Grafik ögeleri bir sitenin zenginliği ve görsel estetiğidir. Tablolar, metinler ve grafik ögeleri birbirleriyle uyum içerisinde siteye yerleştirilmelidir. Gereksiz grafik ögeleri kullanılmamalıdır, kullanılan ögeler sayfa kapasitesini doldurarak ağırlaştıracaktır (Gürkan, 2007: 23). Site içeriği mümkün olduğu kadar diğer sayfalara paylaştırılmalıdır. Ağır dosya kullanımından kaçınılmalı ve giriş sayfasının boyutu oldukça hafif tutulmalıdır (Pekgöz, 2006: 27). Sayfaların hafif tutulması, sade ve daha basit sayfa tasarımlarıyla mümkün olabilir. Web tasarımında basitliğin belirli avantajları da bulunmaktadır. Zaman kısıtlamalarının etkisi ve kullanıcıların bilgisayar kurulumları arasındaki farklar, basitliği bir zorunluluk haline getirmektedir. Web sayfasındaki her öğeyi indirmek zaman aldığı için basitçe tasarlanmış bir web sayfasının genellikle karmaşık olandan daha hızlı yüklenebilmektedir (Smith ve Bebak,2001: 191).

Sitede ki görseller yayın yapan sunucu bilgisayardan kullanıcının bilgisayarına yüklendikten sonra gösterilmektedir. Yüklenme zamanını, görsel ögelerin boyutları etkilemektedir, az alan kaplaması için dönüştürülen görsel ögeler, daha hızlı yüklenebilmektedir. Kullanıcılar, yapılan bir araştırmaya göre 15 saniye içerisinde indirilemeyen web sayfalarına, ilgilerini kaybetmekte ve ardından siteden ayrılmaktadır (Keş, 2009: 72-73). Büyük ve gereksiz grafikler veya rahatsız edici animasyonlar içeren, yavaş indirilen web sayfaları kullanıcılarına hayal kırıklığı yaşatmaktadır. Bu tür siteler, özellikle de daha yavaş çevirmeli bağlantı kullanan veya mobil cihazlardan bağlanmaya çalışan kullanıcılar arasında popüler değildir (Stone, vd.,2005: 336).

Grafik ögelerini tüm kullanıcılara daha hızlı göstermenin en iyi yolu, küçük dosya boyutlarına sahip resimleri kullanmaktır ve bunu yapmanın iki yolu vardır. İlk yol, sayfa boyutundan küçük olan görüntüleri kullanmaktır. İkinci yol, hafif dosya boyutuna sahip, görüntüleri kullanmaktır. Yani, görüntüyü depolamak için gereken bayt sayısını azaltmak için sıkıştırmaktır (Smith ve Bebak, 2004: 162).

Dosya boyutlarını çeşitli şekillerde sıkıştırmak mümkündür ve genel olarak web sitesi tasarımında grafik ögesi olarak iki ana dosya formatı yaygın olarak kullanılmaktadır. Bunlar GIF ve JPEG dosyalardır. Bu iki format çoğu web tarayıcısı tarafından desteklenir ve bu nedenle çoğu web geliştirme süreçleri içerisinde tercih edilen dosya formatlarıdır. Bu formatlara ek olarak son zamanlarda yayınlanan yeni bir format PNG formatıdır (Navarro, 2001: 224).

Site tasarımı sürecinde bu formatları tercih ederken grafik tasarımcı, sayfanın ve diğer ögelerin kullanımına göre uygun formatlardan birini tercih etmesi gerektiği söylenebilir. Diğer ögelerle uyumlu olarak çalışan format sitenin işlevselliği içinde doğru tercih olacağı öngörülebilir. Web sitesinin dosya boyutu olarak hafif tutulması kullanıcıların sitede amaçlarına daha hızlı ulaşabilmesi anlamına geldiği söylenebilir. Kullanıcıların site içerisinde hızlı hareket etmeleri sistemi daha çabuk kullanmalarına ve site içeriğini daha hızlı keşfetmelerini sağlayacağı söylenebilir. Sitenin hızlı ve aktif kullanımı sayesinde yeni ziyaretçiler kazanmak ve diğerleri arasında tavsiye edilmesinin

mümkün olacağı öngörülebilir. Genel olarak grafik ögelerinin ağır olmaması hem kullanıcılar hem de site için olumlu sonuçlar doğuracağı sonucuna ulaşılabilir.

2.5.3.1.1. JPEG veya JPG (Joint Photographic Expert Group)

Ortak Fotoğraf Uzmanları Grubu, JPEG standardını 1992'de üretmiştir. Bu format, fotoğraflar için çok uygundur. 16,7 milyona kadar renk barındırabilmektedir. Görüntünün boyutu, ayrıntı derecesini kontrol eden sıkıştırma algoritmalarıyla kontrol edilebilir. Veri aktarımını hızlandırmak için sıkıştırma kullanılır ve sıkıştırma ne kadar yüksek olursa, dosya açıldığında ve alıcı tarafından işlendiğinde ayrıntı kaybı artmaktadır. Ayrıntı kaybı göz önüne alınarak sıkıştırılan dosyanın boyutu küçültülmüştür. Böylece bir sayfanın yüklenme süreside kısaltılmıştır (Crowder ve Crowder, 2008: 178).

JPEG formatlı görüntülerin daha hızlı indirme süresi, görüntü kalitesi kaybını telafi etmektedir. Ayrıca, JPEG göstermek için kullanılan görüntü aygıtı düşük çözünürlüklü bir bilgisayar monitörü olduğu için kalite kaybı genellikle fark edilmemektedir. Adobe Photoshop veya başka bir görüntüleme yazılımı kullanılarak fotoğraf görüntüleri JPEG formatına dönüştürülebilir. JPEG dosyasını oluşturulduğunda elde edilen görüntü kalitesine göre sıkıştırma miktarı dışarda değer girilerek dengelenebilmektedir (Sklar, 2012: 341). JPEG mevcut olan en verimli sıkıştırma formatıdır ve ince renk geçişleriyle sürekli tonlu görüntüler için özellikle uygun bir formattır (Brown, vd., 1996: 39).

2.5.3.1.2. PNG (Portable Network Graphics)

Taşınabilir Ağ Grafikleri (PNG) saydamlığı ve geçişi destekler. Ancak animasyonu desteklememektedir. PNG algoritması kayıpsız bir sıkıştırma stiline sahiptir. PNG formatlı dosyalar, GIF formatlı dosyalardan daha iyi bir şekilde şeffaflığı desteklemektedir (Beaird, 2007: 149). PNG grafik formatı, JPG ve GIF'in olumlu özelliklerinin birçoğunu içerecek şekilde geliştirilmiştir. PNG, GIF özelliklerine sahiptir,

ayrıca PNG renkli 256 bit renk paleti ile sınırlandırdığı için tarayıcılarda mükemmel bir şekilde görünmektedir (Baumgardt, 1998: 47).

2.5.3.1.3. SVG (Scalable Vector Graphics)

Ölçeklendirilebilir Vektör Grafikleri (SVG) formatı, XML kullanarak iki boyutlu grafikleri tanımlayan bir dildir. SVG, vektör grafik formatıdır; çizgiler ve eğriler, resimler, metin, animasyon ve etkileşimli olaylar gibi şekiller içerebilmektedir. SVG, HTML, XML, JavaScript ve basamaklı stil sayfaları (CSS) gibi yaygın web teknolojileriyle uyumludur. SVG grafikler farklı ekran çözünürlükleri için ölçeklendirilebilir ve yüksek çözünürlüklü yazıcılarda basılabilmektedir. Bir SVG grafiği, bir web sitesi boyunca kullanıcıya çoklu yükleme yapmadan farklı boyutlarda yeniden kullanılabilmektedir. SVG grafikleri, kullanıcı gereksinimlerine göre farklı boyutlarda görüntülenebilir ve bir görüntünün ayrıntılarının görünmesi veya okunabilirliği artırmaları sağlanabilmektedir (Sklar, 2012: 342-343).

2.5.3.1.4. Sayfa Butonları

Sayfanın görsel çekiciliği, görüntülenen öğelerdeki bireysel öğelere dayanmaktadır. Sayfadaki butonlar da bu ögeler arasında yer almaktadır. Butonları bir düğme gibi gösteren nedir veya butonlara tıklandığında kullanıcının, bir yere götüreceği hissi nasıl hissedilebilmektedir. Bütün bu ögelerin kullanıcıda oluşturacağı hisler, gerçekten de grafikteki küçük nüanslarda saklanmaktadır. Küçük eğimli kenarlar, aydınlatmada tutarlılık ve diğer detaylar kullanıcılara bir şeylerin ipucunu vermektedir (Duff ve Mohler, 1996: 205).

Web sitelerinin ilk dönemlerinde, çoğu bilgisayar programında bulunan üç boyutlu düğme tasarımlarına bariz görsel benzetmeler yapılmıştır. Bilgisayarları kullanan çoğu kişi bu tür düğmelere aşina olduğundan, üç boyutlu kenarlıklara sahip etiketlerin tıklanabilir olduğunu anlamada herhangi bir sorun yaşatmamıştır. Ancak, sayfa düzeninde düğmeleri göstermek için çok fazla alan ayırmak gereksizdir. Ayrıca, kalın üç boyutlu kenarlar görsel olarak ağırdır ve gezinme etiketlerinden ve sayfanın

diğer içeriklerinden ayrı durabilir. Düğmelerin temel şekli ve göreceli boyutu, tek başına konumlandırma ve ortak bir arka plan rengi ile kullanılabilir (Wroblewski, 2002: 123).