Görsel formatları arasındaki farklar ve kullanım amaçları
Bir web sitesinde yüklenme hızı HTTP isteklerini en fazla arttıran, sitedeki görsellerdir. Çoğu zaman onlarca kelimeyle anlatılabilecek bir konuyu, bir tek görselle çok daha etkili bir şekilde ifade edebiliriz. Daha zengin bir deneyim için görsellerin kullanımı kadar, bu görsellerin hangi formatlarda kullanılacağı da bir web sitesinin performansı ve görsellerin kalitesi açısından çok önemlidir. Bu yazımızda web sitelerinde kullanılabilen farklı görsel formatlarından, bunların avantajlarından ve doğru kullanım amaçlarından bahsedeceğiz.
Bir web sitesinde yüklenme hızı HTTP isteklerini en fazla arttıran, sitedeki görsellerdir. Çoğu zaman onlarca kelimeyle anlatılabilecek bir konuyu, bir tek görselle çok daha etkili bir şekilde ifade edebiliriz. Daha zengin bir deneyim için görsellerin kullanımı kadar, bu görsellerin hangi formatlarda kullanılacağı da bir web sitesinin performansı ve görsellerin kalitesi açısından çok önemlidir. Bu yazımızda web sitelerinde kullanılabilen farklı görsel formatlarından, bunların avantajlarından ve doğru kullanım amaçlarından bahsedeceğiz.
Web’de sık kullanılan birkaç görsel formatı var: PNG, JPG, GIF ve SVG. Bunların yanında, yeni görsel formatları üzerinde, başta Google tarafından olmak üzere, çeşitli çalışmalar sürdürülüyor. Çoğumuz bir web sitesine ekleyeceğimiz görseli PNG ya da JPG olarak kullanmayı tercih ediyoruz. Peki, bu farklı formatların aslında hangi amaçlarla oluşturulduğunu düşündünüz mü?
Web sitelerinde kullanılan görsellerin uygun formatta olmaması, görünürde fazla kalite kaybı oluşmasa da, görsellerin sıkıştırılması ve optimizasyonu noktasında bizi birçok avantajdan mahrum bırakır. Örneğin; bir fotoğrafı JPG yerine PNG olarak kaydetmek, çok daha büyük bir dosya yükü oluşmasına sebep olabilir. Bu nedenle, görsel formatları arasındaki farklılıkların, artı/eksileri ve hangi tür dosyaların nerede, nasıl kullanılacağı konusunda bilgi sahibi olmak, geliştirme ve tasarım sürecinde aldığımız kararlar konusunda ciddi fayda sağlar. Şimdi, web sitelerinde sıkça kullanılan görsel formatlarının doğru kullanımlarından, özelliklerinden ve üzerinde çalışılan yeni görsel formatlarından kısaca bahsedelim.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Dijital ortamda üzerinde çalıştığımız görsel öğeleri, bitmap/raster grafikler ve vektör grafikler olarak 2 sınıfa ayırabiliriz:
Bitmap/raster görseller,bir ızgara sistemiyle birim karelerden oluşan ve bu karelerin RGB renk değerleri aldığı piksel bazlı grafiklerdir. Bitmap görseller ölçeklendirilemez. Mevcut boyutları arttırıldığında piksellerin dağılımı bozulduğu için görüntü de bozulur.
Vektör grafikler, çözünürlükten bağımsız; her bir nesnenin matematiksel ifadelerle oluşturulduğu ve en önemlisi detay kaybetmeden herhangi bir boyuta yeniden ölçeklendirilebilen grafik türüdür.
JPG (Joint Photographic Experts Group)
JPG, web sitelerinde en sık kullanılan görsel formatıdır. Düşük boyutlarda yüksek kaliteli görsellerin elde edilmesini sağlar. JPG formatlı görseller sıkıştırıldığında, %60-70 oranında çok az kalite kayıplarıyla boyutları küçültülebilir. JPG, kullanılan sıkıştırma algoritmasının yüksekliğiyle orantılı olarak özellikle kenar ve renk geçişlerinde kalite kaybına uğrayan bir biçimdir. JPG formatlı dosyalarla ilgili en önemli nokta; sıkıştırma uygulanmamış, orijinal halinin mutlaka saklanması gerekliliğidir. Çünkü sıkıştırılmış dosya üzerinde düzenleme yapıp tekrar sıkıştırma uyguladığınızda bu, görselin çok daha fazla bozulmasına sebep olur.
JPG formatlı görseller en doğru sonucu fotoğraflar için verir. Baskı için de kullanılabilirler. Arka planı şeffaf olarak kullanılamaz. Dosya boyutu diğer dosya formatlarına göre daha küçüktür. Görsel detaylarında kalite açısından küçük kayıplar yaşansa da çok iyi sonuç verirler.
PNG (Portable Network Graphics)
JPG’den sonra en sık kullanılan görsel formatı PNG’dir. PNG, GIF’e alternatif olarak W3C tarafından geliştirilen, 8 ve 24-bit olarak iki farklı tipi bulunan bir görsel formatıdır. Şeffaflığı destekler. Farklı saydamlık seviyelerindeki tüm görsellerde başarılı sonuçlar verir. PNG formatındaki görselleri sıkıştırmak kalite kaybı yaratmaz. Dosya boyutu JPG’e göre 3-4 kat daha fazla olur. PNG formatı, bilgisayardan alınan ekran görüntülerinde ve keskin kenarlı, vektörel ve metin içeren resimlerde daha başarılı sonuç verir.
GIF (Graphics Interchange Format)
Sayısal resim saklama biçimidir. 8-bit’e (256 renk) kadar destek verir. Şeffaflık özelliği PNG kadar olmasa da vardır. Arka plan şeffaf olarak kullanılabilir. GIF’in en büyük avantajı, piksel tabanlı animasyon üretimi sağlamasıdır. GIF formatında kaydedilen fotoğrafların görüntü kalitesi 256 renkten daha fazlasını desteklemediği için çok düşüktür. Dosya boyutları çok küçüktür. İkonlar, düşük renkli grafikler ve solid renkler için idealdir. Fotoğraflar için uygun bir format değildir.
TIFF (Tagged Image File Format)
Grafik, fotoğraf gibi dosyalar için kullanılan bir biçimdir. Basılı materyallerde yüksek kaliteli görsellerin kullanımı için kullanılabilir. Fotoğrafların orijinal hallerine nazaran kalite kaybı yaşamaksızın sıkıştırma yapılabilmesini sağlayan ideal bir formattır. Dosya boyutları çok yüksektir. Ancak web sitelerinde JPG kullanmak çok daha optimize olmasını sağlar. Şeffaflığı destekler.
SVG (Scalable Vector Graphics)
1999 yılından bu yana W3C tarafından geliştirilen XML tabanlı bir vektörel grafik biçimidir. SVG formatı, bir metin editörü veya grafik çizim yazılımı ile iki boyutlu sabit ya da hareketli grafikler oluşturmayı sağlar. Bütün modern web tarayıcıları tarafından (Mozilla Firefox, Google Chrome, Safari, Opera) desteklenmektedir. SVG formatı şu an vektörel grafikler için en ideal çözüm olarak kullanılıyor. İkonlar, solid ve yüksek renkli grafikler ve renk geçişlerini destekliyor. Hatta ikon fontların oluşturulmasında da kullanılmaktadır.
SVG görsellerin boyutları genellikle bitmap grafiklere göre daha küçüktür. Boyutları değiştirilebilir. Vektörel oldukları için görüntü kalitesinde herhangi bir kayıp yaşanmaz. Ekran çözünürlüğü değişikliklerinden etkilenmez. CSS ile müdahale edilerek değişiklik yapılabilir. Çok sık bir kullanım şekli olmamakla birlikte, HTML içine gömülerek HTTP isteklerinin azaltılmasını sağlar. JS ve CSS kullanarak animasyonlar oluşturulabilir.
SVG görseller diğer görsel formatlarına göre çok daha yeteneklidir. Ancak çok karmaşık SVG’ler kullanmaktan kaçınmak gerekir. Bu, dosya boyutlarını bir miktar arttırabileceği gibi, CSS ve JS ile yapacağınız müdahalelerde sizi yavaşlatabilir. Fotoğrafik görseller için SVG formatı kullanılamaz.
Geleceğin görsel formatları ve WebP
Web dünyasındaki hızlı gelişmeye bağlı olarak cihazlardaki çeşitlilik ve ekran teknolojilerindeki değişimi de göz önünde bulundurduğumuzda, yeni teknolojilerin arayışı devam ediyor. Birçok yeni görsel formatıyla ilgili denemelere siz de rastlamışsınızdır. Bunlardan en çok bilineni Google’ın açık kaynaklı bir proje olarak devam ettirdiği WebP. WebP, PNG ve JPG formatlarına alternatif olarak sadece web kullanımı için tasarlanan, %20-40 arasında bir sıkıştırma oranı sağlayan ve görsel kalitesinde bozulmalara yol açmayan bir görsel formatı. PNG ve JPG formatlarının avantajlarını, dosya yükü ve kalite kaybı olmadan birleştirmeyi hedefliyor. Ayrıca GIF’e alternatif olarak animasyonu da desteklemesi bekleniyor. Şu an tüm tarayıcılar tarafından desteklenmiyor ve geliştirilmeye devam ediyor.
Farkları bilmek neden önemli?
Görsel kullanımı online dünyadaki kullanıcı deneyimi için vazgeçilmez bir unsur. Ancak erişim sorunları, yüklenme problemleri ve dosya boyutları gibi sorunlarla birlikte kullanılan teknoloji ve ekran çözünürlüklerindeki değişimlere de bağlı olarak yetersiz kalabiliyor. Bu sorunlara, teknolojideki gelişmelere paralel olarak yeni dosya tipleriyle çözüm bulunmaya çalışılıyor.
Bir web sitesi açısından görsel kullanımının karşılaştığı en önemli problem şu iki başlığa ayrılıyor: Kaliteli görünüm sunmak ve dosya boyutlarının optimizasyonu. Bununla birlikte, her bir görsel formatının oluşturulma ve kullanım amacı da bu iki nokta üzerinden hareketle ortaya çıkıyor. Bu nedenle, kullanılan görsellerin amaçlarını bilmek, bir web sitesinin oluşum sürecinde karşılaşılan bu tür sorunların çözümünde işimizi çok daha fazla kolaylaştıracaktır.
