Web sitesi için görseller nasıl sıkıştırılır

Tipik bir sayfada görseller, HTML, CSS ve betiklerin toplamından daha ağırdır. Telefondan doğrudan kopyalanan tek bir fotoğraf 3 ila 6 MB olabilirken sayfanın geri kalanı birkaç yüz kilobayttır. Görselleri düzeltmek elde edilebilecek en ucuz performans kazanımıdır ve doğrudan Largest Contentful Paint'e, yani ana içeriğin ne kadar hızlı göründüğünü ölçen Core Web Vitals metriğine yansır.

Bu rehber akışın tamamını anlatıyor: her görselin hangi boyutta gösterileceğine karar verin, doğru formatı seçin, sıkıştırın, sonucu kontrol edin ve doğru şekilde sunun. Elle kodlanmış bir site, bir e-ticaret mağazası ya da herhangi bir içerik yönetim sistemindeki bir blog için aynı şekilde işe yarar.

Başlamadan önce bütçenizi bilin

Aklınızda rakamlar olması işi kolaylaştırır. Bunlar katı kurallar değil, pratik hedeflerdir:

• Hero veya tam genişlikte banner: yaklaşık 150 ila 300 KB.
• Makale içindeki içerik görseli: 50 ila 150 KB.
• Izgaradaki ürün kartı veya küçük resim: 20 ila 60 KB.
• Logo veya ikon: birkaç kilobayt, ideal olarak SVG.

Bir hero ve on içerik görseli olan ve bu rakamları tutturan bir sayfanın görsel yükü yaklaşık 1 ila 2 MB'tır. Aynı sayfa, dokunulmamış telefon fotoğraflarıyla kurulduğunda rahatça 30 MB'ı geçer.

1. Adım. Gerçekten gösterdiğiniz boyuta küçültün

Dosya boyutunu herhangi bir kalite ayarından çok piksel sayısı belirler. 4000×3000 bir fotoğrafta 12 milyon piksel vardır; 1600×1200'de bu sayı 2 milyonun altına iner. Bu, sıkıştırma daha başlamadan %85'lik bir azalma demektir.

Görselin gösterildiği en büyük genişliği bulun, ardından yüksek yoğunluklu ekranlar için pay bırakın:

• Tam genişlikte hero: 1600 ila 2000 px genişlik çoğu dizüstü bilgisayarı ve retina ekranı karşılar.
• 700 ila 800 px'lik makale sütunu: 2× ekranlarda keskin kalması için 1200 ila 1600 px olarak dışa aktarın.
• Üç sütunlu ızgaradaki kart: 600 ila 800 px.

Resim boyutlandır online aracında bir genişlik girin ve oranları korumak için yükseklik alanını boşaltın; ya da dikey ve yatay çekimlerden oluşan karışık bir grupta uzun kenarı sınırlamak için En-boy oranını koru açıkken iki alana da aynı sayıyı girin. Kutudan zaten küçük olan görsellerin kutuya sığacak şekilde büyütüldüğünü unutmayın; küçük ikonları büyük kutulu bir toplu işlemden geçirmeyin.

Boyutlandırma giriş formatını korur. JPG ve WebP yüksek kalitede (0.92) yeniden kodlanır, PNG kayıpsız kalır. Bu sırada konum ve kamera meta verileri silinir; yayımlanan fotoğraflarda zaten istediğiniz de budur.

2. Adım. Doğru formatı seçin

Alışkanlığa göre değil, içeriğe göre seçin:

• Fotoğraflar ve geçiş içeren her şey → WebP. Aynı görsel kalitede genellikle JPG'den %25 ila 35 daha küçüktür ve güncel tüm tarayıcılar onu gösterir.
• WebP kullanamadığınız fotoğraflar → 75 ila 85 kalitede JPG. Bazı e-posta şablonları, eski içerik yönetim sistemleri ve pazaryeri beslemeleri hâlâ JPG bekler.
• Ekran görüntüleri, logolar, diyagramlar, düz grafikler → PNG, ardından paletini küçültün. Bu görsellerde az renk ve keskin kenarlar vardır; JPG bunlarda gözle görülür lekeler üretir.
• Şeffaflık içeren, büyük ya da fotoğraf niteliğindeki grafikler → WebP. Alfa kanalını korur ve dekupe ürün fotoğraflarında PNG'den çok daha küçüktür.
• İkonlar ve basit illüstrasyonlar → SVG, vektör orijinaliniz varsa. Boyut ve keskinlikte hiçbir raster format onu geçemez.

En yaygın hata, PNG olarak kaydedilmiş bir fotoğraftır. PNG fotoğraf çoğu zaman iyi bir JPG'den beş ila on kat büyüktür ve görünür hiçbir faydası yoktur.

3. Adım. Sıkıştırın

Fotoğrafları WebP'ye

JPG'yi WebP'ye dönüştür online 85 kaliteyle başlar; bu, çoğu içerik görseline uyar. Küçük resimler ve metin altındaki arka plan görselleri için 70 ila 75'e, ince detay ya da görsel içinde metin barındıran hero'lar için 90'a çıkın. Araç PNG girişini de kabul eder ve şeffaflığı korur.

Ekran görüntüleri ve şeffaf grafikler için PNG'yi WebP'ye dönüştür online 90 kaliteyle başlar; bu ayar ince çizgileri ve küçük metni keskin tutar.

WebP kodlaması tarayıcınızın kendi kodlayıcısını kullanır. Safari WebP kodlayamaz, bu adım için Chrome, Edge veya Firefox kullanın; sayfa yanlış etiketlenmiş bir dosya kaydetmek yerine hata gösterir.

Düz grafikler PNG olarak

PNG sıkıştır online görseli 256, 128 veya 64 renklik bir palete indirir ve şeffaflığı korur. Ekran görüntüleri ve logolar 256 renkte genellikle görünür bir değişiklik olmadan ağırlıklarının %50 ila 70'ini kaybeder. 256 ile başlayın, arayüz ekran görüntüleri için 128'i deneyin, 64'ü grafikler ve basit ikonlar için saklayın. Araç dithering uygulamaz, bu yüzden yumuşak geçişlerde bantlanma görülebilir; görülürse bir kademe yukarı çıkın ya da o görseli WebP'ye geçirin.

JPG'de kalmak

JPG sıkıştır online 80 ile başlar. Web sitesi içeriği için 75 ila 80 genellikle en ideal aralıktır. Bir dosya zaten iyi optimize edilmişse ve yeniden kodlama onu büyütecekse, araç orijinali dokunmadan geri verir.

4. Adım. Yayımlamadan önce kontrol edin

Sıkıştırma ayarları bir ödünleşimdir; bu yüzden sonuca JPEG ve WebP'nin ilk bozulduğu yerlerden bakın: gökyüzü ya da duvardaki yumuşak geçişler, yüksek kontrastlı keskin kenarlar ve doygun kırmızı alanlar. İki görseli karşılaştır orijinali ve sıkıştırılmış sürümü tek bir kaydırıcının altına koyar, böylece farklar kolayca fark edilir.

Ardından rakamlara bakın. Her dosya satırı önceki ve sonraki boyutu gösterir; bütçenin hâlâ çok üzerinde kalan bir dosya genellikle kalitenin değil, boyutların fazla büyük olduğu anlamına gelir.

5. Adım. Doğru şekilde sunun

Sıkıştırma işin yarısıdır. Hazırladığınız dosyayı tarayıcının nasıl yükleyeceğine işaretleme karar verir:

• <img> üzerinde her zaman width ve height belirtin. Tarayıcı, dosya gelmeden önce yeri ayırır; bu da bir başka Core Web Vitals metriği olan düzen kaymasını önler.
• Ekranın altında kalanları loading="lazy" ile geç yükleyin. Hero'yu asla geç yüklemeyin: genellikle Largest Contentful Paint öğesi odur ve onu geciktirmek puanı düşürür. Bunun yerine ona fetchpriority="high" verin.
• Aynı görsel telefonda ve masaüstünde çok farklı genişliklerde görünüyorsa srcset ve sizes kullanın. İki ya da üç genişlik dışa aktarın, örneğin 800, 1200 ve 1600 px, ve seçimi tarayıcıya bırakın.
• JPG yedekli <picture> öğesini yalnızca çok eski tarayıcıları desteklemek zorundaysanız kullanın. Çoğu site için düz bir WebP yeterlidir.
• Uzun süre önbelleğe alın. Görsel dosyalarına uzun bir önbellek ömrü verin ve görsel değiştiğinde dosya adını değiştirin.

Pek çok içerik yönetim sistemi yükleme sırasında küçültülmüş kopyalar üretir. Bu işe yarar, ama sistem ne yüklediyseniz ondan küçültür; 6 MB'lık bir orijinal yine yavaş yükleme ve şişmiş depolama demektir. İhtiyacınız olan en büyük boyuta zaten yakın olan görseller yükleyin.

Bilgisayarınızda ve telefonunuzda yerleşik seçenekler

Bir avuç görsel için başka bir şeye ihtiyacınız olmayabilir:

• macOS Önizleme: boyutları değiştirmek için Araçlar → Boyutu Ayarla, ardından JPG için kalite kaydırıcısıyla Dosya → Dışa Aktar. Bir iki dosya için hızlıdır.
• Windows Fotoğraflar: "Resize image" seçeneği hazır boyutlar ve bir kalite ayarı sunar. Paint de boyutlandırabilir ama JPG'yi kalite seçtirmeden kaydeder.
• iPhone ve Android: yerleşik düzenleyiciler kırpar ama piksel boyutu ya da sıkıştırma ayarlamanıza izin vermez; web sitesi için telefon fotoğraflarını siteye giderken işlemek en iyisidir.

Yukarıdaki tarayıcı araçları asıl değerini toplu işte gösterir: bütün bir klasörü bırakın, sonuçları tek bir ZIP olarak indirin; hiçbir şey yüklenmez.

Sorun giderme

• WebP, JPG'den büyük çıktı. Kaynak JPG zaten yoğun biçimde sıkıştırılmıştı ya da kalite 95 ila 100'e ayarlı. Kaliteyi 80'e düşürün veya JPG'yi tutun.
• PNG neredeyse hiç küçülmedi. Zaten indekslenmiş ya da optimize edilmişti. Araç orijinalin korunduğunu bildirir.
• Şeffaf alanlar beyaza döndü. Görsel JPG sıkıştır online'dan geçti ve JPG'de şeffaflık yoktur. Dekupe görseller için PNG'yi WebP'ye dönüştür online veya PNG sıkıştır online kullanın.
• Ekran görüntülerindeki metin yumuşak görünüyor. 90 ve üzerinde PNG ya da WebP kullanın, asla JPG değil.
• Görseller retina ekranlarda bulanık görünüyor. CSS genişliğine küçülttünüz; bunun yaklaşık iki katında dışa aktarın.

Kontrol listesi

1. Her görselin en büyük gösterim genişliğini ölçün.
2. En fazla bu genişliğin yaklaşık iki katına küçültün.
3. Fotoğrafları 80 ila 85 kalitede WebP'ye, düz grafikleri paletli PNG'ye çevirin.
4. Sonucu geçişler ve kenarlar üzerinde karşılaştırın.
5. Her dosyayı boyut bütçesiyle kontrol edin.
6. width, height, ekranın altı için geç yükleme ve hero için yüksek öncelik ekleyin.