html - online - working with background images css




Quando usar imagem de fundo IMG vs. CSS? (20)

Usos apropriados do IMG

  1. Use IMG se você pretende que as pessoas imprimam sua página e você deseja que a imagem seja incluída por padrão. - JayTee
  2. Use IMG (com texto alt ) quando a imagem tiver um significado semântico importante, como um ícone de aviso . Isso garante que o significado da imagem possa ser comunicado em todos os user agents, incluindo leitores de tela.

Usos pragmáticos do IMG

  1. Use o atributo alt do IMG mais se a imagem fizer parte do conteúdo , como um logotipo ou diagrama ou pessoa (pessoa real, não pessoas com foto de estoque). - sanchothefat
  2. Use o IMG se você confiar no dimensionamento do navegador para renderizar uma imagem em proporção ao tamanho do texto.
  3. Use o IMG para várias imagens de sobreposição no IE6 .
  4. Use o IMG com um z-index para esticar uma imagem de plano de fundo para preencher sua janela inteira.
    Note que isto não é mais verdade com tamanho de fundo CSS3; veja o item 6 abaixo.
  5. Usar img vez de background-image de background-image pode melhorar drasticamente o desempenho de animações em um segundo plano.

Quando usar a imagem de plano de fundo do CSS

  1. Use imagens de plano de fundo CSS se a imagem não fizer parte do conteúdo . - sanchothefat
  2. Use imagens de fundo CSS ao fazer a substituição de imagem de texto, por exemplo. parágrafos / cabeçalhos. - sanchothefat
  3. Use background-image se você pretende que as pessoas imprimam sua página e você não quer que a imagem seja incluída por padrão. - JayTee
  4. Use background-image se você precisar melhorar os tempos de download, como acontece com os sprites CSS .
  5. Use background-image se você precisar que apenas uma parte da imagem fique visível, como acontece com os sprites CSS.
  6. Use background-image com background-size:cover para esticar uma imagem de fundo para preencher sua janela inteira.

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

Os fatores podem incluir acessibilidade, suporte a navegadores, conteúdo dinâmico ou qualquer tipo de limite técnico ou princípios de usabilidade.


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

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


Algumas respostas complicam o cenário aqui. Esta é uma situação simples e inoperante.

Basta responder a essa pergunta toda vez que quiser colocar uma imagem:

Isso é parte do conteúdo ou parte do design?

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

Além disso, não considere ao lado das duas técnicas, apenas porque você deseja ser "impressora amigável" ou não. Também NÃO esconda o conteúdo de um ponto de vista de SEO com CSS. Se você estiver gerenciando seu conteúdo em arquivos CSS, você se arremessou na perna. Esta é apenas uma decisão trivial do que é conteúdo ou não. Todos os outros aspectos devem ser ignorados.


Alguns outros cenários em que background-image deve ser usada:

  • Quando você quiser que a imagem mude quando o mouse for tocado.
  • Quando você deseja adicionar cantos arredondados à imagem. Se você usar img , a imagem vazará dos cantos arredondados.

Aqui está uma consideração técnica: a imagem será gerada dinamicamente? Tende a ser muito mais fácil gerar a tag <img> em HTML do que tentar editar dinamicamente uma propriedade CSS.


As respostas acima consideram apenas o aspecto Design. Eu estou listando isso em aspectos de SEO.

Quando usar <img />

  1. Quando sua imagem precisa ser indexada pelo mecanismo de pesquisa
  2. Se tem relação com o conteúdo não projetar.
  3. Se a sua imagem não for muito pequena (não imagens icônicas).
  4. Imagens onde você pode adicionar o atributo alt e title .
  5. Imagens de uma página da Web que você deseja imprimir usando mídia de impressão css

Quando usar background-image CSS

  1. Imagens puramente usadas para projetar.
  2. Nenhuma relação com conteúdo.
  3. Imagens pequenas que podemos jogar com CSS3.
  4. Repetindo Imagens (No ícone do autor do blog, o ícone de data será repetido para cada artigo, etc.,).

Como eu vou usá-los com base nessas razões. Estas são boas práticas de otimização de mecanismos de pesquisa de imagens.


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

Você pode fazer a transição nativa da imagem de fundo de uma 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 salva qualquer tipo de animação JavaScript ou jQuery para atenuar o src <img/> .

Mais informações sobre transições no MDN .


Eu adicionaria outros dois argumentos:

  • Uma tag img é boa se você precisar redimensionar a imagem. Por exemplo, se a imagem original for 100 px por 100 px e você quiser 80 px por 80 px, você pode definir a largura e a altura CSS da tag img. Eu não sei de nenhuma boa maneira de fazer isso usando a imagem de fundo. EDIT: Isso agora também pode ser feito com uma imagem de plano de fundo, usando o atributo CSS3 em background-size .

  • Usar a imagem de fundo é bom quando você precisa alternar dinamicamente entre os sprites . Por exemplo, se você tiver uma imagem de botão e desejar exibir uma imagem separada quando o cursor estiver passando sobre o elemento, poderá usar uma imagem de fundo contendo as sprites normais e flutuantes e alterar dinamicamente a posição de fundo.


Existe outro motivo! Se você tiver um design responsivo e quiser dividir o uso de imagens de baixa, média e alta resolução para dispositivos por meio de consultas de mídia, também deverá usar fundos.


HTML é para conteúdo e CSS é para design. A imagem é necessária e precisa ser captada pelos leitores de tela? Se a resposta for sim, coloque 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 muitas pessoas já mencionaram, você pode usar um pseudo elemento na imagem, se quiser.


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


No que diz respeito a animar imagens usando CSS TranslateX / Y (A maneira correta de animar html) - Se você fizer uma gravação na linha de tempo do Chrome de imagens de fundo CSS animadas vs IMG sendo animadas você verá que os tempos de pintura são drasticamente menores para o CSS imagens de fundo.


Os navegadores nem sempre estão configurados para imprimir imagens de plano de fundo por padrão; se você pretende que as pessoas imprimam sua página :)


Primeiro plano = img.

Fundo = fundo CSS.


Se você tiver seu CSS em um arquivo externo, geralmente é conveniente exibir uma imagem usada com frequência em todo o site (como uma imagem de cabeçalho) como imagem de plano de fundo, porque você terá a flexibilidade de alterar a imagem posteriormente.

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 depois, você altera a localização da imagem. Tudo o que você precisa fazer é atualizar o CSS:

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

Caso contrário, você terá que atualizar o atributo src da tag <img> apropriada em cada arquivo HTML (supondo que você não esteja usando uma linguagem de script do lado do servidor ou CMS para automatizar o processo).

Também imagens de fundo são úteis se você não quiser que o usuário salve a imagem (embora eu nunca tenha precisado fazer isso).


Uma pequena entrada, tive problemas com imagens responsivas reduzindo a renderização no iphone por até um minuto, mesmo com imagens pequenas:

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

Mas ao mudar para o uso de imagens de plano de fundo, o problema desapareceu. Isso só é viável se estiver segmentando navegadores mais recentes.


Use a imagem de fundo do CSS em um caso de várias skins ou versões de design. O Javascript pode ser usado para alterar dinamicamente uma classe de um elemento, o que o forçará a renderizar uma imagem diferente. Com uma tag IMG, pode ser mais complicado.


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

Um dos principais PROS usando IMAGES é que é melhor para SEO .


IMG carrega primeiro porque o src está no próprio arquivo html enquanto que no caso do background-image a fonte é mencionada na folha de estilo para que a imagem seja carregada após a folha de estilo carregada, atrasando o carregamento da página da web.


Outra imagem de fundo PRO: Imagens de fundo para listas <ul> / <ol> .

Use imagens de plano de fundo se elas fizerem parte do design geral e forem repetidas em várias páginas. De preferência em forma de sprite de fundo para otimização.

Use tags para todas as imagens que não fazem parte do design geral e provavelmente serão colocadas uma vez, como imagens específicas de artigos, pessoas e imagens importantes que merecem ser adicionadas às imagens do Google.

** A única imagem repetida que incluo em uma tag <img> é o logotipo do site / empresa. Como as pessoas tendem a clicá-lo para acessar a página inicial, você o envolve com uma tag <a> .







background-image