Web için Hangi görüntü formatını kullanmalıyım ?

Görüntü Formatları Nedir?

Yazılımlar birbirleri ile dosya alışverişinde bulunarak çalışır. Bir resmi veya vektörel çizimi, oluşturulan uygulama programından bağımsız hale getirip sayfa düzenleme programına ya da vektörel programlara aktarmak için farklı bir formatta kaydetmek gerekir.

Görüntü formatları ;

• Kayıplı Sıkıştırma,
• Kayıpsız Sıkıştırma,
• Sıkıştırılmamış, olarak üçe ayrılır.

Sıkıştırılmamış formatlar daha fazla veri depolar.

Eski teknolojiler yürürlükteyken çıkan yeni teknolojilerin de işin içine girmesiyle günden güne hayatımızdaki dosya formatı sayısı artıyor.

Kullanıcıların ortalama ihtiyaçlarına cevap veren, geniş kitlelere hitap eden bu formatların güçlü ve zayıf yanlarına birlikte bakalım…

Dijital dünyada görsellerin nerede ve nasıl kullanılacağı kadar, formatları da kalitesi açısından oldukça önemlidir. Kullanılan görsellerin uygun formatta olmaması kalite kaybından, görsellerin sıkıştırılmasına kadar bizlere birçok sorun yaratırlar.

Örneğin; bir fotoğrafı JPG yerine PNG olarak kaydetmek çok daha büyük bir dosya yükü oluşmasına sebep olabilir. Dosyaların formatlarını doğru kullanmamız bizlere tasarım ve geliştirme sürecinde büyük fayda sağlar. Web sitelerinde sık kullanılan görsel formatlardan PNG, JPG ve GIF ne anlama geliyor ve nerelerde kullanılıyor biraz bunlardan bahsedelim.

Vektör ve Bitmap (Pixel) Grafikler

Tasarımcı iseniz bitmap ve vektör arasındaki ayrımları bilmeniz gereklidir. Tasarımcı değilseniz ve tasarımcılarla çalışıyorsanız o zaman onların dilinden anlamak için yine bu konu hakkında bilgi sahibi olmalısınız.

Boyutlandırma esnasında bozulmanın olmadığı, oran orantı çerçevesinde her şekilde boyutlandırabileceğiniz bir obje hayal edin. İşte vektör grafik tam olarak bunu sağlar. Günümüzde en çok bilinen ve kullanılan Adobe Illustrator ve Corel Draw bize vektör tabanlı çalışma olanağı sağlar.

Mevcut projeniz için hangi dosya biçiminin en iyi sonuç verdiğine karar vermeden önce, hangi görüntü biçimlerinin yüksek kaliteli kalıp aynı zamanda dosya boyutunun küçük olabileceğini öğrenin. 

---

Raster (Tarama) ve Vektör Dosyası Biçimleri

Belirli dosya biçimlerini incelemeden önce, en yaygın iki resim dosya türü olan vektör görüntüleri ve tarama görüntülerini ayırt edelim.

Vektör Görüntüler

Vektör görüntüler, matematiksel formüller tarafından elde edilen yollar ve eğrilerden oluşur. Adobe Illustrator, Corel Draw ya da AutoCad gibi özel grafik tasarım yazılımları vektör yolları ve görüntüleri üretir.

Görüntü üretmek için matematiksel denklemler kullanmak dosya boyutlarını da küçük tutar. Vektör görüntüler sonsuz bir şekilde ölçeklendirilebilir. Yani sonsuz olarak büyütebilir ya da küçültebilirsiniz. Başta görüntünüz bir A4 büyüklüğünde üretilmişken onu bir futbol sahası büyüklüğünde büyütseniz bile, yine de net bir şekilde oluşturulur ve yazdırılır.

Vektör görüntülerinin ölçeklenebilirliğine bakılmaksızın, çevrimiçi (online) görüntülerin çoğu tarama (raster) görüntüleridir. Nedeni basit. Vektör dosyası formatlarının çoğu standart web uygulamalarıyla uyumlu değildir de ondan.

Raster (Tarama) Görüntüler

Raster görüntüler piksel haritaları içeren bitmapler içerir. Pikseller, dosyanın iki boyutlu görüntüler oluşturmak için birleştirilen adreslenebilir en küçük kare bileşenleridir. Portföyünüze yüklediğiniz şu günbatımı fotoğrafı, raster bir görüntüdür ya da web sitenizdeki profesyonel çekim de raster bir görüntüdür.

Bir dosyada ne kadar çok piksel varsa, o kadar düzgün ve daha kaliteli olur. O yüzden fotoğraf makinelerinde piksel oranı arttıkça fiyat da görüntü kalitesi de artmaktadır. Raster bir görüntüyü yakınlaştırırsanız pikselleri görürsünüz.

Raster görüntülerle karşılaştığınız savaş basittir: Dosya boyutunu web ortamına daha hızlı yükleyebilmek ve gösterebilmek için fazla büyütmeden görüntünün kalitesini nasıl en üst düzeye çıkarırsınız veya piksel sayısını nasıl artırırsınız?

---

Sıkıştırılmamış Formatlar:

Yaygın olarak kullanılan sıkıştırılmamış resim format biçimleri;

• BMP: BMP formatı resimde yer alan her pikselin renk verisini sıkıştırmadan depolar. Bu format ayrıca taramalı grafiklerde kullanılır.
• RAW: RAW ham anlamına gelmektedir. Üzerinde hiçbir değişiklik yapılmadığından dolayı dosyayı düzenleme olanaklarınız daha yüksektir. RAW resimleri özel bir yazılım kullanılarak yazdırılabilir bir formata TIFF gibi dönüştürülebilmelidir.
• TIFF: İmlenmiş Resim Dosyası Formatı anlamına gelmektedir. Kalitesinden hiçbir şey kaybetmeden resmi tüm ayrıntılarıyla gösteren sıkıştırılmamış bir formattır. Dosya boyutu oldukça büyüktür. Şeffalığı destekler

Formatlarıdır. Sıkıştırılmamış formatlar, orijinal resimde yer alan tüm verileri içerir ancak dosya boyutu çok büyük olabilir.

Bu formatlar dijital fotoğrafçılık, ileri düzey fotoğraf düzenleme gibi alanlarda kullanılır.

Bu formatları dosya boyutunun büyük olmasının problem yaratmayacağı durumlarda ve dosyanızın iyi kalitede olmasını istediğinizde kullanmalısınız.

Sıkıştırılmış Formatlar:

Resimlerin internet üzerinde kullanımı için genellikle Sıkıştırılmış Resim Formatları kullanılır. Bu formatlar;

• JPG: JPG format özellikle çok sayıda küçük detaylara sahip olanlar olmak üzere, genellikle dijital kamerayla çekilen fotoğraflar için kullanılır.
• PNG: PNG formatı genellikle bilgisayar tarafından oluşturulan ekran görüntüleri gibi resimleri ve yalnızca birkaç renk değişikliği içeren; resmin yalnızca büyük bir kısmında yalnızca bir renk olan resimler için kullanılır.
• GIF: GIF formatı genellikle illüstrasyonlar için kullanılır. Bu format animasyonu destekler ve web sitelerinde yaygın olarak kullanılır. Ancak JPG çok sayıda renk kullanımını GIF yalnızca 256 farklı renk kullanımını destekler.

Farkları bilmek neden önemli?

Öncelikle görsellerin kalitesi kullanıcılar için oldukça önemli. 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 dosya formatlarını basılı veya dijital mecralarda, her nerede kullanacak olursanız olun amacınız her zaman kaliteli görünüm sunmak ve dosya boyutlarının optimizasyonlarının en sağlıklı şekilde gerçekleşmesidir. Bir dosya formatını belirleyici en önemli unsur ise onun ne amaçla kullanılacağıdır.

Milyonlarca renkten oluşabilen ve belirlenen boyutlarda bize kusursuz görüntü şenliği sunabilen grafik biçimi Bitmap ise yan yana ve alt alta dizilen pixellerden oluşur. Pixel, bir Bitmap görüntüyü oluşturan en küçük noktadır. Pixellerle oluşan bir görüntü büyütüldüğünde – vektör görüntünün aksine – görüntü kalitesinde kayıp yaşanır. Bitmap grafikleri oluşturmak için en bilindik ve en popüler program olan Adobe Photoshop’u kullanırız.

JPG (Joint Photographic Experts Group)

JPG dijital mecralarda 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 formatlı bir dosya sıkıştırıldığında orijinalinin mutlaka saklanması gereklidir. Çü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. Dosya boyutu diğer dosya formatlarına göre daha küçüktür.

PNG (Portable Network Graphics)

JPG’den sonra en sık kullanılan görsel formatı PNG’dir.PNG, GIF’e açık bir alternatif olarak geliştirildi. LZW sıkıştırma algoritmalarını kullanan bu format, özellikle internet üzerinde paylaşılan görseller için mükemmel özellikler ve avantajlar sunuyor. Ayrıca PNG şeffaf olarak kullanılabiliyor. PNG formatında bir dosyayı küçülttüğünüzde kalite olarak bir kayıp yaşamaz. Mutlaka bilinmesi gereken bir husus ise PNG ile kaydedilen dosya diğer formatlara göre biraz daha büyüktür. Dosya boyutu JPG’e göre 3-4 kat daha fazla olur. PNG formatı, bilgisayardan alınan ekran görüntülerinde, keskin kenarlı, vektörel ve metin içeren resimlerde daha başarılı sonuç verir.

GIF (Graphics Interchange Format)

15 haziran 1987’de icat edilen ve 90’lara damgasına vuran GIFler Grafik Değiştirme Biçimi anlamına gelir. Bir sayısal resim saklama biçimi olan GIF, kayıpsız sıkıştırma kullanıyor ve 8-bit renge (yani 256 renge) kadar destek veriyor.

PNG ve JPEG ile birlikte bilgisayar dünyasında kullanılan en yaygın resim saklama biçimlerinden olan GIF, bunlardan farklı olarak piksel tabanlı animasyonların üretilmesine olanak tanıyor. Herhangi bir videonun bir kesitiyle veya statik görsellerin bir döngüye bağlanmasıyla oluşuyor.

SVG

SVG – Scalable Vector Graphics (Ölçeklenebilir Vektör Grafik) dosyaları – web tasarımında kullanabileceğiniz vektör dosyalarıdır. Bu vektör görüntüleri animasyon ve etkileşimi destekler. Benim en sevdiğim web dosya formatı SVG’dir çünkü hem göreli olarak az yer kaplarlar hem de hiç bir bozulmaya uğramazlar.

• Avantajları – SVG’ler çözünürlükten bağımsızdır ve herhangi bir platformda iyi görüntülenen dinamik, net görüntüler oluşturur. SVG’ler kalitelerini koruyan kayıpsız dosyalardır.
• Dezavantajları – SVG’ler pixel bazlı görüntü formatlarının dönüşümünde diğer format türlerine göre daha büyük er kaplarlar. Bu nedenle vektörel grafklerin web de sunulmaları için daha iyi bir seçimdir.