Imagens responsivas

Uma imagem vale 1.000 palavras, e as imagens são parte integrante de 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 mudar 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), gráficos de alta resolução garantem a nitidez. Uma imagem com 50% de largura pode funcionar muito bem quando o navegador tiver 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

Exemplo de direção de arte

Outras vezes, a imagem pode precisar de alterações mais drásticas: alteração de proporções, cortes e até mesmo substituição da 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

Captura de tela do curso do Udacity

Você sabia que as imagens são responsáveis por 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ê vai aprender várias habilidades e técnicas para integrar imagens responsivas ao seu fluxo de trabalho de desenvolvimento. Ao 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 (em inglês)

Fazer o curso

Imagens na marcação

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

Resumo

  • Use tamanhos relativos de imagens para evitar a sobrecarga acidental do contêiner.
  • 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 lugares do site, use imagens inline para reduzir as solicitações de arquivos.

Usar tamanhos relativos para imagens

Use unidades relativas ao especificar larguras de imagens para evitar 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 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. Elas ajudam a tornar seu site mais acessível ao fornecer contexto aos leitores de tela e outras tecnologias adaptativas.

Melhore os 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. Semelhante à image-set função CSS nativa do CSS, srcset 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 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, ele simplesmente usa 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, somente a densidade de pixels é permitida no momento. 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

Exemplo de direção de arte

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 e resolução do dispositivo, orientação e muito mais.

Use o elemento picture quando uma origem de imagem existir em várias densidades ou quando um design responsivo determinar uma imagem um pouco diferente em alguns tipos de tela. Assim como no 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, será usado head.jpg ou head-2x.jpg, dependendo da resolução do dispositivo. Se o navegador estiver entre 450 e 800 pixels, head-small.jpg ou head-small- 2x.jpg serão usados novamente, 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 tem suporte, o navegador renderiza o elemento img e precisa ser sempre 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 abrangem uma largura proporcional do navegador e são fluidas, dependendo do tamanho do navegador.

Em vez de fornecer tamanhos e densidades de imagem fixos, é possível especificar o tamanho de cada imagem fornecida adicionando um descritor de largura com 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

Considerar 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 tem 25% da largura da janela de visualização. Quando ela tem entre 500 e 600 px, a imagem tem 50% da largura da janela de visualização e, abaixo de 500 px, tem a largura total.

Permita que as imagens de produtos possam ser ampliadas

J. Site da equipe com imagem expansível do produto
J) Site da equipe com imagem ampliável do produto.

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

Um bom exemplo de imagens expansíveis e tocáveis é fornecido pelo J. Site da tripulação. Uma sobreposição que desaparece indica que é possível tocar em uma imagem, oferecendo uma imagem ampliada e 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, independente 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 cai 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 usando window.devicePixelRatio, conferir a largura e a altura da tela e até possivelmente detectar a conexão de rede usando navigator.connection ou emitindo uma solicitação falsa. 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 forma 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 de varredura podem vir de uma câmera ou 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

Com o SVG, é possível incluir gráficos vetoriais responsivos em uma página da Web. A vantagem dos 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 é construída a partir de linhas, curvas, cores e assim por diante. Os formatos rasterizados, por outro lado, só têm informações sobre pontos de cor individuais, de modo que o navegador precisa adivinhar como preencher os espaços em branco 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 telas maiores.

Logotipo HTML5, formato PNG
Logotipo HTML5, formato SVG

Se você quiser reduzir o número de solicitações de arquivos que sua página faz, codifique imagens inline usando o formato SVG ou URI de dados. Se você visualizar o código-fonte desta 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 o tamanho do SVG de maneira significativa. Os dois logotipos SVG inline a seguir parecem idênticos, mas um tem cerca de 3 KB e o outro apenas 2 KB:

URI de dados

Com os URIs de dados, é possível incluir um arquivo inline, como uma imagem, 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 os SVGs, os URIs de dados têm bom 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 tem suporte em dispositivos móveis e computadores. Aqui estão 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 da inclusão em linha

O código inline 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.

A desvantagem:

  • Em dispositivos móveis, a exibição de URIs de dados pode ser significativamente mais lenta do que as 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.
  • Não é possível armazenar URIs de dados em cache. Portanto, faça o download deles 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, a redução do número de solicitações de recursos se tornará menos prioridade.

Assim como em todos os elementos responsivos, é preciso testar o que funciona melhor. Use 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ê precisa incluir imagens vetoriais inline, o SVG é uma opção muito melhor.

Imagens no CSS

A propriedade CSS background é uma ferramenta poderosa para adicionar imagens complexas a elementos, facilitando a adição de várias imagens, fazendo com que elas se repitam e muito mais. Quando combinada com consultas de mídia, a propriedade de segundo plano se torna ainda mais eficiente, permitindo o carregamento condicional de imagem 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 imagens JavaScript ou ao exibir imagens de alta resolução altamente compactadas para diminuir os dispositivos de resolução.

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) 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 com 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 que imagens de 1x. Portanto, ele 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ó 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 ao conjunto de imagens. Caso contrário, ele usa o recurso de 1x. A ressalva óbvia é que, embora o suporte a navegadores para 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

As consultas de mídia podem criar regras com base na proporção de pixels do dispositivo, permitindo a especificação de diferentes imagens 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 são compatíveis com o (min-resolution: 2dppx) padrão, enquanto os navegadores Safari e Android exigem a sintaxe prefixada do fornecedor mais antiga sem a unidade dppx. Esses estilos só são carregados 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 o download da imagem não ser feito se a consulta de mídia não corresponder. Por exemplo, o bg.png só vai ser transferido por download e aplicado à body se a largura do navegador for 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 sempre que 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 variedade de glifos Unicode, que podem ser usados em vez de imagens. Ao contrário de imagens, fontes Unicode podem ser dimensionadas e ter uma boa aparência, seja pequena ou grande 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 &#9733;

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.
  • Elas são semânticas.
  • Elas oferecem melhor acessibilidade com os atributos adequados.
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

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 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.
  • Estilização limitada com CSS.
  • Pode ser difícil posicionar pixels perfeitos, 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

Há centenas de fontes de ícones sem custo financeiro e pagas disponíveis, incluindo Font Awesome, Pictos e Glyphicons.

Equilibre o peso da solicitação HTTP extra e o 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 do espaço visual na página. Como resultado, a otimização de imagens 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 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 o tamanho 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 dela, considere carregar imagens somente depois de elas rolarem para a visualização.

Escolha o formato certo

Há dois tipos de imagens a serem consideradas: imagens vetoriais e imagens rasterizadas. Para imagens de varredura, você também precisa escolher o formato de compactação certo, 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 de varredura geralmente vêm de 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 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 (rasterizada ou vetorial) e o conteúdo (cores, animação, texto etc.). Nenhum formato se encaixa em todos os tipos de imagem, e cada um 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 desenhos. Se uma arte vetorial não estiver disponível, tente WebP ou PNG.
  • Use PNG em vez de GIF, já que ele permite mais cores e oferece taxas de compactação melhores.
  • Para animações mais longas, use o <video>, que proporciona uma melhor qualidade de imagem e dá ao usuário controle sobre a reprodução.

Reduzir o tamanho do arquivo

É possível reduzir consideravelmente o tamanho do arquivo de imagem 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 imagens para que ela seja integrada ao seu fluxo de trabalho.

Várias ferramentas estão disponíveis para realizar uma compactação maior e sem perdas em arquivos JPG e PNG, sem efeito na qualidade da imagem. Para JPG, tente jpegtran ou jpegOptimizing (disponível apenas no Linux; execute com a opção --strip-all). Para PNG, use OptiPNG ou PNGOUT.

Usar sprites de imagens

Folha de sprite de imagem usada no exemplo

Os sprites 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 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 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 infinita.

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 ver esse conteúdo. Além disso, os usuários que procuram informações no rodapé nunca o veem porque há sempre um novo conteúdo 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 funcionalidade igual ou semelhante. Os navegadores geram recursos visuais que anteriormente exigiam imagens. Isso significa que os navegadores não precisam mais fazer o download de arquivos de imagem separados, evitando imagens dimensionadas de forma inadequada. Você pode usar Unicode ou fontes de ícone especiais para renderizar ícones.

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

Sempre que possível, o texto deve ser texto e não incorporado em 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 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 webfonts para criar o estilo que você precisa.

Usar CSS para substituir imagens

Os navegadores mais recentes 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 requer ciclos de renderização, que podem ser significativos em dispositivos móveis. Se usado em excesso, você perderá qualquer benefício recebido e poderá prejudicar a performance.