Web sayfalarında kullanılabilecek çeşitli görüntü formatları vardır. Bazı yaygın örnekler GIF , JPG ve PNG'dir . SVG dosyaları da günümüzde web sitelerinde yaygın olarak kullanılmaktadır ve web tasarımcılarına çevrimiçi görüntü için başka bir seçenek sunmaktadır.
GIF Görüntüleri
Küçük, sabit sayıda rengi olan resimler için GIF dosyalarını kullanın. GIF dosyaları her zaman 256'dan fazla benzersiz renge indirgenmez. GIF dosyaları için sıkıştırma algoritması, JPG dosyalarından daha az karmaşıktır, ancak düz renkli görüntülerde ve metinlerde kullanıldığında çok küçük dosya boyutları üretir.
GIF formatı, fotoğrafik görüntüler veya degrade renklere sahip görüntüler için uygun değildir. GIF formatının sınırlı sayıda rengi olduğundan, GIF dosyası olarak kaydedildiğinde gradyanlar ve fotoğraflar bantlama ve pikselleme ile sonuçlanır.
Özetle, GIF'leri sadece birkaç renkle basit görüntüler için kullanabilirsiniz, ancak bunun için PNG'leri de kullanabilirsiniz (kısaca daha fazla).
JPG Görüntüleri
Milyonlarca renge sahip fotoğraflar ve diğer görüntüler için JPG görüntüleri kullanın. Görüntünün bazı kalitesini kaybederek daha küçük grafikler oluşturmanıza olanak veren karmaşık bir sıkıştırma algoritması kullanır. Görüntü sıkıştırıldığında görüntü bilgilerinin bir kısmı kaybolduğundan, buna "kayıplı" sıkıştırma denir.
JPG formatı, metin, büyük düz renk blokları ve keskin kenarlı basit şekillere sahip resimler için uygun değildir. Bunun nedeni, görüntü sıkıştırıldığında, metin, renk veya çizgiler bulanıklaşarak, başka bir biçimde kaydedileceği kadar keskin olmayan bir görüntü elde edilebilmesidir.
JPG görüntüler, çok fazla ve doğal renklere sahip fotoğraflar ve görüntüler için en iyi şekilde kullanılır.
PNG Görüntüleri
PNG formatı, GIF resimlerinin bir telif ücreti alacağı ortaya çıktığında GIF formatının yerini aldı. PNG grafikleri GIF görüntülerinden daha iyi bir sıkıştırma oranına sahiptir, bu da GIF olarak kaydedilen aynı dosyadan daha küçük resimlere neden olur. PNG dosyaları alfa saydamlığı sunar, bu da resimlerinizin tamamen saydam veya hatta bir dizi alfa saydamlık kullanabileceğiniz alanlara sahip olabileceğiniz anlamına gelir. Örneğin, bir alt gölge bir dizi saydamlık efekti kullanır ve bir PNG için uygun olabilir (veya bunun yerine CSS gölgelerini kullanarak bizi sonlandırabilirsiniz).
GIF'ler gibi PNG resimleri, fotoğraflara çok uygun değildir. Gerçek renkleri kullanarak GIF dosyaları olarak kaydedilen fotoğrafları etkileyen şeritleme sorununu çözmek mümkündür, ancak bu çok büyük resimlere neden olabilir. PNG görüntüleri de eski cep telefonları ve özellikli telefonlar tarafından iyi desteklenmemektedir.
Şeffaflık gerektiren tüm dosyalar için PNG kullanıyoruz. Ayrıca, bu PNG formatını kullanarak bir GIF olarak uygun olabilecek herhangi bir dosya için PNG-8 kullanıyoruz.
SVG Görüntüleri
SVG, Ölçeklenebilir Vektör Grafiği anlamına gelir. JPG, GIF ve PNG'de bulunan raster tabanlı biçimlerin tersine, bu dosyalar herhangi bir boyutta dosya boyutunda artış kalitesinde herhangi bir kayıp olmadan işlenebilecek çok küçük dosyalar oluşturmak için vektörleri kullanır. Simgeler ve hatta logolar gibi resimler için yaratılmışlardır.
Web Teslimat için Görüntüleri Hazırlama
Hangi resim biçimini kullandığınızdan bağımsız olarak, web sitenizde tüm sayfalarda farklı biçimler kullandığınızdan emin olabilirsiniz. Bu sitedeki tüm görsellerin web dağıtımı için hazırlandığından emin olmanız gerekir. Çok büyük resimler bir sitenin yavaş çalışmasına ve genel performansı etkilemesine neden olabilir. Bununla mücadele etmek için, bu görüntüler yüksek kalite ile en düşük dosya boyutu arasındaki dengenin bu kalite seviyesinde bulunması için optimize edilmelidir .
Doğru görüntü formatını seçmek savaşın bir parçası olmakla birlikte, bu dosyaları hazırladığınızdan emin olmanız da bu önemli web teslim sürecinin bir sonraki adımıdır.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından düzenlenmiştir.