Yüksek yoğunluklu ekranlar için kullanışlı görüntü boyutlarını seçin

800 CSS piksel genişliğinde görüntülenen bir kart, 2x örnek olarak 1600 görüntü pikseli genişliğinde bir görüntü adayı kullanabilir. Tarayıcı, web sitesi duyarlı görüntü işaretlemesi sağladığında düzen, cihaz yoğunluğu ve diğer koşullara göre uygun bir kaynak seçebilir. 1600 piksellik dosya, kartın sayfada 1600 CSS pikselini işgal etmesi gerektiği anlamına gelmez.

Dışa aktarmadan önce gerçek düzeni ölçün. Bir makale sütunu, tam genişlikte bir afiş ve küçük bir ürün kartı nadiren aynı kaynak boyutuna ihtiyaç duyar. Ayrıca, görüntünün farklı bir genişlikte olabileceği veya farklı bir kırpma kullanabileceği telefon düzenini de kontrol edin. Her dosyayı en büyük masaüstü viewport genişliğinin iki katı yapmak baytları boşa harcayabilir. Daha yüksek yoğunluklu ihracatı, her cihazın indirmesi gereken tek bir büyük boyutlu dosya yerine gerçek bir duyarlı uygulama için aday olarak ele alın.

Bu sayfa, 1600 x 1600 piksellik bir WebP Fit kutusu ile başlar. Açıklayıcı bir sınırdır, bu nedenle ölçtüğünüz ekran boyutuna göre onu değerlerle değiştirin. İçine sığdır, orantıları korur ve daha küçük bir kaynağı büyütmez. Örneğin, geniş bir orijinal, bunun yerine bir portre yüksekliğe uyduğunda 1600 piksele ulaşabilir. Gerçek çıktı boyutlarını kontrol edin.

Bir kaynak yalnızca 700 piksel genişliğindeyse, 1600 piksellik bir dışa aktarma yazmak, daha büyük bir orijinalin ayrıntısını oluşturmaz. daha iyi bir kaynak kullanın veya daha küçük bir adayı kabul edin. Yeniden boyutlandırıldıktan sonra hafif keskinleştirmeyi OFF ile karşılaştırın ve istenen ekran boyutunda ince dokuları inceleyin. Şeffaf grafikler için bunun yerine PNG kullanın, çünkü buradaki mevcut WebP dışa aktarma opaktır. Orijinal tasarımı veya fotoğrafı saklayın, böylece daha sonra farklı adaylar oluşturabilirsiniz.

Dönüştürücü bir dosya üretir; Web sitenizin yine de doğru şekilde seçip sunması gerekiyor. Uygulamada uygun kaynak adayları, doğru boyut ipuçları ve ayrılmış görüntü boyutları sağlayın. Bir telefon, yalnızca var olduğu için en büyük görüntüyü almamalıdır. Son sayfayı değerlendirirken indirilen görüntüyü tarayıcı geliştirici araçlarında kontrol edin, çünkü bir içerik yönetim sistemi onu yeniden dönüştürebilir.

Sayfayı sıradan ve yüksek yoğunluklu ekran ayarlarında görüntüleyin ve ayrıntıları aktarım boyutuyla karşılaştırın. Daha yüksek çözünürlüklü bir görüntü, küçük bir dekoratif kart için otomatik olarak en iyi ödünleşim değildir. Aynı şekilde, aşırı küçük bir görüntü, büyük bir ürün görünümünde zayıf görünebilir. Yalnızca bulanık bir arka planı değerlendirmek yerine yüzler ve etiketler gibi anlamlı içerikleri test edin. Yükleme önceliğini görüntünün konumuna uygun tutun ve hız veya çekirdek web hayati değerlerinde bir gelişme talep etmeden önce gerçek sayfayı ölçün.

En geniş kartınızın 400 CSS pikseli olduğunu ve bir illüstrasyonun bu genişlikte net kaldığını varsayalım. 800 piksellik bir aday, kaynak desteklediğinde olası bir 2x dışa aktarmadır. Kartı daha dar düzenlerde de kontrol edin, çünkü tüm telefon ekranını kapsayan bir görüntü masaüstü kartından farklı bir ekran genişliğine sahip olabilir. En küçüğünü büyütmek yerine, ihtiyaç duyulan her aday için orijinalinden ihracat yapın. Tarayıcının gerçek sayfada hangi dosyayı seçtiğini onaylayın. Bu son seçim kontrolü, yerel boyutlar hesaplamasını ziyaretçilerin görüntü için gerçekten aldığı baytlara bağlayan şeydir.