← Tüm blog yazıları
Web

Görseli küçültmek, kalitesini bozmak değildir

Yaklaşık 1 dk okuma
Görsel sıkıştırma kalitesini karşılaştıran tasarım ekranı.
Görsel: Bu blog için AI ile üretilmiş kavramsal kapak; gerçek ürün ekran görüntüsü veya kaynak kurumun görseli değildir.

Bir afişi baskıya hazırlarken yüksek çözünürlük mantıklıdır. Aynı dosyayı küçük bir web kartına koymak ise çoğu zaman görünür fayda sağlamadan yükü artırır. Web görseli hazırlarken soru, dosyanın ne kadar büyük olabildiği değil, gösterileceği yerde ne kadar bilgi gerektiğidir.

Görsel optimizasyonunda benim için hedef, kaliteyi fark etmeden kaybetmek değil, kullanılacak ölçüye uygun bir dosya hazırlamak. Büyük dosya bazen ayrıntı koruyor ama o ayrıntı küçük kartta görünmüyor. Bu nedenle bütün kapakları tek bir ağır çıktıdan sunmayı tercih etmem. Asıl dosyayı saklayıp yayın kopyasını ayrı düşünürüm.

Temel fikir

Görsel maliyeti yalnızca indirme boyutundan oluşmaz; tarayıcı dosyayı çözümleyip görüntüye dönüştürür. Kaynak ölçülerini kullanım alanıyla ilişkilendirmek bu yüzden önemlidir. Format ve sıkıştırma kararı da fotoğraf, düz renk illüstrasyon ve saydam görsel için aynı olmak zorunda değildir.

Bir örnek üzerinden

Bir ürün kapağının birkaç dışa aktarımını yan yana karşılaştır. Kumaş dokusu, ince yazı ve koyu geçişler gibi hassas alanlara özellikle bak. En küçük dosyayı otomatik kazanan ilan etme. Örneğin ambalaj üzerindeki ürün adı okunmaz hâle geliyorsa kazanılan hız, kapağın görevini bozmuştur.

Nereden başlamalı?

Kendi kontrol tablonu oluştur: dosya boyutu, görünür kusur, kullanım yeri. Bu tablo gerçek ölçümlerinle doldurulmalı. Her görsele tek bir kalite yüzdesi dayatmak yerine, tekrar kullanılabilir bir değerlendirme alışkanlığı kur.

Benim yaklaşımım

Bir blog kapağında önce gerçek gösterim boyutuna bakardım. Ardından sıkıştırılmış dosyayı nesne kenarları, yazılar ve yumuşak ton geçişleri açısından karşılaştırırım. Yalnızca dosya boyutu küçüldü diye işlemi başarılı saymam. Benim için doğru denge, görüntüdeki gerekli bilgiyi koruyarak gereksiz yükü azaltmak.

Kaynaklar

web.dev — Key performance issues

Aklına takılan bir şey mi var?

Yazıyla ilgili sorunu veya proje fikrini paylaş.

WhatsApp’tan yaz