Web sitelerinde görsel kullanımı önemlidir çünkü insanlar genellikle görsel unsurlara daha hızlı tepki verirler ve bilgiyi daha etkili bir şekilde anlarlar. Anlatımı güçlendiren görsellerin web sitelerinde kullanımı konusunda yapısal ve anlamsal bazı konulara dikkat etmek gerekir. Görsel unsurları akıllıca kullanmak, web sitenizin etkileyici ve etkili olmasına katkıda bulunabilir. Bu yazımızda web tasarımında görsel kullanımı konusunu inceleyeceğiz.
- İlk İzlenim: İnsanlar genellikle bir web sitesine ilk girdiklerinde görsellere odaklanır. Görseller, ziyaretçinin dikkatini çeker ve kullanıcıya hemen bir izlenim kazandırır.
- Anlatım ve Anlama: Görseller, karmaşık bilgileri daha anlaşılır ve çekici hale getirebilir. İyi seçilmiş görseller, metinle birleşerek ziyaretçilere bilgiyi daha etkili bir şekilde iletebilir. Bazen 3 paragraf bazen de 5 sayfalık yazıyla anlatılacak bir olayı bir fotoğraf karesiyle veya bir infografik ile anlatabiliriz.
- Marka Tanıtımı: Web sitenizde kullanılan görseller, markanızın kimliğini yansıtabilir. Renk paleti, logo ve diğer marka unsurları, ziyaretçilere markanızı hatırlatma ve tanıma konusunda yardımcı olabilir.
- Kullanıcı Katılımını Artırma: Etkileyici görseller, ziyaretçilerin web sitenizde daha uzun süre geçirmesini ve içeriğinizle etkileşimde bulunmasını sağlayabilir. Bu, sitenizin kullanıcı katılımını artırabilir. Web siteleri için en önemli metriklerden biri haline gelen “Sayfanın Ortalama Oturum Süresi” artırılabilmesi için ziyaretçiye çeşitli kaynaklar sunulmalıdır. Görseller bu konuda dikkatleri çekerek ziyaretçiyi tutan en önemli kaynaklardan biridir.
- SEO İyileştirmesi: İyi optimize edilmiş görseller, arama motorlarında daha iyi sıralama elde etmenize yardımcı olabilir. Alt metinler ve dosya adları gibi görsel öğeler, SEO performansınızı artırabilir.
Görselleri biraz da yapısal olarak değerlendirelim.
- Kalite: Düşük kaliteli görseller, profesyonel olmayan bir izlenim bırakabilir. Yüksek çözünürlük ve kaliteli görseller kullanmaya özen gösterin.
- Uygunluk: Görseller, sitenizin amacı ve içeriğiyle uyumlu olmalıdır. Anlamsız veya gereksiz görsellerden kaçının.
- Hızlı Yükleme: Ağır dosya boyutlarına sahip görseller, web sitenizin yükleme süresini uzatabilir. Optimize edilmiş görseller kullanarak performansı artırın.
- Telif Hakkı: Başkalarına ait olan görselleri kullanırken telif haklarına dikkat edin. Lisanslı veya kendi çektiğiniz görselleri tercih edin.
- Duyarlılık: Web siteniz mobil cihazlarda da iyi görünmeli, bu nedenle duyarlı tasarım ve uyumlu görseller kullanımı önemlidir.
GÖRSELLERLE İLGİLİ TEKNİK KONULAR
Görsellerin HTML sayfasında görüntülenmesi için <img> html etiketi kullanılır. Bu etiketin bitiş etiketi yoktur. “src” parametresi ile gösterilecek yol belirlenir. İstenirse width ve height parametreleri ile genişlik ve yükseklik ayarı yapılabilmektedir. “alt” parametresi ise “alternatif metin” anlamında kullanılır ve görsel gösterilemediğinde yerinde gösterilecek açıklama olarak ayarlanmıştır.
<img src=”webhapp-logo.png” alt=”Webhapp Logo”>
<img> etiketi ile JPG, PNG, BMP, GIF ve WEBP formatlarında görseller web sayfasına eklenebilir. ALT parametresi görseller için olmazsa olmaz denebilecek önemde bir parametredir. ALT özelliğinin değeri görseli açıklayan bir cümle veya söz dizimi olmalıdır. Alt özelliğini yazmamak veya boş bırakmak kabul edilemez bir durumdur. Örneğin müvekkili ile görüşen bir avukat görselinin alt özelliği şu olabilir: “müvekkili ile görüşen bir avukat” veya “avukat müvekkil ile konuşuyor”. Alt parametresi örneğin şöyle olmamalıdır: “görsel68”.
Picture Etiketi ile Kullanım
<picture> etiketi, web geliştiricilerine resim kaynaklarını belirlemede daha fazla esneklik sağlar. <picture> öğesinin en yaygın kullanımı, duyarlı tasarımlarda ortaya çıkar. Görüntü alanı genişliğine göre adreslenen birden çok görüntüden sadece belirli ekran boyutlarına göre olanı çağrılabilir. Yani ne demek istiyoruz: Eğer 514px’den küçük ekran ise avukat-gorusme-350.jpg resmini kullan, eğer 514 px’den daha büyükse avukat-gorusme.jpg görselini kullan.
<picture>
<source media=”(max-width:514px)” srcset=” avukat-gorusme-350.jpg “>
<source media=”(min-width:515px)” srcset=” avukat-gorusme.jpg “>
<img src=” avukat-gorusme.jpg ” alt=”Avukat Müvekkili ile görüşüyor.” />
</picture>
Picture etiketinin farklı bir kullanım alanı da farklı formatlarda görselleri göstermek için kullanılır. Bu konuyu ve örnek kullanımını bu yazının “Yeni Nesil Görsel Formatları” kısmında okuyabilirsiniz.
Resim Dosyalarını İsimlendirme
Resim dosyalarını isimlendirirken de tıpkı alt özelliğinde olduğu gibi görsel içeriğine uygun bir ad olmasına dikkat ediyoruz. Bu konuda eskilerden kalan bir alışkanlık da Türkçe karakter ve boşluk kullanılmamasıdır. Ç, ş, ğ, ü, ö gibi harflerin yerine noktasız halleri tercih edilmelidir. Boşluk karakteri yerine de tire (-) kullanılmalıdır. Böylece hem alt hem dosya isminde resmin konusuyla alakalı bir bütünlük sağlanmış olacaktır.
Örnek vermek gerekirse;
Çiçekler ve böcekler.jpg yerine cicekler-ve-bocekler.jpg
Gorsel68.png yerine avukat-muvekkil-gorusme.png
Google görselleri değerlendirirken bulunduğu sayfadaki içeriği de dikkate almaktadır. Böylece 3 farklı değer bir görselin neyle alakalı olduğunu ortaya koyar.
Görselleri Kullanım Ölçüsüne Göre Küçültün
Görseller web sayfalarının neresinde ne kadar büyüklükte kullanılacaksa o kadar boyuta göre ayarlanmalıdır. Yani firma logosu genelde 200px – 350px arasında bir genişliğe sahip olur. Logoyu tasarımcıdan istediğimizde bize tasarladığı gibi 5800px olarak gönderir. Biz bu görseli olduğu gibi koyarsak bir hata yapmış oluruz. Dosya boyutu de gereksiz bir şekilde fazla olacağından sayfanın açılış hızını olumsuz etkileyecektir.
Bu konuda yapılabilecek önemli tespitlerden biri şu olabilir. Web sayfamıza gidip ilgili görsele sağ tıklayıp incele linkine tıklayalım. Görselin yer aldığı <img> etiketini seçmelidir. Bu kodu üstüne geldiğimizde bize “Intrinsic Size” ve “Rendered Size” olarak 2 değer verir. “Intrinsict Size” değeri ile resmin web sitesine yüklendiği boyut ve “rendered size” değeri ile de görselin o bölümde kullanım için değiştirildiği boyutlar yer alır. Responsive ( Duyarlı) kodlardan dolayı her görsel yüklendiği şekilde gösterilmez. Örneğin 3 parçaya bölünmüş bir satırda 1 parçası tam kaplayan görsel içeriyorsa bu alan bir PC’de 400px olabilirken bir başkasında 650 px genişlikte olabilmektedir. Rendered Size terimi de bu şekilde oluşmaktadır.
DİKKAT: İncele komutu ile geliştirici panelini açtığımızda toplam genişlik düşeceğinden dolayı tam doğru bir değer vermez. Geliştirici panelini alta alarak bu alanı normal boyutlarına döndürebilirsiniz. Alttaki görselde geliştirici panelin nasıl alta alınabildiği gösterilmektedir.
NOT: Sizin çalıştığınız bilgisayar ekranı en büyük çözünürlüğe sahip olmayabilir ve farklı ekranlarda farklı değerler olabilir. Bu sebeple görselleri küçültürken bulduğunuz değerin biraz üstünde değerler ile hazırlayınız.
Ürün görselleri ve proje görselleri gibi önemli resimler için zaman zaman büyük fotoğraflar tercih edilir. Bunlarda da 1500 piksel genişlik yeterli olacaktır.
Yeni Nesil Görsel Formatları
Her ne kadar çoğul bahsetsek de artık WEBP formatı tek geçerli yeni nesil sıkıştırılmış görsel formatı olarak kabul görmüştür. Artık tüm modern tarayıcılar (browser) tarafından desteklenen bu format daha gelişmiş sıkıştırma yöntemi ile JPG ve PNG görsellerin boyutlarını önemli ölçüde düşürebilmektedir. WEBP formatı dosya boyutunu düşürürken fotoğraf kalitesinden de ödün vermez. Ancak farklı sıkıştırma formları kullanılırsa resimlerin kaliteleri bozulabilir.
WordPress kullanan web geliştiriciler için Imagify veya ShortPixel eklentileri bu konuda size çok kolay çözümler sunacaktır. Sadece görsellerin WEBP formatına çevrilmesi değil aynı zamanda sayfada çağırılmasını da gerçekleştirebilmektedir.
Görsellerin toplu halde WEBP formatına çevrilmesi için çeşitli araçlar mevcuttur. Kısa bir araştırma ile farklı tool lar bulunabilir. Online olarak WEBP çevirici web siteleri de mevcuttur. Shortpixel Image Compressor hem görselleri sıkıştırıyor hem de webp formatına dönüştürebiliyor. WEBP dönüşümü için Generate Webp ayarını açmak gerekiyor. Bu ayar Settings butonuna basınca görünüyor.
Görsel sıkıştırma işlemleri için ise GLOSSY ayarını tercih ediyoruz. Her ne kadar LOSSY ayarı çok daha fazla sıkıştırma yapsa da resmin kalitesi bozulduğundan dolayı tercih etmiyoruz.
Kodları kendimiz yönetiyorsak WEBP görselleri direkt olarak yazmak yerine <Picture> etiketi ile şu şekilde yazabiliriz.
<picture>
<source srcset=” avukat-gorusme.webp” type=”image/webp”>
<source srcset=”avukat-gorusme.jpg” type=”image/jpeg”>
<img src=”avukat-gorusme.jpg” alt=”Avukat Müvekkil görüşmesi” />
</picture>
Bu kodlar eğer browser (tarayıcı program) webp destekliyorsa onu gösterecek ve eğer desteklemiyorsa jpg dosyayı gösterecek şeklinde çalışır.
PNG Sorunsalı
Canva gibi programlar görselleri default olarak PNG kaydeder. Windows ekran kaydetme de yine aynı şekilde PNG olarak kaydeder. PNG görsellerin en önemli farklı transparan desteğidir. Yani arkaplanın görüneceği, aralarda veya kenarlarda boşluklar olan tasarımlar için PNG kullanılır. Eğer bu şekilde olmayan bir görseli JPG yerine PNG olarak kaydederseniz 2-3 kat fazla yer kaplayabilir. Dosya boyutunun büyük olması sayfa açılış hızını düşürecektir.
Kısacası transparan bölümler içeren görseller için PNG tercih etmeliyiz. Aksi taktirde JPG veya WEBP formatlarında kayıtlar gerekir. Burada PNG sorunsalı diye bahsettiğimi konu sadece dosya boyutları ile ilgilidir. Kalite olarak gayet başarılı bir formattır.
Görsellerin Sıkıştırılması
JPG formatı sıkıştırılmış bir resim formatıdır. Ham fotoğraf değildir. Görselleri daha fazla sıkıştırabilen WEBP teknolojisini kullanmakla birlikte farklı yöntemlerle de JPN ve PNG görseller sıkıştırılabilmektedir. JPG görseller %50, PNG görsellerde %80 civarında azalan boyutlar mümkün olmaktadır.
Yukarıda bahsettiğimiz ShortPixel online görsel sıkıştırma yapmaktadır. Ayrıca Caesium Image Compressor isimli program ile bilgisayarınızda JPG, PNG ve WEBP formatlı görsellerinizi toplu olarak sıkıştırabilirsiniz. Her bir format için sıkıştırma ölçüsünü de ayarlayabilirsiniz.
Web sitelerinde görseller kullanımı hakkında bu kadar uzun bir yazı beklenmezdi. Ancak konunun önemi ve farklı yönlerinin ortaya çıkması ile resimler konusunu anlamak ve anlatmak vakit alır hale geldi. Sayfada anlam bütünlüğü ve görsel anlatımın gücünü kullanmak için görsellerin doğru kullanımı oldukça önem arz eder.
