Imagens responsivas

Uma imagem vale 1.000 palavras, e as imagens são essenciais em todas as páginas. Mas eles geralmente representam a maioria dos bytes transferidos por download. Com o Web design responsivo, não só nossos layouts podem ser alterados com base nas características do dispositivo, mas as imagens também.

O Web design responsivo significa que não só nossos layouts podem mudar com base nas características do dispositivo, mas o conteúdo também pode mudar. Por exemplo, em telas de alta resolução (2x), os gráficos de alta resolução garantem a nitidez. Uma imagem com 50% de largura pode funcionar bem quando o navegador tem 800 px de largura, mas usa muito espaço em um smartphone estreito e requer a mesma sobrecarga de largura de banda quando reduzida para caber em uma tela menor.

Direção de arte

Outras vezes, a imagem pode precisar ser alterada de maneira mais drástica: alterando as proporções, cortando e até substituindo a imagem inteira. Nesse caso, a mudança da imagem é geralmente chamada de direção de arte. Consulte responsiveimages.org/demos/ para ver mais exemplos.

Imagens responsivas

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

Neste curso, você aprenderá a trabalhar com imagens na Web moderna para que suas imagens fiquem ótimas e sejam carregadas rapidamente em qualquer dispositivo.

Ao longo do curso, você aprenderá várias habilidades e técnicas para integrar facilmente imagens responsivas ao seu fluxo de trabalho de desenvolvimento. No final do curso, você vai desenvolver imagens que se adaptam e respondem a diferentes tamanhos de janela de visualização e cenários de uso.

Este é um curso sem custo financeiro oferecido pela Udacity (link em inglês)

Fazer o curso

Imagens na marcação

O elemento img é eficiente e faz o download, decodifica e renderiza conteúdo. Os navegadores modernos são compatíveis com vários formatos de imagem. Incluir imagens que funcionam em vários dispositivos não é diferente do que para computadores e exige apenas alguns pequenos ajustes para criar uma boa experiência.

Resumo

• Use tamanhos relativos para imagens para evitar que ultrapassem o contêiner acidentalmente.
• Use o elemento picture quando quiser especificar imagens diferentes, dependendo das características do dispositivo (também conhecida 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 e elas não forem usadas em outros locais do site, use imagens in-line para reduzir as solicitações de arquivos.

Usar tamanhos relativos para imagens

Use unidades relativas ao especificar larguras de imagens para evitar que elas excedam a janela de visualização acidentalmente. 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 do pixel).

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

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

Forneça descrições significativas com o atributo alt nos elementos img. Isso ajuda a tornar o site mais acessível, fornecendo contexto a leitores de tela e outras tecnologias adaptativas.

Melhore imgs com srcset para dispositivos de DPI alto

O atributo srcset melhora o comportamento do elemento img, facilitando o fornecimento de vários arquivos de imagem para diferentes características do dispositivo. Assim como a image-set função CSS nativa do CSS, o srcset permite que o navegador escolha a melhor imagem de acordo com as características do dispositivo. Por exemplo, use uma imagem de 2x em uma tela de 2x e, possivelmente no futuro, uma imagem de 1x em um dispositivo de 2x em uma rede com largura de banda limitada.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Em navegadores que não oferecem suporte a srcset, eles simplesmente usam o arquivo de imagem padrão especificado pelo atributo src. Por isso, é importante sempre incluir uma imagem de 1x que pode ser mostrada em qualquer dispositivo, independente dos recursos. Quando srcset é aceito, a lista separada por vírgulas de imagem/condições é analisada antes de fazer qualquer solicitação, e apenas a imagem mais apropriada é transferida por download e exibida.

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

Direção de arte em imagens responsivas com o picture

Para mudar imagens com base nas características do dispositivo, também conhecidas 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 e resolução do dispositivo, orientação e muito mais.

Use o elemento picture quando uma fonte de imagem existir em várias densidades ou quando um design responsivo definir uma imagem um pouco diferente em alguns tipos de tela. De forma 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 vão ser usados novamente, dependendo da resolução do dispositivo. Para larguras de tela menores que 450 px e compatibilidade com versões anteriores em que não há suporte para o elemento picture, o navegador renderiza o elemento img e precisa sempre ser incluído.

Imagens de tamanho relativo

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

Em vez de fornecer tamanhos e densidades fixos de imagem, é possível especificar o tamanho de cada imagem fornecida adicionando um descritor de largura e o tamanho do elemento de imagem. Isso permite 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 mudar 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. Já em telas maiores, ela precisa 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 px, a imagem ocupará 25% da largura da janela de visualização. Quando ela estiver entre 500 e 600 px, a imagem terá 50% da largura da janela de visualização e, abaixo de 500 px, terá a largura total.

Permita que as imagens dos produtos possam ser ampliadas

Os clientes querem saber o que estão comprando. Em sites de varejo, os usuários esperam poder ver closes de produtos em alta resolução para analisar melhor os detalhes, e os participantes do estudo ficaram frustrados se não conseguiram.

Um bom exemplo de imagens tocáveis e expansíveis é fornecido pelo J. local da tripulação. Uma sobreposição que desaparece indica que é possível tocar em uma imagem, proporcionando uma imagem ampliada com detalhes visíveis.

Outras técnicas de imagem

Imagens compactas

A técnica de imagem compacta exibe 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 da imagem pode não parecer mudar, mas o tamanho do arquivo diminui significativamente.

Faça um teste

Substituição de imagem JavaScript

A substituição de imagem JavaScript verifica os recursos do dispositivo e "faz a coisa certa". É possível determinar a proporção de pixels do dispositivo com window.devicePixelRatio, conferir a largura e a altura da tela e até possivelmente detectar a conexão de rede via navigator.connection ou emitir uma solicitação falso. Depois de coletar todas essas informações, você pode decidir qual imagem carregar.

Uma grande desvantagem dessa abordagem é que o uso do JavaScript significa que você vai 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 disparado. Além disso, o navegador provavelmente fará o download das imagens de 1x e 2x, resultando no aumento do peso da página.

Imagens inline: rasterizadas e vetoriais

Há duas maneiras fundamentalmente diferentes de criar e armazenar imagens, e isso afeta a maneira como você implanta imagens de maneira responsiva.

Imagens rasterizadas, como fotos e outras imagens, são representadas como uma grade de pontos de cor individuais. As imagens rasterizadas podem vir de uma câmera ou um scanner ou ser criadas com o elemento de tela 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. As imagens vetoriais podem ser criadas com programas como o Adobe Illustrator ou o Inkscape ou escritas à mão em código usando um formato vetorial, como SVG.

SVG

O SVG permite incluir gráficos vetoriais responsivos em uma página da Web. A vantagem dos formatos de arquivo vetoriais sobre os rasterizados é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Formatos vetoriais descrevem a geometria da imagem, ou seja, como ela é construída a partir de linhas, curvas, cores e assim por diante. Os formatos raster, por outro lado, só têm informações sobre pontos individuais de cor, de modo que o navegador precisa adivinhar como preencher as lacunas ao dimensionar.

Confira abaixo duas versões da mesma imagem: uma imagem PNG à esquerda e um SVG à direita. O SVG tem uma ótima aparência em qualquer tamanho, enquanto o PNG ao lado dele começa a parecer desfocado em tamanhos de exibição maiores.

Se quiser reduzir o número de solicitações de arquivos que sua página faz, codifique as imagens inline usando o formato SVG ou URI de dados. Se você visualizar a origem dessa página, vai notar que os dois logotipos abaixo são declarados inline: um URI de dados e um SVG.

O SVG tem um suporte excelente em dispositivos móveis e computadores, e as ferramentas de otimização podem reduzir significativamente o tamanho do SVG. Os dois logotipos SVG inline a seguir parecem idênticos, mas um tem cerca de 3 KB e o outro só tem 2 KB:

URI de dados

Os URIs de dados oferecem uma maneira de incluir um arquivo, como uma imagem, inline, definindo o src de um elemento img como uma string codificada em Base64 usando o seguinte formato:

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

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

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

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

Ferramentas de 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, os URIs de dados têm suporte em navegadores para dispositivos móveis e computadores.

In-line no CSS

URIs de dados e SVGs também podem ser inline no CSS, e isso é compatível com dispositivos móveis e computadores. Veja duas imagens idênticas implementadas como imagens de plano de fundo no CSS: um URI de dados e um SVG:

Prós e contras da inserção em linha

O código embutido para imagens pode ser detalhado, especialmente URIs de dados. Então, por que você usaria esse código? 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.

Desvantagem:

• Em dispositivos móveis, a exibição de URIs de dados pode ser significativamente mais lenta para exibição do que imagens de um src externo.
• URIs de dados podem aumentar consideravelmente o tamanho de uma solicitação HTML.
• Eles adicionam complexidade à marcação e ao fluxo de trabalho.
• O formato de URI de dados é consideravelmente maior 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 e, portanto, devem ser baixados para cada página em que são usados.
• Eles não são suportados no IE 6 e 7 e o suporte é incompleto no IE8.
• Com o HTTP/2, reduzir o número de solicitações de recursos se torna uma prioridade menor.

Assim como tudo o que é responsivo, é preciso testar o que funciona melhor. Use as ferramentas para desenvolvedores para medir 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 tem apenas uma ou duas fotos que não são usadas em outros lugares. Se você precisar inserir imagens vetoriais inline, o SVG é uma opção muito melhor.

Imagens em CSS

A propriedade CSS background é uma ferramenta eficiente para adicionar imagens complexas a elementos, facilitando a inclusão de várias imagens, fazendo com que elas se repitam, e muito mais. Quando combinada com consultas de mídia, a propriedade "Background" se torna ainda mais eficiente, 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 com DPI alto 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 imagem JavaScript ou ao exibir imagens de alta resolução altamente compactadas para dispositivos com uma resolução mais baixa.

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

As consultas de mídia não afetam apenas 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 o small.png é transferido por download e aplicado 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 melhora a propriedade background de comportamento, facilitando o fornecimento de vários arquivos de imagem para diferentes características do dispositivo. Isso permite que o navegador escolha a melhor imagem, dependendo das características do dispositivo, por exemplo, usando uma imagem de 2x em uma tela de 2x ou 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. Em outras palavras, o navegador presume que imagens de 2x são duas vezes maiores que imagens de 1x. Portanto, ele reduz a imagem de 2x em 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ó pode ser usado no Chrome e no Safari com o prefixo de fornecedor -webkit. Inclua uma imagem de fallback 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 para image-set. Caso contrário, ele retorna para o recurso de 1x. A ressalva óbvia é que, embora o suporte para navegador image-set() seja baixo, a maioria dos navegadores recebe o recurso de 1x.

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

As consultas de mídia podem criar regras com base na proporção de pixels do dispositivo, permitindo a especificação de imagens diferentes para telas de 2x ou 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 do fornecedor mais antiga sem a unidade dppx. Lembre-se de que esses estilos só serão carregados se o dispositivo corresponder à consulta de mídia, e você precisará especificar estilos para o caso base. Isso também oferece a vantagem de garantir que algo seja renderizado se o navegador não oferecer suporte a consultas de mídia específicas de resolução.

.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 transferida por download se a consulta de mídia não for correspondente. Por exemplo, o bg.png só vai ser transferido por download e aplicado a body se a largura do navegador for de 500 px ou mais:

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

Usar 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 de varredura.

Substituir ícones simples por Unicode

Muitas fontes incluem suporte para uma infinidade de glifos Unicode, que podem ser usados em vez de imagens. Ao contrário de imagens, fontes Unicode são bem dimensionadas e têm uma boa aparência, não importa quão pequenas ou grandes apareçam 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 (♞).

A inclusão de um caractere Unicode é feita da mesma maneira que entidades nomeadas: &#XXXX, em que XXXX representa o número do caractere Unicode. Exemplo:

You're a super ★

Você é demais ★

Substituir í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 várias vantagens sobre imagens de raster:

• Eles são gráficos vetoriais que podem ser infinitamente dimensionados.
• Os efeitos de CSS, como cor, sombreamento, transparência e animações, são simples.
• As imagens SVG podem ser inline diretamente no documento.
• Eles são semânticos.
• Elas oferecem melhor acessibilidade 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

Usar fontes de ícones com cuidado

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

• Eles são gráficos vetoriais que podem ser infinitamente dimensionados, mas podem ter suavização, resultando em ícones que não são tão nítidos quanto o esperado.
• Estilo limitado com CSS.
• O posicionamento perfeito do pixel pode ser difícil, dependendo da altura da linha, do espaçamento entre letras etc.
• Elas não são semânticas e podem ser difíceis de usar com leitores de tela ou outras tecnologias adaptativas.
• A menos que o escopo seja definido corretamente, eles 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 ícones sem custo financeiro e pagas, incluindo Font Awesome, Pictos e Glyphicons.

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

Otimizar imagens para melhorar o desempenho

As imagens geralmente representam a maioria dos bytes transferidos por download e também ocupam uma quantidade significativa de espaço visual na página. Como resultado, a otimização das imagens geralmente pode gerar algumas das maiores economias de bytes e melhorias de desempenho para seu site: quanto menos bytes o navegador precisar transferir por download, 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 aleatoriamente. 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 o tamanho dos arquivos.
• Coloque imagens usadas com frequência em image sprites para reduzir o número de solicitações HTTP.
• Para melhorar o tempo inicial de carregamento da página e reduzir o peso inicial, considere carregar imagens somente depois de elas estarem na visualização.

Escolha o formato certo

Há dois tipos de imagens a serem considerados: imagens vetoriais e imagens de varredura. 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. As imagens rasterizadas geralmente vêm de uma câmera ou de um 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 rasterizadas 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 o Adobe Illustrator ou o Inkscape e salvas em um formato vetorial, como SVG. Como as imagens vetoriais são criadas em primitivos simples, elas podem ser dimensionadas sem perda de qualidade ou mudança 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 encaixa em todos os tipos de imagem, e cada uma tem os próprios pontos fortes e fracos.

Comece com estas diretrizes ao escolher o formato apropriado:

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

Reduzir o tamanho do arquivo

É possível reduzir o tamanho do arquivo consideravelmente fazendo o "pós-processamento" das imagens depois de salvá-las. Existem várias ferramentas de compactação de imagens: com e sem perda, on-line, de GUI e linha de comando. Sempre que possível, é melhor tentar automatizar a otimização de imagem para que ela seja integrada ao fluxo de trabalho.

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

Usar sprites de imagem

Os sprites de CSS são uma técnica em que várias imagens são combinadas em uma única imagem de "folha de sprite". Você pode usar imagens individuais especificando a imagem de plano de fundo de um elemento (a folha de sprite) e um deslocamento para mostrar 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 combinação em sprites tem a vantagem de reduzir o número de downloads necessários para conseguir várias imagens, além de permitir o armazenamento em cache.

Considere o carregamento lento

O carregamento lento pode acelerar significativamente o carregamento de páginas longas que incluem muitas imagens abaixo da dobra, carregando-as conforme necessário ou quando o conteúdo principal terminar de ser carregado e renderizado. Além de melhorias na performance, o uso do carregamento lento pode criar experiências de rolagem infinitas.

Tenha cuidado ao criar páginas de rolagem infinita. Como o conteúdo é carregado à medida que fica visível, os mecanismos de pesquisa podem nunca acessá-lo. Além disso, os usuários que procuram informações no rodapé nunca vêm o rodapé porque um novo conteúdo é sempre carregado.

Evite usar imagens

Às vezes, a melhor imagem é a que não existe. Sempre que possível, use os recursos nativos do navegador para fornecer funcionalidades iguais ou semelhantes. Os navegadores geram recursos visuais que anteriormente exigiriam 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 de ícone especiais para renderizar ícones.

Inserir texto na marcação em vez de incorporá-lo em imagens

Sempre que possível, o texto deve ser texto e não incorporado a imagens. Por exemplo, usar imagens como títulos ou inserir dados de contato, como números de telefone ou endereços, diretamente em imagens impede que os usuários copiem e colem as informações. Isso torna as informações inacessíveis para leitores de tela e não é responsiva. Em vez disso, coloque o texto na sua marcação e, se necessário, use fontes da Web para criar o estilo que você quer.

Usar CSS para substituir imagens

Os navegadores modernos podem usar recursos CSS para criar estilos que anteriormente exigiriam imagens. Por exemplo: gradientes complexos podem ser criados usando 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 em excesso, você perderá qualquer benefício ganho e isso poderá prejudicar a performance.