Resimler genellikle bir web sayfasında indirilen baytların çoğunu oluşturur ve önemli miktarda görsel alan kaplar. Sonuç olarak, resimleri optimize etmek çoğu zaman web siteniz için en büyük bayt tasarrufunu ve performans iyileştirmelerini sağlayabilir: Tarayıcının indirmesi gereken bayt miktarı ne kadar azsa istemcinin bant genişliği için rekabet o kadar az olur ve tarayıcı da yararlı içeriği o kadar hızlı indirip oluşturabilir.
Resim optimizasyonu hem sanat hem de bilimdir. Çünkü tek bir resmi en iyi şekilde sıkıştırmanın kesin bir cevabı yoktur. Bilimsel olan çünkü bir resmin boyutunu önemli ölçüde küçültebilecek çok sayıda gelişmiş teknik ve algoritma bulunmaktadır. 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 dosyaları oluşturabilir veya bunları doğrudan sevdiğiniz metin düzenleyicide 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 örnekte, aşağıdaki basit daire şekli siyah dış çizgili ve kırmızı arka planla oluşturulmuş olup Adobe Illustrator'dan dışa aktarılmıştır.
<?xml version="1.0"coding="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çla çalışarak 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 azaltarak 470 bayttan 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 azaltmak 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 resimler, 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ı.
Tarayıcı dahili olarak her kanal için 256 değer (renk) 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, ızgaranın 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 piksellik bir resim için 39 KB çok fazla görünmese de, dosya boyutu daha büyük resimlerde hemen yükselir ve resim öğelerinin indirilmesini yavaşlatır ve pahalıya mal olur. Bu yayın şu ana kadar yalnızca "sıkıştırılmamış" resim biçimine odaklandı. Neyse ki resim dosyasının boyutunu küçültmek için yapabileceğiniz pek çok şey var.
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 düşürürseniz ne olur? Bu durumda RGB kanalları için toplamda yalnızca 8 bit'e ihtiyacınız olur ve hemen piksel başına iki bayt tasarruf edersiniz. Bu, piksel başına orijinal 4 bayta kıyasla% 50 sıkıştırma tasarrufu anlamına gelir.
Kademeli renk geçişleri olan karmaşık sahneler (örneğin, renk geçişleri veya gökyüzü), 5 bit öğedeki pikselleştirilmiş gökyüzü gibi görsel yapılardan kaçınmak için daha büyük renk paletleri gerektirir. Diğer yandan, resimde yalnızca birkaç renk kullanılıyorsa, büyük bir palet değerli parçaların boşa harcandığı anlamına gelir.
Ayrı pikseller halinde depolanan verileri optimize ettikten sonra daha akıllı davranabilir ve yakındaki pikselleri de inceleyebilirsiniz: Örneğin birçok resmin, özellikle de fotoğrafların benzer renklere sahip, yakınlarda birçok pikseli vardır (örneğin, gökyüzü, yinelenen dokular vb.). Bu bilgileri kullanarak sıkıştırıcı, delta kodlamasını uygulayabilir. Burada, her piksel için 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 bit depolamanız gerekir. Ama neden burada duralım...
İnsan gözünün farklı renklere karşı hassasiyeti farklıdır: Renk kodlamanızı, bu renklerin paletini azaltarak veya artırarak bunu hesaba katmak için optimize edebilirsiniz. "Yakındaki" pikselleri iki boyutlu bir ızgara oluşturur. Diğer bir deyişle, her pikselin birden çok komşusu vardır: Bu bilgiyi 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.
Sizin de bildiğiniz gibi, resim optimizasyonu kısa sürede karmaşık (veya bakış açınıza bağlı olarak eğlenceli) bir süreç haline gelir ve akademik ve ticari araştırmaların yapıldığı etkin bir alandır. Resimler çok fazla bayt kaplar ve daha iyi resim sıkıştırma teknikleri geliştirmenin değeri büyüktür. Daha fazla bilgi edinmek istiyorsanız Wikipedia sayfasına gidin veya uygulamalı bir örnek için WebP sıkıştırma teknikleri teknik belgesine göz atın.
Tüm bunlar muhteşem ama aynı zamanda çok akademik: 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 girmeden önce bu kavramların hepsini anlamanız ve aklınızda bulundurmanız çok önemlidir.
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ürlerinde, bir sıkıştırıcının orijinal bilgileri değiştirmemesi veya kaybetmemesi çok önemlidir: Eksik veya yanlış tek bir veri biti 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 şeklinden dolayı, bir resmin dosya boyutunu azaltmak 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 görüntü optimizasyonu ardışık düzeni iki üst düzey adımdan oluşur:
- Resim, bazı piksel verilerini ortadan kaldıran kayıp bir filtreyle işlenir.
- Resim, piksel verilerini sıkıştıran kayıpsız 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 ve diğerleri gibi çeşitli resim biçimleri arasındaki fark, kayıplı ve kayıpsız adımları uygularken kullandıkları (veya kullanmadıkları) belirli algoritmaların kombinasyonudur.
Peki, kayıp ve kayıpsız optimizasyonun "optimum" yapılandırması nedir? Bu sorunun yanıtı, resim içeriklerine ve dosya boyutu ile kayıplı sıkıştırma nedeniyle oluşan yapılar arasındaki denge gibi kendi ölçütlerinize bağlıdır: Bazı durumlarda, karmaşık ayrıntıları tam doğruluğuyla iletmek için kayıplı optimizasyonu atlamak isteyebilirsiniz. Diğer durumlarda, resim öğesinin dosya boyutunu azaltmak için agresif kayıplı optimizasyonlar uygulayabilirsiniz. Burada kendi muhakemenizi ve bağlamınızı kullanmanız gerekir. Bu, evrensel tek bir ayar değildir.
Uygulamalı bir örnek verecek olursak, JPEG gibi kayıplı bir biçim kullanılırken sıkıştırıcı genellikle özelleştirilebilir bir "kalite" ayarı (ö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 resimlerinizle ilgili çeşitli kalite ayarlarıyla denemeler yapın ve kaliteyi düşürmekten korkmayın. Görsel sonuçlar genellikle çok iyidir ve dosya boyutu çok büyük oranda tasarruf sağlar.
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üresinin azaltılması hem laboratuvarda hem de sahada daha iyi LCP sağlayabilir.
Kafes resim biçimlerinde sıkıştırma ayarlarıyla oynarken aynı resmi eski biçimlere kıyasla daha küçük bir alanda yayınlayıp sunamayacağınızı görmek için WebP ve AVIF biçimleriyle denemeler yaptığınızdan emin olun.
Yine de raster resimleri aşırı sıkıştırmamaya dikkat etmeniz gerekir. 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 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, birden fazla cihaz ve yüksek çözünürlüklü dünya için mükemmel bir seçenektir.
- SVG öğelerini küçültün ve sıkıştırın: Çoğu çizim uygulaması tarafından oluşturulan XML işaretlemeleri, 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'yi tercih edin: WebP ve AVIF resimleri genellikle eski görüntü 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ç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, çünkü yeniden boyutlandırıldıkları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.