Sıkıştırılmış büyük görsel hâlâ büyük bir seçimdir
Küçük görsel alanı, indirilen dosyayı küçültmez. Her ziyaretçi aynı tam boy fotoğrafı alıyorsa telefon yerleşimin kullanmadığı pikselleri de indirebilir. Sıkıştırma ve duyarlı seçim, sorunun farklı kısımlarını çözer.
Web sitesi iş akışımız hazırlığı, görsel sunum rehberi ise performans tanısıyla bağlantısını anlatır. Bu deney puanı sonuç saymadan, fotoğrafı hazırlanan dosyalardan tarayıcının gerçek seçimine kadar izler.
Adayları hazırlayın, tarayıcıyı gözlemleyin
Sıkıştırmadan önce harici görsel düzenleyicide orantılı kopyalar yaptık; Bitinz boyutlandırmadı. 2026-10-29 tarihinde her kopya yerel motorda Dengeli ile işlendi. Kayıtlı boyutlar, baytlar ve sağlama, tarayıcı deneyindeki adayı tanımlar.
Yerel sayfa eşleşen sizes kuralıyla srcset üzerinden adayları sundu. Gözlemler görünüm alanı genişliğini, piksel yoğunluğunu ve seçilen kaynağı kaydeder. Ölçüm görsel verisidir; tam sayfa yüklemesi veya benzetilmiş mobil ağ değildir. Yayın politikamız kanıtları açıklar.
Seçimin arkasındaki hazırlanmış dosyalar
Aday boyutlarını burada karşılaştırın, ardından kaynaklarda bağlantısı verilen tarayıcı seçim kaydına bakın. Tarayıcı yalnızca sayfanın gerçekten sunduğu dosyayı seçebilir.
| Görsel | Piksel | Çıktı | Seviye | Önce | Sonra | Tasarruf |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Dengeli | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Dengeli | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Dengeli | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Dengeli | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB = 1000 bayt.
Tarayıcının gerçekten indirdiği dosya
| Görünüm alanı (CSS px) | Piksel yoğunluğu | Görüntülenen genişlik (CSS px) | Seçilen genişlik (px) | Görsel verisi |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Her satırda önbelleği kapalı, yeni bir tarayıcı bağlamı kullanıldı. En geniş ve yüksek yoğunluklu örnek, sunulan dosyalar arasındaki büyük boşluk nedeniyle en büyük adayı seçti. Arada bir boyut daha denemek yararlı olabilir; tarayıcı yalnızca listede bulunan dosyayı seçebilir.
Seçilen görseli yararlı ölçekte inceleyin
Kaynak fotoğraf ayrıntısı
Sıkıştırılmış fotoğraf ayrıntısı
Fotoğrafı küçük ekranda ve yüksek yoğunluklu ekranda inceleyin. Görsel belirgin biçimde bulanıksa en küçük aday otomatik olarak en iyisi değildir. Büyük aday da yalnızca etkileyici sıkıştırma boyutuyla gerekçelendirilemez.
Tarayıcı seçim kaydı belirtilen ortamdaki anlık gözlemdir. Önbellek ve tarayıcı kararları sonraki ziyaretleri etkileyebilir. Tekrarlarken yeni tarayıcı bağlamı kullanın ve seçimi görünen boyutlardan çıkarmak yerine istenen görseli inceleyin.
Hazırlıkla sunumu birleştirin
Hazırlanan kopyalarda görsel sıkıştırıcıyı kullanın, ardından sitenizin veya içerik yönetim sisteminizin uygun sürümleri sunmasını sağlayın. Üretilen kod tüm ekranları tek büyük dosyaya yönlendiriyorsa yalnızca sıkıştırma bu kararı değiştirmez.
sizes değerini CSS yerleşimiyle uyumlu tutun. Tarayıcı bu ipucunu mevcut adaylar ve ekran yoğunluğuyla birlikte kullanır; dosya adından yazarın niyetini okuyamaz. Yerleşim değişince seçilen kaynağı kontrol edin.
Tekrarlanan işlerde geliştirici API'si, yayın sırasında hazırlanmış dosyaları sıkıştırabilir. Boyutlandırma ayrı bir hazırlık adımı olarak kalır. Kalite rehberimiz, görseli değiştirmeden önce ayrıntıların nasıl karşılaştırılacağını açıklar.
Sayfanızdaki görsel alanını kontrol edin
- Görsel alanını ölçüp tasarımın gerektirdiği orantılı genişlikleri belirleyin.
- Düzenlenebilir kaynağı saklayarak kopyaları hazırlayıp sıkıştırın.
- Yerleşimle eşleşen bir
sizeskuralıyla adayları sunun. - Seçilen kaynağı ve görünen fotoğrafı farklı ekranlarda inceleyin.
SSS
- Görüntüleme genişliğini ayarlamak indirilen dosyayı küçültür mü?
- CSS genişliği yerleşimi değiştirir, tek bir görsel dosyasının baytlarını değil. Uygun adaylar sunup tarayıcının hangi kaynağı seçtiğine bakın.
- Yüksek yoğunluklu telefon neden daha geniş görsel seçebilir?
- Yüksek yoğunluklu ekran aynı görünür alanda daha fazla görsel pikseli kullanabilir. Aday boyutları ve sayfanın boyut ipucu tarayıcı seçimini etkiler.
- Bu deney sayfa hızını ölçüyor mu?
- Sıkıştırma sonuçlarını ve görsel kaynağı seçimini kaydeder. Tam sayfanın yüklenme deneyimi diğer kaynaklara, ağa ve oluşturma işine de bağlıdır.