Bir web sayfası için görüntüleri nasıl sıkıştırabilirsiniz

Görüntüleri optimize etmek bir web sitesini neden iyileştirir

Görüntüler genellikle bir sayfa tarafından indirilen verilerin önemli bir kısmını temsil eder. Büyük bir dosya, içeriğin ortaya çıkmasını geciktirir, daha fazla mobil veri tüketir ve ziyaretçi deneyimini daha da kötüleştirebilir. Optimizasyon üç kararı birleştirir: boyutlar, format ve sıkıştırma seviyesi.

Tüm görüntüler için mükemmel bir sınır yoktur. Bir küçük fotoğraf, tüm ekranı kaplayan bir fotoğraftan çok daha az ağırlıkta olmalıdır. Amaç, tarayıcıyı kullanmayacağı bilgileri indirmeye zorlamadan gerçek alan için yeterli piksel ve kalite sunmak.

Önerilen adım adım akış

1. Resmin tasarımda görüneceği maksimum genişliği belirleyin.
2. Silinecek alanları korumamak için sıkıştırmadan önce çerçeveyi kesin.
3. İçeriğe ve şeffaflık ihtiyacına göre formatı seçin.
4. Dosyayı açın Görüntü Kompresörü ve orta-yüksek kalite test ediyor.
5. Ağırlıkları karşılaştırın ve metinleri, sınırları, yüzleri ve gradyanları inceleyin.
6. Sonucu yayınla ve sayfayı mobil ile masaüstünde kontrol et.

Boyutlar: Gereğinden fazla piksel yüklemeden kaçının

Bir kart 600 piksel genişliğinde bir görüntü gösteriyorsa, 5000 piksellik bir fotoğraf yüklemek genellikle boşa gider. Tarayıcı görsel olarak küçültülecek, ancak önce tüm dosyayı indirmesi gerekecek. Tasarımın gerektirdiği maksimum boyuta yakın bir versiyon hazırla.

Yüksek yoğunluklu ekranlar için yaklaşık iki kat daha büyük bir sürüm sağlamak faydalı olabilir, ancak ideal olan siteyi duyarlı görüntülerle kullanmaktır. SRCSET y boyutlar. Bu şekilde her cihaz aynı dev dosya yerine uygun bir varyantı indiriyor.

Hangi formatı seçmeli

• JPG: Şeffaflık olmadan fotoğraflar için iyi uyumluluk ve makul boyut.
• WebP: fotoğraflar ve web grafikleri için faydalı; Şeffaflığı koruyabilir ve kompakt dosyalar sunabilir.
• PNG: Şeffaflık için uygun, net metin ve basit grafikler içeren ekran görüntüleri; fotoğraflarda çok yer kaplayabilir.
• SVG: Dosya güvenli ve tasarım vektör olarak oluşturulduğunda logolar ve vektör simgeleri için idealdir.

Format değiştirmek daha küçük bir dosya garantisi vermez. Sonucu her zaman karşılaştır ve en verimli seçenek olduğunda orijinal formatı koru. Bak: JPG, PNG ve WebP arasındaki karşılaştırma hangisini seçeceğini bilmiyorsan.

Sıkıştırma Kalitesi Nasıl Seçilir

Öncelikle görünümü önceliklendiren bir ayarla başlayın ve sonra yavaşça düşürün. Fotoğraflar, arayüz ekran görüntüleri, diyagramlar ve küçük metinlere göre sıkıştırmayı daha iyi tolere eder. Eğer halo, blok veya bulanık kenarlar görünüyorsa, kaliteyi artırın veya başka bir format deneyin.

Dosyayı sadece yakınlaştırılmış bir görünümde değil, sayfa içinde değerlendirin. %300 görünür küçük bir fark normal boyutta fark edilmeyebilir; Öte yandan, bir karttaki okunmaz bir harf gerçek bir sorundur.

Sıkıştırma, iyi bir uygulamanın yerine geçmez

Dosyayı optimize etmenin yanı sıra, özelliklerle alan ayır. genişlik y boy içerik atlamalarını önlemek için. Görünür ilk blok dışında olan resimlerde ötelenmiş yüklemeyi kullanın, ancak sayfayı anlamak için gerekli olan ana resmi geciktirmeyin.

Ayrıca sürümlü isimlendirilmiş dosyalar için uzun bir önbellek tanımlamak ve aynı görüntüyü farklı çözünürlüklerde CSS ile yüklemekten kaçınmak da uygundur. Bu kararlar sitede değişiklik gerektirir, ancak sıkıştırma sırasında elde edilen tasarrufu tamamlar.

Yaygın Hatalar

Boyut belirlemeden önce sıkıştırın

Daha sonra yeniden boyutlandırmak dosyayı iki kez işlemeye zorlar ve kayıp birikimi oluşturabilir. Önce çerçeveyi ve boyutları belirleyin; en sonunda sıkıştırın.

Ekran görüntülerini düşük kalitede JPG olarak dönüştürün

İnce harfler ve çizgiler lekelere yol açabilir. PNG veya WebP daha yüksek kalitede deneyin ve ağırlığı karşılaştırın.

Küçük bir görseli başlık olarak kullanın

Büyütmek detayı geri getirmez. Yeterince büyük bir kaynaktan başla ve o versiyondan daha küçük varyantlar üret.

Sıkça Sorulan Sorular

Bir web görseli ne kadar ağırlık olmalı?

Boyutlarına, önemine ve karmaşıklığına bağlıdır. Evrensel bir sayıyı takip etmek yerine, nihai boyutunda kabul edilebilir kaliteyi koruyan en düşük ağırlığı kriter olarak kullanın.

Tüm resimleri WebP formatına dönüştürmeli miyim?

Zorunlu değildir. WebP kullanışlıdır, ancak basit bir PNG veya zaten optimize edilmiş bir dosya iyileşmeyebilir. Bir örneği dönüştürün, ölçün ve orijinalleri saklayın.

Sadece görüntüleri sıkıştırmak konumlandırmayı iyileştirir mi?

Deneyime ve performansa yardımcı olur, ancak konumlandırma aynı zamanda yararlı içerik, tarama, bağlantılar, arama niyeti ve birçok diğer sinyale de bağlıdır. Sıkıştırma, iyi hazırlanmış bir web sitesinin bir parçasıdır.