Görsel Kalitesi Bozulmadan Dosya Boyutu Nasıl Küçültülür?

Özellikle web sitelerinde birkaç megabaytlık görseller kullanmak sayfa yükleme hızını olumsuz etkileyebilir. Ancak dosyayı küçültmek için aşırı sıkıştırma uygulamak da görüntü kalitesinin belirgin şekilde bozulmasına neden olabilir.

Amaç en küçük dosyayı oluşturmak değil, görüntü kalitesi ile dosya boyutu arasında uygun dengeyi bulmaktır.

Dosya boyutunun yüksek olmasının en yaygın nedenlerinden biri gereksiz yüksek çözünürlüktür.

Örneğin web sitesinde en fazla:

gösterilecek bir görseli:

olarak sunmak çoğu durumda gereksizdir.

Görselin kullanılacağı maksimum alanı belirleyip çözünürlüğü buna göre düşürmek dosya boyutunda ciddi tasarruf sağlayabilir.

Görseli yeniden boyutlandırırken genişlik ve yükseklik oranı korunmalıdır.

Örneğin:

görsel:

olarak küçültülebilir.

Ancak:

yapılırsa görüntü oranı değişir ve görsel sıkışmış veya uzamış görünebilir.

Kırpma yapılacaksa bu bilinçli şekilde gerçekleştirilmelidir.

Her görsel için aynı format en iyi sonucu vermez.

Genel olarak:

Fotoğraflar için:  

WebP veya JPEG değerlendirilebilir.

Şeffaf raster görseller için:  

WebP veya PNG kullanılabilir.

Ekran görüntüleri ve keskin grafikler için:  

PNG veya kayıpsız WebP denenebilir.

Vektörel logo ve ikonlar için:  

SVG uygun olabilir.

Doğru format seçimi bazen yalnızca sıkıştırma yapmaktan daha büyük dosya tasarrufu sağlayabilir.

WebP, web sitelerinde kullanılan birçok görsel için etkili sıkıştırma sağlayabilir.

Özellikle:

- Blog görselleri

- Ürün fotoğrafları

- Bannerlar

- Kapak görselleri

- Büyük içerik görselleri

WebP'ye dönüştürülerek test edilebilir.

Ancak dönüştürdükten sonra yalnızca dosya boyutuna bakmayın. Görseli gerçek kullanım boyutunda açarak kaliteyi de kontrol edin.

Daha fazla sıkıştırma genellikle daha küçük dosya anlamına gelir ancak kayıplı formatlarda belirli bir noktadan sonra kalite fark edilir şekilde bozulabilir.

Özellikle:

- Yazılar

- İnsan yüzleri

- Keskin kenarlar

- İnce detaylar

- Renk geçişleri

kontrol edilmelidir.

Görseli mümkün olan en düşük kaliteye indirmek yerine kabul edilebilir görüntü kalitesini sağlayan ayar bulunmalıdır.

Kayıpsız sıkıştırmada görüntü verileri korunarak dosyanın daha verimli saklanması amaçlanır.

Kayıplı sıkıştırmada ise dosya boyutunu daha fazla azaltmak amacıyla bazı görüntü verileri kaldırılabilir.

Bu nedenle:

- Arşiv ve kaynak dosyalarında yüksek kalite

- Web için hazırlanan kopyalarda kontrollü sıkıştırma

kullanmak mantıklı olabilir.

Fotoğraf ve görsel dosyalarında görüntünün kendisi dışında metadata bulunabilir.

Örneğin:

- Kamera bilgileri

- Çekim ayarları

- Düzenleme yazılımı bilgileri

- Tarih bilgileri

- Bazı konum bilgileri

- Diğer EXIF verileri

dosyanın içerisinde yer alabilir.

Web için hazırlanan kopyalarda ihtiyaç duyulmayan metadata kaldırılarak ek tasarruf sağlanabilir.

Bu aynı zamanda paylaşılmasını istemediğiniz bazı metadata bilgilerinin dosyada kalmasını önlemeye yardımcı olabilir.

Görselin kullanılmayan büyük bölümleri varsa yalnızca yeniden boyutlandırmak yerine kırpma yapılabilir.

Örneğin ürün fotoğrafında ürün görüntünün küçük bölümünü kaplıyorsa gereksiz çevre alanı çıkarılabilir.

Bu işlem:

- Ana konuyu daha belirgin hale getirebilir

- Görsel çözünürlüğünü azaltabilir

- Dosya boyutunu düşürmeye yardımcı olabilir

Ancak önemli içeriklerin kesilmemesine dikkat edilmelidir.

PNG dosyaları bazı durumlarda oldukça büyük olabilir.

Özellikle:

- Şeffaflık gerekmeyen fotoğraflar

- Büyük çözünürlüklü görseller

- Çok fazla renk içeren grafikler

PNG olarak gereksiz dosya boyutlarına ulaşabilir.

Öncelikle PNG'nin gerçekten gerekli olup olmadığını değerlendirin.

PNG gerekiyorsa uygun optimizasyon araçlarıyla dosya içerisindeki gereksiz veriler azaltılabilir.

Dosya küçültmek için bütün PNG dosyalarını JPEG'e dönüştürmek doğru değildir.

Örneğin:

- Şeffaf arka plan

- Keskin metin

- Arayüz öğeleri

- Basit grafikler

bulunan görsellerde farklı formatlar daha iyi sonuç verebilir.

Format seçimi dosyanın içeriğine göre yapılmalıdır.

Görsel optimizasyonu yaparken orijinal yüksek kaliteli dosyayı korumak önemlidir.

Örneğin:

dosyasını saklayıp web için:

oluşturabilirsiniz.

Böylece ileride:

- Daha büyük boyut

- Farklı format

- Farklı kırpma

- Baskı sürümü

gerektiğinde düşük kaliteli dosyayı büyütmek zorunda kalmazsınız.

Kayıplı bir görseli tekrar tekrar açıp düşük kalitede kaydetmek kalite kaybını artırabilir.

Örneğin:

şeklinde sürekli dönüşüm yapmak yerine her yeni sürümü mümkün olduğunda yüksek kaliteli ana kaynaktan oluşturun.

Masaüstü kullanıcısına gereken görsel ile telefon kullanıcısına gereken görsel boyutu aynı olmayabilir.

Örneğin masaüstünde 1200 px genişliğinde gereken bir görsel mobilde 400–600 px civarında yeterli olabilir.

Web geliştirmede uygun responsive image yöntemleri kullanılarak tarayıcının ekran koşullarına göre farklı görsel sürümleri seçmesi sağlanabilir.

Böylece mobil kullanıcıya gereksiz büyük dosya gönderilmez.

Responsive web sitelerinde srcset özelliği farklı çözünürlüklerde hazırlanmış görselleri tarayıcıya sunmak için kullanılabilir.

Örneğin:

gibi farklı sürümler hazırlanabilir.

Tarayıcı ekran ve görüntüleme koşullarına göre uygun dosyayı seçebilir.

Bu yöntem özellikle içerik ve büyük kapak görsellerinde faydalıdır.

Görsel optimizasyonu yalnızca dosya boyutunu küçültmek değildir.

Sayfanın aşağısında bulunan ve kullanıcı tarafından henüz görülmeyen görseller gerektiğinde daha sonra yüklenebilir.

Uygun görsellerde lazy loading kullanmak ilk sayfa yüklemesindeki veri miktarını azaltabilir.

Ancak sayfanın üst kısmında hemen görünmesi gereken kritik görsellerin yüklenmesini gereksiz şekilde geciktirmemek gerekir.

Küçük kartlarda gösterilen görseller için büyük orijinal dosyayı yüklemek gereksiz olabilir.

Örneğin bir forum konu kartında:

görüntülenen resim için 3000 × 2000 px kaynak dosyanın gönderilmesine gerek olmayabilir.

Bunun yerine küçük bir thumbnail sürümü oluşturulabilir.

Basit logo ve ikonlar raster görsel yerine vektörel formatta hazırlanabiliyorsa SVG kullanılabilir.

SVG:

- Farklı boyutlarda net kalabilir

- Basit grafiklerde küçük dosya boyutu sağlayabilir

- Responsive kullanıma uygundur

Ancak karmaşık SVG dosyaları da gereksiz kod içerebilir. SVG dosyalarının ayrıca optimize edilmesi gerekebilir.

Sıkıştırılmış görseli gerçek kullanım koşullarında kontrol edin.

Örneğin görsel mobilde 350 px genişliğinde gösterilecekse bu boyutta nasıl göründüğüne bakın.

Tam ekran yakınlaştırıldığında görülen çok küçük kalite farkları normal kullanımda fark edilmeyebilir.

Ancak metinler bulanıklaşıyor veya ana detaylar kayboluyorsa sıkıştırma fazla uygulanmış olabilir.

Bütün görsellerin:

gibi evrensel bir kural yoktur.

Dosya boyutu:

- Görsel çözünürlüğüne

- İçerdiği ayrıntıya

- Kullanım alanına

- Formatına

- Gereken kaliteye

göre değişir.

Küçük bir ikon birkaç KB olabilirken büyük bir hero görseli doğal olarak daha büyük olabilir.

Önemli olan gereksiz veriyi azaltmaktır.

Örneğin aynı görsel için:

- Orijinal PNG: 2 MB

- Optimize PNG: 900 KB

- WebP sürümü: 300 KB

elde edildiğini düşünelim.

Eğer 300 KB WebP ile orijinal arasında gerçek kullanımda belirgin kalite farkı görünmüyorsa WebP sürümü web için daha mantıklı olabilir.

Ancak 100 KB seviyesine inmeye çalışıldığında görsel belirgin şekilde bozuluyorsa daha fazla sıkıştırma yapmak kullanıcı deneyimine zarar verebilir.

Bu değerler yalnızca yöntemi anlatan örneklerdir; her görselde sonuç farklı olacaktır.

En sık yapılan hatalar şunlardır:

- Çözünürlüğü kontrol etmeden sıkıştırmak

- Aşırı düşük kalite kullanmak

- Her görseli aynı formata çevirmek

- En-boy oranını bozmak

- Orijinal dosyayı silmek

- Aynı kayıplı dosyayı tekrar tekrar dönüştürmek

- Mobil kullanıcıya masaüstü boyutunda görsel göndermek

- Yalnızca dosya uzantısını değiştirip optimizasyon yapıldığını düşünmek

- Görsel kaliteyi kontrol etmemek

Bir görseli web sitesine yüklemeden önce:

1. Kullanılacağı maksimum boyutu belirleyin

2. Gereksiz alanları kırpın

3. Çözünürlüğü uygun seviyeye getirin

4. Doğru dosya formatını seçin

5. Kontrollü sıkıştırma uygulayın

6. Gereksiz metadata verilerini kaldırın

7. Dosya boyutunu kontrol edin

8. Görsel kaliteyi gerçek kullanım boyutunda karşılaştırın

9. Gerekiyorsa mobil için farklı sürüm oluşturun

10. Orijinal kaynak dosyayı saklayın

Kısacası: Görsel kalitesini mümkün olduğunca koruyarak dosya boyutunu küçültmenin en iyi yolu yalnızca “sıkıştır” butonuna basmak değildir. Doğru çözünürlük, uygun format, kontrollü sıkıştırma ve responsive görsel kullanımı birlikte uygulanmalıdır. Özellikle web sitelerinde gereksiz büyük görselleri optimize etmek, görüntü kalitesinden belirgin şekilde ödün vermeden aktarılan veri miktarını ve sayfa yükleme maliyetini önemli ölçüde azaltabilir.