Uma imagem vale 1.000 palavras, e as imagens são essenciais em todas as páginas. Mas eles geralmente representam a maioria dos bytes transferidos por download. Com o Web design responsivo, não só nossos layouts podem ser alterados com base nas características do dispositivo, mas as imagens também.
O Web design responsivo significa que não só nossos layouts podem mudar com base nas características do dispositivo, mas o conteúdo também pode mudar. Por exemplo, em telas de alta resolução (2x), os gráficos de alta resolução garantem a nitidez. Uma imagem com 50% de largura pode funcionar bem quando o navegador tem 800 px de largura, mas usa muito espaço em um smartphone estreito e requer a mesma sobrecarga de largura de banda quando reduzida para caber em uma tela menor.
Direção de arte

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

Você sabia que as imagens representam mais de 60% dos bytes em média necessários para carregar uma página da Web?
Neste curso, você aprenderá a trabalhar com imagens na Web moderna para que suas imagens fiquem ótimas e sejam carregadas rapidamente em qualquer dispositivo.
Ao longo do curso, você aprenderá várias habilidades e técnicas para integrar facilmente imagens responsivas ao seu fluxo de trabalho de desenvolvimento. No final do curso, você vai desenvolver imagens que se adaptam e respondem a diferentes tamanhos de janela de visualização e cenários de uso.
Este é um curso sem custo financeiro oferecido pela Udacity (link em inglês)
Imagens na marcação
O elemento img
é eficiente e faz o download, decodifica e renderiza
conteúdo. Os navegadores modernos são compatíveis com vários formatos de imagem. Incluir
imagens que funcionam em vários dispositivos não é diferente do que para computadores e exige
apenas alguns pequenos ajustes para criar uma boa experiência.
Resumo
- Use tamanhos relativos para imagens para evitar que ultrapassem o contêiner acidentalmente.
- Use o elemento
picture
quando quiser especificar imagens diferentes, dependendo das características do dispositivo (também conhecida como direção de arte). - Use
srcset
e o descritorx
no elementoimg
para dar dicas ao navegador sobre a melhor imagem a ser usada ao escolher entre diferentes densidades. - Se a página tiver apenas uma ou duas imagens e elas não forem usadas em outros locais do site, use imagens in-line para reduzir as solicitações de arquivos.
Usar tamanhos relativos para imagens
Use unidades relativas ao especificar larguras de imagens para evitar que elas
excedam a janela de visualização acidentalmente. Por exemplo, width: 50%;
faz com que
a largura da imagem seja 50% do elemento que a contém (não 50% da janela de visualização ou
50% do tamanho real do pixel).
Como o CSS permite que o conteúdo ultrapasse o contêiner, talvez seja necessário usar max-width: 100% para evitar que imagens e outros conteúdos ultrapassem. Exemplo:
img, embed, object, video {
max-width: 100%;
}
Forneça descrições significativas com o atributo alt
nos elementos
img
. Isso ajuda a tornar o site mais acessível, fornecendo contexto a leitores
de tela e outras tecnologias adaptativas.
Melhore img
s com srcset
para dispositivos de DPI alto
O atributo srcset
melhora o comportamento do elemento
img
, facilitando o fornecimento de vários arquivos de imagem
para diferentes características do dispositivo. Assim como a image-set
função CSS
nativa do CSS, o srcset
permite que o navegador escolha a melhor
imagem de acordo com as características do dispositivo. Por exemplo, use
uma imagem de 2x em uma tela de 2x e, possivelmente no futuro, uma imagem de 1x em
um dispositivo de 2x em uma rede com largura de banda limitada.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
Em navegadores que não oferecem suporte a srcset
, eles simplesmente usam o arquivo de imagem
padrão especificado pelo atributo src
. Por isso, é importante
sempre incluir uma imagem de 1x que pode ser mostrada em qualquer dispositivo, independente dos
recursos. Quando srcset
é aceito, a lista separada por vírgulas de
imagem/condições é analisada antes de fazer qualquer solicitação, e apenas a imagem mais
apropriada é transferida por download e exibida.
Embora as condições possam incluir desde a densidade de pixels até a largura e altura, apenas a densidade de pixels é compatível atualmente. Para equilibrar o comportamento atual com recursos futuros, forneça apenas a imagem de 2x no atributo.
Direção de arte em imagens responsivas com o picture

Para mudar imagens com base nas características do dispositivo, também conhecidas como direção
de arte, use o elemento picture
. O elemento
picture
define uma solução declarativa para
fornecer várias versões de uma imagem com base em diferentes
características, como tamanho e resolução do dispositivo, orientação
e muito mais.
Use o elemento picture
quando uma fonte de imagem
existir em várias densidades ou quando um design responsivo definir uma
imagem um pouco diferente em alguns tipos de tela. De forma semelhante ao elemento
video
, vários elementos source
podem
ser incluídos, possibilitando a especificação de diferentes arquivos de imagem,
dependendo das consultas de mídia ou do formato da imagem.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
No exemplo acima, se a largura do navegador for de pelo menos 800 px,
head.jpg
ou head-2x.jpg
será usado, dependendo da resolução do dispositivo. Se o
navegador estiver entre 450 e 800 pixels, head-small.jpg
ou head-small-
2x.jpg
vão ser usados novamente, dependendo da resolução do dispositivo. Para larguras de tela
menores que 450 px e compatibilidade com versões anteriores em que não há suporte para o elemento picture
, o navegador renderiza o elemento img
e precisa sempre ser
incluído.
Imagens de tamanho relativo
Quando o tamanho final da imagem não é conhecido, pode ser difícil especificar um descritor de densidade para as origens da imagem. Isso vale principalmente para imagens que ocupam uma largura proporcional do navegador e são fluidas, dependendo do tamanho do navegador.
Em vez de fornecer tamanhos e densidades fixos de imagem, é possível especificar o tamanho de cada imagem fornecida adicionando um descritor de largura e o tamanho do elemento de imagem. Isso permite que o navegador calcule automaticamente a densidade de pixels efetiva e escolha a melhor imagem para download.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
O exemplo acima renderiza uma imagem que tem metade da largura da janela de visualização (sizes="50vw"
) e, dependendo da largura do navegador e da proporção de pixels do dispositivo, permite que o navegador escolha a imagem correta, independentemente do tamanho da janela do navegador. Por exemplo, a tabela abaixo mostra qual imagem o navegador escolheria:
Largura do navegador | Proporção de pixels do dispositivo | Imagem usada | Resolução efetiva |
---|---|---|---|
400px | 1 | 200.jpg |
1 x |
400px | 2 | 400.jpg |
2x |
320px | 2 | 400.jpg |
2,5x |
600px | 2 | 800.jpg |
2,67x |
640px | 3 | 1000.jpg |
3,125x |
1.100 px | 1 | 800.png |
1,45x |
Considere pontos de interrupção em imagens responsivas
Em muitos casos, o tamanho da imagem pode mudar dependendo dos pontos de interrupção do layout do site. Por exemplo, em uma tela pequena, você pode querer que a imagem ocupe toda a largura da janela de visualização. Já em telas maiores, ela precisa ocupar apenas uma pequena proporção.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
O atributo sizes
no exemplo acima usa várias consultas de mídia para
especificar o tamanho da imagem. Quando a largura do navegador é maior que
600 px, a imagem ocupará 25% da largura da janela de visualização. Quando ela estiver entre 500 e 600 px,
a imagem terá 50% da largura da janela de visualização e, abaixo de 500 px, terá a largura total.
Permita que as imagens dos produtos possam ser ampliadas

Os clientes querem saber o que estão comprando. Em sites de varejo, os usuários esperam poder ver closes de produtos em alta resolução para analisar melhor os detalhes, e os participantes do estudo ficaram frustrados se não conseguiram.
Um bom exemplo de imagens tocáveis e expansíveis é fornecido pelo J. local da tripulação. Uma sobreposição que desaparece indica que é possível tocar em uma imagem, proporcionando uma imagem ampliada com detalhes visíveis.
Outras técnicas de imagem
Imagens compactas
A técnica de imagem compacta exibe uma imagem de 2x altamente compactada para todos os dispositivos, independentemente dos recursos reais do dispositivo. Dependendo do tipo de imagem e do nível de compactação, a qualidade da imagem pode não parecer mudar, mas o tamanho do arquivo diminui significativamente.
Substituição de imagem JavaScript
A substituição de imagem JavaScript verifica os recursos do dispositivo e "faz a coisa certa". É possível determinar a proporção de pixels do dispositivo com
window.devicePixelRatio
, conferir a largura e a altura da tela e até possivelmente
detectar a conexão de rede via navigator.connection
ou emitir uma solicitação
falso. Depois de coletar todas essas informações, você pode decidir qual
imagem carregar.
Uma grande desvantagem dessa abordagem é que o uso do JavaScript significa que você vai atrasar o carregamento da imagem até que pelo menos o analisador look-ahead tenha terminado. Isso significa que o download das imagens não será iniciado até que o evento pageload
seja disparado. Além disso, o navegador provavelmente fará o download das imagens de 1x e 2x, resultando no aumento do peso da página.
Imagens inline: rasterizadas e vetoriais
Há duas maneiras fundamentalmente diferentes de criar e armazenar imagens, e isso afeta a maneira como você implanta imagens de maneira responsiva.
Imagens rasterizadas, como fotos e outras imagens, são representadas como uma grade de pontos de cor individuais. As imagens rasterizadas podem vir de uma câmera ou um scanner ou ser criadas com o elemento de tela HTML. Formatos como PNG, JPEG e WebP são usados para armazenar imagens rasterizadas.
Imagens vetoriais, como logotipos e desenhos, são definidas como um conjunto de curvas, linhas, formas, cores de preenchimento e gradientes. As imagens vetoriais podem ser criadas com programas como o Adobe Illustrator ou o Inkscape ou escritas à mão em código usando um formato vetorial, como SVG.
SVG
O SVG permite incluir gráficos vetoriais responsivos em uma página da Web. A vantagem dos formatos de arquivo vetoriais sobre os rasterizados é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Formatos vetoriais descrevem a geometria da imagem, ou seja, como ela é construída a partir de linhas, curvas, cores e assim por diante. Os formatos raster, por outro lado, só têm informações sobre pontos individuais de cor, de modo que o navegador precisa adivinhar como preencher as lacunas ao dimensionar.
Confira abaixo duas versões da mesma imagem: uma imagem PNG à esquerda e um SVG à direita. O SVG tem uma ótima aparência em qualquer tamanho, enquanto o PNG ao lado dele começa a parecer desfocado em tamanhos de exibição maiores.

Se quiser reduzir o número de solicitações de arquivos que sua página faz, codifique as imagens inline usando o formato SVG ou URI de dados. Se você visualizar a origem dessa página, vai notar que os dois logotipos abaixo são declarados inline: um URI de dados e um SVG.
O SVG tem um suporte excelente em dispositivos móveis e computadores, e as ferramentas de otimização podem reduzir significativamente o tamanho do SVG. Os dois logotipos SVG inline a seguir parecem idênticos, mas um tem cerca de 3 KB e o outro só tem 2 KB:
URI de dados
Os URIs de dados oferecem uma maneira de incluir um arquivo, como uma imagem, inline, definindo
o src de um elemento img
como uma string codificada em Base64 usando o
seguinte formato:
<img src="data:image/svg+xml;base64,[data]">
O início do código do logotipo HTML5 acima tem a seguinte aparência:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(A versão completa tem mais de 5.000 caracteres!)
Ferramentas de arrastar e soltar, como jpillora.com/base64-encoder, estão disponíveis para converter arquivos binários, como imagens, em URIs de dados. Assim como SVGs, os URIs de dados têm suporte em navegadores para dispositivos móveis e computadores.
In-line no CSS
URIs de dados e SVGs também podem ser inline no CSS, e isso é compatível com dispositivos móveis e computadores. Veja duas imagens idênticas implementadas como imagens de plano de fundo no CSS: um URI de dados e um SVG:
Prós e contras da inserção em linha
O código embutido para imagens pode ser detalhado, especialmente URIs de dados. Então, por que você usaria esse código? Para reduzir as solicitações HTTP. SVGs e URIs de dados podem permitir que uma página da Web inteira, incluindo imagens, CSS e JavaScript, seja recuperada com uma única solicitação.
Desvantagem:
- Em dispositivos móveis, a exibição de URIs de dados pode ser significativamente mais lenta
para exibição do que imagens de um
src
externo. - URIs de dados podem aumentar consideravelmente o tamanho de uma solicitação HTML.
- Eles adicionam complexidade à marcação e ao fluxo de trabalho.
- O formato de URI de dados é consideravelmente maior que o binário (até 30%) e, portanto, não reduz o tamanho total do download.
- URIs de dados não podem ser armazenados em cache e, portanto, devem ser baixados para cada página em que são usados.
- Eles não são suportados no IE 6 e 7 e o suporte é incompleto no IE8.
- Com o HTTP/2, reduzir o número de solicitações de recursos se torna uma prioridade menor.
Assim como tudo o que é responsivo, é preciso testar o que funciona melhor. Use as ferramentas para desenvolvedores para medir o tamanho do arquivo de download, o número de solicitações e a latência total. Às vezes, URIs de dados podem ser úteis para imagens rasterizadas, por exemplo, em uma página inicial que tem apenas uma ou duas fotos que não são usadas em outros lugares. Se você precisar inserir imagens vetoriais inline, o SVG é uma opção muito melhor.
Imagens em CSS
A propriedade CSS background
é uma ferramenta eficiente para adicionar imagens complexas
a elementos, facilitando a inclusão de várias imagens, fazendo com que elas se repitam,
e muito mais. Quando combinada com consultas de mídia, a propriedade "Background" se torna
ainda mais eficiente, permitindo o carregamento condicional de imagens com base na resolução
da tela, no tamanho da janela de visualização e muito mais.
Resumo
- Use a melhor imagem de acordo com as características de exibição, considerando o tamanho da tela, a resolução do dispositivo e o layout da página.
- Mude a propriedade
background-image
no CSS para telas com DPI alto usando consultas de mídia commin-resolution
e-webkit-min-device-pixel-ratio
. - Use srcset para fornecer imagens de alta resolução, além da imagem de 1x na marcação.
- Considere os custos de desempenho ao usar técnicas de substituição de imagem JavaScript ou ao exibir imagens de alta resolução altamente compactadas para dispositivos com uma resolução mais baixa.
Usar consultas de mídia para carregamento condicional de imagens ou direção de arte
As consultas de mídia não afetam apenas o layout da página, mas também podem ser usadas para carregar imagens condicionalmente ou para fornecer direção de arte, dependendo da largura da janela de visualização.
Por exemplo, no exemplo abaixo, em telas menores, apenas o small.png
é
transferido por download e aplicado ao conteúdo div
, enquanto em telas maiores
background-image: url(body.png)
é aplicado ao corpo e background-image:
url(large.png)
é aplicado ao conteúdo div
.
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
Use image-set para fornecer imagens de alta resolução
A função image-set()
no CSS melhora a propriedade background
de comportamento,
facilitando o fornecimento de vários arquivos de imagem para diferentes características do
dispositivo. Isso permite que o navegador escolha a melhor imagem, dependendo das
características do dispositivo, por exemplo, usando uma imagem de 2x em uma tela de 2x
ou uma imagem de 1x em um dispositivo de 2x em uma rede de largura de banda limitada.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Além de carregar a imagem correta, o navegador também a dimensiona. Em outras palavras, o navegador presume que imagens de 2x são duas vezes maiores que imagens de 1x. Portanto, ele reduz a imagem de 2x em um fator de 2 para que a imagem pareça ter o mesmo tamanho na página.
O suporte a image-set()
ainda é novo e só pode ser usado no Chrome e no Safari com o prefixo de fornecedor -webkit
. Inclua uma
imagem de fallback quando image-set()
não tiver suporte. Por exemplo:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
O exemplo acima carrega o recurso apropriado em navegadores que oferecem suporte para image-set.
Caso contrário, ele retorna para o recurso de 1x. A ressalva óbvia é que, embora o suporte para navegador image-set()
seja baixo, a maioria dos navegadores recebe o recurso de 1x.
Usar consultas de mídia para fornecer imagens de alta resolução ou direção de arte
As consultas de mídia podem criar regras com base na proporção de pixels do dispositivo, permitindo a especificação de imagens diferentes para telas de 2x ou 1x.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
O Chrome, o Firefox e o Opera oferecem suporte ao (min-resolution: 2dppx)
padrão,
enquanto os navegadores Safari e Android exigem a sintaxe prefixada do fornecedor mais antiga
sem a unidade dppx
. Lembre-se de que esses estilos só serão carregados se o
dispositivo corresponder à consulta de mídia, e você precisará especificar estilos para o caso base.
Isso também oferece a vantagem de garantir que algo seja renderizado se o navegador
não oferecer suporte a consultas de mídia específicas de resolução.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
Você também pode usar a sintaxe min-width para exibir imagens alternativas, dependendo do
tamanho da janela de visualização. Essa técnica tem a vantagem de a imagem não ser
transferida por download se a consulta de mídia não for correspondente. Por exemplo, o bg.png
só
vai ser transferido por download e aplicado a body
se a largura do navegador for de 500 px ou mais:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Usar SVG para ícones
Ao adicionar ícones à sua página, use ícones SVG quando possível ou, em alguns casos, caracteres Unicode.
Resumo
- Use SVG ou Unicode para ícones em vez de imagens de varredura.
Substituir ícones simples por Unicode
Muitas fontes incluem suporte para uma infinidade de glifos Unicode, que podem ser usados em vez de imagens. Ao contrário de imagens, fontes Unicode são bem dimensionadas e têm uma boa aparência, não importa quão pequenas ou grandes apareçam na tela.
Além do conjunto de caracteres normal, o Unicode pode incluir símbolos para setas (←), operadores matemáticos (Ö), formas geométricas (★), imagens de controle (▶), notação musical (♬), letras gregas (μ) e até peças de xadrez (♞).
A inclusão de um caractere Unicode é feita da mesma maneira que entidades nomeadas:
&#XXXX
, em que XXXX
representa o número do caractere Unicode. Exemplo:
You're a super ★
Você é demais ★
Substituir ícones complexos por SVG
Para requisitos de ícone mais complexos, os ícones SVG geralmente são leves, fáceis de usar e podem ser estilizados com CSS. O SVG tem várias vantagens sobre imagens de raster:
- Eles são gráficos vetoriais que podem ser infinitamente dimensionados.
- Os efeitos de CSS, como cor, sombreamento, transparência e animações, são simples.
- As imagens SVG podem ser inline diretamente no documento.
- Eles são semânticos.
- Elas oferecem melhor acessibilidade com os atributos apropriados.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
Usar fontes de ícones com cuidado

Fontes de ícones são conhecidas e podem ser fáceis de usar, mas têm algumas desvantagens em comparação com ícones SVG:
- Eles são gráficos vetoriais que podem ser infinitamente dimensionados, mas podem ter suavização, resultando em ícones que não são tão nítidos quanto o esperado.
- Estilo limitado com CSS.
- O posicionamento perfeito do pixel pode ser difícil, dependendo da altura da linha, do espaçamento entre letras etc.
- Elas não são semânticas e podem ser difíceis de usar com leitores de tela ou outras tecnologias adaptativas.
- A menos que o escopo seja definido corretamente, eles podem resultar em um tamanho de arquivo grande que usa apenas um pequeno subconjunto dos ícones disponíveis.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
Existem centenas de fontes de ícones sem custo financeiro e pagas, incluindo Font Awesome, Pictos e Glyphicons.
Equilibre o peso da solicitação HTTP extra e do tamanho do arquivo com a necessidade dos ícones. Por exemplo, se você só precisa de alguns ícones, pode ser melhor usar uma imagem ou um sprite de imagens.
Otimizar imagens para melhorar o desempenho
As imagens geralmente representam a maioria dos bytes transferidos por download e também ocupam uma quantidade significativa de espaço visual na página. Como resultado, a otimização das imagens geralmente pode gerar algumas das maiores economias de bytes e melhorias de desempenho para seu site: quanto menos bytes o navegador precisar transferir por download, menor será a concorrência pela largura de banda do cliente e mais rápido o navegador poderá fazer o download e exibir todos os recursos.
Resumo
- Não escolha um formato de imagem aleatoriamente. Entenda os diferentes formatos disponíveis e use o mais adequado.
- Inclua ferramentas de otimização e compactação de imagens no seu fluxo de trabalho para reduzir o tamanho dos arquivos.
- Coloque imagens usadas com frequência em image sprites para reduzir o número de solicitações HTTP.
- Para melhorar o tempo inicial de carregamento da página e reduzir o peso inicial, considere carregar imagens somente depois de elas estarem na visualização.
Escolha o formato certo
Há dois tipos de imagens a serem considerados: imagens vetoriais e imagens de varredura.
Para imagens rasterizadas, também é necessário escolher o formato de compactação correto,
por exemplo: GIF
, PNG
, JPG
.
Imagens rasterizadas, como fotografias e outras imagens, são representadas como uma grade
de pontos ou pixels individuais. As imagens rasterizadas geralmente vêm de uma câmera ou de um scanner ou podem ser criadas no navegador com o elemento canvas
. Conforme o tamanho da imagem aumenta, o tamanho do arquivo também aumenta. Quando dimensionadas acima do
tamanho original, as imagens rasterizadas ficam desfocadas, porque o navegador precisa adivinhar
como preencher os pixels ausentes.
Imagens vetoriais, como logotipos e desenhos, são definidas por um conjunto de curvas,
linhas, formas e cores de preenchimento. Imagens vetoriais são criadas com programas como
o Adobe Illustrator ou o Inkscape e salvas em um formato vetorial, como
SVG
. Como as imagens vetoriais são criadas em
primitivos simples, elas podem ser dimensionadas sem perda de qualidade ou
mudança no tamanho do arquivo.
Ao escolher o formato adequado, é importante considerar a origem da imagem (raster ou vetorial) e o conteúdo (cores, animação, texto etc.). Nenhum formato se encaixa em todos os tipos de imagem, e cada uma tem os próprios pontos fortes e fracos.
Comece com estas diretrizes ao escolher o formato apropriado:
- Use
JPG
para imagens fotográficas. - Use
SVG
para artes vetoriais e gráficos de cores sólidas, como logotipos e artes lineares. Se a arte vetorial não estiver disponível, tenteWebP
ouPNG
. - Use
PNG
em vez deGIF
, porque essa opção permite mais cores e oferece proporções de compactação melhores. - Para animações mais longas, considere o uso de
<video>
, que oferece uma qualidade de imagem melhor e oferece ao usuário controle sobre a reprodução.
Reduzir o tamanho do arquivo
É possível reduzir o tamanho do arquivo consideravelmente fazendo o "pós-processamento" das imagens depois de salvá-las. Existem várias ferramentas de compactação de imagens: com e sem perda, on-line, de GUI e linha de comando. Sempre que possível, é melhor tentar automatizar a otimização de imagem para que ela seja integrada ao fluxo de trabalho.
Há várias ferramentas disponíveis que realizam uma compactação maior e sem perdas em arquivos JPG
e PNG
sem afetar a qualidade da imagem. Para JPG
, tente
jpegtran ou
jpeg optimize (disponíveis apenas no Linux;
execute com a opção --strip-all). Para PNG
, use
OptiPNG ou
PNGOUT.
Usar sprites de imagem

Os sprites de CSS são uma técnica em que várias imagens são combinadas em uma única imagem de "folha de sprite". Você pode usar imagens individuais especificando a imagem de plano de fundo de um elemento (a folha de sprite) e um deslocamento para mostrar a parte correta.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
A combinação em sprites tem a vantagem de reduzir o número de downloads necessários para conseguir várias imagens, além de permitir o armazenamento em cache.
Considere o carregamento lento
O carregamento lento pode acelerar significativamente o carregamento de páginas longas que incluem muitas imagens abaixo da dobra, carregando-as conforme necessário ou quando o conteúdo principal terminar de ser carregado e renderizado. Além de melhorias na performance, o uso do carregamento lento pode criar experiências de rolagem infinitas.
Tenha cuidado ao criar páginas de rolagem infinita. Como o conteúdo é carregado à medida que fica visível, os mecanismos de pesquisa podem nunca acessá-lo. Além disso, os usuários que procuram informações no rodapé nunca vêm o rodapé porque um novo conteúdo é sempre carregado.
Evite usar imagens
Às vezes, a melhor imagem é a que não existe. Sempre que possível, use os recursos nativos do navegador para fornecer funcionalidades iguais ou semelhantes. Os navegadores geram recursos visuais que anteriormente exigiriam imagens. Isso significa que os navegadores não precisam mais fazer o download de arquivos de imagem separados, evitando o uso de imagens dimensionadas de forma inadequada. Você pode usar Unicode ou fontes de ícone especiais para renderizar ícones.
Inserir texto na marcação em vez de incorporá-lo em imagens
Sempre que possível, o texto deve ser texto e não incorporado a imagens. Por exemplo, usar imagens como títulos ou inserir dados de contato, como números de telefone ou endereços, diretamente em imagens impede que os usuários copiem e colem as informações. Isso torna as informações inacessíveis para leitores de tela e não é responsiva. Em vez disso, coloque o texto na sua marcação e, se necessário, use fontes da Web para criar o estilo que você quer.
Usar CSS para substituir imagens
Os navegadores modernos podem usar recursos CSS para criar estilos que anteriormente exigiriam imagens. Por exemplo: gradientes complexos podem ser criados usando a
propriedade background
, sombras podem ser criadas usando box-shadow
e cantos
arredondados podem ser adicionados com a propriedade border-radius
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
Lembre-se de que o uso dessas técnicas exige ciclos de renderização, que podem ser significativos em dispositivos móveis. Se elas forem utilizadas em excesso, você perderá qualquer benefício ganho e isso poderá prejudicar a performance.