Get best of the week

[marcador] Trabalhando com imagens na web

Uma das decisões que um desenvolvedor front-end deve tomar ao criar um site diz respeito à escolha de como incluir imagens em páginas da web. Este método pode ser usar uma tag HTML <img>. Pode ser uma propriedade CSS backgroundou tag de <image>elemento <svg>. A escolha da abordagem correta para trabalhar com imagens é muito importante, pois isso pode afetar muito o desempenho e a disponibilidade do projeto. O material, cuja tradução publicamos hoje, é dedicado ao estudo de várias maneiras de incluir imagens em páginas da web. Aqui, serão discutidas as vantagens e desvantagens desses métodos. Além disso, falaremos sobre quando e por que eles geralmente são usados.





Elemento HTML <img>


Um elemento <img>nas versões mais simples de seu uso contém apenas o atributo necessário para o seu funcionamento adequado src:

<img src="cool.jpg" alt="">

Definir atributos de largura e altura


Se a largura e a altura da imagem não forem ajustadas, ao carregar a página e depois carregá-la, o layout da página poderá precisar ser reconstruído. Para evitar isso, você pode definir os atributos widthe a heighttag <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Embora essa abordagem possa lembrar um pouco da "velha escola", por assim dizer, é realmente bastante útil. Vamos entender melhor isso, demonstraremos o acima com um exemplo. Ou seja, eu sugiro que você assista a este pequeno vídeo .


Quadro do vídeo. A imagem à esquerda não possui largura e altura. As imagens à direita são definidas:

aqui aNetworkbarra de ferramentas do desenvolvedordonavegador é mostrada e o processo de carregamento de um par de imagens é demonstrado. Um deles está localizado à esquerda, representado pela tag<img>, que atribuiwidtheheightnão está definido. Em outros valores desses atributos são definidos.

Você notou que na página o espaço para a imagem correta é reservado antes mesmo que a imagem seja carregada? É tudo sobre os atributos dadoswidtheheight. Preste atenção ao que acontece com as legendas da imagem durante o processo de upload. Esta é uma demonstração clara da força dos atributoswidtheheight.

→ Aqui está um exemplo de trabalho

Ocultando a imagem usando CSS


A imagem pode ser oculta usando CSS. É verdade que essa imagem ainda é carregada quando a página é carregada. Portanto, ao fazê-lo, deve-se ter cautela. Se uma determinada imagem precisar ser ocultada, ela poderá ser usada apenas para fins decorativos.

Aqui está o código CSS que oculta a imagem:

img {
    display: none;
}

Repito: com essa abordagem, o navegador fará o download da imagem, fazendo isso mesmo que seja invisível. O ponto aqui é que um elemento <img>é considerado um elemento substituível , portanto, nossa capacidade de gerenciar esse elemento a partir do CSS é limitada.

▍Sobre a disponibilidade de conteúdo


A disponibilidade das imagens exibidas nas páginas usando um elemento HTML <img>é garantida por seus atributos alt. Esse atributo deve conter uma descrição clara da imagem. Isso pode ser muito útil para usuários que usam leitores de tela.

No entanto, se a altimagem não precisar ser descrita, ainda não é recomendável excluir esse atributo. O fato é que, se isso for feito, o conteúdo do atributo será "dublado" src. Isso é muito ruim para a acessibilidade do conteúdo.

Mas o atributo alté útil não apenas no caso acima. Se, por algum motivo, a imagem não for carregada e tiver um atributoalt, o texto desse atributo será exibido em vez da imagem. Eu quero ilustrar o acima com o seguinte exemplo.

Temos algumas imagens:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

O atributo srccontém um endereço incorreto para o arquivo de imagem; esse arquivo não pode ser carregado pelo navegador. O primeiro <img>não possui um atributo alte o segundo possui um atributo no qual uma string vazia é gravada. Como você acha que esses elementos serão exibidos na página?


À esquerda, há uma imagem sem o atributo alt. À direita - com o atributo alt vazio.

Sob a imagem sem o atributoalt, o espaço da página é reservado, o que pode confundir o usuário e prejudicar a disponibilidade do conteúdo. E outra imagem ocupa muito pouco espaço necessário para exibir o "conteúdo" de um atributo vazioalt. Como resultado, parece mais um ponto do que uma imagem. Isso acontece devido às configurações de propriedade daborderimagem.

No entanto, quandoaltalgo é escritono atributo, a imagem terá uma aparência diferente.


À direita está a imagem no atributo alt, da qual o texto

foi escrito, e é muito melhor que nada. Além disso, se você não puder carregar o arquivo exibido<img>, poderá adicionar um pseudoelemento a ele.

▍ Imagens responsivas



Imagens de tamanhos diferentes

O elemento<img>é bom, pois pode ser configurado para exibir versões diferentes da imagem nas áreas de visualização da página de tamanhos diferentes. Isso, por exemplo, pode ser usado para imagens usadas em artigos.

Um conjunto responsivo de imagens pode ser personalizado de duas maneiras.

1. atributo srcset


Aqui está o código da imagem que usa o atributo srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

Este é um exemplo simples. Não considero a solução ideal srcsetpara descrever imagens de tamanhos diferentes, exibidas em telas com características diferentes. O fato é que, em tal situação, a última palavra permanece com o navegador e o desenvolvedor não pode influenciar a escolha do navegador.

2. elemento de imagem HTML


Aqui está o código que usa o elemento <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Outra opção para criar imagens responsivas é usar um elemento <picture>. Eu gosto mais dessa abordagem porque é mais simples e porque fornece resultados mais previsíveis.

Aqui está um projeto de demonstração para esta seção.

▍ Redimensionando imagens



À esquerda, há uma imagem que não possui um conjunto de propriedades de ajuste de objeto CSS. À direita, há uma imagem que possui essa propriedade definida com

propriedades CSSobject-fiteobject-positionsão ótimas ferramentas que você pode usar com um elemento<img>. Eles nos dão controle sobre como o conteúdo de um elemento muda e é posicionado<img>. Isso é semelhante ao trabalho com uma propriedade CSSbackground.

A propriedadeobject-fitpode ter os seguintes valores:fill,contain,cover,none,scale-down.

Veja como usá-lo:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Agora que descobrimos um pouco o elemento <img>, é hora de seguir em frente e dominar a próxima técnica de manipulação de imagem.

Imagens de propriedades CSS


Ao usar a propriedade CSS para exibir imagens background, você precisa que essa propriedade seja aplicada a um elemento com algum conteúdo ou a um elemento que tenha dimensões. Normalmente, a principal área de uso dessa propriedade são os elementos decorativos.

ToComo usar a propriedade CSS background


Para usar a propriedade CSS background, primeiro precisamos de um elemento:

<div class="element">Some content</div>

Então você precisa de um estilo:

.element {
    background: url('cool.jpg');
}

Defina várias imagens na propriedade background


Um bom recurso de imagens exibidas usando propriedades CSS backgroundé que pode haver várias dessas imagens. Essas imagens podem ser manipuladas usando CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

IdingOcultar a imagem


Usando CSS, você pode ocultar e mostrar imagens em uma área de visualização específica. Ao mesmo tempo, as imagens que não serão exibidas não serão carregadas. Se a imagem em CSS não estiver configurada como visível, ela não será carregada. Essa é uma vantagem adicional da propriedade CSS backgroundsobre o elemento <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

Este exemplo descreve uma imagem de plano de fundo que é exibida apenas quando a largura da janela de exibição é maior 700px.

▍Sobre a disponibilidade de conteúdo


Se as imagens exibidas usando a propriedade CSS backgroundnão forem usadas corretamente, isso poderá danificar a acessibilidade do conteúdo. Por exemplo, a acessibilidade pode ser afetada usando essa imagem para marcar um artigo, o que é vital ao trabalhar com um artigo.

▍ Dificuldades ao carregar imagens de fundo por usuários regulares


Usuários comuns sabem que, se você precisar salvar uma determinada imagem, clique com o botão direito do mouse nela e selecione o comando apropriado do menu de contexto. Pode parecer engraçado para você, mas com imagens definidas usando a propriedade CSS background, essa técnica não funciona. Essa imagem não pode ser carregada da maneira usual. Para fazer o download, você precisará examinar o código do elemento nas ferramentas do desenvolvedor e usar o link de url.

Se Pseudo-elementos


Pseudo elementos também podem ser usados ​​com imagens definidas pela propriedade CSS background. Por exemplo, para exibir uma imagem em cima de outra. No caso de um elemento, <img>isso só pode ser alcançado usando um elemento adicional sobreposto a outro elemento.

Agora vamos falar sobre o uso de imagens SVG

Imagens SVG


A principal força das imagens SVG é a capacidade de escalá-las sem perder a qualidade. Além disso <svg>, além das imagens SVG , um elemento também pode exibir arquivos JPG e PNG. Aqui está o código HTML da imagem SVG:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


Imagem JPG exibida por meio do elemento SVG

Preste atenção ao atributopreserveAspectRatio? Graças a ele, a imagem ocupa toda a largura e altura do elemento<svg>, sem esticar e sem contrair.

Se a largura do elemento for<image>maior, ele preencherá o elemento pai (<svg>) em largura, mas não será esticado.


A imagem não é esticada,

muito semelhante à maneira como as propriedades CSS funcionamobject-fit: coveroubackground-size: cover.

▍Sobre a disponibilidade de conteúdo


Se falarmos sobre a disponibilidade de conteúdo ao usar imagens SVG, posso dizer que essa conversa me lembra imediatamente um elemento <title>. Abaixo está um exemplo de um código no qual o <svg>seguinte elemento é adicionado à saída da imagem por meio de :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Aqui, além disso, você pode usar o elemento <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Dificuldades ao carregar imagens <svg> por usuários regulares


A imagem exibida com a ajuda <svg>, você pode fazer o download apenas analisando seu código e acessando o link para a imagem. Isso é um sinal de menos, mas se alguém quiser limitar a capacidade de usuários comuns de baixar imagens, esse recurso pode ser útil. No mínimo, isso reduzirá as chances de baixar essa imagem.

→ Aqui está um exemplo para esta seção

Cenários para usar diferentes métodos de saída de imagem


SectionPágina de seção exibida na parte superior


Ao projetar a seção da página localizada na parte superior da página (essa seção é chamada de “Seção Herói”), às vezes você precisa exibir uma imagem, sobre a qual o título e alguns outros dados sobre a página são exibidos. Pode parecer algo como o seguinte.


A parte superior da página com a imagem e as inscrições

Preste atenção ao fato de que há uma imagem de fundo. Como você desenvolveria essa seção da página? Mas, antes de responder a essa pergunta, deixe-me formular alguns requisitos:

  • A imagem deve oferecer suporte a alterações dinâmicas fáceis ao integrar a página ao CMS de back-end.
  • Um elemento deve ser colocado sobre a imagem para simplificar a leitura do texto.
  • É necessário suportar a saída de imagem em três tamanhos: pequeno, médio e grande. Cada um deles é destinado à sua própria área de visualização.

Antes de prosseguir para a solução desse problema, nos perguntamos sobre a natureza da imagem de plano de fundo que será usada aqui. Aqui estão algumas perguntas de suporte para nos ajudar a chegar ao fundo disso:

  1. É importante a imagem do ponto de vista do usuário, ou ele não perderá nada se não estiver visível?
  2. Essa imagem precisa ser exibida em áreas de visualização de todos os tamanhos?
  3. Esta imagem é estática ou está sendo alterada dinamicamente (do CMS, por exemplo)?

Considere algumas opções para resolver esse problema.

A primeira solução para o problema


Usando uma propriedade CSS backgroundcom várias imagens definidas, uma delas pode ser usada para um elemento sobreposto à imagem principal e o outro para representar a própria imagem. Dê uma olhada neste CSS:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Essa abordagem permite que você alcance o background-imageque deseja, altere-o usando JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundEu defini a propriedade em um estilo incorporável. Embora esse código esteja funcionando, parece ruim e é impraticável.

Talvez você possa usar variáveis ​​CSS aqui?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Aqui está o resultado de um estudo de estilo.


Estude o estilo do elemento

Agora, para alterar a imagem de plano de fundo, basta alterar a variável--bg-url. Isso é um milhão de vezes melhor que os estilos embutidos.

Análise


  1. A solução proposta para o problema aqui só é boa se a imagem não for particularmente importante.
  2. Pode ser adequado se a imagem não estiver planejada para ser alterada dinamicamente, usando o CMS usado no back-end do projeto.

→ Aqui está um exemplo de trabalho

A segunda solução para o problema


Aqui vamos usar as ferramentas de saída de imagem HTML:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

No CSS, você precisa ajustar o posicionamento absoluto da imagem colocando-a abaixo do texto. Além disso, aqui precisamos de um pseudoelemento que desempenhará o papel do elemento sobreposto à imagem:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

Esta solução é boa porque, ao usá-la, é muito fácil alterar o atributo de imagem src. Além disso, é melhor para o caso em que a imagem de saída é importante.

Além disso, <img>notei que gosto das imagens que, ao usá-las, você pode usar mecanismos de backup que funcionem se o arquivo de imagem não for carregado. Esse mecanismo auxiliar, digamos, saída em vez de uma imagem de um fundo colorido simples, permitirá ao menos que os usuários leiam o texto:

.hero img {
    /*   */
    background: #2962ff;
  }


A cor do plano de fundo é exibida se a imagem não for carregada

O bom é que a cor do plano de fundo seja exibida apenas se a imagem não for carregada. Isso nos servirá.

→ Aqui está um exemplo de trabalho

Logo Logotipo do site


O logotipo é muito importante. Os logotipos adicionam exclusividade aos sites. Para exibir um logotipo em uma página, podemos recorrer a várias possibilidades:

  • Um elemento <img>que exibe uma imagem PNG, JPG ou SVG.
  • Imagem SVG incorporada.
  • Imagem de fundo.

Vamos falar sobre como a maneira de exibir imagens deve ser usada para logotipos e como escolher exatamente o que você precisa.

Logotipo com muitos detalhes.


Se o logotipo tiver muitos detalhes ou contiver muitas formas, exibi-lo usando a imagem SVG incorporada pode não ser uma boa ideia. Em tal situação, recomendo o uso de uma tag <img>com a qual uma imagem PNG, JPG ou SVG é exibida.


Logotipos diversos

Aqui está o código para exibir um logotipo semelhante armazenado no formato SVG:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Logotipo simples para animar



Logotipo animado simples

Considere uma situação em que existe um logotipo simples contendo uma determinada figura ou texto. Quando você passa o mouse sobre ele, precisa alterar a cor da forma e do texto. Como fazer isso? Parece-me que, nessa situação, é melhor usar a imagem SVG incorporada:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Aqui estão os estilos:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Aqui está um projeto de demonstração para esta seção:

Logotipo responsivo


Quando pensei em logotipos responsivos, lembrei-me do logotipo da Smashing Magazine. Eu gosto da maneira como seu tamanho muda. Aqui está um layout que ilustra o logotipo básico e o logotipo exibido em grandes áreas de visualização.


Logotipo responsivo

Para implementar esse comportamento,<picture>éideal um elementoque permita descrever duas versões do logotipo:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

No CSS, você precisa alterar a largura do logotipo, caso a largura da janela de visualização seja igual ou superior 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Diante de nós, há uma solução simples e compreensível para o problema dos logotipos responsivos.

→ Aqui está um exemplo de trabalho para esta seção

Logotipo com gradiente



Um exemplo de logotipo com gradiente

Ao trabalhar com logotipos com gradiente, você deve estar ciente de que a exportação de um logotipo de um aplicativo de design, como o Adobe Illustrator ou o Sketch, pode estar longe de ser perfeita. Durante esse processo, algo no logotipo pode quebrar.

Ao usar o formato SVG, você pode aplicar facilmente uma cor gradiente ao logotipo. No exemplo a seguir, usei<linearGradient>, definindo com ele o atributo textfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Aqui está um exemplo

▍Usuário Avatar


Os avatares têm várias formas, mas geralmente avatares quadrados ou redondos. Neste exemplo, quero compartilhar um conselho importante que você pode achar útil.

Para começar, dê uma olhada no seguinte layout. Observe que existem dois avatares organizados com bordas claras.


Um par de avatares de sucesso

E se o usuário, como avatar, decidir usar uma imagem com fundo quase branco? Nesse caso, o avatar ficará longe de ser tão bom.


Avatar mal sucedido

Observe que a imagem anterior mostra um avatar com um fundo muito claro. Como resultado, para entender que tem uma forma redonda, é preciso olhar atentamente para ela. Isto é mau. Para corrigir esse problema, você precisa adicionar uma borda interna ao avatar. Essa borda será usada como uma solução auxiliar, aplicada quando a imagem estiver muito clara.


À esquerda, há um avatar com um fundo muito claro. À direita está o resultado da solução desse problema.Existem

várias maneiras de solucionar esse problema:

  • Usando <img>.
  • Uso <img>e elemento auxiliar <div>.
  • Usando <div>e propriedades CSS background.
  • Usando <image>c <svg>.

O que se encaixa melhor aqui? Vamos descobrir.

Usando <img>


Como resolver este problema? Talvez - apenas ajuste a borda do elemento? Estamos explorando essa possibilidade (peço desculpas imediatamente pelo fato de que abaixo você costuma ver minha foto).

Aqui está o CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

Aqui está como fica.


O resultado não foi o esperado: a borda escura está localizada fora das bordas da imagem.O

que aconteceu não nos convém. Precisamos que a imagem tenha uma borda interna que se funda com a imagem escura. Como resultado, verifica-se que definir a borda do elemento não nos ajudará aqui.

Usando <img> e o auxiliar <div>


Deixe-me lembrá-lo de que somos confrontados com a tarefa de adicionar uma sombra interna à imagem. Não podemos resolver esse problema usando a sombra interna ( box-shadow) e a palavra-chave inset, pois os elementos HTML <img>não suportam a sombra interna. Para resolver esse problema, você precisa colocar um avatar em um elemento <div>e usar outro elemento, cujo único objetivo é desenhar uma borda interna.

Aqui está o código HTML:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Aqui estão os estilos:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

Se o elemento <div>tiver uma borda pintada em 10% em preto, isso garantirá que essa borda não seja visível na imagem escura, mas será perceptível à luz, destacando sua borda. Aqui está como fica.


A borda interna, visível apenas em imagens brilhantes

→ Aqui está um exemplo para esta seção

Usando <div> e a propriedade CSS background


Se eu usasse um elemento para exibir o avatar <div>, provavelmente significaria que a imagem desempenha um papel decorativo. Um exemplo vem à minha mente, mostrado abaixo. Aqui, vários avatares estão simplesmente espalhados pela página.


Avatares espalhados pela página.O

HTML aqui será:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Aqui está o estilo:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Aqui você pode encontrar um exemplo de trabalho.

Usando <image> em <svg>


Eu acredito que esta é a solução mais interessante para o nosso problema. Descobri esse truque enquanto estudava o novo design do Facebook.

Aqui está a marcação:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Primeiro, vamos analisar esse código. Aqui está o que é:

  1. Uma máscara cortando uma imagem de círculo.
  2. O grupo ao qual a máscara se aplica.
  3. A própria imagem com o atributo preserveAspectRatio=«xMidYMid».
  4. Um círculo que é usado como uma borda interna.

Veja como é estilizado:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ Aqui você pode encontrar um exemplo

Com os avatares, descobrimos isso. Portanto, seguimos em frente.

▍ Campo de entrada com ícone


Aqui está um exemplo de um campo de entrada com um ícone.


Campo de entrada com um ícone

Esses campos são bastante comuns. Como equipar um campo com um ícone? O que acontece quando esse campo recebe foco? Explore esses problemas.

Aqui está o código HTML:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

Acredito que a melhor solução para esse problema é usar imagens de plano de fundo definidas pelo CSS. É simples, rápido e não requer elementos HTML adicionais:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

Você pode usar uma imagem SVG codificada em URL para alterar a cor do ícone quando o campo receber o foco. É muito fácil de fazer. Por exemplo, esta ferramenta foi projetada para essa finalidade , desenvolvida pela Yoksel.

Aqui está um exemplo.

Estilos CSS para impressão


Um visitante da página pode precisar imprimi-lo em uma impressora. Suponha que exista uma receita culinária na página e você precise imprimi-la para não precisar procurar constantemente no telefone ou no computador da cozinha.

Se houver etapas na receita ilustrada com figuras, é importante que elas caiam na versão impressa; caso contrário, a pessoa que imprimir a página não poderá usar a receita.

Tente não incluir nas páginas destinadas à impressão de imagens exibidas usando o plano de fundo da propriedade CSS


Se a imagem for incluída na página usando a propriedade CSS background, ela não será impressa. O local em que foi exibido ficará vazio durante a impressão. É disso que eu estou falando.


Espaços vazios, em vez de imagens incluídas na página, usando a propriedade CSS background.

Haverá pouco uso para uma versão impressa da receita. Isso pode ser corrigido forçando o navegador a exibir imagens semelhantes na versão impressa da página. Mas essa abordagem não funciona no Firefox e no IE. Aqui está o que parece em CSS:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

Em tais situações, é melhor usar um elemento HTML <img>. As imagens incluídas na página usando esse elemento são impressas sem problemas.

→ Aqui está um exemplo

Sumário


Hoje conversamos sobre diferentes maneiras de incluir imagens em páginas da web, discutimos seus prós e contras e examinamos cenários para seu uso. Esperamos que você ache útil o que aprendeu hoje.

Queridos leitores! Você encontrou problemas para exibir imagens em páginas da web?

More articles:


All Articles