Uyumlu görseller

Web'deki metin, taşmaması için ekranın kenarında otomatik olarak kaydırılır. Resimlerin ise doğal bir boyutu vardır. Ekrandan daha geniş olan resimler taşar ve kullanıcının tamamını görebilmek için yatay olarak kaydırması gerekir.

Neyse ki CSS, bu durumun yaşanmasını önlemek için kullanabileceğiniz araçlar sunar.

Resimlerinizi sınırlama

Stil sayfanızda, resimlerin hiçbir zaman kapsayan öğeden daha geniş bir boyutta oluşturulamayacağını belirtmek için max-inline-size kullanabilirsiniz.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Aynı kuralı, videolar ve iFrame'ler gibi diğer yerleştirilmiş içerik türlerine de uygulayabilirsiniz.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Bu kural uygulandığında tarayıcılar, resimleri ekrana sığacak şekilde otomatik olarak küçültür.

block-size değerini auto olarak ayarladığınızda tarayıcı, resimlerinizi yeniden boyutlandırırken en boy oranını korur.

Bazen bir resmin boyutları içerik yönetim sistemi (İYS) veya başka bir içerik yayınlama sistemi tarafından ayarlanır. Tasarımınızda İYS'nin varsayılanından farklı bir en-boy oranı kullanılıyorsa sitenizin tasarımını korumak için aspect-ratio özelliğini kullanabilirsiniz:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Maalesef bu durum genellikle tarayıcının, resmi amaçlanan alana sığdırmak için sıkıştırması veya genişletmesi gerektiği anlamına gelir.

Sıkıştırmayı ve uzatmayı önlemek için object-fit özelliğini kullanın.

object-fit değeri contain olduğunda tarayıcıya, gerekirse resmin etrafında boş alan bırakarak resmin en boy oranını koruması söylenir.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit değeri cover olan bir resim, tarayıcıya resmin en boy oranını korumasını ve gerekirse resmi kırpmasını söyler.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Resim kırpma işleminin konumunu object-position özelliğini kullanarak değiştirebilirsiniz. Bu işlem, kırpma işleminin odağını ayarlar. Böylece resmin en önemli kısmının görünür kalmasını sağlayabilirsiniz.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Resimlerinizi yayınlama

Bu CSS kuralları, tarayıcıya resimlerin nasıl oluşturulmasını istediğinizi bildirir. Tarayıcının bu resimleri nasıl işleyeceğiyle ilgili olarak HTML'nizde ipuçları da verebilirsiniz.

Boyutlandırma ipuçları

Resminizin boyutlarını biliyorsanız her zaman width ve height özelliklerini ekleyin. Resim, max-inline-size kuralınız nedeniyle farklı bir boyutta oluşturulsa bile tarayıcı, genişlik-yükseklik oranını bilir ve doğru miktarda alan ayırabilir. Bu sayede, resim yüklendiğinde diğer içeriklerinizin yer değiştirmesi önlenir.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Yüklemeyle ilgili ipuçları

Tarayıcıya, resmin yüklenmesini görünüm alanına girene veya görünüm alanına yaklaşana kadar erteleyip ertelemeyeceğini bildirmek için loading özelliğini kullanın. Katlanma çizgisinin altındaki resimler için lazy değerini kullanın. Tarayıcı, kullanıcı yeterince aşağı kaydırıp resim görünmek üzere olana kadar geç yüklenen resimleri yüklemez. Kullanıcı hiç kaydırmazsa resim yüklenmez.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Sayfanın üst kısmında yer alan bir banner resminde loading kullanmayın. Siteniz loading="lazy" özelliğini otomatik olarak uyguluyorsa resimlerin geç yüklenmesini önlemek için genellikle loading özelliğini eager varsayılan değerine ayarlayabilirsiniz:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Getirme Önceliği

LCP resmi gibi önemli resimler için fetchpriority özelliğini high olarak ayarlayarak Fetch Priority ile yüklemeye daha fazla öncelik verebilirsiniz:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Bu, tarayıcıya düzenini tamamlayıp resimleri normal şekilde getirmesini beklemek yerine resmi hemen ve yüksek öncelikli olarak getirmesini söyler.

Ancak tarayıcıdan bir kaynağın (ör. resim) indirilmesine öncelik vermesini istediğinizde tarayıcı, başka bir kaynağın (ör. komut dosyası veya yazı tipi dosyası) önceliğini düşürmek zorundadır. fetchpriority="high" değerini yalnızca gerçekten önemliyse bir resme ayarlayın.

Önceden yüklemeyle ilgili ipuçları

Mümkün olduğunda tüm resimleri ilk HTML dosyasına ekleyerek önceden yüklemeyi önlemek en iyisidir. Ancak JavaScript veya CSS arka plan resmi ile eklenen resimler gibi bazı resimler kullanılamayabilir.

Tarayıcının bu önemli resimleri önceden getirmesini sağlamak için önceden yükleme özelliğini kullanabilirsiniz. Gerçekten önemli resimler için bu önceden yükleme işlemini fetchpriority özelliğiyle birleştirebilirsiniz:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Tarayıcının önceliklendirme sezgisel yöntemlerini çok sık geçersiz kılmamak için bu özellikleri yine dikkatli bir şekilde kullanın. Bunları aşırı kullanmak performansın düşmesine neden olabilir.

Bazı tarayıcılar, imagesrcset ve imagesizes özelliklerini kullanarak srcset'e göre duyarlı resimlerin önceden yüklenmesini destekler. Örneğin:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

href geri dönüşünü hariç tutarak srcset desteği olmayan tarayıcıların doğru resmi önceden yüklemesini sağlayabilirsiniz.

Belirli biçimlerin tarayıcı desteğine bağlı olarak farklı biçimlerdeki resimleri önceden yükleyemezsiniz. Bunu yapmaya çalışmak, kullanıcıların verilerini boşa harcayan ek indirmelere neden olabilir.

srcset ile duyarlı resimler

Bu max-inline-size: 100% bildirimi sayesinde resimleriniz kapsayıcılarının dışına çıkamaz. Ancak küçük ekranı ve düşük bant genişliğine sahip bir ağı olan kullanıcıların, daha büyük ekranlı kullanıcılarla aynı boyuttaki resimleri indirmesi veri israfına yol açar.

Bu sorunu düzeltmek için aynı resmin farklı boyutlardaki birden fazla sürümünü ekleyin ve bu boyutların var olduğunu ve ne zaman kullanılacağını tarayıcıya bildirmek için srcset özelliğini kullanın.

Genişlik tanımlayıcısı

Virgülle ayrılmış liste kullanarak srcset tanımlayabilirsiniz. Her değer, bir resmin URL'si, ardından bir boşluk ve ardından resimle ilgili bazı meta verilerdir. Bu meta verilere açıklama adı verilir.

Bu örnekte, meta veriler w birimi kullanılarak her resmin genişliğini tanımlamaktadır. Bir w, bir pikselin genişliğidir.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset özelliği, src özelliğinin yerini almak yerine onu tamamlar. Geçerli bir src özelliğinizin olması gerekir ancak tarayıcı, değerini srcset içinde listelenen seçeneklerden biriyle değiştirebilir. Bant genişliğinden tasarruf etmek için tarayıcı yalnızca gerekirse daha büyük resmi indirir.

Boyutlar

Genişlik tanımlayıcısını kullanıyorsanız tarayıcıya daha fazla bilgi vermek için sizes özelliğini de kullanmanız gerekir. Bu, tarayıcıya farklı koşullarda resmin hangi boyutta gösterilmesini beklediğinizi bildirir. Bu koşullar bir medya sorgusunda belirtilir.

sizes özelliği, virgülle ayrılmış bir medya sorguları ve resim genişlikleri listesi alır.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Bu örnekte, tarayıcıya genişliği 66em olan bir görünüm alanında resmin, ekranın üçte birinden daha geniş olmayacak şekilde gösterilmesi gerektiğini söylüyorsunuz (örneğin, üç sütunlu bir düzende).

Görüntü alanı genişliği 44em ile 66em arasında olduğunda resmi ekran genişliğinin yarısı kadar genişlikte gösterin (iki sütunlu düzende olduğu gibi).

44em değerinden daha dar olan her şey için resmi ekranın tam genişliğinde gösterin.

Bu nedenle, en büyük resim en geniş ekran için kullanılmayabilir. Çok sütunlu düzeni görüntüleyebilen geniş bir tarayıcı penceresinde, tek sütunlu düzende kullanılan ve daha dar bir ekranda tek sütunlu düzene sığan resimden daha küçük olabilecek bir resim kullanılır.

Piksel yoğunluğu tanımlayıcısı

Ayrıca, yüksek yoğunluklu ekranlarda gösterilecek resimlerin alternatif bir sürümünü sağlamak için tanımlayıcıları kullanabilirsiniz. Böylece, resimler sağladıkları daha yüksek çözünürlüklerde net görünmeye devam eder.

Yoğunluk tanımlayıcısı, resmin piksel yoğunluğunu src özelliğindeki resimle ilişkili olarak tanımlamak için kullanılır. Yoğunluk tanımlayıcısı, x harfiyle takip edilen bir sayıdır (ör. 1x veya 2x).

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

small-image.png 300x200 piksel boyutunda ve medium-image.png 600x400 piksel boyutunda ise srcset listesinde medium-image.png öğesinden sonra 2x öğesi yer alabilir.

Tam sayı kullanmanız gerekmez. Resmin başka bir sürümü 450x300 piksel boyutundaysa bunu 1.5x ile açıklayabilirsiniz.

Sunum amaçlı resimler

HTML'deki görseller içeriktir. Bu nedenle, ekran okuyucular ve arama motorları için resmin açıklamasını içeren alt özelliğini eklemeniz gerekir.

Anlamlı içerik içermeyen, yalnızca dekoratif amaçlı bir resim yerleştirirseniz boş bir alt özelliği kullanabilirsiniz.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Boş olsa bile alt özelliğini her zaman eklemeniz gerekir. Boş bir alt özelliği, ekran okuyucuya resmin sunum amaçlı olduğunu bildirir. Eksik bir alt özelliği bu bilgiyi sağlamaz.

İdeal olarak, sunum amaçlı veya dekoratif resimler HTML yerine CSS ile eklenir. HTML, yapı için kullanılır. CSS, sunum içindir.

Arka plan resimleri

Sunum amaçlı resimleri yüklemek için CSS'deki background-image özelliğini kullanın.

element {
  background-image: url(flourish.png);
}

background-image için image-set işlevini kullanarak birden fazla resim adayı belirtebilirsiniz.

CSS'deki image-set işlevi, HTML'deki srcset özelliğine benzer şekilde çalışır. Her biri için piksel yoğunluğu tanımlayıcısı içeren bir resim listesi sağlayın.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Tarayıcı, cihazın piksel yoğunluğu için en uygun resmi seçer.

Sitenize resim eklerken dikkate almanız gereken birçok faktör vardır. Bunlardan bazıları:

• Her resim için doğru alanı ayırma
• Kaç boyuta ihtiyacınız olduğunu belirleme
• Resmin içerik mi yoksa dekoratif mi olduğuna karar verme

Resimlerinizi doğru şekilde ayarlamak için zaman ayırmanız önemlidir. Kötü görüntü stratejileri, kullanıcılarınızı rahatsız edip hayal kırıklığına uğratabilir. İyi bir resim stratejisi, kullanıcının cihazından veya ağ bağlantısından bağımsız olarak sitenizin hızlı ve net görünmesini sağlar.

Resimleriniz üzerinde daha fazla kontrol sahibi olmanızı sağlayacak bir HTML öğesi daha vardır: picture öğesi.

Bilgilerinizi sınayın

Resimlerle ilgili bilginizi test edin.