Dosya formatlarını Derek Zoolander and Hansel McDonald‘dan daha iyi kavradığınızı biliyorum. Ancak, web için en iyi görüntü formatını seçmek her geçen yıl daha karmaşık hale geliyor.
Her dosya türü görüntü hakkındaki bilgileri farklı bir şekilde saklar. Bazı biçimlerde, görüntüyü kaç kez çoğaltırsanız çoğaltın kaliteyi korurken, diğer formatlarda kullanım kolaylığı için şeffaf bir arka plan üzerine kaydedebiliriz. Bir görüntü için seçtiğiniz dosya formatı genel kaliteyi, görüntü dosyasının boyutunu ve görüntüyü kullanabileceğiniz içeriği belirler.
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?
Web Dostu Dosya Biçimleri
Artık çoğu çevrimiçi kullanım için raster resimlere ihtiyacınız olacağını bildiğinize göre, muhtemelen şunları soruyorsunuz: “Hangi resim dosyası türü en iyisidir?” Bunun için “Doğru” bir cevap yok. Her dosya biçiminin benzersiz avantajları, sınırlamaları vardır ve en iyi kullanım senaryosunu projenize göre sizin belirlemeniz gerekir.
JPEG
Joint Photographic Experts Group, JPEG dosyaları geliştirdiği için, dolayısıyla adını bu grubun baş harflerinden alır. Bilgisayarlarda dosya türü uzantılarının üç karakterlik sınırı olduğunda, bu dosyalara JPG dosyaları denirdi. Artık JPEG kısaltması daha yaygın.
Grubun kodlayıcıları bu dosya formatını boyutu küçük tutabilirken, fotoğrafları online paylaşabilmek için geliştirdi. Aslında JPG formatı fotoğraf dosyalarını en çok sıkıştıran ve bozan formattır.
- Avantajları – JPEG dosyaları diğer tarama görüntü dosyası formatlarından daha küçük dosya boyutuna sahiptir. Dosya boyutu, sayfanızın hızlı bir şekilde yüklenmesini sağlar ve daha iyi bir kullanıcı deneyimi sunar. JPEG’ler çoğu uygulama ile uyumludur, çok yönlüdür ve web’deki en yaygın görüntü biçimini oluşturur.
- Dezavantajları – JPEG’ler “kayıplı” sıkıştırmalarıyla bilinir. Dosya boyutunu küçültmek için bir JPEG görüntüsünü her sıkıştırışınızda, kalite kaybı olur. JPEG’leri sıkıştıran algoritma, neredeyse aynı renk veya değere sahip pikselleri bulur ve bunları döşemeler halinde gruplandırır. Yeni görüntüyü kaydettiğinizde, bu verileri sonsuza kadar kaybedersiniz.
PNG
PNG, Portable Network Graphics (Taşınabilir Ağ Grafikleri) için kullanılan bir kısaltmadır. Bu dosya türü logolar, grafikler ve çizimler için optimize edilmiştir. Bir fotoğrafı PNG olarak da kaydedebilirsiniz ve bazen bir JPEG’den daha yüksek kalitede olduğunu fark edersiniz. PNG’nin JPG’den en bilinen ayırt edici özelliği arka planı transparan olarak kaydedilebilmesidir.
- Avantajları – PNG’ler kalite kaybı yaşamadan görüntü boyutunu azaltır. Bu dosyaları bozulmadan kaydedebilir, düzenleyebilir ve yeniden açabilirsiniz, bu da önemli bir avantajdır. PNG’ler ayrıca şeffaf arka planlı görüntüleri kaydetmenize izin vererek web tasarımı için idealdir.
- Dezavantajları – PNG’ler dosya boyutunda JPEG’lerden daha büyüktür. PNG dosyaları tarafından kullanılan görüntü sıkıştırma hala görüntü boyutunu azaltır, ancak JPEG derecesinde azaltmaz. PNG’ler, on altı renkten daha az renk kullanan görüntüler için de en iyi sonucu verir.
GIF
GIF, Graphics Interchange Format (Grafik Değişim Biçimi) anlamına gelir ve belirli bir kullanım senaryosuna sahip bir görüntü biçimini temsil eder. WhatsApp’daki iş arkadaşlarınıza mesaj olarak bir TV şovundan veya filmden animasyonlu bir klip ya da aile grubunuza oynayan metinlerle GIF’ler göndermişsinizdir. Bir GIF dosyası video gibi canlandırılabilir ve hareket gerektiren küçük grafik görüntüler için en iyisidir. PNG’ler gibi arkaplanı şeffaf kaydedilebilirler.
- Avantajlar – GIF’ler, web sitenizde CSS ile gerçekleştirilemeyen animasyonları gösterir. Küçük boyutlu, sınırlı renkli görüntüler GIF biçiminde iyi performans gösterir.
- Dezavantajları – GIF’ler yalnızca 256 renge kadar destekler ve karmaşık ve uzun görüntüleri sergilemek için yanlış seçimdir. GIF dosyaları ayrıca statik (sabit) görüntüler içeren dosyalardan daha fazla yer kaplar.
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 dosya boyutunda diğer görüntü formatlarına göre önemli ölçüde daha büyüktür. Bunları en üst düzey web siteleri ve kullanımlar için ayırın.
Web için Doğru Görüntü Formatını Seçmek
Şimdi beyninizi teknik bilgi ile doldurduğumuza göre, gerçek dünyadaki uygulamaları ele alalım.
- Bloglar için en uygun format JPG olacaktır. Web sitenizdeki blog gönderileri, SEO’yu geliştirmek ve kullanıcılara mümkün olan en iyi deneyimi sunmak için hızlı bir şekilde yüklenmelidir. Okuyucular blogunuzdaki fotoğraf ve resimleri büyütmez, bu nedenle blogunuz için JPEG biçimine sadık kalın. Bir numaralı öncelik, görüntü dosya boyutlarınızı düşük tutmaktır ve çoğu durumda kalite kaybı fark edilmez.
- Portföy Websiteleri için en uygun format JPG ya da bazen PNG olabilir. Gösterdiğiniz görüntü türlerine ve web sitenizin performansına bağlı olarak, JPEG veya PNG dosyaları kullanırsınız. JPEG fotoğrafçılık için optimize edilmiştir bir formattır ve portföyünüzün tasarımına bağlı olarak, kayıplı sıkıştırma bir sorun olmayabilir. PNG dosyaları kabaca iki katına büyüklüğünde olur, ancak bir grafik tasarımcıysanız veya büyük görüntüler sergiliyorsanız, PNG’ye geçiş yükleme süresinde değişime değer olacaktır. Yükleme sırasında kullanıcı sıkılmasın diye şık bir yüklüyor tasarımı yardımcı olacaktır.
- Animasyonlar ve İkonlar – Profesyonel web sitenizde, özellikle tasarımcıysanız dikkat çekici simgeler ve grafik öğeler yer alacaktır. PNG’ler web ikonları, grafikler ve metinler için altın standarttır. Küçük, basit animasyonlar için GIF’lere dönün. Ancak, etkileşimli web siteleri ve animasyonlu web videoları için SVG’ler sizin tercihiniz olmalıdır.
Dilerim dosya türleri ile ilgili tüm sorularınız cevabını bulmuştur. Hala aklınıza takılan yerler varsa lütfen yorumlar kısmına sorularınızı yazmayı unutmayın. Elimden geldiğince hızlı cevaplamaya çalışacağım. Gelecek yazıda görüşmek dileği ile.
