Cihan Eken Blog

BETA – Bu site henüz yapım aşamasındadır.

Resimleri Optimize Etme 2



Resim optimizasyonu; yani resimlerin daha performanslı hale getirilmesidir. Böylece kapladığı alan ve harcadığı veri akışından tasarruf sağlanabilir. Hızlı web siteleri için resimleri optimize etmek bizlere büyük fayda sağlar. Resimlerin optimizasyonu doğru format seçimi ve iyi sıkıştırma ile büyük oranda yapılır.

Web’in büyük bir bölümü resimlerden oluşur. Resimler internet sitelerinin vazgeçilmez öğeleridir. Bunun aslında en büyük nedenlerinden birisi de insanın görme iç güdüsüdür. Bu nedenle web sitelerimizde içerik oluştururken resimler kullanırız ve kullanmalıyız da. Fakat bu yazımızın ana konusu resim optimizasyonu yani daha performanslı hale getirilmesi.

Bu konu ile ilgili Resimleri Optimize Etme başlıklı basit ama çok işlevsel bir yazım daha mevcut. Fakat yeni araştırmalarım nedeniyle ve de yeni gelişmeler nedeniyle daha detaylı, daha önemli ve çok daha faydalı bir içerik oluşturma gereği duydum. Bilgi satırlarının haricinde açıklama satırlarımın çok olması sizi sıkmasın lütfen çünkü bu konu önemli ve sadece bilmek yetmez anlamamızda gerekli. Bu kadar giriş konuşması yeter galiba konu ilgililerini sıkmadan konuya geçelim.

Resimler dediğimiz gibi Web’in büyük bir kısmını oluşturur ve bunun dezavantajlarından biriside;İ Resim deyip geçsek de aslında resimler çok fazla veri oluşturur buda daha fazla veri akışı ve daha yavaş web siteleri demek oluyor. Fakat web sitemizdeki resimlerin optimizasyonunu iyi bir şekilde yaparsak bu dezavantajdan en az şekilde etkileniriz. Sonuç olarak daha hızlı web siteleri oluşturabiliriz.

Ön Bilgi;

Resim optimizasyonu konusunu öncelikle iki alt başlığa ayırmak gerekiyor.

  1. Doğru resim formatını seçmek
  2. Doğru resim sıkıştırması yapmak

Yazımın devamında bu iki alt başlığı yine alt maddelere ayırıp olabildiğince kısa ama detaylı anlatmaya çalışacağım. Böyle diyorum çünkü aslında bu konu normalde bir mühendislik konusudur. Fakat biz web site yöneticileri ve geliştiricileri olarak kendimizi ilgilendirdiği kadarıyla bu konunun üzerine gideceğiz.

Öncelikle belirtmem gereken bir durum var sıkıştırma işlemleri iki şekilde yapılır, bunlar kayıplı sıkıştırma ve kayıpsız sıkıştırma. Bu konunun detayı mühendisliğe girdiği için kısaca geçiyorum eğer detaylarını öğrenmek isterseniz wikipedia dan resim sıkıştırma içeriğini araştırabilirsiniz. Kısacası kayıplı sıkıştırmada resmin detaylarında azalmalar olur ve daha fazla veri sıkıştırması yapılır. Bu nedenle bu işleme kayıplı veri sıkıştırma denir. Kayıpsız sıkıştırmada ise resmin kendisinde bir kayıp olmaz, burada farklı algoritmalar ve işlemler ile sıkıştırma yapılır. Gözümüzün çalışma şekli nedeniyle fotoğraflarda ince detaylar arka planda olduğu için kolayca fark edilmez ve kayıplı sıkıştırma yapmak tercih edilir, böylece dosya boyutlarından daha fazla tasarruf sağlanabilir. Fakat grafiklerde,metinlerde,logolarda ince detaylar ön planda olduğu için kolayca fark edilir ve bu yüzden kayıplı sıkıştırma yapmak hiç iyi bir sonuç vermez.

Resim optimizasyonu nedir ve nasıl yapılır?

1. Doğru Resim Formatını Seçmek

Öncelikle şunu belirteyim üç adet evrensel resim formatı vardır, bunlar JPEG, GIF ve PNG dir. Ayrıca web üzerindeki geleceği çok parlak görünen, belkide web de evrenselleş’e bilecek üç resim formatı daha vardır bunlar SVG, WebP ve JPEG XR dir fakat tüm tarayıcılar tarafından henüz desteklenmemektedir.

Bir çoğumuz web sitelerimizde kullandığımız resimleri/görselleri dikkatsizce içeriğimize ekleriz. Buda genelde resimleri arama motorlarından arayıp hızlıca seçip içeriğimize doğrudan eklememiz neticesinde ortaya çıkıyor. Bazen JPEG olması gereken bir resim PNG oluyor bazende GIF oluyor. Burada ilk öğreneceğimiz şey görüntü formatlarının ne olduğu ve nerede nasıl kullanılacağıdır.

GIF formatının esas özelliği animasyonlu resimleri desteklemesidir. Birden çok görüntünün peş peşe sıralanması ve bunların hızlı geçişi neticesinde GIF animasyonları oluşur. GIF ler en fazla 256 renk kullanımı ile sınırlıdır yani eğer 256 dan daha fazla renk barındıran resimlerinizi GIF formatına dönüştürürseniz fazlalık olan renkler dolayısıyla da resmin detayları kaybolacaktır. Ayrıca 256 renk paletine sahip PNG-8 formatı GIF’e göre daha küçük dosya boyutuna sahiptir, bu nedenle animasyon içermeyen resimlerde, fotoğraflarda yada fazla renk barındıran resimlerde GIF dosya formatını kullanmayın.

PNG formatında kayıplı sıkıştırma yoktur. Yani bir PNG resmi ne kadar sıkıştırsanız da detayları azalmayacaktır buda PNG resimleri grafikler için biçilmiş kaftan yapıyor. Resim dosyasının içeriğine göre değişmekle birlikte genelde JPEG’e göre daha fazla yer kaplar. Detayların önemli olduğu resimlerde PNG tercih edilmelidir. Örneğin bir metin içeren görseli PNG formatında sıkıştırdığınızda metin olduğu haliyle net bir şekilde görülür. Fakat JPEG formatında sıkıştırırsanız kayıplar olacağı için metinin kenarlarında ve kendisinde bozulmalar olacak ve net görünmeyecektir.

Sıkıştırılmış JPEG ve PNG görüntülerine yakından bakıldığında ki farklar.

Örnek olarak gösterdiğim resimde anlatılmak istenen şeyi fark edersiniz. PNG formatı JPEG formatına göre daha anlaşılır ve net bir şekilde görünmekte.

 

 

 

 

JPEG formatı fotoğraflar içindir, zaten icat edilme amacıda budur. Web üzerinde en çok kullanılan resim formatıdır. JPEG resimler kayıplı sıkıştırma yapılır, kayıpsız sıkıştırmayı da destekler fakat en fazla %10’luk bir faydası olduğu için kimse tercih etmiyor. Oysa kayıplı sıkıştırma belli bir yüzde veremesem de göreceli olarak çok daha fazla veri tasarrufu sağlanır. Tabi karşılığında resmin detaylarında azalma olacaktır. Ama yukarıda da bahsettiğim gibi insan gözünün normal çalışma şekli nedeni ile bu detaylardaki azalmalar bazen fark edilmeyecek, bazende fark edilse bile önemsenmeyecek. Bir kaç MB boyutundaki kaliteli bir görselin yüklenmesini beklemektense bir kaç KB boyutundaki kalitesiz görseli görmek isterler.

Bu maddenin sonucuna gelecek olursak; Animasyon yok ise GIF’i unutun. Grafik, metin, logo,simge var ise PNG tercih edin. Diğer her türlü fotoğraflar ve resimler için JPEG tercih edebilirsiniz.

 

2. Doğru resim sıkıştırması yapmak

Resimlerinizi sıkıştırmak için bir çok seçeneğiniz var. Bilgisayarınıza yükleye bileceğiniz programlar, Web üzerinden çevrim-içi siteler vasıtasıyla ve sunucunuza, hosting’inize yada kullandığınız web yazılımına entegre edebileceğiniz hazır eklenti yada scriptlerle bu işi yapabilirsiniz.

Tabi bu seçimi siz hangisi kolayınıza geliyorsa o şekilde yapacaksınızdır. Zaten herkesin sahip olduğu imkan ve zaman farklıdır. Fakat ben burada bildiğim, deneyip test ettiğim seçenekleri anlatmaya çalışacağım.

Seçim size bağlı, temelde hepsi aynı işi yapıyor fakat yöntemler, sonuçlar ve kullanımları farklı.

Resim sıkıştırması (optimizasyon) yapabileceğimiz bilgisayar programları;

  1. Caesium İmage Compressor
  2. FILEminimizer Pictures
  3. FileOptimizer
  4. RIOT – Radical Image Optimization Tool
  5. Adobe Fireworks
  6. Adobe Photoshop
  7. ImageOptim (Mac)

 

Resim sıkıştırması (optimizasyon) yapabileceğimiz çevrim-içi hizmetler;

  1. TinyPNG
  2. TinyJPEG
  3. PunyPng
  4. CompressPNG

Resim sıkıştırması (optimizasyon) yapabileceğimiz sunucu çözümleri;

  1. Guetzli
  2. Butteraugli
  3. TinyPNG API
  4. ImageOptim API
  5. Smush.it

 

Ek olarak aşağıya yapılan bir testin sonuçlarını alıntılıyorum.