Görsel formatları: hangisi nerede

Raster mı vektör mü: formattan önce gelen soru

Bir görsel formatı yalnızca bir dosya uzantısı değildir. Görsel verisinin nasıl paketleneceğine ve dosyanın neyi tutmasına izin verildiğine karar verir: saydamlık, animasyon, renk derinliği. Bu da seçimi doğru cevapları olan teknik bir karar yapar.

Her şeyden önce, geri kalan kararların içinden çıktığı bir ayrım var. Raster görsel bir piksel ızgarasıdır: kamera fotoğrafı, ekran görüntüsü, gerçek dünyadan gelen her şey. Büyüttüğünüzde yazılım dosyada hiç bulunmayan pikselleri uydurmak zorunda kalır. Vektör görselin ise pikseli yoktur; şekil çizme talimatlarıdır. Aynı logo tek bir dosyadan hem favicon boyutunda hem üç metrelik afişte çizilir ve iki seferde de keskindir.

Bu ayrımın sonucuyla bambaşka bir yerde karşılaşırsınız. Yalnızca 500 piksellik bir PNG olarak teslim alınmış bir logo çıkmaz sokaktır; çünkü o andan sonra her büyük boy yeniden tasarım demektir. Tersi de doğrudur: fotoğraf için vektör anlamsızdır, kimse bir insanın yüzünü birkaç yüz geometrik şekille anlatmaz. MDN'in kendi format rehberi de SVG'yi kullanıcı arayüzü öğeleri, ikonlar ve diyagramlar için önerir; yani görselin farklı boyutlarda doğru çizilmesi gereken tam o yer için.

İşi gerçekten yapan altı format

Web'deki işin neredeyse tamamını altı format yapar. Aşağıdaki sütunlar kişisel deneyimden değil, MDN'in görsel format rehberinden okunmuştur.

Tarayıcı desteği bilerek sütun değil; çünkü basit bir evet hayır değil, bir sürüm listesidir. JPEG, PNG, GIF ve SVG Chrome, Edge, Firefox, Opera ve Safari'nin tüm sürümlerinde çalışır. WebP de öyle, MDN'in açıkça yazdığı tek koşulla: macOS'ta aynı anda Safari 14 ve üzeri ile Big Sur ve üzeri gerekir. AVIF daha gençtir ve MDN sürümlerini şöyle verir: Chrome 85, Opera 71, Firefox 93, Safari 16.1 ve Edge 121. MDN'in kendi tavsiyesinin AVIF'e picture öğesiyle WebP, JPEG ya da PNG yedeği vermek olmasının sebebi de budur.

Ve herkesin paylaşmadığı bir tutum: GIF'i mühendislik değil kültür ayakta tutuyor. Paleti 256 renkte biter, saydamlığı ya hep ya hiçtir, animasyonunda kareler arası gerçek bir sıkıştırma yoktur. MDN de animasyon için WebP, AVIF ya da APNG öneriyor. GIF yalnızca hedefin başkasını kabul etmediği yerde ayakta kalır.

Hangi format hangi iş için

Formattan değil işten başlayın. Dört durum neredeyse her şeyi kapsar.

• Fotoğraf. AVIF ya da WebP, yedek olarak JPEG. Önbellek katmanınız ya da CDN'iniz formatı tarayıcıyla sizin adınıza pazarlık ediyorsa, işiniz yalnızca iyi bir ana dosya yüklemek ve kararı o katmana bırakmaktır.
• Ekran görüntüsü ve içinde metin olan her görsel. Kayıplı sıkıştırmanın en çok zarar verdiği yer burasıdır, çünkü bozulma harf kenarlarından başlar. Kayıpsız WebP ya da PNG.
• Logo, ikon, diyagram. SVG. Hedef SVG kabul etmiyorsa vektör dosyadan PNG dışa aktarın; var olan bir PNG'yi büyütmeyin. Logo tasarımı dersi aynı sonuca tasarım tarafından varır.
• Hareket. GIF değil video. Kısa bir MP4 ya da WebM hem daha küçük hem daha temizdir ve oynatma denetimini size bırakır.

SVG hakkında çok az söylenen bir uyarı: SVG bir XML belgesidir ve betik taşıyabilir. Bilinmeyen bir kaynaktan gelen vektör dosyayı doğrudan sitenize koymayın. Kendi ikonlarınız için mesele değil, bir kullanıcının yüklediği dosya için mesele.

Ve her format değişikliğini geçen bir tasarruf: insanların görsel olarak yayımladığı şeylerin büyük bölümünün görsel olmasına hiç gerek yok. İkonlar, diyagramlar, tablolar ve metin logolar metinden, CSS'ten ve SVG'den kurulur; o zaman ne seçilecek bir format ne de yanlış ayarlanacak bir boyut kalır.

Saydamlık ve animasyon: yanlış seçimin hemen göründüğü yer

JPEG'in alfa kanalı yoktur. MDN bunu tek satırda söyler ve gerisi ondan çıkar: saydam JPEG diye bir şey yoktur, geri aldığınız şey beyaz bir dikdörtgendir.

GIF'te saydamlık vardır ama ya hep ya hiçtir. Palette bir renk indeksi saydam olarak işaretlenir ve o rengi taşıyan her piksel tamamen saydam olur; gerisi tamamen opak kalır. Ortası yoktur. Sonuç, logonun çevresindeki o basamaklı kenardır ve insanlara saatlere mal olan kısım şu: o kenarın rengi, dosyanın üzerine düzleştirildiği arka plandan gelir. Beyaz üzerine kurulmuş bir logo koyu arka planda açık bir hale taşır ve tasarım programında sonsuza kadar arasanız bulamazsınız, çünkü tasarımda değil dosyadadır.

PNG, WebP ve AVIF gerçek bir alfa kanalı taşır ve yumuşak kenarı yumuşak bırakır. Animasyonda da bu üçü artı APNG, GIF'in işini daha iyi yapar. Ama bundan daha dürüstü şu: yaptığınız şey birkaç saniyeyi geçiyorsa o zaten hareketli görsel değildir. Videodur ve video kalmalıdır.

Dışa aktarırken neyi ayarlamalı

İşlemlerin sırası, sayıların kendisinden daha önemlidir.

Önce boyut. Görseli gerçekten görüntülendiği boyutta, yoğun ekranlar için iki katıyla dışa aktarın. Hiçbir kalite ayarı, 600 piksellik bir yuvaya konmuş 4000 piksellik bir görseli kurtarmaz. Bu tek ayar genellikle format değiştirmekten daha çok iş görür ve görsel boyutu doğrudan Core Web Vitals ölçümlerine aktığı için, sorununuz site hızı ise iş formatta değil burada başlar.

Sonra kalite, o sayının ne olduğunu bilmek şartıyla. Kalite sayısı hiçbir şeyin yüzdesi değildir; kodlayıcı üzerindeki bir düğmedir ve aynı sayı iki farklı kodlayıcıda iki farklı anlama gelir. Pratik yöntem: çıktıyı yüzde yüz yakınlaştırmada aslın yanına koyun, farkı görene kadar sayıyı düşürün, sonra bir kademe geri çıkın. Bakılacak yer de gökyüzü ya da arka plan değildir; harflerin kenarları ve düz renklerin sınırlarıdır, çünkü bozulma önce orada görünür.

Kayıplı bir dosyadan asla yeniden dışa aktarmayın. Her kodlama, zaten kaybedilmiş olandan bir kez daha ısırır. Yalnızca biraz küçük bir kopya isteseniz bile ana dosyaya dönün.

Alışkanlık haline getirmeye değer iki küçük iş: web için üst veriyi temizleyin ve dosyaya açıklayıcı bir ad verin. Üst veri temizliği hakkında bilinmeye değer bir uyarı: görsel bir yapay zeka aracından çıktıysa işaret mutlaka üst veride değildir. Google, SynthID'nin filigranını görselin içine gömdüğünü ve kırpma, filtre ekleme ve kayıplı sıkıştırma gibi değişikliklere dayanacak şekilde tasarlandığını yazıyor. Format dönüştürmek onu silmiyor.