JPG, PNG, GIF? Web sitemde hangi görüntü formatını kullanmalıyım? Çoğu zaman, görüntü formatının (yanlış) kullanımına bağlı olan yükleme sürelerinin arttığını ve görüntü kalitesinin düşük olduğunu sık sık duyuyoruz.
Bu nedenle, müşterilerimizi bu çok tartışılan konuda yönlendirmeye yardımcı olacak basit bir rehber hazırlayacağımızı düşündük.
Bu yazıda, günümüzde kullanabileceğiniz ve tarayıcıların çoğunda çalışan web resim formatlarına bakacağız.
· GIF
· JPG
· PNG
· SVG
GIF, Graphical Interchange Format'ın kısaltmasıdır ve 1987'de Compuserve tarafından geliştirilmiştir. Yaratıcılar bunun "spor salonu" gibi yumuşak bir "g" ile telaffuz edilmesini istemişler, ancak internet "golf" gibi sert bir g ile gitmeye karar vermiştir.
Fotoğraflar söz konusu olduğunda önceki JPG formatının kalitesine hiçbir zaman sahip olmasa da, GIF'lerin web için 2 süper gücü vardı.
1. Bunları basit animasyonlar oluşturmak için kullanabilirsiniz
2. Şeffaf arka planlar uygulayabilirsiniz
GIF formatı Instagram, Giffy ve son trend Cinemagraphs gibi sitelerle bir yenilenme döneminden geçiyor.
GIF'ler şunlar için harikadır:
· Küçük video klipler eklemek. Özellikle normal video formlarının desteklenmediği e-postalarda.
· Web sitelerine ve sosyal platformlara eğlenceli animasyonlar eklemek, özellikle de bunları SVG'ler ve Javascript ile yaratma bilgisine sahip değilseniz.
JPG veya JPEG (Birleşik Fotoğraf Uzman Grubu), fotoğrafları web'de görüntülemenin her zaman en iyi yolu olmuştur. Gelecekte, bu değişebilir, ancak şimdilik, sizin kullanmanız için en iyi biçimdir. JPG'ler, gereksinimlerinize bağlı olarak daha iyi görüntü kalitesi veya daha iyi indirme süreleri (daha küçük dosya boyutu) sağlayarak farklı düzeylerde sıkıştırılabilir.
Bu işlemin ince ayarını yapmak sayfa hızınıza yardımcı olabilir, ancak sıkıştırma arttıkça görüntü kalitesi azalır.
Ayrıca, resimlerinizin doğru boyuta ayarlandığından emin olun. Modern telefonlar ve kameralar , web üzerindeki en büyük tam ekran görüntülerin bile yalnızca 1920 piksel maksimum genişlikte olması gereken ve çoğunun çok daha küçük olabileceği devasa MB dosyaları oluşturur .
Mümkünse, kelimeler içeren resimler için JPG kullanmaktan kaçının. Kullanıcılar genellikle hızlı bir düzeltme olarak fotoğrafları metinle birleştirir, ancak bu daha büyük dosyalara, kalitenin düşmesine ve yanıt verme ile ilgili sorunlara neden olabilir.
PNG (Taşınabilir Ağ Grafiği) nispeten yeni bir formattır ve mütevazı GIF'ten küçük bir ölçüde esinlenilmiştir. GIF'ler 256 renkle sınırlıdır ancak günümüzün yeni ekranlarında ve tarayıcılarında artık biraz yorgun görünmektedir. PNG bunu düzeltti ve ayrıca bir GIF'de görebileceğiniz pürüzlü kenarları olmayan görüntülere şeffaf arka planlara izin verilir.
PNG'ler, JPG veya GIF'ten daha ağır (daha büyük dosya boyutu) olsalar da, arka planı kesmeniz gereken çizimler ve fotoğraflar için mükemmeldir.
Bunun yerine SVG'leri kullanabiliyorsanız PNG'leri kullanmaktan kaçının.
SVG'ler (Ölçeklenebilir Vektör Grafikleri), tam olarak desteklenen en yeni formattır. XML tabanlı bir vektör formatı, çok hafif bir kod kullanılarak yapılırlar ve adından da anlaşılacağı gibi ölçeklenebilirler. Aynı SVG'yi bir mobil web sitesinin başlığında kullanabilir ve ardından bir binanın yan tarafına yansıtmak için kullanabilirsiniz. Ayrıca ek kodla birleştirildiğinde etkileşimli animasyonlarla hayata geçirilebilirler.