IMG ve CSS arka plan resmi ne zaman kullanılır?

Hangi durumlarda IMGbir görüntüyü görüntülemek için bir CSS yerine HTML etiketi kullanmak daha uygun background-imageolur?

Faktörler erişilebilirlik, tarayıcı desteği, dinamik içerik veya herhangi bir teknik sınırlama veya kullanılabilirlik ilkesini içerebilir.

IMG'nin doğru kullanımı

1. Kullanım IMGinsanların sahip niyetinde olmadığını sayfanızı yazdırmak ve görüntü varsayılan olarak dahil olmak istiyorum. - JayTee
2. Görüntü, uyarı simgesi gibi önemli bir anlam anlamına sahip olduğunda IMG( altmetinle birlikte) kullanın . Bu, görüntünün anlamının, ekran okuyucular da dahil olmak üzere tüm kullanıcı aracılarında iletilmesini sağlar.

IMG'nin Pragmatik Kullanımı

1. IMGResim bir logo veya diyagram veya kişi gibi içeriğin bir parçasıysa artı alt özelliğini kullanın (stok fotoğraflı kişiler değil gerçek kişi). - sanchothefat
2. IMGGörüntüyü metin boyutuyla orantılı olarak oluşturmak için tarayıcı ölçeklendirmesine güveniyorsanız kullanın .
3. IE6'da birden çok kaplama görüntüsüIMG için kullanın .
4. Arka plan resmini pencerenin tamamını kaplayacak şekilde genişletmek için aIMG ile kullanın . z-index
   Bu, artık CSS3 arka plan boyutu için geçerli değildir; aşağıdaki # 6 ya bakınız.
5. imgBunun yerine kullanmak background-image, animasyonların arka plandaki performansını önemli ölçüde artırabilir.

CSS arka plan resmi ne zaman kullanılır?

1. Görüntü içeriğin bir parçası değilse CSS arka plan görüntülerini kullanın . - sanchothefat
2. Metnin görüntüsünü değiştirirken CSS arka plan görüntülerini kullanın örn. paragraflar / başlıkları. - sanchothefat
3. Kullanım background-imageinsanların sahip niyetinde olmadığını sayfanızı yazdırmak ve görüntü varsayılan olarak dahil edilecek istemiyoruz. - JayTee
4. CSS spritelarındabackground-image olduğu gibi indirme sürelerini iyileştirmeniz gerekiyorsa kullanın .
5. Görüntünün background-imageyalnızca bir bölümünün, CSS sprite'larında olduğu gibi görünür olmasını istiyorsanız kullanın .
6. Arka plan görüntüsünü tüm penceresini dolduracak şekilde uzatmak için background-imageile kullanın background-size:cover.

Benim için siyah beyaz bir karar. Resim, logo veya diyagram veya kişi (gerçek kişi, stok fotoğrafçıları değil) gibi içeriğin bir parçasıysa, <img />etiketi artı alt niteliğini kullanın. Diğer her şey için CSS arka plan resimleri var.

CSS arka plan görüntülerini kullanmak için diğer bir zaman, metnin görüntüsünü değiştirirken kullanılır. paragraflar / başlıkları.

Henüz kimsenin bundan bahsetmediğine şaşırdım: CSS geçişleri .

Adlı kullanıcının divarka plan resmini yerel olarak geçirebilirsiniz :

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Bu, herhangi bir JavaScript veya jQuery animasyonunu bir <img/>'s solmaya kaydeder src.

MDN'deki geçişler hakkında daha fazla bilgi .

Yukarıdaki cevaplar sadece Tasarım yönünü dikkate alır. SEO yönleriyle listeliyorum.

Ne zaman kullanılır? <img />

1. Resminizin arama motoru tarafından dizine eklenmesi gerektiğinde
2. Tasarımla değil içerikle ilişkisi varsa.
3. Resminiz çok küçük değilse (ikonik resimler değil).
4. Ekleyebileceğiniz altve titleilişkilendirebileceğiniz resimler.
5. Baskı ortamı css kullanarak yazdırmak istediğiniz bir web sayfasındaki görüntüler

CSS ne zaman kullanılır? background-image

1. Tasarım İçin Kullanılan Görüntüler.
2. İçerikle İlişkisi Yok.
3. CSS3 ile oynayabileceğimiz Küçük Görüntüler.
4. Yinelenen Resimler (Blog yazarı simgesinde, her makale vb. İçin tarih simgesi tekrarlanır.).

Onları bu nedenlerle kullanacağım gibi. Bunlar Görsel Arama Motoru Optimizasyonu iyi uygulamalardır.

Tarayıcılar her zaman varsayılan olarak arka plan resimlerini basmak için ayarlanmamıştır; insanların sayfanızı yazdırmasını istiyorsanız :)

CSS'nizi harici bir dosyaya sahipseniz, sitede sıkça kullanılan bir resmi (başlık resmi gibi) arka plan resmi olarak görüntülemek genellikle uygundur, çünkü o zaman görüntüyü daha sonra değiştirme esnekliğiniz vardır.

Örneğin, aşağıdaki HTML’ye sahip olduğunuzu varsayalım:

<div id="headerImage"></div>

... ve CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Birkaç gün sonra görüntünün yerini değiştirirsiniz. Tek yapmanız gereken CSS'yi güncellemektir:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Aksi takdirde, her HTML dosyasında srcuygun <img>etiketin özelliğini güncellemeniz gerekir ( işlemi otomatikleştirmek için sunucu tarafı komut dosyası dili veya CMS kullanmadığınız varsayılarak ).

Ayrıca, kullanıcının görüntüyü kaydetmesini istemiyorsanız arka plan görüntüleri de yararlıdır (ancak bunu yapmam gerekmedi).

Sanchothefat'ın yanıtıyla aynı , ancak farklı bir açıdan. Her zaman kendime soruyorum: stil sayfalarını web sitesinden tamamen kaldırırsam, kalan öğeler sadece içeriğe mi ait? Eğer öyleyse, işimi iyi yaptım.

Bazı cevaplar buradaki senaryoyu aşırı derecede karmaşıklaştırmaktadır. Bu çok basit bir durum.

Her görüntü yerleştirmek istediğinizde bu soruya cevap vermeniz yeterlidir:

Bu, içeriğin bir parçası mı yoksa tasarımın bir parçası mı?

Buna cevap veremiyorsanız, muhtemelen ne yaptığınızı veya ne yapmak istediğinizi bilmiyorsunuzdur!

Ayrıca, "yazıcı dostu" olmak isteyip istemediğiniz için iki tekniğin yanında düşünmeyin. Ayrıca içeriği SEO açısından CSS ile gizlemeyin. İçeriğinizi CSS dosyalarında yönettiğinizi fark ederseniz, kendinizi bacağınıza vurmuş olursunuz. Bu, neyin içerik olup olmadığı konusunda önemsiz bir karardır. Diğer tüm hususlar göz ardı edilmelidir.

Başka iki argüman daha ekleyeceğim:

• Görüntüyü yeniden boyutlandırmanız gerekiyorsa bir img etiketi iyidir . Örneğin, orijinal görüntü 100 piksel x 100 piksel ise ve 80 piksel x 80 piksel olmasını istiyorsanız, img etiketinin CSS genişliğini ve yüksekliğini ayarlayabilirsiniz. Bunu arka plan resmi kullanarak yapmanın iyi bir yolunu bilmiyorum. DÜZENLE: Bu artık CSS3 özniteliği kullanılarak bir arka plan görüntüsü ile de yapılabilir .background-size

• Sprite'lar arasında dinamik olarak geçiş yapmanız gerektiğinde arka plan görüntüsünü kullanmak iyidir . Örneğin bir düğme resminiz varsa ve imleç öğenin üzerine geldiğinde ayrı bir resim görüntülenmesini istiyorsanız, hem normal hem de hover sprite'larını içeren bir arka plan resmi kullanabilir ve arka plan konumunu dinamik olarak değiştirebilirsiniz.

<IMG> etiketini kullanmanın bir yararı da SEO ile ilgilidir - yani, resim etiketinin ALT özniteliğindeki resim hakkında ek bilgi sağlayabilirken, resmi CSS aracılığıyla belirlerken ve bu şekilde yalnızca resim dosyası adı arama motorları tarafından dizine eklenebilir. ALT özelliği kesinlikle CIM yaklaşımı üzerinde <IMG> etiketi SEO avantajı sağlar. Bu yüzden bana göre <IMG> etiketini kullanarak görsel arama sonuçlarında (ör. Google Görsel Arama) iyi sıralamak istediğiniz görüntüleri belirtmek daha iyidir.

Ön plan = img.

Arka plan = CSS arka planı.

Arka plan görüntülerini yalnızca gerektiğinde, örneğin döşenen görüntünün bulunduğu kaplar kullanın.

Kullanarak büyük PROS biri GÖRÜNTÜLER o olmasıdır SEO için daha iyi .

Bir arka plan resmi kullanarak, boyutları kesinlikle belirtmeniz gerekir. Onları önceden bilmiyorsanız veya belirleyemiyorsanız, bu önemli bir sorun olabilir.

Büyük bir sorun <img />bindirmelerdir. Resmimde ( box-shadow:inset 0 0 5px rgb(0,0,0,.5)) bir CSS iç gölge olmasını istersem ne olur ? Bu durumda, <img />alt öğelere sahip olamadığından, konumlandırma kullanmanız ve işe yaramaz işaretlemeye eşit olan boş öğeler eklemeniz gerekir.

Sonuç olarak, oldukça durumsaldır.

background-imageKullanılması gereken diğer birkaç senaryo :

• Farenin üzerine geldiğinde görüntünün değişmesini istediğinizde.
• Görüntüye yuvarlatılmış köşeler eklemek istediğinizde. Eğer kullanırsanız img, görüntü yuvarlatılmış köşeler dışarı sızar.

Birden çok kaplama veya tasarım sürümü olması durumunda CSS arka plan resmini kullanın. Javascript, bir öğenin sınıfını dinamik olarak değiştirmek için kullanılabilir, bu da onu farklı bir görüntü oluşturmaya zorlar. Bir IMG etiketi ile daha zor olabilir.

Teknik bir değerlendirme: görüntü dinamik olarak oluşturulacak mı? <img>HTML'de etiketi oluşturmak, bir CSS özelliğini dinamik olarak düzenlemeye çalışmaktan çok daha kolay olma eğilimindedir .

Görüntünün boyutu ne olacak? İmg etiketini kullanırsam tarayıcı görüntüyü ölçeklendirir. Css arka planını kullanırsam, tarayıcı sadece daha büyük görüntüden bir yığın keser.

CSS TranslateX / Y kullanarak görüntüleri canlandırma ile ilgili olarak (html'yi canlandırmanın doğru yolu) - Canlandırılan CSS arka plan görüntülerinin Chrome Zaman Çizelgesi kaydını yaparsanız, animasyonlu IMG etiketlerine karşı boya sürelerinin CSS için oldukça kısa olduğunu göreceksiniz. background-görüntüler.

Başka bir sebep daha var! Duyarlı bir tasarımınız varsa ve aygıtlar için düşük, orta ve yüksek çözünürlüklü görüntülerin kullanımını medya sorgularıyla bölmek istiyorsanız, arka planları da kullanmalısınız.

Ayrıca, bu görüntüler açıkça içerik olarak kabul edilmesine rağmen, tutarsız resim boyutlarına sahip bir galeri bölümüm var, arka plan görüntülerini kullanıyorum ve bunları belirli bir boyutta div'lerde ortalıyorum. Bu, facebook'un albümlerinde yaptıklarına benzer.

img bir nedenle html etiketidir, bu nedenle kullanılmalıdır. Referans vermek veya bir şeyleri açıklamak için insanlar örneğin: makalelerde.

Ayrıca görüntünün bir anlamı varsa veya tıklanabilir olması gerekiyorsa img , css arka planından daha iyidir . Diğer tüm durumlar için bence bir css arka planı kullanılabilir.

Yine de, tartışılması gereken bir konudur.

Web Öğrenci Paris, Fransa

Eklemek için sadece küçük bir tane varsa, kullanıcıların 'sağ tıklama' ve 'kaydetme resmi' / 'kaydetme resmi' yapabilmesini istiyorsanız img etiketini kullanmalısınız, böylece resmi bir kaynak olarak sağlamayı düşünüyorsanız diğerleri.

Arka plan resmini kullanmak (çoğu tarayıcıda bildiğim kadarıyla) görüntüyü doğrudan kaydetme seçeneğini devre dışı bırakır.

Küçük bir giriş, duyarlı görüntülerle ilgili sorun yaşadım, küçük resimlerde bile iphone'daki görüntüyü bir dakikaya kadar yavaşlatır:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Ancak arka plan resimlerini kullanmaya geçerken sorun ortadan kalktı, bu sadece yeni tarayıcıları hedefliyorsa geçerlidir.

IMGÇünkü başta yüklemek srcdurumunda ise html dosyasının kendisinde olduğunu background-imagestil sayfası sonra görüntü yükleri web sayfasının yüklenmesini geciktirerek, yüklenen böylece kaynağında stil bahsedilmiştir.

HTML içerik ve CSS tasarım içindir. Görüntü gerekli mi ve ekran okuyucuları tarafından mı alınması gerekiyor? Yanıt evet ise, resmi HTML'ye yerleştirin. Yalnızca şekillendirme amaçlıysa, görüntüyü enjekte etmek için CSS'deki background-image özelliğini kullanabilirsiniz. Tıpkı burada bir çok insanın daha önce bahsettiği gibi, isterseniz görüntüde sözde bir öğe kullanabilirsiniz.

Ayrıca, çoğu arama motoru örümceğinin CSS arka plan görüntülerini endekslemediğini unutmayın, bu nedenle arka plan görüntüleri yok sayılır ve arama motorlarından herhangi bir trafik alamazsınız (kısaca SEO faydası olmaz).

Etiketlerle tanımlanan tüm resimlerin dizine eklenmesi (manuel olarak hariç tutulmadığı sürece) ve başlık / alt öznitelikleri ve dosya adları düzgün bir şekilde optimize edilmişse (bazı anahtar kelimeler wrt) arama motorlarından trafik getirebileceği yerdir.

Görüntülerin akıcı olmasını ve farklı ekran boyutlarına ölçeklendirilmesini istiyorsanız IMG etiketlerini kullanabilirsiniz. Benim için bu görüntüler çoğunlukla içeriğin bir parçası. İçeriğin bir parçası olmayan çoğu öğe için, simgeleri gerçekten canlandırmak istemediğimde indirme boyutunu minimum tutmak için CSS sprite'ları kullanıyorum.

Çoğu tarayıcıda desteklenen% 100 gerilebilir hale getirmek istediğimde arka plan görüntüsü yerine görüntü kullanıyorum.

Yalnızca sayfadaki özel içerik için veya yalnızca bir sayfa için resim eklemek istiyorsanız, IMG etiketini kullanmalısınız ve birden fazla sayfaya resim koymak istiyorsanız, CSS Arka Plan Resmi'ni kullanmalısınız.

Başka bir arka plan görüntüsü PRO: <ul>/ <ol>listeleri için arka plan resimleri .

Genel tasarımın bir parçasıysa ve birden çok sayfada tekrarlanıyorsa arka plan görüntülerini kullanın. Tercihen optimizasyon için arka plan sprite formunda.

Makalelerin, kişilerin ve google görüntülerine eklenmeyi hak eden önemli görseller gibi, genel tasarımın bir parçası olmayan ve büyük olasılıkla bir kez yerleştirilmiş tüm resimler için etiketleri kullanın .

** Bir <img>etikete eklediğim tek tekrarlanan resim site / şirket logosudur. İnsanlar ana sayfaya gitmek için tıklamaya eğilimli olduklarından, onu bir <a>etiketle sararsınız.