Imagens responsivas

Uma imagem vale mais que mil palavras, e as imagens são parte integrante de todas as páginas. Mas eles também costumam ser responsáveis pela maior parte dos bytes baixados. Com o Web design responsivo, não apenas os layouts podem mudar com base nas características do dispositivo, mas também as imagens.

Pete LePage

O web design responsivo significa que não apenas 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 ocupa 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

Em outros casos, pode ser necessário mudar a imagem de forma mais drástica: alterar as proporções, cortar e até mesmo substituir a imagem inteira. Nesse caso, mudar a imagem geralmente é chamado de direção de arte. Consulte responsiveimages.org/demos/ para mais exemplos.

Imagens responsivas

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

Neste curso, você vai aprender a trabalhar com imagens na Web moderna para que elas fiquem ótimas e carreguem rapidamente em qualquer dispositivo.

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

Este é um curso sem custo financeiro oferecido pelo Udacity

Faça o curso

Imagens na marcação

O elemento img é poderoso: ele faz o download, decodifica e renderiza conteúdo, e os navegadores mais recentes 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 requer apenas alguns pequenos ajustes para criar uma boa experiência.

Resumo

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

Usar tamanhos relativos para imagens

Lembre-se de usar unidades relativas ao especificar larguras para imagens para evitar que elas transbordem acidentalmente 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 o limite. Exemplo:

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

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

Melhorar imgs com srcset para dispositivos de alta DPI

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

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

Em navegadores que não são compatíveis com srcset, o navegador usa o arquivo de imagem padrão especificado pelo atributo src. Por isso, é importante sempre incluir uma imagem de 1x que possa ser exibida em qualquer dispositivo, independentemente dos recursos. Quando srcset é compatível, a lista de imagens/condições separada por vírgulas é analisada antes de qualquer solicitação, e apenas a imagem mais adequada é baixada e exibida.

Embora as condições possam incluir tudo, desde a densidade de pixels até a largura e a altura, apenas a densidade de pixels é bem aceita atualmente. Para equilibrar o comportamento atual com os recursos futuros, basta fornecer a imagem 2x no atributo.

Direção de arte em imagens responsivas com picture

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

Observação : o elemento picture está começando a ser lançado nos navegadores. Embora ainda não esteja disponível em todos os navegadores, recomendamos o uso devido à forte compatibilidade com versões anteriores e ao possível uso do polyfill Picturefill. Consulte o site ResponsiveImages.org para mais detalhes.

Use o elemento picture quando uma origem de imagem existir em várias densidades ou quando um design responsivo ditar uma imagem um pouco diferente em alguns tipos de tela. Assim como no elemento video, é possível incluir vários elementos source, o que permite especificar 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>

Testar

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 px e 800 px, head-small.jpg ou head-small- 2x.jpg será usado, dependendo da resolução do dispositivo. Para larguras de tela menores que 450 px e compatibilidade com versões anteriores em que o elemento picture não é compatível, o navegador renderiza o elemento img, que 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 é especialmente verdadeiro 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, você pode especificar o tamanho de cada imagem fornecida adicionando um descritor de largura com o tamanho do elemento de imagem, permitindo que o navegador calcule automaticamente a densidade de pixels efetiva e escolha a melhor imagem para download.

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

Testar

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 eficaz
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
1100px	1	800.png	1.45x

Considere os 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, talvez você queira que a imagem abranja toda a largura da janela de visualização, enquanto em telas maiores, ela deve ocupar apenas uma pequena proporção.

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

Testar

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

Permitir que as imagens de produtos sejam expandidas

J. Site da Crew com imagem de produto expansível.

Os clientes querem ver o que estão comprando. Em sites de varejo, os usuários esperam poder ver close-ups de alta resolução dos produtos para conferir melhor os detalhes, e os participantes do estudo ficaram frustrados quando não conseguiram fazer isso.

Um bom exemplo de imagens expansíveis e clicáveis é fornecido pela J. Site da equipe. Uma sobreposição que desaparece indica que uma imagem pode ser tocada, fornecendo uma imagem ampliada com detalhes visíveis.

Outras técnicas de imagem

Imagens compressivas

A técnica de imagem compressiva oferece uma imagem 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.

Testar

Atenção : tenha cuidado com a técnica de compactação devido ao aumento dos custos de memória e decodificação que ela exige. Redimensionar imagens grandes para caber em telas menores é um processo caro e pode ser particularmente difícil em dispositivos de baixo custo, em que a memória e o processamento são limitados.

Substituição de imagem em JavaScript

A substituição de imagens em JavaScript verifica os recursos do dispositivo e "faz o que é certo". É possível determinar a proporção de pixels do dispositivo usando window.devicePixelRatio, conferir a largura e a altura da tela e até mesmo fazer uma detecção de 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 de antecipação seja concluído. Isso significa que o download das imagens só vai começar depois que o evento pageload for acionado. Além disso, o navegador provavelmente vai fazer o download das imagens 1x e 2x, o que aumenta o peso da página.

Imagens inline: rasterizadas e vetoriais

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

Imagens rasterizadas, como fotografias e outras imagens, são representadas como uma grade de pontos de cor individuais. As imagens rasterizadas 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.

As imagens vetoriais, como logotipos e desenhos de traço, 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 possibilita incluir gráficos vetoriais responsivos em uma página da Web. A vantagem dos formatos de arquivo vetorial em relação aos formatos de arquivo rasterizado é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Os formatos vetoriais descrevem a geometria da imagem, ou seja, como ela é construída com linhas, curvas, cores etc. Os formatos rasterizados, por outro lado, só têm informações sobre pontos de cor individuais, então 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 uma SVG à direita. O SVG fica ótimo em qualquer tamanho, enquanto o PNG ao lado dele começa a ficar desfocado em tamanhos de exibição maiores.

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

O SVG tem ótimo suporte em dispositivos móveis e computadores, e as ferramentas de otimização podem reduzir significativamente o tamanho do SVG. 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 arquivos in-line (como imagens) definindo o atributo src do elemento img como uma string codificada em Base64 com este formato:

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

O início do código do logotipo HTML5 acima é assim:

<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 são compatíveis com navegadores para dispositivos móveis e computadores.

Inlining em CSS

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

Prós e contras do inlining

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

Por outro lado:

• Em dispositivos móveis, os URIs de dados podem ser significativamente mais lentos para exibição do que as imagens de um src externo.
• Os 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.
• Os URIs de dados não podem ser armazenados em cache, então precisam ser baixados para cada página em que são usados.
• Eles não são compatíveis com o IE 6 e 7, e o suporte é incompleto no IE8.
• Com o HTTP/2, reduzir o número de solicitações de recursos será menos prioritário.

Como em tudo que é responsivo, você precisa 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, os 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 nenhum outro lugar. Se você precisar de imagens vetoriais inline, o SVG é uma opção muito melhor.

Imagens em CSS

A propriedade CSS background é uma ferramenta poderosa para adicionar imagens complexas a elementos, facilitando a adição de várias imagens e fazendo com que elas se repitam, entre outras coisas. Quando combinada com consultas de mídia, a propriedade de plano de fundo se torna ainda mais poderosa, 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 para as características da tela, considerando o tamanho, a resolução do dispositivo e o layout da página.
• Mude a propriedade background-image no CSS para telas de alta 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 1x na marcação.
• Considere os custos de desempenho ao usar técnicas de substituição de imagens em JavaScript ou ao exibir imagens de alta resolução altamente compactadas para dispositivos de baixa 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. Elas também podem ser usadas para carregar imagens condicionalmente ou fornecer direção de arte, dependendo da largura da janela de visualização.

Por exemplo, no exemplo abaixo, em telas menores, apenas small.png é baixado 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);
  }
}

Testar

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

A função image-set() em CSS melhora a propriedade de comportamento background, facilitando o fornecimento de vários arquivos de imagem para diferentes características de dispositivo. Isso permite que o navegador escolha a melhor imagem de acordo com as características do dispositivo, por exemplo, usando uma imagem 2x em uma tela 2x ou uma imagem 1x em um dispositivo 2x quando estiver em uma rede de largura de banda limitada.

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

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

O suporte para image-set() ainda é novo e só está disponível no Chrome e no Safari com o prefixo de fornecedor -webkit. Inclua uma imagem substituta para quando image-set() não for compatível. 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
  );
}

Testar

O código acima carrega o recurso apropriado em navegadores compatíveis com image-set. Caso contrário, ele usa o recurso 1x. A ressalva óbvia é que, embora o suporte do navegador image-set() seja baixo, a maioria dos navegadores recebe o recurso 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, o que possibilita especificar imagens diferentes para telas de 2x e 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 padrão (min-resolution: 2dppx), enquanto os navegadores Safari e Android exigem a sintaxe mais antiga com prefixo do fornecedor, sem a unidade dppx. Lembre-se de que esses estilos só serão carregados se o dispositivo corresponder à consulta de mídia, e você precisa especificar estilos para o caso base. Isso também garante que algo seja renderizado se o navegador não for compatível com 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);
  }
}

Testar

Também é possível usar a sintaxe min-width para exibir imagens alternativas dependendo do tamanho da janela de visualização. Essa técnica tem a vantagem de que a imagem não é transferida por download se a consulta de mídia não corresponder. Por exemplo, bg.png só é baixado e aplicado ao body se a largura do navegador for de 500 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 rasterizadas.

Substituir ícones simples por Unicode

Muitas fontes são compatíveis com uma infinidade de glifos Unicode, que podem ser usados em vez de imagens. Ao contrário das imagens, as fontes Unicode são dimensionadas bem e ficam boas, não importa o tamanho em que aparecem 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 forma que as entidades nomeadas: &#XXXX, em que XXXX representa o número do caractere Unicode. Exemplo:

You're a super ★

Você é uma superestrela ★

Substituir ícones complexos por SVG

Para requisitos de ícones 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 em relação às imagens rasterizadas:

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

Testar

Usar fontes de ícones com cuidado

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

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

• Eles são gráficos vetoriais que podem ser dimensionados infinitamente, mas podem ser suavizados, resultando em ícones que não são tão nítidos quanto o esperado.
• Estilo limitado com CSS.
• O posicionamento perfeito de pixels pode ser difícil, dependendo da altura da linha, do espaçamento entre letras etc.
• Eles não são semânticos e podem ser difíceis de usar com leitores de tela ou outras tecnologias adaptativas.
• A menos que sejam devidamente limitados, eles podem resultar em um arquivo grande para usar 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>).

Testar

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 adicional e o tamanho do arquivo com a necessidade dos ícones. Por exemplo, se você precisar de apenas alguns ícones, talvez seja melhor usar uma imagem ou um sprite de imagem.

Otimizar imagens para melhorar o desempenho

As imagens geralmente representam a maior parte dos bytes baixados e também ocupam uma quantidade significativa do espaço visual na página. Como resultado, a otimização de imagens geralmente 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 recursos.

Resumo

• Não escolha um formato de imagem aleatoriamente. Entenda os diferentes formatos da imagem 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 sprites de imagem.
• Para melhorar o tempo de carregamento inicial da página e reduzir o peso inicial dela, carregue as imagens somente depois que elas forem exibidas na tela.

Escolha o formato certo

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

As imagens rasterizadas, como fotografias e outras imagens, são representadas como uma grade de pontos ou pixels individuais. As imagens rasterizadas normalmente vêm de uma câmera ou scanner ou podem ser criadas no navegador com o elemento canvas. À medida que o tamanho da imagem aumenta, o tamanho do arquivo também aumenta. Quando dimensionadas para um tamanho maior que o original, as imagens rasterizadas ficam desfocadas porque o navegador precisa adivinhar como preencher os pixels ausentes.

As imagens vetoriais, como logotipos e desenhos de linha, são definidas por um conjunto de curvas, linhas, formas e cores de preenchimento. As 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 com primitivas 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 adapta a todos os tipos de imagem, e cada um tem seus próprios pontos fortes e fracos.

Comece com estas diretrizes ao escolher o formato apropriado:

• Use JPG para imagens fotográficas.
• Use SVG para arte vetorial e gráficos de cores sólidas, como logotipos e desenhos de linha. Se a arte vetorial não estiver disponível, tente WebP ou PNG.
• Use PNG em vez de GIF, porque ele permite mais cores e oferece melhores taxas de compactação.
• Para animações mais longas, use <video>, que oferece melhor qualidade de imagem e permite que o usuário controle 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 salvar. Há várias ferramentas para compactação de imagens: com e sem perda, on-line, GUI, 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.

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

Usar sprites de imagem

O CSS Sprites é uma técnica em que várias imagens são combinadas em uma única imagem de "folha de sprite". Em seguida, você pode usar imagens individuais especificando a imagem de plano de fundo de um elemento (a folha de sprites) 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;
}

Testar

O spriting tem a vantagem de reduzir o número de downloads necessários para receber várias imagens, além de permitir o armazenamento em cache.

Considere o carregamento lento

O carregamento lento pode acelerar significativamente o carregamento em 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 melhorar a performance, o 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 se torna visível, os mecanismos de pesquisa podem nunca detectá-lo. Além disso, os usuários que procuram informações que esperam ver no rodapé nunca as encontram porque novos conteúdos são sempre carregados.

Evite imagens completamente

Às vezes, a melhor imagem não é uma imagem. Sempre que possível, use os recursos nativos do navegador para oferecer a mesma funcionalidade ou uma semelhante. Os navegadores geram recursos visuais que antes exigiam imagens. Isso significa que os navegadores não precisam mais baixar arquivos de imagem separados, evitando imagens com escala inadequada. É possível usar fontes de ícones especiais ou Unicode para renderizar ícones.

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

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

Usar CSS para substituir imagens

Os navegadores mais recentes podem usar recursos CSS para criar estilos que antes exigiam 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>

O uso dessas técnicas requer ciclos de renderização, que podem ser significativos em dispositivos móveis. Se usado em excesso, você vai perder todos os benefícios que pode ter conquistado, e isso pode prejudicar a performance.