Web sitemdeki görseller neden bulanık görünüyor?

Bulanıklığın başladığı aşamayı bulun

Görsel çekilir veya tasarlanır, dışa aktarılır, yüklenir, otomatik işlenir ve gösterilir. Ayrıntının ilk kaybolduğu aşamayı bulun; tüm ayarları aynı anda değiştirmeyin.

Orijinali %100 yakınlaştırmayla, ardından yüklediğiniz dosyayı ve son olarak yayımlanan sayfanın aldığı görseli açın. Aynı gözü, etiketi veya yazıyı karşılaştırın. Küçük önizlemeler farkları gizleyebilir; aşırı yakınlaştırma iyi fotoğraflarda da pikselleri gösterir. Orijinalde odak veya hareket bulanıklığı varsa daha iyi bir kaynak bulun ya da fotoğrafı yeniden çekin. Yalnızca dışa aktarım kötüyse önce onu düzeltin.

Belirtiye göre kontrol seçin

Sayfanın gerçekten yüklediği dosyayı kontrol edin

İçerik yönetim sistemi büyük orijinali saklarken bir blok veya tema küçük resim kullanabilir. Tarayıcı geliştirici araçlarının Ağ panelinde görsel isteğini açın. Dosyanın piksel boyutlarını sayfada kapladığı alanla karşılaştırın. Yalnızca orijinal yüklemenin ölçüleri yeterli değildir.

300 piksel genişliğindeki küçük resim 900 piksellik sütunda büyütülür. Tam orijinal gereksiz derecede büyük olabilir: küçük resmi yeniden sıkıştırmak yerine düzenleyici veya şablondan uygun ara sürümü seçin. Birden fazla kaynak varsa seçilen dosya pencere genişliğiyle değişebilir. Telefon ve bilgisayarda deneyin; duyarlı görseller rehberini ve MDN’nin kaynak seçimi ve piksel yoğunluğu açıklamasını okuyun.

Kullanılacağı alan için yeterli piksel seçin

600 CSS piksel genişlikte gösterilen fotoğraf için 600 ve 1200 piksel kopyaları, yüksek yoğunluklu bir telefon dahil, karşılaştırın. Daha büyük sürüm daha fazla ayrıntı gösterebilir; dosya boyutunu da kontrol edin. Bunlar deneme ölçüleridir, genel bir kural değildir.

Yeterince büyük orijinalden boyutlandırma aracıyla kopya oluşturun ve en boy oranını kilitleyin. 300 pikseli 1200’e büyütmek fotoğraf ayrıntısı üretmez. Web siteleri için uygun görsel boyutları başka örnekler sunar. Küçük bir yüzü sıkıca kırpmak da kullanılabilir pikselleri azaltır; kırpılan dosyanın ölçülerini kontrol edin.

Sıkıştırmayı ve küçük yazıları ayrı inceleyin

Bloklaşmış geçişler, dağılmış dokular ve harf çevresindeki bozulmalar aşırı kayıplı sıkıştırmaya işaret edebilir. En iyi kaynaktan aynı ölçülerle daha az sıkıştırılmış bir kopya üretin. Bozuk JPG’yi PNG olarak kaydetmek hasarı düzeltmez.

Ekran görüntüsü veya diyagramdaki en küçük önemli yazıyı kullanım boyutunda okuyun. JPG ve PNG rehberiyle PNG’yi mevcut kopyayla karşılaştırın. Çok küçük yazı daha yüksek kalite yerine yeni yerleşim gerektirebilir. Orijinalden ayrı denemeler oluşturup adlarında ölçü ve biçimi belirtin; kayıplı indirmeleri art arda dönüştürmeyin.

Burada %100, görsel görüntüleyicide gerçek piksel boyutu demektir: bir görsel pikseli bir ekran pikseli olarak gösterilir. Tarayıcının sayfa yakınlaştırması ayrı bir ayardır.

Örnek: net yükleme, bulanık makale görseli

2400 × 1600 fotoğrafınız cihazda net, 600 piksellik makale alanında bulanıktır. Sayfa 300 × 200 küçük resim yüklemektedir. Bu, belirli bir sitenin ölçümü değil, açıklayıcı bir örnektir.

1. Orijinali saklayın ve sayfanın küçük resmi kullandığını doğrulayın.
2. Blok veya şablondan uygun büyük sürümü seçin.
3. 600 × 400 ve 1200 × 800 sürümlerini aynı görüntüleme genişliğinde karşılaştırın.
4. Telefon, bilgisayar ve gerçekten yüklenen dosya boyutlarını kontrol edin.
5. Gerekli ayrıntıları gösteren en küçük sürümü tutun.

Çözüm uygun sürümü seçmektir; küçük resmi sıkıştırmak ayrıntı eklemez. Eski görsel görünüyorsa yeniden dışa aktarmadan önce istenen adresi ve ilgili önbelleği kontrol edip güncelleyin.

Sık sorulan sorular

DPI değişince web görseli netleşir mi?

Yalnızca çözünürlük etiketini değiştirmek piksel eklemez. Piksel ölçülerini, görüntüleme boyutunu ve sürümü kontrol edin. Bkz. DPI, PPI ve pikseller.

WebP bulanıklığı düzeltir mi?

Biçim değişikliği kaybolan ayrıntıları getirmez. Net orijinalden başlayıp kalite ve boyutu karşılaştırın.

Medya kütüphanesinde neden net görünüyor?

Kütüphane ve sayfa farklı sürümleri farklı boyutlarda gösterebilir. Yayımlanan dosyayı önizlemeyle karşılaştırın.