Doğru deseni seçin
Çözünürlük değiştirme (resolution switching) kompozisyonu aynı tutar ve birkaç dosya genişliği sunar. Ürün fotoğrafları, makale görselleri ve kartlar için en yaygın desendir. İşlenen genişlik düzenle değiştiğinde 480w veya 1200w gibi genişlik (w) tanımlayıcıları kullanın. Sayı, dosyanın gerçek piksel genişliğidir; telefon hedefi veya bir CSS komutu değildir.
Yoğunluk değiştirme (density switching) sabit bir CSS yerleşimi için daha fazla kaynak piksel sunar. Tanımlayıcıları 1x, 1.5x veya 2x gibidir ve örneğin tutarlı şekilde 160 CSS piksel genişliğinde olan bir logo veya ikon için uygundur. Aynı srcset içinde genişlik (w) ve yoğunluk (x) tanımlayıcılarını karıştırmayın.
Bir bileşen büyüyor veya küçülüyorsa sizes ile birlikte w tanımlayıcılarını kullanın.
Render edilen CSS boyutu kararlıysa yalnızca x tanımlayıcılarını, sizes olmadan kullanın.
sizes seçimi nasıl etkiler, bilin
Genişlik tanımlayıcılarıyla tarayıcı, bir resmi indirmeden önce sizes değerlerini değerlendirir. Her giriş isteğe bağlı bir medya koşulu ile bir uzunluk eşleştirir. İlk eşleşen koşul kaynak genişliğini sağlar; son koşulsuz uzunluk yedektir. sizes bir seçim ipucudur, bir CSS kuralı değildir.
Tarayıcı bu kaynak genişliğini aday genişliklerle karşılaştırıp etkili yoğunluğu hesaplar; ardından görüntü yoğunluğu, yakınlaştırma ve ağ koşullarını da göz önünde bulundurabilir. Matematiksel olarak en yakın dosya seçilmek zorunda değildir. Dürüst adaylar ve güvenilir bir yerleşim tahmini sağlayın; nihai seçimi tarayıcı (user agent) yapar.
İlk eşleşen medya koşulu kazanır; bu yüzden listeyi ilk eşleşmenin doğru olması için uygun sırada yazın.
Bir üçüncü genişlikteki masaüstü kartı viewport-genişliğinde tanımlamak gereksiz büyük bir aday indirilmesine yol açabilir.
Adayları gerçek yerleşimden türetin
Sayfaları değil bileşenleri envanterleyin. Bir hero, editoryal figür, ürün galerisi, arama küçük resmi ve footer logosu genellikle farklı yerleşim genişliklerine sahiptir. Her biri için dar ve en geniş render edilmiş genişlik, en-boy oranı, kırpma davranışı ve ilk ekranda görünürlük durumunu kaydedin.
Bileşenin anlamlı yerleşim aralığı etrafında genişlikler oluşturun; yüksek yoğunluklu gösterim gerekçelendirdiğinde daha büyük bir seçenek ekleyin. Neredeyse aynı dosyalar build ve önbellek karmaşıklığını artırır; yalnızca çok küçük ve çok büyük dosya arasında zorunlu bir uzlaşma gerekiyorsa sorun çıkar. Görüntü dönüşümlerinin çalıştığını varsaymayın; oluşturulan URL’leri test edin.
Geçerli bir src yedeğini (fallback) ve teslim edilen orana uyan width ve height değerlerini koruyun. Bunlar alan ayırır ama duyarlı CSS’nin nihai boyutları değiştirmesine engel olmaz.
800w olarak ilan edilmiş bir adayın gerçekten 800 piksel genişliğinde olması gerekir.
Yerleşim alanı ve aday planını şablon ve tasarım değişiklikleriyle birlikte güncel tutun.
Art direction için picture kullanın
Art direction kompozisyonu değiştirir, sadece dosya boyutunu değil. Geniş bir manzara fotoğrafı, dar bir ekranda konunun görünürlüğünü korumak için daha dar bir portre kırpması gerektirebilir. picture öğesi medya-özgü kaynak seçenekleri sunabilir; ardından bir img yedeği gelir. Tarayıcı her kaynağın media, type ve srcset bilgilerini değerlendirir; img alternatifi, boyutları ve yedek davranışı taşır.
Her kırpmayı editoryal ve erişilebilirlik incelemesiyle hazırlayın. Bir mobil kırpma ürün detayını veya alternatif metinde bahsedilmiş bir kişiyi çıkarabilir. alt (alt metin) attriibünü img üzerinde tutun ve görselin ilettiği bilgi veya işlevi tanımlayın. Görsel gerçekten dekoratifse yalnızca alt="" kullanın; bağlantılı veya buton olan bir görsel için görünüş yerine eylemi tanımlayın. Kompozisyon değişmiyorsa picture eklemeyin: sıradan genişlik tabanlı srcset daha basittir.
Yoğun bir masaüstü hero’su telefonda ayrı bir portre kırpması gerektirir.
picture kaynağı bir type ipucu sunabilir ve geniş kullanılabilir img yedeğini koruyabilir.
Maliyetli yükleme ve işaretleme hatalarından kaçının
Yaygın israf, sizes="100vw" değerini her resme kopyalamaktır. Bu, dar bir tam-genişlik figüre uyabilir ama sınırlı bir kapsayıcıya veya masaüstü kartına uymaz. Karşı hata ise yeniden tasarımdan sonra stale (eski) sizes değeridir. CSS ve sizes’ı birlikte değiştirin.
İlk ekran içeriğinde önemli olan bir görüntüyü tembel yükleme (lazy-load) ile yüklemeyin. Genel öneri katmanın altındaki (below-the-fold) görselleri tembel yüklemek ve görünür hero’yu eager tutmaktır. Gerçekten hayati bir görsel için fetch-priority kullanılabilir; ancak geniş kapsamlı yüksek öncelik veya preload kuralları performansa zarar verebilir. Dosya adlarına veya önbelleğe güvenerek kanıt saymayın.
Bir CMS, proxy veya önbellek yanlış bir tanımlayıcıyı veya istenmeyen bir görüntü isteğini gizleyebilir.
Önemli sayfa metnini sadece art-directed kırpmaya bağımlı hale getirmeyin.
İsteği, kırpmayı ve onarımı test edin
Grid kırılma genişliklerinin hemen üstü ve altı dahil olmak üzere temsilci sayfaları layout-değişim genişliklerinde test edin. Yüksek yoğunluklu ayar, geniş masaüstü ve slotu değiştiren durumları dahil edin. Render edilmiş boyutları, kırpmayı, alternatif metni ve görsel netliği doğrulayın.
Chrome DevTools’da Network sekmesini açın, önbelleği devre dışı bırakarak yeniden yükleyin veya Boş Önbellek ile Yeniden Yükleme (Empty Cache And Hard Reload) kullanın, görüntü isteklerini filtreleyin ve URL, transfer boyutu, başlıklar, initiator ve zamanlamayı inceleyin. Geç yanıtları veya israfı ortaya çıkarmak için throttling uygulayın. Görünüm, cihaz ölçek faktörü, slot, aday, transfer edilen bayt ve beklenen sonucu kaydedin.
Bir şablon, kırılma noktası, CDN veya varlık hattı (asset pipeline) değiştiğinde bunu bir yayın engeli (release gate) yapın. Dar kapsamlı onarım yapın: sizes’ı düzeltin, bir tanımlayıcıyı düzeltin, bir kırpmayı yeniden oluşturun, bir yedeği geri yükleyin veya gereksiz preloada son verin. Soğuk önbellek yeniden yüklemesiyle yeniden test edin.
Ağ (Network) paneli gerçekten istenen adayı kaydeder.
Bu, görüntü teslim davranışını doğrular; origin kapasitesi, CDN erişilebilirliği veya genel çalışma süresini doğrulamaz.
Bunu bir SIU dayanıklılık kontrolü olarak uygulayın
Duyarlı görseller kaçınılabilir transferi azaltır ama başarılı bir isteği garanti edemez. Origin hataları, kullanılamayan dönüşümler, üçüncü taraf barındırıcıları ve CDN arızaları için ayrı süreklilik ve kurtarma planlaması gereklidir.
SIU için teslimat regresyonlarını erken yakalamak, sorumlu şablon veya dönüşüm kuralını tespit etmek ve yayına almadan önce en küçük güvenli düzeltmeyi yapmak üzere test kayıtlarını kullanın. Bunu erişilebilirlik ön kontrobu ve geri alma planlamasıyla eşleştirin.
Her başarısız seçim kontrolü için bir bileşen ve görüntü hattı (image-pipeline) sahibi atayın.