Imagens responsivas

Uma imagem vale 1.000 palavras e as imagens têm um papel essencial em todas as páginas. No entanto, elas frequentemente também representam a maior parte dos bytes baixados. Com um Web design responsivo, não só seus layouts podem ser alterados com base nas características do dispositivo, mas as imagens também.

Pete LePage

Um Web design responsivo significa que não só seus layouts podem ser alterados com base nas características do dispositivo, mas o conteúdo também. Por exemplo, em telas de alta resolução (2x), gráficos de alta resolução garantem a nitidez. Uma imagem com 50% de largura pode ficar boa em um navegador com 800 pixels de largura, mas ocupa muito espaço em um celular mais estreito, utilizando a mesma largura de banda quando reduzida para caber em uma tela menor.

Direção de arte

Outras imagens podem precisar de alterações mais significativas: alteração de proporções, cortes e até mesmo a substituição de toda a imagem. Nesse caso, a alteração da imagem é normalmente chamada de direção de arte. Consulte responsiveimages.org/demos/ para conferir mais exemplos.

Imagens responsivas

Você sabia que as imagens representam mais de 60% dos bytes necessários para carregar uma página da Web em média?

Neste curso, você vai aprender a trabalhar com imagens na Web moderna, de forma que suas imagens fiquem bonitas e sejam carregadas rapidamente em qualquer dispositivo.

Ao longo do caminho, você vai aprender uma série de habilidades e técnicas para integrar imagens responsivas ao seu fluxo de trabalho de desenvolvimento. Ao final do curso, você vai desenvolver com imagens que se adaptam e respondem a diferentes tamanhos de viewport e cenários de uso.

Este é um curso sem custo financeiro oferecido pela Udacity.

Fazer o curso

Imagens na marcação

O elemento img é incrível: ele faz o download, decodifica e renderiza conteúdo, e os navegadores modernos oferecem suporte a uma grande variedade de formatos de imagens. Incluir imagens que funcionam em diferentes dispositivos não é diferente do mesmo processo para desktop e exige apenas pequenos ajustes para criar uma boa experiência.

Resumo

• Use tamanhos relativos para imagens para evitar a sobreposição acidental do contêiner.
• Use o elemento picture quando quiser especificar diferentes imagens dependendo das características do dispositivo (também conhecido como direção de arte).
• Use srcset e o descritor x no elemento img para dar dicas ao navegador sobre a melhor imagem a ser usada ao escolher entre diferentes densidades.
• Se a página tiver apenas uma ou duas imagens que não forem usadas em outras áreas do site, considere usar imagens inline para reduzir as solicitações de arquivos.

Usar tamanhos relativos para imagens

Lembre-se de usar unidades relativas ao especificar larguras de imagens para impedir que elas acidentalmente ultrapassem a janela de visualização. Por exemplo, width: 50%; faz com que a largura da imagem seja 50% do elemento que a contém (não 50% da janela de visualização ou 50% do tamanho real em pixels).

Como o CSS permite que o conteúdo ultrapasse o contêiner, pode ser necessário usar max- width: 100% para impedir que imagens e outros conteúdos ultrapassem o contêiner. Exemplo:

img, embed, object, video {
    max-width: 100%;
}

Forneça descrições significativas pelo atributo alt em elementos img. Essas informações tornam seu site mais acessível, fornecendo contexto para leitores de tela e outras tecnologias adaptativas.

Aprimoramento de imgs com srcset para dispositivos de DPI alto

O atributo srcset aprimora o comportamento do elemento img, facilitando o fornecimento de vários arquivos de imagem para dispositivos com diferentes características. Semelhante à image-set função CSS nativa do CSS, o srcset permite que o navegador escolha a melhor qualidade de imagem dependendo das características do dispositivo. Por exemplo, o uso de uma imagem de 2x em uma tela de 2x e, potencialmente no futuro, uma imagem de 1x em um dispositivo de 2x em uma rede de largura de banda limitada.

<img src="photo.png" srcset="[e-mail] 2x" ...>

Em navegadores que não oferecem suporte a srcset, o navegador simplesmente usa o arquivo de imagem padrão especificado pelo atributo src. Por esse motivo, é importante sempre incluir uma imagem de 1x que possa ser exibida em qualquer dispositivo, independentemente dos recursos. Quando srcset é aceito, a lista separada por vírgulas de imagem/condições é analisada antes da realização de qualquer solicitação e somente a imagem mais apropriada é baixada e exibida.

Embora as condições possam incluir desde a densidade de pixels até a largura e altura, somente a densidade de pixels é permitida no momento. Para equilibrar o comportamento atual com futuros recursos, forneça apenas a imagem de 2x no atributo.

Direção de arte em imagens responsivas com picture

Para mudar imagens com base nas características do dispositivo, um processo também conhecido como direção de arte, use o elemento picture. O elemento picture define uma solução declarativa para fornecer várias versões de uma imagem com base em diferentes características, como tamanho, resolução, orientação e muito mais.

Observação : o elemento picture está começando a ser usado em navegadores. Apesar de ele ainda não estar disponível em todos os navegadores, recomendamos seu uso por causa de sua compatibilidade com versões anteriores e do possível uso do polyfill Picturefill. Consulte o site ResponsiveImages.org para mais detalhes.

Use o elemento picture quando uma fonte de imagem existir em várias densidades ou quando um design responsivo exigir uma imagem um pouco diferente em alguns tipos de telas. Semelhante ao elemento video, vários elementos source podem ser incluídos, possibilitando a especificação de diferentes arquivos de imagem dependendo das consultas de mídia ou do formato da imagem.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Faça um teste

No exemplo acima, se a largura do navegador for de pelo menos 800 px, head.jpg ou head-2x.jpg será usado, dependendo da resolução do dispositivo. Se o navegador estiver entre 450 e 800 pixels, head-small.jpg ou head-small- 2x.jpg será usado, dependendo da resolução do dispositivo. Para larguras de tela menores que 450 px e compatibilidade com versões anteriores em que o elemento picture não é compatível, o navegador renderiza o elemento img em vez disso e precisa ser sempre incluído.

Imagens com tamanho relativo

Quando o tamanho final da imagem não é conhecido, pode ser difícil especificar um descritor de densidade para as fontes de imagem. Isso é especialmente verdadeiro para imagens que ocupam uma largura proporcional do navegador e são fluídas, dependendo do tamanho do navegador.

Em vez de fornecer tamanhos e densidades de imagem fixos, você pode especificar o tamanho de cada imagem fornecida adicionando um descritor de largura junto com o tamanho do elemento de imagem, permitindo que o navegador calcule automaticamente a densidade de pixels efetiva e escolha a melhor imagem para download.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Faça um teste

O exemplo acima renderiza uma imagem que tem metade da largura da janela de visualização (sizes="50vw") e, dependendo da largura do navegador e da proporção de pixels do dispositivo, permite que o navegador escolha a imagem correta, independentemente do tamanho da janela do navegador. Por exemplo, a tabela abaixo mostra qual imagem o navegador escolheria:

Largura do navegador	Proporção de pixels do dispositivo	Imagem usada	Resolução efetiva
400px	1	200.jpg	1 x
400px	2	400.jpg	2x
320px	2	400.jpg	2,5x
600px	2	800.jpg	2,67x
640px	3	1000.jpg	3,125x
1.100 px	1	800.png	1.45x

Considere pontos de interrupção em imagens responsivas

Em muitos casos, o tamanho da imagem pode ser alterado dependendo dos pontos de interrupção do layout do site. Por exemplo, em uma tela pequena, você pode querer que a imagem ocupe toda a largura da janela de visualização, enquanto em telas maiores, ela deve ocupar apenas uma pequena proporção.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Faça um teste

O atributo sizes, no exemplo acima, usa várias consultas de mídia para especificar o tamanho da imagem. Quando a largura do navegador é maior que 600 pixels, a imagem ocupa 25% da largura da janela de visualização. Quando está entre 500 e 600 pixels, a imagem ocupa 50% da largura da janela de visualização. Para navegadores com menos de 500 pixels, a imagem ocupa toda a largura.

Permita que imagens de produtos sejam expandidas

J. Site da J. Crew com imagem de produto ampliável.

Os clientes querem saber o que estão comprando. Em sites de varejo, os usuários esperam poder visualizar closes de alta resolução dos produtos para conferir os detalhes. Os participantes do estudo ficaram frustrados quando isso não era possível.

Um bom exemplo de imagens que podem ser tocadas e ampliadas é fornecido pelo site da J. Site da equipe. Uma sobreposição que desaparece indica que uma imagem pode ser tocada, fornecendo uma versão ampliada da imagem com todos os detalhes visíveis.

Outras técnicas de imagem

Imagens com compactação

A técnica de imagem compactável apresenta uma imagem de 2x altamente compactada para todos os dispositivos, independentemente dos recursos reais do dispositivo. Dependendo do tipo de imagem e do nível de compactação, a qualidade pode não ser visivelmente alterada, mas o tamanho do arquivo é significativamente reduzido.

Faça um teste

Cuidado : use a técnica de compactação com cuidado devido ao aumento dos custos de memória e decodificação que ela exige. O redimensionamento de grandes imagens para caber em telas menores é caro e pode ser particularmente difícil em dispositivos mais acessíveis, em que a memória e o processamento são limitados.

Substituição de imagem JavaScript

A substituição de imagem JavaScript verifica os recursos do dispositivo e "faz a escolha certa". Você pode determinar a proporção de pixels do dispositivo via window.devicePixelRatio, receber a largura e a altura da tela e até mesmo fazer algum sniffing de conexão de rede via navigator.connection ou emitir uma solicitação falsa. Após coletar todas essas informações, você pode decidir qual imagem carregar.

Uma grande desvantagem dessa abordagem é que o uso do JavaScript significa que você atrasará o carregamento da imagem até que pelo menos o analisador look-ahead tenha terminado. Isso significa que o download das imagens não será iniciado até que o evento pageload seja acionado. Além disso, o navegador provavelmente fará o download das imagens de 1x e 2x, resultando no aumento do peso da página.

Inserir imagens: raster e vetor

Existem duas maneiras fundamentalmente diferentes de criar e armazenar imagens, e isso afeta a maneira com que você implanta imagens de forma responsiva.

Imagens rasterizadas, como fotografias e outras imagens, são representadas como uma grade de pontos de cor individuais. Imagens rasterizadas podem ser originadas em uma câmera ou um scanner ou ser criadas com o elemento de canvas HTML. Formatos como PNG, JPEG e WebP são usados para armazenar imagens rasterizadas.

Imagens vetoriais, como logotipos e desenhos, são definidas como um conjunto de curvas, linhas, formas, cores de preenchimento e gradientes. Imagens vetoriais podem ser criadas com programas como o Adobe Illustrator ou o Inkscape ou programadas em código usando um formato vetorial, como o SVG.

SVG

O SVG permite a inclusão de gráficos vetoriais responsivos em uma página da Web. A vantagem dos formatos de arquivo vetorial em relação aos rasterizados é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Formatos vetoriais descrevem a geometria da imagem, ou seja, como ela é criada a partir de linhas, curvas, cores etc. Por outro lado, formatos rasterizados só têm informações sobre pontos de cor individuais, portanto, o navegador precisa adivinhar como preencher os espaços em branco durante o dimensionamento.

Abaixo estão duas versões da mesma imagem: uma imagem PNG à esquerda e uma SVG à direita. O SVG fica ótimo em qualquer tamanho, enquanto o PNG começa a ficar desfocado em tamanhos de exibição maiores.

Se você quiser reduzir o número de solicitações de arquivos realizadas pela sua página, codifique imagens inline usando o formato SVG ou de URI de dados. Ao visualizar o código-fonte desta página, você vai notar que os dois logotipos abaixo são declarados em linha: um URI de dados e um SVG.

O SVG tem ótimo suporte em dispositivos móveis e computadores e as ferramentas de otimização podem reduzir significativamente o tamanho do SVG. As duas linhas a seguir de logotipos SVG parecem idênticas, mas uma tem cerca de 3 KB e a outra apenas 2 KB:

URI de dados

Com os URIs de dados, é possível incluir arquivos in-line (como imagens) definindo o src de um elemento img como uma string codificada em Base64 com este formato:

<img src="data:image/svg+xml;base64,[data]">

O início do código para o logotipo HTML5 acima tem a seguinte aparência:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(A versão completa tem mais de 5000 caracteres!)

Ferramentas com recurso arrastar e soltar, como jpillora.com/base64-encoder, estão disponíveis para converter arquivos binários, como imagens, em URIs de dados. Assim como SVGs, URIs de dados têm um bom suporte em navegadores para dispositivos móveis e computadores.

Inserção em linha no CSS

URIs de dados e SVGs também podem ser incluídos em linha no CSS, e isso é permitido para dispositivos móveis e computadores. Veja duas imagens aparentemente idênticas implementadas como imagens de plano de fundo no CSS: um URI de dados e um SVG:

Prós e contras do código inline

O código inline para imagens pode ser longo, especialmente para URIs de dados. Por que você usaria isso? Para reduzir as solicitações HTTP. SVGs e URIs de dados podem permitir que uma página da Web inteira, incluindo imagens, CSS e JavaScript, seja recuperada com uma única solicitação.

A desvantagem:

• Em dispositivos móveis, os URIs de dados podem ser muito mais lentos para exibição do que imagens de um src externo.
• URIs de dados podem aumentar consideravelmente o tamanho de uma solicitação de HTML.
• Eles adicionam complexidade à sua marcação e ao seu fluxo de trabalho.
• O formato de URI de dados é muito maior do que o binário (até 30%) e, portanto, não reduz o tamanho total do download.
• URIs de dados não podem ser armazenados em cache, devendo ser baixados para cada página na qual são usados.
• Eles não são permitidos no IE 6 e 7 e o suporte é incompleto no IE 8.
• Com o HTTP/2, a redução do número de solicitações de ativos se tornará menos prioritária.

Assim como com todos os elementos responsivos, é preciso testar o que funciona melhor. Use ferramentas de desenvolvedor para verificar o tamanho do arquivo de download, o número de solicitações e a latência total. Às vezes, URIs de dados podem ser úteis para imagens rasterizadas, por exemplo, em uma página inicial que só inclui uma ou duas fotos que não são usadas em outras áreas. Se você precisar incluir imagens vetoriais em linha, o SVG é uma opção muito melhor.

Imagens em CSS

A propriedade background do CSS é uma ferramenta eficaz para adicionar imagens complexas a elementos, facilitando a inclusão de várias imagens, sua repetição e muito mais. Ao ser combinada com consultas de mídia, a propriedade background se torna ainda mais eficaz, permitindo o carregamento condicional de imagens com base na resolução da tela, no tamanho da janela de visualização e muito mais.

Resumo

• Use a melhor imagem de acordo com as características de exibição, considerando o tamanho da tela, a resolução do dispositivo e o layout da página.
• Mude a propriedade background-image no CSS para telas de alto DPI usando consultas de mídia com min-resolution e -webkit-min-device-pixel-ratio.
• Use srcset para fornecer imagens de alta resolução além da imagem de 1x na marcação.
• Considere os custos de desempenho ao usar técnicas de substituição de imagens em JavaScript ou ao exibir imagens de alta resolução altamente compactadas para dispositivos de resolução mais baixa.

Use consultas de mídia para o carregamento condicional de imagens ou direção de arte

Consultas de mídia não só afetam o layout da página, mas também podem ser usadas para carregar imagens condicionalmente ou para fornecer direção de arte dependendo da largura da janela de visualização.

Por exemplo, no exemplo abaixo, em telas menores, apenas small.png é baixada e aplicada ao conteúdo div, enquanto em telas maiores background-image: url(body.png) é aplicado ao corpo e background-image: url(large.png) é aplicado ao conteúdo div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Faça um teste

Use image-set para fornecer imagens de alta resolução

A função image-set() no CSS aprimora o comportamento da propriedade background, facilitando o fornecimento de vários arquivos de imagem para diferentes características do dispositivo. Isso permite que o navegador escolha a melhor qualidade de imagem dependendo das características do dispositivo, por exemplo, o uso de uma imagem de 2x em uma tela de 2x ou de uma imagem de 1x em um dispositivo de 2x em uma rede de largura de banda limitada.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Além de carregar a imagem correta, o navegador também a dimensiona adequadamente. Em outras palavras, o navegador presume que imagens de 2x são duas vezes maiores do que imagens de 1x e, dessa forma, reduz a imagem de 2x a um fator de 2 para que a imagem pareça ter o mesmo tamanho na página.

O suporte a image-set() ainda é novo e só é permitido no Chrome e no Safari com o prefixo de fornecedor -webkit. Inclua uma imagem de fallback para quando image-set() não tiver suporte. Por exemplo:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Faça um teste

O exemplo acima carrega o recurso apropriado em navegadores que oferecem suporte a image-set. Caso contrário, ele utiliza o recurso de 1x. A ressalva óbvia é que, embora o suporte do navegador image-set() seja baixo, a maioria dos navegadores recebe o recurso de 1x.

Use consultas de mídia para fornecer imagens de alta resolução ou direção de arte

Consultas de mídia podem criar regras baseadas na proporção de pixels do dispositivo, possibilitando a especificação de diferentes imagens para exibições de 2x vs. 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

O Chrome, o Firefox e o Opera oferecem suporte ao (min-resolution: 2dppx) padrão, enquanto os navegadores Safari e Android exigem a sintaxe prefixada de fornecedor mais antiga sem a unidade dppx. Lembre-se de que esses estilos são carregados somente se o dispositivo corresponder à consulta de mídia, e você precisa especificar estilos para o caso base. Isso também oferece o benefício de garantir que algo seja renderizado se o navegador não oferecer suporte a consultas de mídia de resoluções específicas.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Faça um teste

Você também pode usar a sintaxe min-width para exibir imagens alternativas dependendo do tamanho da janela de visualização. Essa técnica tem a vantagem de a imagem não ser baixada se a consulta de mídia não corresponder. Por exemplo, bg.png só é baixado e aplicado ao body se a largura do navegador for de 500 pixels ou mais:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Use SVG para ícones

Ao adicionar ícones à sua página, use ícones SVG quando possível ou, em alguns casos, caracteres Unicode.

Resumo

• Use SVG ou Unicode para ícones em vez de imagens rasterizadas.

Substitua ícones simples por Unicode

Muitas fontes incluem suporte para uma variedade de glifos Unicode, que podem ser usados no lugar de imagens. Diferentemente de imagens, fontes Unicode podem ser dimensionadas e manter uma aparência boa aparecendo grandes ou pequenas na tela.

Além do conjunto de caracteres normal, o Unicode pode incluir símbolos para setas (←), operadores matemáticos (√), formas geométricas (★), imagens de controle (▶), notação musical (♬), letras gregas (Ω) e até peças de xadrez (♞).

Você pode incluir um caractere Unicode da mesma maneira que faz com entidades nomeadas: &#XXXX, em que XXXX representa o número do caractere Unicode. Exemplo:

You're a super ★

Você é um super ★

Substitua ícones complexos por SVG

Para requisitos de ícone mais complexos, os ícones SVG geralmente são leves, fáceis de usar e podem ser estilizados com CSS. O SVG tem diversas vantagens sobre imagens de raster:

• Elas são gráficos vetoriais que podem ser infinitamente dimensionados.
• Efeitos CSS como cor, sombreamento, transparência e animações são simples.
• Imagens SVG podem ser incorporadas diretamente no documento.
• Elas são semânticas.
• Elas proporcionam uma acessibilidade melhor com os atributos apropriados.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Faça um teste

Use fontes de ícone com cuidado

Exemplo de uma página que usa o FontAwesome para os ícones de fonte.

As fontes de ícone são populares e podem ser fáceis de usar, mas têm algumas desvantagens em comparação com ícones SVG:

• Elas são gráficos vetoriais que podem ser infinitamente dimensionadas, mas podem sofrer suavização, resultando em ícones que não têm a nitidez esperada.
• Estilização limitada com CSS.
• Pode ser difícil posicionar pixels perfeitamente, dependendo da altura da linha, do espaçamento entre as letras etc.
• Não são semânticas e podem ser difíceis de usar com leitores de tela ou outras tecnologias assistenciais.
• A não ser que o escopo seja definido corretamente, podem resultar em um tamanho de arquivo grande que usa apenas um pequeno subconjunto dos ícones disponíveis.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Faça um teste

Existem centenas de fontes de ícone sem custo financeiro e pagas disponíveis, incluindo Font Awesome, Pictos e Glyphicons.

Equilibre o peso da solicitação HTTP adicional e do tamanho do arquivo com a necessidade dos ícones. Por exemplo, se você precisar apenas de alguns ícones, pode ser melhor usar uma imagem ou um sprite de imagens.

Otimizar imagens para o desempenho

As imagens geralmente representam a maior parte dos bytes transferidos e também ocupam uma quantidade significativa do espaço visual da página. Como resultado, a otimização das imagens pode gerar algumas das maiores economias de bytes e melhorias de desempenho para seu site: quanto menos bytes o navegador precisar baixar, menor será a concorrência pela largura de banda do cliente e mais rápido o navegador poderá fazer o download e exibir todos os recursos.

Resumo

• Não escolha um formato de imagem aleatório. Entenda os diferentes formatos disponíveis e use o mais adequado.
• Inclua ferramentas de otimização e compactação de imagens no seu fluxo de trabalho para reduzir os tamanhos dos arquivos.
• Reduza o número de solicitações HTTP colocando imagens usadas com frequência em image sprites.
• Para melhorar o tempo inicial de carregamento da página e reduzir o peso inicial da página, carregue as imagens somente depois que elas entrarem na visualização.

Escolher o formato certo

Existem dois tipos de imagens a serem considerados: imagens vetoriais e imagens rasterizadas. Para imagens rasterizadas, também é necessário escolher o formato de compactação correto, por exemplo: GIF, PNG, JPG.

Imagens rasterizadas, como fotografias e outras imagens, são representadas como uma grade de pontos ou pixels individuais. Imagens raster geralmente são produzidas por uma câmera ou scanner ou podem ser criadas no navegador com o elemento canvas. Conforme o tamanho da imagem aumenta, o tamanho do arquivo também aumenta. Quando dimensionadas acima do tamanho original, as imagens raster ficam desfocadas, porque o navegador precisa adivinhar como preencher os pixels ausentes.

Imagens vetoriais, como logotipos e desenhos, são definidas por um conjunto de curvas, linhas, formas e cores de preenchimento. Imagens vetoriais são criadas com programas como Adobe Illustrator ou Inkscape e salvas em um formato vetorial como SVG. Como as imagens vetoriais são baseadas em primitivos simples, elas podem ser dimensionadas sem perda de qualidade ou alteração no tamanho do arquivo.

Ao escolher o formato adequado, é importante considerar a origem da imagem (raster ou vetorial) e o conteúdo (cores, animação, texto etc.). Nenhum formato se adapta a todos os tipos de imagem, e cada um tem seus pontos fortes e fracos.

Comece com estas diretrizes para escolher o formato certo:

• Use JPG para imagens fotográficas.
• Use SVG para imagens vetoriais e gráficos de cores sólidas, como logotipos e desenhos. Se uma imagem vetorial estiver indisponível, experimente WebP ou PNG.
• Use PNG em vez de GIF, porque ele permite mais cores e oferece taxas de compactação melhores.
• Para animações mais longas, considere o uso de <video>, que oferece uma qualidade de imagem melhor e dá ao usuário controle sobre a reprodução.

Reduzir o tamanho do arquivo

É possível reduzir o tamanho do arquivo de imagem consideravelmente ao realizar o "pós-processamento" das imagens após a gravação. Existem diversas ferramentas de compactação de imagens, com e sem perda, on-line, de GUI e linha de comando. Quando possível, é recomendável automatizar a otimização de imagens para que ela seja integrada ao seu fluxo de trabalho.

Há várias ferramentas disponíveis para realizar uma compactação maior sem perdas em arquivos JPG e PNG que não afetam a qualidade da imagem. Para JPG, tente jpegtran ou jpegoptim (disponível apenas no Linux; execute com a opção --strip-all). Para PNG, tente OptiPNG ou PNGOUT.

Usar sprites de imagem

Os sprites CSS são uma técnica na qual um grupo de imagens é combinado em uma só imagem de "folha de sprites". Você pode, então, usar imagens individuais ao especificar a imagem de plano de fundo de um elemento (a folha de sprites) e um offset para exibir a parte correta.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Faça um teste

A criação de sprites tem a vantagem de reduzir o número de downloads necessários para receber várias imagens, ainda permitindo o armazenamento em cache.

Considere o carregamento lento

O carregamento lento pode agilizar significativamente o carregamento de páginas longas que incluem muitas imagens abaixo da dobra ao carregá-las conforme a necessidade ou depois que o conteúdo principal terminar de ser carregado e renderizado. Além de melhorias de desempenho, o uso do carregamento lento pode criar experiências de rolagem infinita.

Tenha cuidado ao criar páginas com rolagem infinita, porque o conteúdo é carregado conforme ele se torna visível, então mecanismos de pesquisa poderão nunca ver o conteúdo. Além disso, os usuários que procuram informações no rodapé nunca verão o rodapé, porque há sempre um novo conteúdo a ser carregado.

Evite imagens por completo

Às vezes, a melhor imagem é a que não existe. Sempre que possível, use os recursos nativos do navegador para fornecer a mesma funcionalidade ou uma semelhante. Os navegadores geram elementos visuais que anteriormente exigiam imagens. Isso significa que os navegadores não precisam mais fazer o download de arquivos de imagem separados, evitando o uso de imagens dimensionadas de forma inadequada. Você pode usar Unicode ou fontes especiais de ícones para renderizar ícones.

Coloque texto em marcações em vez de incorporá-los em imagens

Sempre que possível, o texto deve ser texto, não incorporado em imagens. Por exemplo, usar imagens como títulos ou colocar informações de contato, como números de telefone ou endereços, diretamente em imagens impede os usuários de copiar e colar essas informações, além de torná-las inacessíveis para leitores de tela e criar um design não responsivo. O texto deve ser colocado na sua marcação e, se necessário, use fontes da Web para criar o estilo desejado.

Usar CSS para substituir imagens

Navegadores modernos podem usar recursos CSS para criar estilos que anteriormente exigiam imagens. Por exemplo, gradientes complexos podem ser usados com a propriedade background, sombras podem ser criadas usando box-shadow e cantos arredondados podem ser adicionados com a propriedade border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Lembre-se de que o uso dessas técnicas exige ciclos de renderização, que podem ser significativos em dispositivos móveis. Se elas forem utilizadas excessivamente, você perderá qualquer benefício ganho e poderá reduzir o desempenho.