Doğru sıkıştırma düzeyini seçin

Ilya Grigorik

Jeremy Wagner

Görseller, bir web sayfasında indirilen baytların çoğunu oluşturur ve genellikle önemli miktarda görsel alan kaplar. Sonuç olarak, resimleri optimize etmek genellikle web siteniz için en büyük bayt tasarruflarından ve performans iyileştirmelerinden bazılarını sağlayabilir: Tarayıcının indirmesi gereken bayt sayısı ne kadar azsa istemcinin bant genişliği için rekabet o kadar az olur ve tarayıcı, yararlı içeriği indirip ekranda oluşturma işlemini o kadar hızlı yapabilir.

Resim optimizasyonu hem sanat hem de bilimdir: Bir resmin en iyi şekilde nasıl sıkıştırılacağı konusunda kesin bir yanıt olmadığı için sanattır ve bir resmin boyutunu önemli ölçüde azaltabilecek birçok gelişmiş teknik ve algoritma olduğu için bilimdir. Resminiz için en uygun ayarları bulmak üzere, pek çok farklı boyutun dikkatlice analiz edilmesi gerekir: biçim özellikleri, kodlanmış verilerin içeriği, kalite, piksel boyutları ve daha fazlası.

Vektör resimleri optimize etme

Tüm modern tarayıcılar, iki boyutlu grafikler için XML tabanlı bir resim biçimi olan Ölçeklenebilir Vektör Grafikleri'ni (SVG) destekler. SVG işaretlemesini doğrudan sayfaya veya harici bir kaynak olarak yerleştirebilirsiniz. Vektör tabanlı çizim yazılımlarının çoğu SVG dosyası oluşturabilir veya bunları doğrudan en sevdiğiniz metin düzenleyicide manuel olarak yazabilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

Yukarıdaki örnekte, Adobe Illustrator'dan dışa aktarılan aşağıdaki basit daire şekli siyah dış çizgi ve kırmızı arka planla oluşturulmuştur.

<?xml version="1.0" encoding="utf-8"?>

Sizin de görebileceğiniz gibi, genellikle öğeyi tarayıcıda oluşturmak için gereksiz olan katman bilgileri, yorumlar ve XML ad alanları gibi birçok meta veri içerir. Bu nedenle, SVGO gibi bir araç kullanarak SVG dosyalarınızı küçültmek her zaman iyi bir fikirdir.

Örneğin, SVGO, Illustrator tarafından oluşturulan yukarıdaki SVG dosyasının boyutunu %58 oranında azaltarak 470 bayttan 199 bayta düşürür.

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

SVG, XML tabanlı bir biçim olduğundan aktarım boyutunu küçültmek için GZIP sıkıştırması da uygulayabilirsiniz. Sunucunuzun SVG öğelerini sıkıştıracak şekilde yapılandırıldığından emin olun.

Rastır görüntü, tek tek "piksellerden" oluşan iki boyutlu bir ızgaradır. Örneğin,100x100 piksel boyutunda bir resim 10.000 piksellik bir dizidir. Buna karşılık, her bir piksel "RGBA" değerlerini depolar: (R) kırmızı kanal, (G) yeşil kanal, (B) mavi kanal ve (A) alfa (şeffaflık) kanalı.

Tarayıcı, dahili olarak her kanal için 256 değer (ton) ayırır. Bu, kanal başına 8 bit (2 ^ 8 = 256) ve piksel başına 4 bayt (4 kanal x 8 bit = 32 bit = 4 bayt) anlamına gelir. Bu nedenle, ızgaranın boyutlarını biliyorsak dosya boyutunu kolayca hesaplayabiliriz:

• 100x100 piksellik bir resim 10.000 pikselden oluşur.
• 10.000 piksel x 4 bayt = 40.000 bayt
• 40.000 bayt / 1024 = 39 KB

100x100 piksel boyutundaki bir resim için 39 KB çok büyük bir boyut gibi görünmeyebilir ancak dosya boyutu daha büyük resimler için hızla artar ve resim öğelerinin indirilmesini hem yavaşlatır hem de pahalı hale getirir. Bu gönderide şimdiye kadar yalnızca "sıkıştırılmamış" resim biçimi ele alındı. Neyse ki resim dosyasının boyutunu küçültmek için pek çok şey yapılabilir.

Basit bir strateji, resmin "bit derinliğini" kanal başına 8 bitten daha küçük bir renk paletine düşürmektir: Kanal başına 8 bit bize kanal başına 256 değer ve toplam 16.777.216 (256 ^ 3) renk verir. Paleti 256 renge indirirseniz ne olur? Bu durumda, RGB kanalları için toplamda yalnızca 8 bit gerekir ve piksel başına iki bayt tasarruf edersiniz. Bu, piksel başına 4 bayt olan orijinal biçime kıyasla% 50 sıkıştırma tasarrufu demektir.

Kademeli renk geçişleri (ör. degradeler veya gökyüzü) içeren karmaşık sahnelerde, 5 bitlik öğedeki pikselli gökyüzü gibi görsel kusurları önlemek için daha büyük renk paletleri gerekir. Öte yandan, resimde yalnızca birkaç renk kullanılıyorsa büyük bir palet kullanmak değerli bitleri boşa harcamaktır.

Ardından, tek tek piksellerde depolanan verileri optimize ettikten sonra daha akıllıca davranıp yakındaki piksellere de bakabilirsiniz: Özellikle fotoğraflar olmak üzere birçok resimde benzer renklere sahip birçok yakın piksel bulunur (ör. gökyüzü, tekrarlanan dokular vb.). Bu bilgileri avantajınıza kullanarak sıkıştırıcı, delta kodlama uygulayabilir. Bu kodlamada, her pikselin ayrı değerlerini depolamak yerine yakındaki pikseller arasındaki farkı depolayabilirsiniz: Yakınındaki pikseller aynıysa delta "sıfır" olur ve yalnızca tek bir bit depolamanız gerekir. Ancak bununla yetinmeyin…

İnsan gözü farklı renklere karşı farklı hassasiyet düzeylerine sahiptir: Bu renklerin paletini azaltarak veya artırarak renk kodlamanızı bu durumu hesaba katacak şekilde optimize edebilirsiniz. "Yakındaki" pikselleri iki boyutlu bir ızgara oluşturur. Bu, her pikselin birden fazla komşusu olduğu anlamına gelir: Bu gerçeği, delta kodlamayı daha da iyileştirmek için kullanabilirsiniz. Her pikselin sadece yakın komşularına bakmak yerine, yakındaki piksellerin daha büyük bloklarına bakabilir ve farklı ayarlarla farklı blokları kodlayabilirsiniz.

Anlayabileceğiniz gibi, resim optimizasyonu hızla karmaşık hale gelir (veya bakış açınıza bağlı olarak eğlenceli hale gelir) ve akademik ve ticari araştırmanın etkin bir alanıdır. Resimler çok fazla bayt kaplar ve daha iyi resim sıkıştırma teknikleri geliştirmek çok değerlidir. Daha fazla bilgi edinmek isterseniz Wikipedia sayfasına gidebilir veya uygulamalı bir örnek için WebP sıkıştırma teknikleri teknik belgesine göz atabilirsiniz.

Bu bilgiler çok faydalı olsa da çok akademik. Peki bu bilgiler sitenizdeki resimleri optimize etmenize nasıl yardımcı olur? Sorunun şeklini anlamak önemlidir: RGBA pikselleri, bit derinliği ve çeşitli optimizasyon teknikleri. Çeşitli raster resim biçimleriyle ilgili tartışmalara başlamadan önce bu kavramların tümünü anlamak ve aklınızda tutmak önemlidir.

Kayıpsız ve kayıplı resim sıkıştırma

Bir sayfanın kaynak kodu veya yürütülebilir dosya gibi belirli veri türleri için sıkıştırıcının orijinal bilgilerden hiçbirini değiştirmemesi veya kaybetmemesi çok önemlidir: Tek bir eksik veya yanlış veri biti, dosyanın içeriğinin anlamını tamamen değiştirebilir ya da daha da kötüsü dosyayı tamamen bozabilir. Resim, ses ve video gibi diğer bazı veri türleri için orijinal verilerin "yaklaşık" bir temsilini sunmak tamamen kabul edilebilir olabilir.

Aslında, gözün çalışma şeklinden dolayı, bir resmin dosya boyutunu küçültmek için çoğu zaman her pikselle ilgili bazı bilgileri silmekle yetinebiliyoruz. Örneğin, gözlerimiz farklı renklere karşı farklı hassasiyete sahip olduğundan bazı renkleri kodlamak için daha az bit kullanabiliriz. Sonuç olarak, tipik bir resim optimizasyon ardışık düzeni iki üst düzey adımdan oluşur:

1. Resim, bazı piksel verilerini ortadan kaldıran kaybeden bir filtreyle işlenir.
2. Resim, piksel verilerini sıkıştıran kaybetsiz bir filtreyle işlenir.

İlk adım isteğe bağlıdır ve tam algoritma, belirli resim biçimine bağlıdır. Ancak herhangi bir resmin boyutunu azaltmak için kayıplı sıkıştırma adımına tabi tutulabileceğinin anlaşılması önemlidir. Aslında GIF, PNG, JPEG gibi çeşitli resim biçimleri arasındaki fark, kayıplı ve kayıpsız adımlar uygulanırken kullanılan (veya atlanan) belirli algoritmaların kombinasyonundadır.

Peki, kayıp ve kayıpsız optimizasyonun "optimum" yapılandırması nedir? Yanıt, resim içeriğine ve dosya boyutu ile kayıplı sıkıştırma nedeniyle ortaya çıkan kusurlar arasındaki denge gibi kendi ölçütlerinize bağlıdır: Bazı durumlarda, karmaşık ayrıntıları tam doğrulukla aktarmak için kayıplı optimizasyonu atlamak isteyebilirsiniz. Diğer durumlarda, resim öğesinin dosya boyutunu azaltmak için agresif kayıplı optimizasyon uygulayabilirsiniz. Burada kendi değerlendirmeniz ve bağlamınızın devreye girmesi gerekir. Tek bir evrensel ayar yoktur.

Pratik bir örnek olarak, JPEG gibi kayıplı bir biçim kullanıldığında sıkıştırıcı genellikle özelleştirilebilir bir "kalite" ayarı (ör. Adobe Photoshop'taki "Web için kaydet" işlevi tarafından sağlanan kalite kaydırma çubuğu) gösterir. Bu ayar genellikle 1 ile 100 arasında bir sayıdır ve belirli kayıplı ve kayıpsız algoritma koleksiyonunun iç işleyişini kontrol eder. En iyi sonuçlar için resimlerinizde çeşitli kalite ayarlarıyla denemeler yapın ve kaliteyi düşürmekten çekinmeyin. Görsel sonuçlar genellikle çok iyi olur ve dosya boyutunda oldukça fazla tasarruf sağlayabilirsiniz.

Resim sıkıştırmanın Core Web Vitals üzerindeki etkileri

Resimler genellikle Largest Contentful Paint için aday olduğundan, bir resmin kaynak yükleme süresini azaltmak hem laboratuvarda hem de sahada daha iyi LCP değerlerine yol açabilir.

Raster resim biçimlerindeki sıkıştırma ayarlarıyla oynarken, aynı resmi eski biçimlere kıyasla küçük bir alanda sunup sunamayacağınızı görmek için WebP ve AVIF biçimlerini denediğinizden emin olun.

Ancak raster resimleri overcompress dikkat edin. Sizin için en iyi sıkıştırma ayarlarını bulmak üzere bir resim optimizasyonu CDN kullanmak iyi bir çözümdür. Ancak alternatif bir yöntem de, resimleri agresif bir şekilde kodlamamak ve çok fazla kalite kaybı yaşamamak için görsel farklılıkları tahmin etmek amacıyla Butteraugli gibi araçları kullanmak da olabilir.

Resim optimizasyonu yapılacaklar listesi

Resimlerinizi optimize ederken göz önünde bulundurmanız gereken bazı ipuçları ve teknikler:

• Vektör biçimlerini tercih edin: Vektör resimler çözünürlük ve ölçekten bağımsızdır. Bu da onları çok cihazlı ve yüksek çözünürlüklü dünyaya mükemmel bir şekilde uyumlu hale getirir.
• SVG öğelerini küçültün ve sıkıştırın: Çoğu çizim uygulaması tarafından üretilen XML işaretleme genellikle kaldırılabilecek gereksiz meta veriler içerir. Sunucularınızın, SVG öğeleri için GZIP sıkıştırması uygulayacak şekilde yapılandırıldığından emin olun.
• Eski raster biçimleri yerine WebP veya AVIF'i tercih edin: WebP ve AVIF resimleri genellikle eski resim biçimlerinden çok daha küçüktür.
• En iyi raster resim biçimini seçin: İşlevsel gereksinimlerinizi belirleyin ve her bir öğeye en uygun olanı seçin.
• Raster biçimleri için optimum kalite ayarlarını deneyin: "Kalite" ayarlarını düşürmekten korkmayın. Genellikle çok iyi sonuçlar verir ve oldukça fazla bayt tasarrufu sağlar.
• Gereksiz resim meta verilerini kaldırın: Birçok raster resimde, coğrafi bilgiler, kamera bilgileri vb. öğe hakkında gereksiz meta veriler bulunur. Bu verileri kaldırmak için uygun araçları kullanın.
• Ölçeklendirilmiş resimler yayınlayın: resimleri yeniden boyutlandırın ve "görüntüleme" boyutunun, resmin "doğal" boyutuna olabildiğince yakın olduğundan emin olun. Özellikle büyük resimlere dikkat edin. Yeniden boyutlandırıldığında en fazla ek yüke neden olurlar.
• Otomasyon, otomasyon, otomasyon: Tüm resim öğelerinizin her zaman optimize edilmesini sağlayacak otomatik araçlara ve altyapıya yatırım yapın.