Görsel Sıkıştırmada Format, Kalite ve Dosya Boyutu Rehberi | GoToolstack
JPEG, WebP ve PNG formatlarının kalite, şeffaflık ve dosya boyutu farkları. Tarayıcı Canvas kodlamasından gerçek ölçümler ve format seçimi rehberi.
Gereksiz meta verileri ve düzenleyici etiketlerini temizleyerek SVG kodlarını hafifletin.
Vektörel grafik formatı olan SVG (Scalable Vector Graphics); Adobe Illustrator, Figma, Inkscape veya CorelDRAW gibi tasarım programlarından dışa aktarıldığında (export) devasa miktarda gereksiz XML kodu içerir. Tasarım editörlerinin kendi iç süreçleri için eklediği tescilli meta veriler, görünmeyen kılavuz çizgileri, gereksiz boşluklar, boş etiketler ve virgülden sonra 6-8 basamağa kadar uzanan aşırı hassas koordinat ondalıkları; SVG dosyasının bayt boyutunu iki üç katına çıkararak web sitesi açılış hızını olumsuz etkiler.
Örneğin bir tasarımcının web sitesi için Illustrator'dan dışa aktardığı 48 KB boyutundaki karmaşık bir vektör ikonu ele alalım. SVG kodu optimize ediciye yapıştırıldığında; <metadata>, <defs> içindeki kullanılmayan stiller, editör namespaces öznitelikleri silinir, viewBox korunarak koordinat hassasiyeti 1 veya 2 basamağa yuvarlanır ve yollar (paths) kompakt komutlarla birleştirilir. Görsel netlikte hiçbir bozulma olmadan SVG dosya boyutu 48 KB'tan tam 11,5 KB'a gerileyerek %76 oranında saf kod tasarrufu sağlanır.
Tüm SVG XML ayrıştırma, öznitelik temizleme ve kod sıkıştırma algoritmaları tamamen tarayıcınızın kendi bünyesinde işletilir. Vektör tasarımlarınız, özel şirket ikonlarınız veya tescilli grafik kodlarınız hiçbir sunucuya yüklenmez.
Optimizasyon Tasarrufu (%) = [ (Orijinal SVG Baytı - Optimize Edilmiş SVG Baytı) / Orijinal SVG Baytı ] × 100
XML DOM ağacı ayrıştırılır; gereksiz editör etiketleri, yorum satırları ve boşluklar ayıklanır; koordinat ondalık basamakları yuvarlanarak dosya boyutu küçültülür.
<g></g>) eleyerek tarayıcının DOM ayrıştırma süresini hızlandırın.