Quando usar o background-image vs. CSS IMG?

https://stackoverflow.com/questions/492809

20-08-2019
|

Pergunta

Em que situações é mais apropriado usar um tag IMG HTML para exibir uma imagem, em oposição a um background-image CSS, e vice-versa?

Os fatores podem incluir a acessibilidade, suporte ao navegador, conteúdo dinâmico, ou qualquer tipo de limites técnicos ou princípios de usabilidade.

Solução

usos apropriados de IMG

Use IMG se você pretende ter pessoas imprimir seu página e você deseja que a imagem a ser incluído por padrão. - Jaytee
Use IMG (com texto alt) quando a imagem tem um significado semântico importantes, tais como um ícone de aviso . Isso garante que o significado da imagem pode ser comunicados em todos os user-agents, incluindo leitores de tela.

usos pragmáticos da IMG

Use IMG mais alt atributo se a imagem é do conteúdo tais como um logotipo ou diagrama ou pessoa (pessoa real, não de imagens de pessoas). - sanchothefat
Use IMG se você confiar em escala navegador para renderizar uma imagem em proporção ao tamanho do texto.
Use IMG para várias imagens de sobreposição no IE6 .
~~Use IMG com um z-index a fim esticar um imagem de fundo para preencher toda a sua janela.~~
Note, isso não é mais verdade com CSS3 background-size; veja # 6 abaixo.
Usando img vez de background-image pode melhorar drasticamente o desempenho de animações sobre um fundo.

Quando usar CSS background-image

Usar imagens de fundo CSS se o imagem não é parte do conteúdo . - sanchothefat
Usar imagens de fundo CSS quando fazendo de texto por exemplo. parágrafos / cabeçalhos. - sanchothefat
Use background-image se você pretende ter pessoas imprimir seu página e você não quer que a imagem a ser incluído por padrão. - Jaytee
Use background-image se você precisa para melhorar o tempo de download, como com CSS sprites .
Use background-image se você precisa para apenas uma parte da imagem a ser visível, como com CSS sprites.
Use background-image com background-size:cover a fim de esticar uma imagem de fundo para preencher toda a sua janela.

Outras dicas

É uma decisão em preto e branco para mim. Se a imagem é parte do conteúdo, como um logotipo ou diagrama ou pessoa (pessoa real, não de imagens de pessoas), em seguida, usar a tag <img /> mais atributo alt. Para tudo o resto há imagens de fundo CSS.

A outra vez de usar imagens de fundo CSS é quando se faz imagem de substituição de texto, por exemplo. parágrafos / cabeçalhos.

Estou surpreso que ninguém mencionou isso ainda:. CSS transições

Você pode nativamente transição de imagem de fundo de um div:

#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);
}

Isso evita qualquer tipo de JavaScript ou jQuery animação a desaparecer <img/> de um src.

Mais informações sobre as transições na MDN .

respostas acima considera apenas aspecto do projeto. Estou listando-lo em aspectos de SEO.

Quando usar <img />

Quando sua necessidade de Imagem para ser indexados pelo motor de pesquisa
Se ele tem relação com o conteúdo para não projetar.
Se a sua imagem não é muito pequenas (não imagens icônicas).
Imagens de onde você pode adicionar alt e title atributo.
As imagens de uma página da Web que você deseja imprimir usando css mídia impressa

Quando usar CSS background-image

Imagens Puramente usados ??para projetar.
Sem relação com o conteúdo.
imagens pequenas que podemos jogar com CSS3.
Repetindo imagens (no ícone autor do blog, ícone data será repetido para cada artigo etc.,).

Como eu vou usá-los com base nessas razões. Estas são boas práticas de Search Engine Optimization de Imagens.

Browsers não são sempre definido para imprimir imagens de fundo por padrão; Se você pretende ter pessoas imprimir sua página:)

Se você tem o seu CSS em um arquivo externo, então é frequentemente conveniente para exibir uma imagem que é usado com freqüência em todo o site (como uma imagem de cabeçalho) como imagem de fundo, porque então você tem a flexibilidade para mudar a imagem mais tarde .

Por exemplo, digamos que você tenha o seguinte HTML:

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

... e CSS:

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

Alguns dias mais tarde, você alterar a localização da imagem. Tudo que você tem a fazer é atualizar o CSS:

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

Caso contrário, você tem que atualizar o atributo src da tag <img> apropriado em cada arquivo HTML (supondo que você não está usando uma linguagem server-side scripting ou CMS para automatizar o processo).

Além disso imagens de fundo são úteis se você não quer que o usuário seja capaz de salvar a imagem (embora eu não tenha já precisou fazer isso).

Sobre o mesmo que resposta de sanchothefat , mas a partir de um aspecto diferente. Eu sempre me pergunto: se eu iria remover completamente as folhas de estilo do site, fazer os restantes elementos única pertencem ao conteúdo? Se assim for, eu fiz bem o meu trabalho.

Algumas respostas complicar o cenário aqui. Esta é uma situação absolutamente simples.

Apenas resposta a esta pergunta cada vez que você gostaria de colocar uma imagem:

É esta parte do conteúdo ou parte do projeto?

Se você não pode responder isso, você provavelmente não sabe o que está fazendo ou o que você quer fazer!

Além disso, não consideram ao lado dos dois técnica, só porque você deseja ser "impressão" ou não. Também não escondem o conteúdo de um ponto de vista do SEO com CSS. Se você encontrar-se o gerenciamento de seu conteúdo em arquivos CSS, você atirou-se na perna. Esta é apenas uma decisão trivial do que é o conteúdo ou não. Todos os outros aspectos devem ser ignorados.

Gostaria de acrescentar mais dois argumentos:

Um tag img é bom se você precisa redimensionamento a imagem. Por exemplo. se a imagem original é 100px por 100 px, e você quer que ele seja 80px por 80px, você pode definir a largura CSS e altura da tag img. ~~eu não sei de qualquer boa maneira de fazer isso imagem de fundo usando~~ EDIT:. Esta agora também pode ser feito com uma imagem de fundo, usando o background-size atributo CSS3.
Usando background-image é bom quando você precisa dinamicamente alternar entre sprites . Por exemplo. se você tiver uma imagem de botão, e você quer uma imagem separada exibido quando o cursor está pairando sobre o elemento, você pode usar uma imagem de fundo que contém ambos os sprites normais e pairar, e alterar dinamicamente o background-position.

Mais um benefício de usar a tag está relacionado com SEO - ou seja, você pode fornecer informações adicionais sobre a imagem no atributo ALT da tag de imagem, enquanto não há nenhuma maneira de fornecer tais informações ao especificar a imagem através de CSS e, nesse caso, apenas o nome do arquivo de imagem pode ser indexado pelos motores de busca. O atributo ALT definitivamente dá a vantagem SEO tag sobre a abordagem CSS. É por isso que de acordo comigo é melhor para especificar as imagens que você deseja classificar bem nos resultados da pesquisa de imagem (por exemplo, Google Image Search) usando a tag .

Primeiro Plano = img.

Fundo = fundo CSS.

Use imagens de fundo apenas quando necessário, por exemplo, recipientes com imagem que telhas.

Uma das principais PROS usando IMAGENS é que é melhor para SEO .

Usando uma imagem de fundo, você precisa absolutamente especificar as dimensões. Isso pode ser um problema significativo se você realmente não sei-los com antecedência ou não pode determiná-los.

Um grande problema com <img /> é sobreposições. E se eu quiser uma sombra interna CSS na minha imagem (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Neste caso, uma vez <img /> não pode ter elementos filho, você precisa usar posicionamento e adicionar elementos vazios que equivale a marcação inútil.

Em conclusão, é muito situacional.

Um par de outros cenários onde background-image deve ser utilizado:

Quando você quer que a imagem mudança quando o mouse é passado sobre ele.
~~Quando você quiser adicionar cantos arredondados para a imagem. Se você usar img, a imagem vaza dos cantos arredondados.~~

Use CSS background-image em um caso de várias peles ou versões de design. Javascript pode ser usado para alterar dinamicamente uma classe de um elemento, que irá forçá-lo a tornar uma imagem diferente. Com uma tag IMG, pode ser mais complicado.

Aqui está uma análise técnica: será que a imagem ser gerada dinamicamente? Ele tende a ser muito mais fácil para gerar a tag <img> em HTML do que tentar editar dinamicamente uma propriedade CSS.

E sobre o tamanho da imagem? Se eu usar a tag img, o browser dimensiona a imagem. Se eu usar o fundo css, o navegador simplesmente corta um pedaço da imagem maior.

No que diz respeito às imagens que animam usando CSS TranslateX Y / (A maneira apropriada para animar html) - Se você fizer uma gravação Chrome Timeline da CSS background-imagens sendo animado vs IMG tags sendo animado você vai ver os tempos de pintura são drasticamente mais curto para os CSS background-imagens.

Há uma outra razão! Se você tem um design responsivo e quer o uso de divisão de imagens de baixo, médio e alto-res para dispositivos através de consultas de mídia, você deve usar fundos também.

Além disso, eu tenho uma seção da galeria que tem tamanhos de imagem inconsistentes por isso mesmo que essas imagens são, obviamente, considerado conteúdo, eu uso imagens de fundo e centro-los em divs com um tamanho definido. Isto é semelhante ao que facebook faz em seus álbuns ..

img é uma tag html por uma razão, portanto, ele deve ser usado. Para fazer referência ou para ilustrar as coisas, as pessoas v.g.:. Em artigos

Além disso, se a imagem tem um significado ou tem que ser um clicável img é melhor do que um fundo css . Por tudo outra situação, eu acho, pode ser usado um fundo css .

No entanto, é um assunto que precisa ser discutido mais e mais.

Student Web a partir de Paris, França

Apenas um pequeno adicionar, você deve usar a tag img, se você quiser que os usuários sejam capazes de 'clique direito' e 'salvar-image' / 'save-picture', por isso, se você pretende oferecer a imagem como um recurso para os outros.

Usando imagem de fundo (tanto quanto eu estou ciente na maioria dos navegadores) desativar a opção de salvar a imagem diretamente.

Uma pequena entrada, Eu tive problemas com imagens responsivas a abrandar a prestação de iphone por até um minuto, mesmo com pequenas imagens:

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

Mas quando se muda para usar imagens de fundo o problema foi embora, isso só é viável se a segmentação de navegadores mais recentes.

load IMG primeiro porque o src é no próprio arquivo html enquanto que no caso de background-image que citada a fonte em estilo de modo a imagem é carregada após o estilo carregado, atrasando o carregamento da página.

HTML é para conteúdo e CSS é para o projeto. É a imagem necessária e que é preciso para ser pego por leitores de tela? Se a resposta for sim, então colocar a imagem no HTML. Se é puramente para o estilo, então você pode usar a propriedade background-image em CSS para injetar a imagem. Assim como um monte de pessoas aqui já mencionado, você pode usar um elemento pseudo na imagem se você gosta.

Além disso, note que a maioria dos spiders dos mecanismos de busca não índice CSS imagens de fundo, portanto, as imagens de fundo será ignorado e não será capaz de obter qualquer tipo de tráfego dos motores de busca (SEO nenhum benefício em curto).

Onde como todas as imagens definidas com etiquetas são indexadas (a menos que excluído manualmente) e pode trazer no tráfego dos motores de busca, se o título / alt atributos e nomes de arquivos são otimizados adequadamente (w.r.t algumas palavras-chave).

Você pode usar tags IMG se você quer as imagens para ser fluido e escala para diferentes tamanhos de tela. Para mim, essas imagens são na sua maioria parte do conteúdo. Para a maioria dos elementos que não fazem parte do conteúdo, eu uso sprites CSS para manter o tamanho do download mínima a menos que eu realmente quero animar ícones etc.

Eu uso de imagem imagem de fundo em vez de quando eu quero fazê-los 100% elástico que apoiou na maioria dos browsers.

Se você quiser adicionar uma imagem apenas para o conteúdo especial na página ou para apenas uma página a que você deve usar tag IMG e se você quiser colocar imagem em mais de um páginas, então você deve usar CSS Imagem de Fundo.

Outra background-image PRO:. Background-imagens para listas <ul> / <ol>

Use imagens de fundo, se eles fazem parte do design geral e são repetidos em várias páginas. De preferência no fundo do formulário Sprite para otimização.

Use tags para todas as imagens que não fazem parte do projeto global, e são mais prováveis ??colocados uma vez, como imagens específicas para artigos, pessoas e imagens importantes que merecem ser adicionado ao google imagens.

** A imagem única repetiu que eu coloque em uma tag <img> é o logotipo do site / empresa. Porque as pessoas tendem a clicar nele para ir para a página inicial, assim que você envolvê-la com uma tag <a>.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow