Duyarlı bir görüntü adayını tahmin etmek için sizes değerini bir CSS genişliğine çözümleyin, bunu cihaz piksel oranıyla çarpın ve elde ettiğiniz hedefi srcset ile karşılaştırın. Ardından seçilen URL’yi doğrulayın: son seçim konusunda tarayıcıların takdir yetkisi vardır.

Bu anlatım, Mac’te Chrome kullanarak yazdığı bir web sayfasını kontrol edenler içindir. Olası adayları hesaplayacak, özgün soyut şekiller içeren yerel bir sayfayı test edecek ve yanıltıcı bir boyut bildirimini tarayıcının olağan seçim davranışından ayırt edeceksiniz.

sizes, srcset ve DPR tarayıcıya ne söyler?

Genişlik tanımlayıcılarıyla srcset, kullanılabilir kaynakları ve bunların doğal piksel genişliklerini listeler. 800w gibi bir tanımlayıcı, gerçekte 800 piksel genişliğinde olan bir görüntüyü belirtmelidir. Genişlik tanımlayıcılarını 2x gibi yoğunluk tanımlayıcılarından ayrı kaynak kümelerinde tutun; ikisini tek bir srcset içinde karıştırmak geçersizdir. MDN’nin görüntü öğesi başvuru belgesi bu gereklilikleri açıklar.

sizes, kaynak seçimi için amaçlanan görüntüleme genişliğini sağlar. Tarayıcı koşulları sırayla değerlendirir ve eşleşen ilk girdiyi kullanır. Koşulsuz yedek değeri sona koyun. Kaynak boyutları 480px, 50vw ve calc(100vw - 32px) gibi uzunlukları kabul eder; 50% gibi yüzde değerleri geçerli yuva genişlikleri değildir. HTML’de duyarlı görüntüleri kullanma

CSS, görüntülenen boyutları denetler. CSS’nizi ve açık sizes listenizi birbiriyle uyumlu tutmanız gereken iki tanım olarak ele alın: biri yerleşimi belirler, diğeri kaynak seçimini bilgilendirir. Yalnızca sizes değerini değiştirmek, buna karşılık gelen yerleşimi uygulamaz. HTML Standardı: Sizes öznitelikleri

DPR, fiziksel pikseller ile CSS pikselleri arasındaki ilişkiyi tanımlar. Mac modelinden veya ekran adından bir değer varsaymak yerine window.devicePixelRatio değerini okuyun. Sayfa yakınlaştırma bu değeri değiştirebilir; pencereyi ekranlar arasında taşımak da değiştirebilir. Parmaklarla yakınlaştırma DPR’yi değiştirmez. MDN: Window.devicePixelRatio

Olası adayı nasıl hesaplarsınız?

Çözümlenmiş kaynak boyutu S, kaynak genişliği W ve DPR D için şu iki eşdeğer hesaplamayı kullanın:

Hedef kaynak genişliği = S × D
Adayın etkin yoğunluğu = W ÷ S

HTML işleme modeli, her adayın genişlik tanımlayıcısını kaynak boyutuna bölerek normalleştirir. MDN ayrıca pratik tahmini, boyut ipucunu DPR ile çarpmak olarak açıklar. HTML Standardı: Kaynak yoğunluklarını normalleştirme, MDN: HTMLImageElement.sizes

Kullanışlı bir çalışma tahmini için hedef genişliğe eşit veya ondan büyük en küçük adayı seçin. Tüm adaylar hedefin altındaysa kullanılabilir en büyük adayı belirleyip eksik kalan miktarı kaydedin. Aşağıdaki alıştırmalarda açıkça belirtilen tahmin kuralı budur. HTML standardı son seçimi uygulamaya bırakır; her tarayıcının bu yuvarlama kuralını izlemesini zorunlu kılmaz. HTML Standardı: Görüntü kaynağı seçme

Şu kaynak boyutu listesini 480w, 800w, 1200w ve 1440w adaylarıyla birlikte ele alalım:

(max-width: 600px) calc(100vw - 32px),
(max-width: 1200px) calc(50vw - 32px),
568px

100vw görüntü alanı genişliğini, 50vw ise bu genişliğin yarısını temsil eder. Bu birimler görüntünün üst kapsayıcısını değil, görüntü alanını temel alır. CSS Değerleri ve Birimleri: Görüntü alanı yüzdesi uzunlukları

Aşağıdaki tabloda kaydedilmiş tarayıcı sonuçları değil, örnek hesaplamalar yer alıyor. Son sütunda belirtilen tahmin kuralı uygulanmıştır.

Görüntü alanı genişliği, CSS px DPR Çözümlenmiş kaynak boyutu, CSS px Hedef kaynak genişliği, px Tahmin edilen aday
600 1 568 568 800w
600 2 568 1.136 1200w
601 2 268,5 537 800w
1.000 1 468 468 480w
1.000 2 468 936 1200w
1.400 2 568 1.136 1200w
1.400 3 568 1.704 1440w, hedefin altında

600’den 601 CSS pikseline geçişi test etmek özellikle yararlıdır. 600’de ilk koşul, genişliğe yakın bir yuva sağlar. 601’de ise ikinci koşul çok daha dar bir yuva sağlar. Böylece daha geniş bir görüntü alanı daha küçük bir hedef görüntü oluşturur. Bu sonuç, yazılmış yerleşim sözleşmesinden doğrudan kaynaklanır.

1.000 piksel genişliğindeki bir görüntü alanında ve DPR 2 iken kaynak boyutu 468 CSS pikselidir. Dört adayın etkin yoğunlukları sırasıyla yaklaşık 1.03x, 1.71x, 2.56x ve 3.08x olur. Tahmin kuralımıza göre hedef yoğunluk olan 2x değerini aşan ilk aday 1200w olur.

Eksiksiz bir yerel testi nasıl oluşturursunuz?

Chrome ve Python 3.8 veya daha yeni bir sürümün yüklü olduğu bir Mac kullanın. Aşağıdaki eksiksiz programı düz metin düzenleyicisinde responsive_demo.py adıyla kaydedin. Program aynı dikdörtgeni ve daireyi içeren dört PNG dosyası oluşturur, eşleşen bir sayfa yazar ve yerel sunucu başlatır. Oluşturulan tüm dosyalar yeni bir geçici dizine kaydedilir; mevcut dosyaların üzerine yazılmaz.

Sayfa bilerek eager yüklenen bir görüntü ve açık kaynak boyutları kullanır. CSS genişlikleri hesaplama tablosunda kullanılan üç koşulla eşleşir. Sunucu, Python’ın belgelenmiş ThreadingHTTPServer sınıfını ve dizin tabanlı istek işleyicisini kullanır. Python: http.server

from functools import partial
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
import struct
import tempfile
import zlib


def chunk(kind, data):
    return (
        struct.pack("!I", len(data)) + kind + data
        + struct.pack("!I", zlib.crc32(kind + data))
    )


def make_png(width):
    height = width // 2
    rows = []
    for y in range(height):
        row = bytearray()
        for x in range(width):
            color = (242, 244, 248)
            if width // 8 <= x < width // 2 and height // 4 <= y < 3 * height // 4:
                color = (70, 100, 160)
            if (x - 3 * width // 4) ** 2 + (y - height // 2) ** 2 < (height // 5) ** 2:
                color = (220, 160, 60)
            row.extend(color)
        rows.append(b"\x00" + row)
    header = struct.pack("!IIBBBBB", width, height, 8, 2, 0, 0, 0)
    return (
        b"\x89PNG\r\n\x1a\n"
        + chunk(b"IHDR", header)
        + chunk(b"IDAT", zlib.compress(b"".join(rows)))
        + chunk(b"IEND", b"")
    )


page = '''<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shape A candidate test</title>
<style>
  body { margin: 0; padding: 16px; font-family: sans-serif; }
  #shape { display: block; width: calc(100vw - 32px); height: auto; }
  @media (min-width: 600.01px) {
    #shape { width: calc(50vw - 32px); }
  }
  @media (min-width: 1200.01px) {
    #shape { width: 568px; }
  }
</style>
<p>Shape A: rectangle and circle</p>
<img id="shape" src="shape-a-800.png" width="1440" height="720"
     alt="Blue rectangle and amber circle on a pale background"
     srcset="shape-a-480.png 480w, shape-a-800.png 800w,
             shape-a-1200.png 1200w, shape-a-1440.png 1440w"
     sizes="(max-width: 600px) calc(100vw - 32px),
            (max-width: 1200px) calc(50vw - 32px), 568px">
</html>
'''

root = Path(tempfile.mkdtemp(prefix="responsive-shapes-"))
for width in (480, 800, 1200, 1440):
    (root / f"shape-a-{width}.png").write_bytes(make_png(width))
(root / "index.html").write_text(page, encoding="utf-8")
handler = partial(SimpleHTTPRequestHandler, directory=str(root))
with ThreadingHTTPServer(("127.0.0.1", 0), handler) as server:
    print(f"Files: {root}", flush=True)
    print(f"Open http://127.0.0.1:{server.server_port}/", flush=True)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass

Terminal’de programı kaydettiğiniz klasöre geçin ve şunu çalıştırın:

python3 responsive_demo.py

Programın yazdırdığı yerel adresi Chrome’da açın. Test sırasında Terminal’i açık tutun; işiniz bittiğinde orada Control+C tuşlarına basın. Program kullanılabilir bir bağlantı noktası ister; bu yüzden sabit bir bağlantı noktası varsaymak yerine yazdırılan adresi kullanın.

CSS eşikleri, masaüstü testindeki tam sayı görüntü alanı genişlikleri için 600.01px ve 1200.01px değerlerini kullanır. Tablodaki tam sayı değerlerini test edin. Örneği üretim yerleşimine uyarlarken gerçek CSS kesme noktalarınızı ve kaynak boyutu koşullarınızı, kesirli genişlik davranışı da dahil olmak üzere, birbiriyle uyumlu hâle getirin.

Mac’te Chrome’da seçimi nasıl doğrularsınız?

Şekle sağ tıklayıp Inspect seçeneğini belirleyerek görüntü öğesi seçili olarak DevTools’u açın. Chrome bunu, bir öğeyi ve uygulanan stillerini incelemenin doğrudan bir yolu olarak belgeliyor. Chrome DevTools’u açma

  1. Toggle device toolbar düğmesine tıklayın ve Dimensions bölümünden Responsive seçin.
  2. Görüntü alanı genişliğini 1000 olarak ayarlayın.
  3. Araç çubuğundaki More options menüsünden Add device pixel ratio seçin, ardından DPR olarak 2 değerini seçin.
  4. Gerekirse More options menüsünden Add device type seçin ve Desktop’ı belirleyin.
  5. Network panelini açın, Disable cache seçeneğini etkinleştirin ve DevTools açıkken sayfayı yeniden yükleyin.
  6. shape-a filtresini kullanarak istenen görüntüyü bulun.

Chrome, görüntü alanı, DPR ve cihaz türü denetimlerini Cihaz Modu kılavuzunda, önbellek denetimini ise Ağ özellikleri başvuru belgesinde açıklar.

Sayfa yüklendikten sonra DevTools Console panelinde bu eksiksiz tanılama parçacığını çalıştırın:

(() => {
  const image = document.getElementById("shape");
  if (!image) throw new Error("The Shape A image was not found.");

  const viewport = window.innerWidth;
  const slot = window.matchMedia("(max-width: 600px)").matches
    ? viewport - 32
    : window.matchMedia("(max-width: 1200px)").matches
      ? viewport / 2 - 32
      : 568;

  console.table({
    viewportCSSPixels: viewport,
    devicePixelRatio: window.devicePixelRatio,
    declaredSlotCSSPixels: slot,
    renderedWidthCSSPixels: image.getBoundingClientRect().width,
    targetResourcePixels: slot * window.devicePixelRatio,
    selectedURL: image.currentSrc,
    naturalWidthCSSPixels: image.naturalWidth
  });
})();

Bu parçacık, yuva değerini özellikle bu demo için hesaplar; genel amaçlı bir sizes ayrıştırıcısı değildir. Bildirilen yuva değerini görüntülenen genişlikle, ardından seçilen dosya adını tahmin tablosuyla karşılaştırın.

currentSrc, tarayıcının seçtiği tam URL’yi bildirir. Kaynağın başarıyla yüklendiğini göstermez; bu nedenle görüntü isteğini ve görüntülenen sonucu da inceleyin. src değerini okumak bu örnekte yalnızca yedek özniteliği gösterir. MDN: HTMLImageElement.currentSrc

naturalWidth değerini PNG’nin kodlanmış genişliği olarak yorumlamayın. Bu, yoğunluğa göre düzeltilmiş CSS pikseli cinsinden genişliktir. Bu kontrollü düzenekte, oluşturulan dosyanın boyutları ve adı kaynak genişliğini belirler. MDN: HTMLImageElement.naturalWidth

Testi 600 ve 601 CSS pikselinde, her koşulda sayfayı yeniden yükleyerek tekrarlayın. Görüntü alanını, bildirilen DPR’yi, yuvayı, seçilen dosya adını ve isteğin tamamlanıp tamamlanmadığını kaydedin. Bu kayıtlar, önceden yüklenmiş bir sayfa yeniden boyutlandırılırken yapılan seçim dizisinden, yeni yüklemede tekrarlanabilir bir sonucu ayırt etmenizi sağlar.

Tahmininiz farklıysa neleri kontrol etmelisiniz?

Aday listesini değiştirmeden önce girdileri sırayla inceleyin:

  1. Tanımlayıcı ailesini kontrol edin. 1x ve 2x gibi yoğunluk tanımlayıcıları kullanılıyorsa genişlik tanımlayıcılarına yönelik hesaplamayı sizes üzerinden uygulamayın.
  2. İlk eşleşen koşulu kontrol edin. Daha önce gelen eşleşen bir koşul, sonraki girdilere göre önceliklidir.
  3. Bildirilen ve görüntülenen genişlikleri karşılaştırın. 100vw bildirimi, CSS’nin dar bir sütunla sınırladığı yuvanın genişliğini olduğundan fazla gösterebilir.
  4. Gerçek DPR’yi okuyun. Sayfa yakınlaştırmasından veya ekran değişikliğinden sonra yeniden kontrol edin.
  5. Kontrollü yeniden yüklemeleri karşılaştırın. Testi tekrarlarken görüntü alanı, DPR ve yükleme koşullarını aynı tutun.
  6. Kaynağın kullanılabilirliğini kontrol edin. Seçilen URL ile görüntünün başarıyla gösterilmesi ayrı gözlemlerdir.

Açık kaynak boyutlarının eksik veya kullanılamaz olması, HTML ayrıştırıcısının 100vw varsayılanına başvurmasına yol açabilir. Bu da dar bir görüntü için hedefin şaşırtıcı ölçüde büyük olmasını açıklayabilir. Tarayıcının CSS’nizden amaçlanan sütun genişliğini çıkaracağını varsaymak yerine doğru bir kaynak boyutu listesi sağlayın. HTML Standardı: sizes özniteliğini ayrıştırma

Sayfada bir picture öğesi kullanılıyorsa yoğunlukları hesaplamadan önce hangi kaynak dalının geçerli olduğunu belirleyin. Kaynak seçimi, o daldaki adaylar arasından seçim yapılmasından önce gelir; farklı kırpmalar bu sanat yönetimi mekanizmasını kullanır. HTML’de duyarlı görüntüleri kullanma

Hangi destek sınırları bu yöntemi etkiler?

MDN, sizes özelliğinin tarayıcılar arasında yaygın olarak kullanılabildiğini belirtiyor; ancak bu, daha yeni her anahtar sözcüğün eşit ölçüde desteklendiği anlamına gelmez. Burada kullanılan açık koşullar, otomatik boyutlandırmaya bağlı kalmadan doğrudan bir test sağlar. MDN: HTMLImageElement.sizes

sizes="auto", geç yüklenen görüntüler için geçerlidir ve seçimde bu görüntülerin yerleşim genişliğinin kullanılmasını sağlar. Bunu kullanırsanız, anahtar sözcüğü desteklemeyen tarayıcılar için auto sonrasında açık yedek boyutlar bulundurun ve görüntü boyutlarını belirtin. Bu ön koşulları değiştirmeden anahtar sözcüğü eager yükleme örneğine eklemeyin. MDN’nin görüntü öğesi başvuru belgesi

Chrome’un cihaz denetimleri, emüle edilmiş koşullarda Chrome’un davranışını sınar. Safari’nin veya Firefox’un aday seçimlerini göstermez. Chrome ayrıca Cihaz Modu’nun bir yaklaşım olduğunu belirtiyor; başka bir tarayıcının davranışı önemliyse o tarayıcıyı doğrudan test edin. Chrome DevTools: Cihaz Modu sınırlamaları

Yararlı bir tahmin, kontrol edilebilir bir kayıtla tamamlanır: geçerli kaynak kümesi, çözümlenmiş kaynak boyutu, bildirilen DPR, hesaplanan hedef ve gözlemlenen currentSrc. Bu girdiler yazılmış yerleşimle eşleştiğinde kaynak seçimini açıkça açıklayabilir ve bir sonraki değişikliğin CSS’de mi, sizes içinde mi, yoksa kullanılabilir görüntü genişliklerinde mi yapılması gerektiğini belirleyebilirsiniz.

Kaynaklar