Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Imagens

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 ocupará 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

Exemplo de 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 obter mais exemplos.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Imagens na marcação

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

TL;DR

  • 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.
  • Considere o uso de imagens em linha para reduzir solicitações de arquivos se sua página tiver apenas uma ou duas imagens que não forem usadas em outras áreas do site.

Use 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%; fará com que a largura da imagem seja 50% do contêiner (não 50% da janela de visualização ou 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 façam isso. Por exemplo:

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

Forneça descrições significativas pelo atributo alt em elementos img ; elas tornarão seu site mais acessível, fornecendo contexto para leitores de tela e outras tecnologias de assistência.

Aprimore 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 ao CSS, o srcset permite que o navegador escolha a melhor qualidade de imagem dependendo das características do dispositivos, 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="photo@2x.png 2x" ...>

Navegadores que não oferecem suporte a srcset simplesmente usam o arquivo de imagem padrão especificado pelo atributo src. Por esse motivo, é importante sempre incluir uma imagem de 1x que pode ser exibida em qualquer dispositivo, independentemente dos recursos. Quando srcset é suportado, 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 podem 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

Exemplo de direção de arte

Para alterar 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 diversas versões de uma imagem com base em diferentes características, como o tamanho do dispositivo, a resolução do dispositivo, a orientação e muito mais.

Use 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>

Experimente

No exemplo acima, se a largura do navegador for de pelo menos 800 pixels, será usado head.jpg ou head-2x.jpg, dependendo da resolução do dispositivo. Se o navegador tiver entre 450 e 800 pixels, será usado head-small.jpg ou head-small-2x.jpg, novamente, dependendo da resolução do dispositivo. Para larguras de tela inferiores a 450 pixels e para compatibilidade com versões anteriores nas quais não há suporte ao elemento picture, o navegador renderizará o elemento img e sempre deverá ser incluído.

Imagens com tamanho relativo

Quando tamanho final da imagem não é conhecido, pode ser difícil especificar um descritor de densidade para as fontes de imagem. Isso é especialmente válido 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, o tamanho de cada imagem fornecida pode ser especificado ao adicionar um descritor de largura juntamente com o tamanho do elemento image, permitindo que o navegador calcule automaticamente a densidade de pixels efetiva e escolha a melhor imagem a ser baixada.

<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">

Experimente

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
400 pixels 1 200.png 1x
400 pixels 2 400.png 2x
320 pixels 2 400.png 2.5x
600 pixels 2 800.png 2.67x
640 pixels 3 1000.png 3.125x
1100 pixels 1 1400.png 1.27x

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 parcela.

<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">

Experimente

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

Permita que imagens de produtos possam ser ampliadas

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

Os clientes querem ver 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 deste 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. Crew. 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 compactáveis

A técnica de imagem compactável apresenta uma imagem de 2x altamente compactada para todos os dispositivos, independentemente dos recurso reais do dispositivo em questão. 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.

Experimente

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, obter a largura e a altura da tela e até possivelmente executar o sniffing da conexão de rede via navigator.connection ou emitindo 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.

Imagens em linha: de raster e vetoriais

Existem duas maneiras fundamentalmente diferentes de criar e armazenar imagens — e isso afeta a maneira com a qual 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 são 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 de formatos de arquivo vetoriais em relação aos rasterizados é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Formatos vetoriais descrevem a geometria da imagem — 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, ele precisa estimar como preencher os espaços em branco durante o dimensionamento.

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

Logotipo HTML5, formato PNG Logotipo HTML5, formato SVG

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

O SVG tem um bom suporte em navegadores de computadores e dispositivos móveis e ferramentas de otimização podem reduzir o tamanho do SVG de forma significativa. 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

URIs de dados oferecem uma maneira de incluir um arquivo em linha, como uma imagem, ao definir o src de um elemento img como uma string com codificação Base64 usando o seguinte 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 o 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 tem um bom suporte em navegadores para dispositivos móveis e computadores.

Elementos 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 fundo no CSS; um URI de dados e um SVG:

Vantagens e desvantagens do código em linha

O código de inclusão em linha para imagens pode ser longo — especialmente para URIs de dados — então por que usá-lo? 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 só solicitação.

A desvantagem:

  • Em dispositivos móveis, URIs de dados podem ter uma exibição significativamente mais lenta do que imagens de um src externo.
  • URIs de dados podem aumentar consideravelmente o tamanho de uma solicitação de HTTP.
  • 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 precisar incluir imagens vetoriais em linha, o formato SVG é uma opção muito melhor.

Imagens em CSS

A propriedade do CSS background é 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.

TL;DR

  • 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.
  • Altere 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 reduzir os dispositivos de resolução.

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.

No exemplo abaixo, em telas menores, somente small.png é baixada e aplicada ao div de conteúdo, enquanto em telas maiores, background-image: url(body.png) é aplicado ao corpo e a background-image: url(large.png) is applied to the content 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);
  }
}

Experimente

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

A função image-set() no CSS aprimora a propriedade background de comportamento, facilitando o fornecimento de vários arquivos de imagens para diferentes características de dispositivos. Isso permite que o navegador escolha a melhor qualidade de imagem dependendo das características do dispositivos, 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 dimensionará da forma adequada. Em outras palavras, o navegador presume que imagens de 2x são duas vezes maiores do que imagens de 1x e, dessa forma, reduzirá 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 nos navegadores Chrome e Safari com o prefixo de fornecedor -webkit. Tenha cuidado ao incluir 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  
  );
}

Experimente

O exemplo acima carregará o ativo apropriado em navegadores que oferecem suporte a image-set e, caso contrário, utilizam o ativo de 1x. A ressalva óbvia é que, embora o suporte a image-set() seja baixo, a maioria dos navegadores receberá um ativo 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 a consulta de mídia e você deve 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);
  }
}

Experimente

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 por 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.

TL;DR

  • 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, onde XXXX representa o número do caractere Unicode. Por exemplo:

You're a super &#9733;

You're a 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 estilizados com CSS. O SVG tem diversas vantagens sobre imagens de raster:

  • Imagens SVG 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">.

Experimente

Use fontes de ícone com cautela

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

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 elas 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>).

Experimente

Existem centenas de fontes de ícone gratuitas e pagas, 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.

Otimize imagens para o desempenho

As imagens frequentemente representam a maior parte dos bytes baixados e também ocupam uma parte significativa do espaço visual de uma página. Consequentemente, 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á baixar e exibir todos os ativos.

TL;DR

  • 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.
  • Considere carregar imagens somente após elas entrarem na visualização para melhorar o tempo inicial de carregamento da página e reduzir o peso inicial da página.

Escolha 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 representadas como uma grade de pontos ou pixels individuais. Imagens de raster geralmente são produzidas por uma câmera ou um scanner, ou podem ser criadas no navegador com o elemento canvas. Conforme o tamanho da imagem aumenta, o tamanho do arquivo também cresce. Quando dimensionadas acima do tamanho original, imagens rasterizadas podem ficar desfocadas, pois os navegadores precisam adivinhar como preencher os pixels ausentes.

Imagens vetoriais, como logotipos e desenhos, são definidos 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 o SVG. Como 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 certo, é importante considerar a origem da imagem (rasterizada ou vetorial) e seu conteúdo (cores, animação, texto etc.). Nenhum formato individual se adequa a todos os tipos e cada um tem seus pontos positivos e negativos.

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 os formatos WebP ou PNG.
  • Use PNG em vez de GIF, pois esse formato 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.

Reduza o tamanho do arquivo

É possível reduzir o tamanho do arquivo consideravelmente ao realizar o “pós-processamento” das imagens após salvá-las. 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 da imagem para que ela seja uma prioridade no 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 o formato JPG, experimente jpegtran ou jpegoptim (disponível apenas para Linux; executado com a opção --strip-all). Para o formato PNG, experimente OptiPNG ou PNGOUT.

Use image sprites

Folha de sprites de imagens usada no exemplo

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

Experimente

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

Considere um 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 — pois 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, usuários que procuram informações no rodapé nunca verão o rodapé, pois 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 funções iguais ou semelhantes. Navegadores geram elementos 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 especiais de ícone 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.

Use CSS para substituir imagens

Navegadores modernos podem usar recursos CSS para criar estilos que anteriormente exigiam imagens. Por exemplo: gradientes complexos podem ser usados usando a propriedade background, sombras podem ser criadas usando box-shadow e bordas arredondadas podem ser adicionadas 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.