Uyumlu görseller

Web'deki metin, ekranın kenarından otomatik olarak kaydırılır. taşma. Öte yandan, görsellerin doğal bir boyutu vardır. Resim ekrandan genişse resim taşar ve kullanıcının sayfayı yatay olarak görüntüleyebilirsiniz.

Neyse ki CSS, bunun olmasını önleyecek araçlar sağlar.

Resimlerinizi kısıtlama

Stil sayfanızda max-inline-size değerini kullanabilirsiniz. görsellerin hiçbir zaman boyutlarından daha geniş bir boyutta oluşturulamayacağını belirtmek öğesidir.

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

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

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

Bu kural geçerli olduğunda, tarayıcılar, görselleri web sitesine sığacak şekilde otomatik olarak ölçeklendirir. tıklayın.

block-size ekleme auto değeri, tarayıcının resimlerinizi koruduğu anlamına gelir. en-boy oranına yeniden boyutlandırır.

Bazen bir resmin boyutları bir içerik yönetim sistemi (İYS) tarafından ayarlanır veya başka bir içerik gönderme sistemi var. Tasarımınız farklı bir en boy oranı gerektiriyorsa İYS'nin varsayılan ayarından, aspect-ratio özelliğini kullanın:

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

Maalesef bu durumda çoğu zaman tarayıcının resmi sıkıştırması veya genişletmesi gerekir istenen alana sığdırır.

Esneme veya esneme hareketlerini önlemek için object-fit mülkündeki her mülk.

object-fit değeri olan contain, tarayıcıya resmin en-boy oranını girin. Gerekirse resmin etrafında boş alan bırakın.

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

object-fit değeri olan cover, tarayıcıya resmin en boy oranı sağlanmalıdır (gerekirse resim kırpılır).

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

ziyaret edin.

Kırpılan resmin konumunu object-position Bu işlem, kırpmanın odağını ayarlar. Böylece, fotoğraflarınızın resmin önemli bir bölümü görünmeye devam ediyor.

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. Şunları yapabilirsiniz: ayrıca, HTML'nizde tarayıcının bu resimleri nasıl işlemesi gerektiğine ilişkin ipuçları sağlar.

Boyutlandırma ipuçları

Resminizin boyutlarını biliyorsanız width ve height değerlerini her zaman ekleyin özellikleri hakkında daha fazla bilgi edinin. Bağlantınız nedeniyle resim farklı bir boyutta oluşturulsa bile, max-inline-size kuralı uygulanırsa tarayıcı genişlik-yükseklik oranını bilir ve gereken miktarda alan ayırabiliriz. Bu işlem, diğer içeriklerinizin etrafta zıplayıp zıplayarak.

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

Yüklemeyle ilgili ipuçları

Tarayıcıya,loading görüntü alanına girene kadar veya yakın bir yere gelene kadar resim üzerinde kalır. Ekranın alt kısmındaki resimler için bir değer kullanın / lazy. Kullanıcı çok fazla kaydırana kadar tarayıcı geç resimleri yüklemez resmin görünmesi için yeterince aşağı yerleştirin. Kullanıcı hiçbir zaman resim hiçbir zaman yüklenmez.

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

Ekranın üst kısmında hero resim için loading kullanmayın. Siteniz otomatik olarak loading="lazy" özelliğini uyguladığından, genellikle loading öğesini resimlerin geç yüklenmesini önlemek için varsayılan eager değeri:

<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 Getirme Önceliği'ni kullanarak yüklemeyi önceliklendirmek için fetchpriority özelliğini high olarak ayarlamak:

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

Bu, tarayıcının resmi hemen ve yüksek öncelikte getirmesini söyler tamamlamak yerine, tarayıcının düzeni tamamlamasını ve sisteme görüntüler.

Ancak tarayıcıdan bir kaynağın indirilmesine öncelik vermesini istediğinizde tarayıcıda komut dosyası veya tarayıcı gibi başka bir kaynağın önceliğini yazı tipi dosyası ekleyin. fetchpriority="high" özelliğini yalnızca gerçekten çok önemliyse resimlere yerleştirin.

Önceden yüklemeyle ilgili ipuçları

Mümkün olduğunda önceden yüklemeden kaçınmak için en iyi yöntem, tüm resimleri ilk HTML dosyası olabilir. Ancak resim gibi bazı görseller kullanılamayabilir. JavaScript veya bir CSS arka plan resmi tarafından eklenen resimler.

Tarayıcının bu önemli resimleri uygulamadan önce getirmesini sağlamak için gerekir. Gerçekten önemli resimler için bu önceden yükleme ile fetchpriority özelliği:

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

Yine de tarayıcının tespit etme yöntemlerini çok sık kullanıyor. Aşırı kullanılması performansa neden olabilir dönüşüme yol açabilir.

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

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

href yedeğini hariç tutarak srcset içermeyen tarayıcılarda destek ekibi, doğru resmin önceden yüklenmesini sağlayabilir.

Şu tarayıcı desteğine bağlı olarak farklı biçimlerdeki resimleri önceden yükleyemezsiniz: belirli biçimlerdir. Bunu yapmaya çalışmak, kullanıcıların boşa çıkmasına neden olan ekstra indirmelerle sonuçlanabilir dışı verilerdir.

Resim kodu çözme

Ayrıca img öğelerine ekleyebileceğiniz bir decoding özelliği de vardır. Örneğin, resmin eşzamansız olarak çözülebildiğini ve dolayısıyla diğer içerikleri işleme alabilir.

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

Resmin kendisi en önemli parçaysa sync değerini kullanabilirsiniz daha fazla bilgi edineceksiniz.

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

decoding özelliği, resmin kodu çözme hızını değiştirmez. Etkiler yalnızca tarayıcının bu resim kodu çözme işleminin tamamlanmasını bekleyip beklemeye devam oluşturarak başlayın.

Çoğu durumda bu, çok fazla etki göstermez ancak bazen tarayıcınızın, resminizi veya diğer içerikleri biraz daha hızlı görüntülemesini sağlar. Örneğin, oluşturulması zaman alan çok sayıda öğe içeren ve boyutu büyük olan, kodu çözmesi uzun süren resimler. Önemli resimlere sync değeri eklemek tarayıcının resmi beklemesine ve her ikisini de aynı anda oluşturmasına izin verir. Alternatif olarak: Tarayıcının, içeriği daha hızlı ve daha az trafik gerektirmeden görüntülemesini sağlamak için async resmin kodunu çözmesi bekleniyor.

Ancak daha iyi seçenek genellikle aşırı DOM boyutlarından kaçının ve kod çözme süresini kısaltmak için decoding yerine duyarlı resimler kullanın.

srcset ile duyarlı resimler

Bu max-inline-size: 100% beyanı sayesinde resimleriniz seçilemiyor sağlayabilir. Ancak kullanıcının ekranı küçükse ve bant genişliği düşükse ağ, bu da büyük ekranlı kullanıcılarla aynı boyutta görseller indirmelerini sağlar veri israfına neden olur.

Bu sorunu düzeltmek için aynı resmin farklı boyutlarda birden çok sürümünü ekleyin. ve srcset özelliğini kullanın.

Genişlik tanımlayıcısı

Virgülle ayrılmış değer listesi kullanarak bir srcset tanımlayabilirsiniz. Her bir değer Bir resmin URL'sini, ardından bir boşluk ve ardından videoyla ilgili bazı meta verileri açıklayıcı adı verilen bir resim içerir.

Bu örnekte, meta veriler her resmin genişliğini w kullanarak açıklar. girin. 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ğini değiştirmek yerine tamamlar. Geçerli bir src özelliğinizin olması gerekir ancak tarayıcı, bu özelliği değiştirebilir değerini srcset içinde listelenen seçeneklerden biriyle değiştirin. Bant genişliğinden tasarruf etmek için tarayıcı yalnızca gerekliyse büyük resmi indirir.

Boyutlar

Genişlik tanımlayıcısını kullanıyorsanız, sizes özelliğini kullanın. Bu, tarayıcıya hangi boyutun resmin farklı koşullarda görüntülenmesini beklersiniz. Bu koşulları bir ortam sorgusunda belirtilir.

sizes özelliği, medya sorgularının ve resmin virgülle ayrılmış bir listesini alır emin olun.

<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ğinin üzerinde olan bir görüntü alanında 66em, resmi ekranın üçte birinden daha geniş olmayacak şekilde görüntülemelidir (örneğin, üç sütunlu bir düzen içinde).

44em ile 66em arasındaki görüntü alanı genişlikleri için, resmi ekranın ekranın genişliğine (iki sütunlu düzende olduğu gibi) izin verir.

44em değerinden daha dar öğelerde resmi tıklayın.

Bu, en büyük resmin her zaman en geniş boyut için kullanılmayacağı anlamına gelir tıklayın. Çok sütunlu düzeni görüntüleyebilen geniş bir tarayıcı penceresinde bir sütuna sığan bir resim; metin sayfası için kullanılan bir resimden daha daha dar bir ekranda tek sütunlu düzen.

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

Ayrıca, açıklayıcı reklamlar göstermek için görsellerin alternatif bir sürümünü görüntülerin yüksek oranda keskin görünmesi için yüksek yoğunluklu ekranlarda gösterilir. bir çözüm sunabilir.

Yoğunluk tanımlayıcısını kullanarak resmin piksel yoğunluğunu src özelliğindeki resimle ilişkilidir. Yoğunluk tanımlayıcısı bir sayıdır ve ardından x harfi eklenir (ö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 boyutunun 300 x 200 piksel olması ve medium-image.png değerinin 600 x 400 piksel, ardından medium-image.png,2x srcset listesi.

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

Sunu resimleri

HTML'deki resimler içeriktir. Bu nedenle alt özelliğini eklediniz. Ekran okuyucular ve arama motorları için resmin bir açıklamasıyla birlikte.

Herhangi bir anlamlı tasarıma sahip olmadan dekoratif bir resim yerleştirirseniz içerik için boş bir alt özelliği kullanabilirsiniz.

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

alt özelliğini, boş olsa bile her zaman eklemeniz gerekir. Boş bir alt özelliği, ekran okuyucuya resmin sunumdur. Eksik bir alt özelliği, bu bilgiyi sağlamaz.

İdeal olan, sunum amaçlı veya dekoratif resimlerin yerine CSS'ye eklenmesi HTML'ye dokunun. HTML yapı içindir. CSS sunum içindir.

Arka plan resimleri

Sunu resimlerini yüklemek için CSS'de background-image özelliğini kullanın.

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

Şunu kullanarak birden fazla resim önerisi belirtebilirsiniz: image-set fonksiyonudur.background-image

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ıyla birlikte 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. şunları içerir:

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

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

Araç setinizde kullanabileceğiniz bir HTML öğesi daha var. resimler: picture öğesi.

Öğrendiklerinizi sınayın

Görüntülerle ilgili bilginizi test edin.