Duyarlı resim işaretlemesi iki senaryoya ayrılabilir: Hedefin olası en verimli resimler olduğu durumlar ve tarayıcının seçtiği resim kaynağı üzerinde açık kontrole ihtiyaç duyduğunuz durumlar. Bunları, sırasıyla açıklayıcı ve rehber söz dizimi olarak düşünebilirsiniz.
Bu modülde, her iki yaklaşımı da öğreneceksiniz. İlk olarak srcset ve sizes konularını ele alacağız ve tarayıcının kullanıcı, cihazı ve göz atma durumuna dayalı olarak en iyi seçimi yapması için nasıl yardımcı olacağına bakacağız. Daha sonra <picture> öğesini keşfedersiniz. Bu öğe, görüntü biçimleri için görüntü alanı boyutu ve tarayıcı desteği gibi faktörlere dayalı olarak kaynak seçimi üzerinde açık kontrole olanak tanır.
Açıklayıcı söz dizimi
Açıklayıcı bir söz dizimi, tarayıcıya resim kaynakları ve bunların nasıl kullanılacağıyla ilgili bilgi verir, ancak nihai olarak karar verme sürecini tarayıcıya bırakır. Bu, büyük ölçüde daha yaygın olan bir senaryodur; resimlerin büyük çoğunluğu için tarayıcı davranışı üzerinde ayrıntılı kontrol istemezsiniz. Tarayıcıların elinde web geliştiricilerin elindekinden çok daha fazla bilgi vardır ve bu bilgiler temel alınarak karmaşık kararlar verebilir. Kullanıcıların tarama bağlamını doğru bir şekilde tahmin edemezsiniz. Kullanıcıların donanımları, tercihleri ve bağlantı hızları hakkında sahip olmadığınız çok fazla bilgi vardır. En iyi ihtimalle bilgiye dayalı tahminlerde bulunabilirsiniz, ancak her kullanıcının web'de nasıl bir deneyim yaşadığını kesin olarak bilemezsiniz. Duyarlı resimlerin ana kullanım alanı, geliştiricinin bakış açısından kesinlikle hedef odaklıdır: Tarayıcıların, ellerindeki bilgilere dayanarak mümkün olan en verimli resim isteklerini yapmasına olanak tanıma.
Tarayıcıların bu seçimleri yapabilmesini sağlamak için srcset, tarayıcıya tek bir <img> alanını dolduracak potansiyel kaynakların bir listesini sunmanıza olanak tanır. sizes ise tarayıcıya, <img> öğesinin nasıl oluşturulacağı hakkında bilgi verir. Bunları nasıl kullanacağınızı bir sonraki modülde öğreneceksiniz.
Hazır söz dizimi
Kurallı bir söz dizimiyle, tarayıcınıza ne yapacağını, yani tanımladığınız kriterlere göre hangi kaynağı seçeceğini bildirirsiniz. Bu kullanım alanı,"sadece bu resmi oluşturmak için en verimli öğeyi yükleyin" kadar yaygın olmasa da, öğelerin aktarılmasından önce sahip olmadığı bilgileri (ör. kaynakların içeriği veya biçimleri) hesaba katmak için tarayıcıya kullanım talimatları sağlamamıza olanak tanır.
srcset ve sizes, bilgileri kullanıcının tarayıcısına aktarmak ve resim kaynaklarıyla ilgili karar vermesine olanak sağlamak için size bir söz dizimi sağlar. Ancak bazı durumlarda hangi kaynak dosyanın ne zaman sunulacağını açık bir şekilde kontrol etmeniz gerekebilir. Örneğin, düzen ayrılma noktalarındaki farklı tasarım uygulamalarına göre aynı resim içeriğinin farklı en boy oranlarına sahip sürümlerini görüntülemek veya yalnızca belirli bir kodlamayı destekleyen tarayıcıların belirli kaynakları aldığından emin olmak isteyebilirsiniz.
Bu durumlarda, hangi kaynağın ne zaman gösterileceği konusunda tam kontrole sahip olmak istersiniz. Bunlar, srcset ve sizes tarafından tasarım gereği bize sağlanamayacak güvencelerdir. Bu kontrolü elde etmek için <picture> öğesini kullanmamız gerekir.