Web sayfalarında indirilen baytların çoğunu resimler oluşturur ve çoğu zaman önemli miktarda görsel alan kaplar. Sonuç olarak, resimleri optimize etmek web siteniz için en büyük bayt tasarruflarından ve performans iyileştirmelerinden bazılarını sağlayabilir: Tarayıcının indirmek zorunda olduğu bayt sayısı ne kadar azsa, istemcinin bant genişliği için rekabet o kadar az olur ve tarayıcı da faydalı içerikleri daha hızlı indirip oluşturabilir.
Resim optimizasyonu hem sanat hem de bilimdir: Sanat, çünkü tek bir resmi en iyi nasıl sıkıştıracağınıza dair kesin bir yanıt yoktur ve bir bilimdir. Çünkü bir resmin boyutunu önemli ölçüde küçültebilecek, iyi geliştirilmiş birçok teknik ve algoritma vardır. Resminiz için optimum ayarları bulmak için biçim özellikleri, kodlanmış verinin içeriği, kalite, piksel boyutları ve daha pek çok konuda dikkatli bir analiz yapmanız gerekir.
Vektör resimlerini 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 dosyaları oluşturabilir veya bunları doğrudan favori metin düzenleyicinizde elle 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 örnek, aşağıdaki basit daire şeklini siyah anahatı ve kırmızı arka planıyla oluşturur ve Adobe Illustrator'dan dışa aktarıldı.
<?xml version="1.0"coding="utf-8"?>
Sizin de bilebileceğiniz gibi bu dosya, genellikle öğeyi tarayıcıda oluşturmak için gerekli olmayan katman bilgileri, yorumlar ve XML ad alanları gibi birçok meta veri içerir. Sonuç olarak, SVG dosyalarınızı SVGO gibi bir araçla küçültmek her zaman iyi bir fikirdir.
Örneğin SVGO, Illustrator tarafından oluşturulan yukarıdaki SVG dosyasının boyutunu %58 azaltarak 470'ten 199 bayta indirmiştir.
<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.
Kafes resim, tek tek "piksellerden" oluşan iki boyutlu bir ızgaradır. Örneğin, 100x100 piksellik 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ı.
Dahili olarak, tarayıcı her kanal için 256 değer (gölge) 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. Sonuç olarak, tablonun boyutlarını biliyorsak dosya boyutunu kolayca hesaplayabiliriz:
- 100x100 piksel resim,10.000 pikselden oluşur
- 10.000 piksel x 4 bayt = 40.000 bayt
- 40.000 bayt / 1024 = 39 KB
| Boyutlar | Pikseller | Dosya boyutu |
|---|---|---|
| 100 x 100 | 10.000 | 39 KB |
| 200 x 200 | 40.000 | 156 KB |
| 300 x 300 | 90.000 | 351 KB |
| 500 x 500 | 250.000 | 977 KB |
| 800 x 800 | 640.000 | 2.500 KB |
100x100 piksel bir resim için 39 KB çok önemli görünmeyebilir ancak dosya boyutu daha büyük resimler için hızla patlar ve resim öğelerinin indirilmesini hem yavaş hem de pahalı hale getirir. Bu yayın şu ana kadar yalnızca "sıkıştırılmamış" resim biçimine odaklanmıştır. 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 indirmektir: Kanal başına 8 bit bize kanal başına 256 değer ve toplamda 16.777.216 (256 ^ 3) renk sağlar. Paleti 256 renge düşürürseniz ne olur? Bu durumda, RGB kanalları için toplamda yalnızca 8 bite ihtiyacınız olur ve piksel başına hemen iki bayttan tasarruf edersiniz. Bu, orijinal 4 baytlık her piksel biçimi karşısında% 50 sıkıştırma tasarrufu demektir!
Kademeli renk geçişleri (örneğin, gradyanlar veya gökyüzü) olan karmaşık sahneler, 5 bit öğede pikselleştirilmiş gökyüzü gibi görsel kusurları önlemek için daha büyük renk paletleri gerektirir. Öte yandan, resimde yalnızca birkaç renk kullanılıyorsa, büyük bir palet sadece değerli parçaları boşa harcar.
Ardından, ayrı ayrı piksellerde depolanan verileri optimize ettikten sonra daha akıllıca hareket edebilir ve yakındaki piksellere de bakabilirsiniz. Örneğin, pek çok resmin, özellikle de fotoğrafların yakınlarında benzer renklere sahip (örneğin, gökyüzü, tekrarlanan dokular vb.) birçok piksel bulunur. Kompresör bu bilgilerden faydalanarak delta kodlaması uygulayabilir. Bu durumda, her bir piksele ait değerleri ayrı ayrı depolamak yerine yakındaki pikseller arasındaki farkı saklayabilirsiniz: Bitişik pikseller aynıysa delta "sıfır" olur ve yalnızca tek bir biti depolamanız gerekir. Ama neden burada dursun...
İnsan gözünün farklı renklere karşı farklı hassasiyet düzeyi vardır: Bu renklerin paletini azaltarak veya artırarak renk kodlamanızı bu durumu hesaba katacak şekilde optimize edebilirsiniz. "Yakındaki" pikseller iki boyutlu bir ızgara oluşturur. Bu, her bir pikselin birden fazla komşusu olduğu anlamına gelir: delta kodlamasını daha da iyileştirmek için bu olguyu kullanabilirsiniz. Her piksel için yalnızca birbirinden yakın komşulara bakmak yerine, yakındaki daha büyük piksel bloklarına bakabilir ve farklı ayarlarla farklı blokları kodlayabilirsiniz.
Sizin de bahsedebileceğiniz gibi, resim optimizasyonu hızlı bir şekilde karmaşık (veya bakış açınıza bağlı olarak eğlenceli) hale gelir, aktif bir akademik ve ticari araştırma alanıdır. Resimler çok sayıda baytı kaplar ve daha iyi görüntü sıkıştırma teknikleri geliştirmenin önemi büyüktür. Daha fazla bilgi edinmek istiyorsanız Wikipedia sayfasına gidin veya uygulamalı örnek için WebP sıkıştırma teknikleri teknik belgesine göz atın.
Peki, burada çok güzel, ama aynı zamanda oldukça akademik: Sitenizdeki resimleri optimize etmenize nasıl yardımcı oluyor? Sorunun şeklini anlamak önemlidir: RGBA pikselleri, bit derinliği ve çeşitli optimizasyon teknikleri. Çeşitli kafes görüntü biçimlerini incelemeden önce bu kavramların tümünü anlamanız ve aklınızda bulundurmanız çok önemli.
Kayıpsız ve kayıplı resim sıkıştırma
Bir sayfanın kaynak kodu veya yürütülebilir bir dosya gibi belirli veri türleri için, bir sıkıştırıcının orijinal bilgileri değiştirmemesi veya kaybetmemesi çok önemlidir: Tek bir eksik veya yanlış veri, dosya içeriğinin anlamını tamamen değiştirebilir veya 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 şekli nedeniyle, bir resmin dosya boyutunu küçültmek için genellikle her bir pikselle ilgili bazı bilgileri silmekten kaçınabiliriz. Örneğin, gözlerimizin farklı renklere karşı farklı hassasiyeti vardır. Bu da, bazı renkleri kodlamak için daha az bit kullanabileceğimiz anlamına gelir. Sonuç olarak tipik bir resim optimizasyonu ardışık düzeni iki üst düzey adımdan oluşur:
- Resim, bazı piksel verilerini eleyen kayıplı bir filtreyle işlenir.
- Resim, piksel verilerini sıkıştıran bir kayıpsız 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 küçültmek için kayıplı bir sıkıştırma adımından geçebileceğinin anlaşılması önemlidir. Hatta GIF, PNG, JPEG ve diğerleri gibi çeşitli resim biçimleri arasındaki fark, kayıplı ve kayıpsız adımları uygularken kullandıkları (veya atlanan) belirli algoritmaların kombinasyonundan kaynaklanmaktadır.
Peki, kayıplı ve kayıpsız optimizasyonun "optimum" yapılandırması nedir? Bu sorunun cevabı, resim içeriğine ve dosya boyutu ile kayıplı sıkıştırmayla ortaya çıkan yapılar arasındaki denge gibi kendi ölçütlerinize bağlıdır: Bazı durumlarda, karmaşık ayrıntıları tam olarak iletmek için kayıplı optimizasyonu atlamak isteyebilirsiniz. Diğer durumlarda, resim öğesinin dosya boyutunu küçültmek için agresif kayıplı optimizasyon uygulayabilirsiniz. Sizin muhakemenizin ve bağlamınızın da devreye girmesi gerekir. Tek bir evrensel ayar yoktur.
Uygulamalı bir örnek vermek gerekirse, JPEG gibi kayıplı bir biçim kullanılırken kompresör genellikle özelleştirilebilir "kalite" ayarını (örneğin, Adobe Photoshop'taki "Web için Kaydet" işlevi tarafından sağlanan kalite kaydırma çubuğu) gösterir. Bu, genellikle belirli kayıplı ve kayıpsız algoritma koleksiyonunun iç işleyişini kontrol eden 1 ile 100 arasında bir sayıdır. En iyi sonuçları elde etmek için resimlerinizde çeşitli kalite ayarlarını deneyin ve kaliteyi düşürmekten korkmayın. Genellikle görsel sonuçlar çok iyidir ve dosya boyutundan sağlanan tasarruf oldukça büyük olabilir.
Resim sıkıştırmanın Core Web Vitals üzerindeki etkileri
Resimler genellikle Largest Contentful Paint'e aday olduğundan bir resmin kaynak yükleme süresinin azaltılması hem laboratuvarda hem de sahada daha iyi bir LCP sağlayabilir.
Kafes resim biçimlerinde sıkıştırma ayarlarıyla oynarken, aynı resmi eski biçimlerle karşılaştırıldığında küçük bir alanda yayınlayıp yayınlayamadığınızı görmek için WebP ve AVIF biçimleriyle denemeler yaptığınızdan emin olun.
Ancak, kafes resimleri sıkıştırmamaya dikkat etmelisiniz. Sizin için en iyi sıkıştırma ayarlarını bulmak üzere bir resim optimizasyonu CDN'si kullanmak iyi bir çözümdür. Ancak resimleri aşırı şekilde kodlamak ve çok fazla kalite kaybetmemek için görsel farklılıkları tahmin etmek üzere Butteraugli gibi araçları kullanmak da bir alternatif olabilir.
Resim optimizasyonu kontrol listesi
Resimlerinizi optimize ederken aklınızda 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ız olduğundan, yüksek çözünürlüklü ve yüksek çözünürlüklü dünya için mükemmel bir uyum sağlar.
- SVG öğelerini küçültün ve sıkıştırın: Çizim uygulamalarının çoğunun oluşturduğu XML işaretlemeleri 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 kafes biçimleri yerine WebP veya AVIF'i tercih edin: WebP ve AVIF resimleri genellikle eski resim biçimlerinden çok daha küçük olur.
- 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ç vermenin yanında, kayda değer bir bayt tasarrufunda bulunmanızı da sağlayabilir.
- Gereksiz resim meta verilerini kaldırın: Birçok raster resimde, coğrafi bilgiler, kamera bilgileri gibi öğeyle ilgili gereksiz meta veriler bulunur. Bu verileri ayırmak için uygun araçları kullanın.
- Ölçeklendirilmiş resimler kullanı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 çok dikkat edin, çünkü yeniden boyutlandırıldığında en büyük ek yükü onlar oluşturur.
- Otomasyon, otomasyon, otomasyon: Tüm resim öğelerinizin daima optimize edilmesini sağlayacak otomatik araçlara ve altyapıya yatırım yapın.