Uma imagem vale 1.000 palavras e as imagens desempenham um papel essencial em todas as páginas. No entanto, eles geralmente representam a maioria dos bytes transferidos. Com o web design responsivo, não apenas 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 ser alterados com base no dispositivo características, mas o conteúdo também pode mudar. Por exemplo, em (2x), gráficos de alta resolução garantem a nitidez. Uma imagem que tem 50% de largura pode funcionar bem quando o navegador tem 800px de largura, mas usa muito espaço em um celular estreito e exige 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](https://web.developers.google.cn/static/articles/responsive-images/image/art-direction-example-2a99df174349c.png?authuser=6&hl=pt-br)
Outras vezes, a imagem pode precisar de alterações mais drásticas: a alteração da proporções, corte e até mesmo a substituição de toda a imagem. Nesse caso, mudar a imagem geralmente é chamada de direção de arte. Consulte responsiveimages.org/demos/ para mais exemplos.
Imagens responsivas
![Captura de tela do curso do Udacity](https://web.developers.google.cn/static/articles/responsive-images/image/udacity-course-screenshot-434dec66b55e5.png?authuser=6&hl=pt-br)
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 para que suas imagens tenham uma ótima aparência e carreguem rapidamente em qualquer dispositivo.
Ao longo do caminho, você adotará várias habilidades e técnicas para integrar imagens responsivas ao seu fluxo de trabalho de desenvolvimento. Ao final de curso, você 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 pela Udacity
Imagens na marcação
O elemento img
é eficiente: ele faz o download, decodifica e renderiza
conteúdo do site. Os navegadores modernos oferecem suporte a vários formatos de imagem. Incluindo
que funcionam em vários dispositivos não é diferente do que no computador e só
requer alguns pequenos ajustes para criar uma boa experiência.
Resumo
- Use tamanhos relativos para imagens para evitar a sobreposição acidental de imagens. o contêiner.
- Use o elemento
picture
quando quiser especificar imagens diferentes, dependendo nas características do dispositivo (também conhecida como direção de arte). - Use
srcset
e o descritorx
no elementoimg
para dar dicas sobre o navegador em relação à melhor imagem para usar ao escolher entre diferentes densidades. - Se sua página tem apenas uma ou duas imagens e elas não são usadas em outros locais seu site, use imagens inline para reduzir as solicitações de arquivos.
Usar tamanhos relativos para imagens
Para evitar isso, use unidades relativas ao especificar larguras de imagens
ultrapassar acidentalmente a janela de visualização. Por exemplo, width: 50%;
causa
a largura da imagem seja 50% do elemento contêiner (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, pode ser necessário usar max- largura: 100% para evitar o excesso de imagens e outros conteúdos. Exemplo:
img, embed, object, video {
max-width: 100%;
}
Forneça descrições significativas usando o atributo alt
em img
Elementos Isso torna seu site mais acessível ao dar contexto à tela
leitores e outras tecnologias assistivas.
Aprimorar img
s com srcset
para dispositivos de alto DPI
O atributo srcset
melhora o comportamento do
elemento img
, facilitando o fornecimento de vários arquivos de imagem
com diferentes características de dispositivos. Semelhante a image-set
Função CSS
nativo para CSS, o 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 que duplica
quando está 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
, o navegador simplesmente usa o padrão
arquivo de imagem especificado pelo atributo src
. É por isso que é importante
sempre inclua uma imagem de 1x que pode ser exibida em qualquer dispositivo, independentemente
recursos. Quando srcset
é compatível, a lista separada por vírgulas de
imagens/condições são analisadas antes de se fazer qualquer solicitação e apenas as
imagem apropriada é baixada e exibida.
As condições podem incluir desde a densidade de pixels até a largura e altura, somente a densidade de pixels é aceita atualmente. Para equilibrar a atividade com recursos futuros, forneça apenas a imagem 2x o atributo.
Direção de arte em imagens responsivas com picture
![Exemplo de direção de arte](https://web.developers.google.cn/static/articles/responsive-images/image/art-direction-example-a02acbd7a6646.png?authuser=6&hl=pt-br)
Para alterar imagens com base nas características do dispositivo, o que também é conhecido como arte
direção, use o elemento picture
. A
O elemento picture
define uma solução declarativa para
fornecendo várias versões de uma imagem com base em diferentes
características, como tamanho, resolução, orientação,
e muito mais.
Usar o elemento picture
quando uma origem de imagem
existem em várias densidades ou quando um design responsivo dita
uma imagem um pouco diferente em alguns tipos de tela. Semelhante ao
video
, vários elementos source
podem
ser incluído, 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 pelo menos 800 px,
head.jpg
ou head-2x.jpg
são usados, dependendo da resolução do dispositivo. Se o
navegador tiver 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
menor que 450 px e compatibilidade com versões anteriores em que o elemento picture
não
compatível, o navegador renderiza o elemento img
e sempre deve ser
incluída.
Imagens de tamanho relativo
Quando o tamanho final da imagem não é conhecido, pode ser difícil especificar um para as fontes de imagem. Isso vale principalmente para imagens, que se estendem em uma largura proporcional do navegador e são fluidos, dependendo do 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 e o tamanho do de imagem, permitindo que o navegador calcule automaticamente a eficácia a densidade de pixels e escolha a melhor imagem para fazer o 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 do pixel do dispositivo
permite que o navegador escolha a imagem correta, independentemente do tamanho
na janela do navegador. Por exemplo, a tabela abaixo mostra qual imagem
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 do layout do site pontos de interrupção de serviço. Por exemplo, em uma tela pequena, você pode querer que a imagem ocupar toda a largura da janela de visualização, enquanto em telas maiores, ela deve apenas ter 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 for maior que
600 px, a imagem terá 25% da largura da janela de visualização; quando estiver entre 500 px
e 600 px, a imagem terá 50% da largura da janela de visualização. e abaixo de 500 px,
é de largura total.
Permita que as imagens dos produtos sejam expandidas
![J. Site da equipe com imagem expansível do produto](https://web.developers.google.cn/static/articles/responsive-images/image/j-crews-website-expanda-68db8abcb92ed.png?authuser=6&hl=pt-br)
Os clientes querem saber o que estão comprando. Em sites de varejo, os usuários esperam visualizar closes de produtos em alta resolução para obter uma visão melhor detalhes e participantes do estudo se frustrava se não conseguiam fazer isso.
Um bom exemplo de imagens expansíveis e tocáveis é fornecido pelo arquivo J. Site de tripulação. Uma sobreposição que desaparece indica que é possível tocar na imagem, fornecendo um zoom na imagem com detalhes visíveis.
Outras técnicas de imagem
Imagens compactas
A técnica de imagem compacta fornece uma imagem de 2x altamente compactada para todos os dispositivos, não importa do dispositivo. Dependendo do tipo de imagem e do nível compactação, a qualidade da imagem pode não 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 o
a coisa certa". É possível determinar a proporção de pixels do dispositivo por meio de
window.devicePixelRatio
, confira a largura e a altura da tela e, possivelmente,
conexão de rede sniffing via navigator.connection
ou emitindo um
solicitação. Depois de coletar todas essas informações, você pode decidir qual
para carregar a imagem.
Uma grande desvantagem dessa abordagem é que o uso de JavaScript significa que você
atrasar o carregamento da imagem até que pelo menos o analisador Look-ahead tenha terminado. Isso
significa que o download das imagens só será iniciado depois do evento pageload
fogueiras Além disso, o navegador provavelmente fará o download dos arquivos 1x e 2x
imagens, 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 forma responsiva.
Imagens rasterizadas, como fotos e outras imagens, representadas como uma grade de pontos de cor individuais. As imagens rasterizadas podem vir de uma câmera ou scanner ou ser criada com o elemento de canvas HTML. Formatos como PNG, JPEG e WebP 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. É possível criar imagens vetoriais com programas como Adobe Illustrator ou Inkscape, ou escritos à 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 arquivos vetoriais em relação aos rasterizados é que o navegador pode renderizar uma imagem vetorial em qualquer tamanho. Os formatos vetoriais descrevem a geometria a 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 individuais de cor, então o navegador tem que adivinhar como preencher os espaços em branco ao dimensionar.
Abaixo temos duas versões da mesma imagem: uma imagem PNG à esquerda e um SVG à a direita. O SVG fica ótimo em qualquer tamanho, enquanto o PNG começa a ficar desfocadas em telas maiores.
![Logotipo HTML5, formato PNG](https://web.developers.google.cn/static/articles/responsive-images/image/html5-logo-png-format-d92f93e643a47.png?authuser=6&hl=pt-br)
Se quiser reduzir o número de solicitações de arquivos feitas pela página, codifique imagens inline usando SVG ou formato URI de dados. Se você visualizar o código-fonte desta página, os dois logotipos abaixo serão declarados inline: um URI de dados e um SVG.
O SVG tem um ótimo suporte em dispositivos móveis e computadores, e as ferramentas de otimização reduzem 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
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
formato:
<img src="data:image/svg+xml;base64,[data]">
O início do código para o logotipo HTML5 acima tem esta aparência:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(A versão completa tem mais de 5.000 caracteres!)
Arrastar e soltar de soltar, como jpillora.com/base64-encoder está disponíveis para converter arquivos binários, como imagens, em URIs de dados. Assim como os SVGs, URIs de dados têm suporte adequado de dispositivos móveis e navegadores de desktop.
In-line no CSS
URIs de dados e SVGs também podem ser inline no CSS, e isso é compatível com para dispositivos móveis e computadores. Aqui estão duas imagens aparentemente idênticas implementadas como as imagens de plano de fundo no CSS. um URI de dados e um SVG:
Profissionais e embutidos contras
O código embutido de imagens pode ser detalhado, especialmente URIs de dados. Então, por que gostaria de usá-lo? Para reduzir as solicitações HTTP. SVGs e URIs de dados podem permitir uma página da Web inteira, incluindo imagens, CSS e JavaScript, para ser recuperada com apenas uma solicitação.
A desvantagem:
- Em dispositivos móveis, URIs de dados podem ser significativamente mais lentos.
para serem mostradas em dispositivos móveis do que imagens de uma
src
externa. - URIs de dados podem aumentar consideravelmente o tamanho de uma solicitação HTML.
- Elas adicionam complexidade à marcação e ao fluxo de trabalho.
- O formato URI de dados é consideravelmente maior do que o binário (até 30%) e portanto, não reduz o tamanho total do download.
- URIs de dados não podem ser armazenados em cache. Portanto, é necessário fazer o download para cada página em que são usados.
- Eles não são suportados no IE 6 e 7; o suporte é incompleto no IE8.
- Com o HTTP/2, a redução do número de solicitações de ativos passará a ser menos prioridade.
Assim como acontece com todos os elementos responsivos, é preciso testar o que funciona melhor. Usar o desenvolvedor para medir o tamanho do arquivo de download, o número de solicitações e o total latência de rede. Às vezes, os URIs de dados podem ser úteis para imagens rasterizadas, por exemplo, em uma página inicial com apenas uma ou duas fotos que não são usadas em outros lugares. Se você precisam 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
aos elementos, facilitando a adição de várias imagens e a repetição delas,
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 tela
resolução, tamanho da janela de visualização e muito mais.
Resumo
- Use a melhor imagem de acordo com as características da tela, considere o uso de telas tamanho, resolução do dispositivo e layout da página.
- Mude a propriedade
background-image
no CSS para telas de alto DPI usando o 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 no marcação.
- Considere os custos de desempenho ao usar a substituição de imagem JavaScript ou ao exibir imagens de alta resolução altamente compactadas para e em dispositivos de resolução mais baixa.
Usar consultas de mídia para o carregamento condicional de imagens ou direção de arte
As consultas de mídia não afetam apenas o layout da página, você também pode usá-los para carregar imagens condicionalmente ou fornecer direção de arte, dependendo da janela de visualização. largura.
Por exemplo, no exemplo abaixo, em telas menores, apenas small.png
é
transferido por download e aplicado ao conteúdo div
, mas 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 o conjunto de imagens para fornecer imagens de alta resolução
A função image-set()
no CSS melhora o comportamento da propriedade background
,
facilitando o fornecimento de vários arquivos de imagem para dispositivos diferentes
e as características determinantes. Isso permite que o navegador escolha a melhor imagem, dependendo
as características do dispositivo, por exemplo, usar uma imagem 2x em uma tela 2x;
ou uma imagem de 1x em um dispositivo de 2x quando estiver 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 de maneira adequada. Em outras palavras, o navegador presume que imagens 2x são duas vezes grande como imagens de 1x e, portanto, reduz a imagem de 2x por um fator de 2, então que a imagem parece ter o mesmo tamanho na página.
O suporte ao image-set()
ainda é novo e só pode ser usado no Chrome e
Safari com o prefixo de fornecedor -webkit
. Inclua
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
);
}
O exemplo acima carrega o recurso apropriado em navegadores compatíveis com image-set.
caso contrário, ele volta ao recurso de 1x. A ressalva óbvia é que, embora
A compatibilidade com image-set()
é baixa. 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
Consultas de mídia podem criar regras baseadas proporção de pixels do dispositivo, possibilitando a especificação de imagens diferentes para telas 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 as APIs (min-resolution: 2dppx)
,
enquanto os navegadores Safari e Android exigem o antigo fornecedor prefixado
sem a unidade dppx
. Lembre-se de que esses estilos são carregados somente
dispositivo corresponde à consulta de mídia, e você deve especificar estilos para o caso base.
Isso também garante que algo seja renderizado se o navegador
não oferece suporte a consultas de mídia para 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);
}
}
Você também pode usar a sintaxe min-width para exibir imagens alternativas, dependendo
o tamanho da janela de visualização. Essa técnica tem a vantagem de que a imagem não é
baixado se a consulta de mídia não corresponder. Por exemplo, bg.png
é apenas
baixado e aplicado a body
se a largura do navegador for 500px ou maior:
@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 incluem suporte para uma variedade de glifos Unicode, que podem ser usados em vez de imagens. Ao contrário das imagens, as fontes Unicode podem ser dimensionadas e ter uma boa aparência. não importa o tamanho deles na tela.
Além do conjunto normal de caracteres, o unicode pode incluir símbolos para setas (←), operadores matemáticos (CSEK), formas geométricas (★), controlar imagens (▶), notação musical (♬), Letras gregas (✕), até mesmo 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ê é um super ★
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 diversas vantagens em relação imagens rasterizadas:
- Eles são gráficos vetoriais que podem ser escalonados infinitamente.
- Efeitos 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.
- Eles proporcionam 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">.
Use fontes de ícones com cuidado
![Exemplo de uma página que usa FontAwesome para seus ícones de fonte.](https://web.developers.google.cn/static/articles/responsive-images/image/example-a-page-uses-fon-dbf8a265a1b2e.png?authuser=6&hl=pt-br)
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 ser suavização, resultando em ícones que não têm a nitidez esperada.
- Estilo limitado com CSS.
- Pode ser difícil posicionar pixels perfeitamente, dependendo da altura da linha, 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 assistivas.
- A menos que o escopo seja definido corretamente, eles podem resultar em um tamanho de arquivo grande que usa apenas 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 Fonts Ótimo, Pictos e Glyphicons.
Equilibre o peso da solicitação HTTP adicional e do tamanho do arquivo com a necessidade dos ícones. Por exemplo, se você só precisa de alguns ícones, ele é melhor usar uma imagem ou um sprite de imagens.
Otimizar imagens para melhorar o desempenho
As imagens geralmente representam a maior parte dos bytes baixados e costumam ocupar uma quantidade significativa do espaço visual na página. Como resultado, a otimização as imagens muitas vezes geram as maiores economias de bytes e um maior desempenho para seu site: quanto menos bytes o navegador tiver que baixar, menor é a concorrência pela largura de banda do cliente e mais rápido a navegador pode fazer o download e exibir todos os recursos.
Resumo
- Não escolha aleatoriamente um formato de imagem. Entenda as diferentes formatos disponíveis e use o formato mais adequado.
- Inclua ferramentas de otimização e compactação de imagens em seu fluxo de trabalho para reduzir os tamanhos dos arquivos.
- Reduza o número de solicitações http colocando imagens usadas com frequência no "image sprites".
- Para melhorar o tempo de carregamento inicial da página e reduzir o peso inicial da página, considere carregar imagens somente depois que elas forem exibidas na tela.
Escolha o formato certo
Há dois tipos de imagens a serem consideradas:
imagens vetoriais
e imagens rasterizadas.
Para imagens rasterizadas, você também
precisa escolher o formato de compactação certo,
por exemplo: GIF
, PNG
, JPG
.
Imagens rasterizadas, como fotos e outras imagens, são representadas como uma grade
de pontos ou pixels individuais. Imagens rasterizadas costumam vir de uma câmera
scanner ou podem ser criadas no navegador com o elemento canvas
. Conforme o
o tamanho da imagem aumenta, o mesmo acontece com o tamanho do arquivo. Quando dimensionadas acima da
tamanho original, imagens rasterizadas podem ficar desfocadas porque o navegador precisa adivinhar
como preencher os pixels que estão faltando.
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
Adobe Illustrator ou Inkscape e salvos em um formato vetorial como
SVG
Como as imagens vetoriais são criadas
primitivos simples, eles podem ser escalonados sem perda de qualidade
alteração no tamanho do arquivo.
Ao escolher o formato apropriado, é importante considerar origem da imagem (rasterização ou vetor) e o conteúdo (cores, animação, etc.). Não há um formato que se encaixe 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 adequado:
- Use
JPG
para imagens fotográficas. - Use
SVG
para imagens vetoriais e gráficos de cores sólidas, como logotipos e desenhos. Se uma arte vetorial não estiver disponível, tenteWebP
ouPNG
. - Use
PNG
em vez deGIF
, porque ele permite mais cores e ofertas melhores taxas de compactação. - Para animações mais longas, use
<video>
, que fornece uma imagem melhor qualidade e dá ao usuário controle sobre a reprodução.
Reduzir o tamanho do arquivo
É possível reduzir o tamanho do arquivo consideravelmente com o "pós-processamento" as imagens depois de salvar. Existem várias ferramentas de compactação de imagens: com perdas sem perdas, on-line, GUI, linha de comando. Sempre que possível, é melhor tentar a otimização de imagens para que seja incorporado ao seu de desenvolvimento de software.
Várias ferramentas estão disponíveis para realizar uma compactação maior e sem perdas no JPG
e PNG
que não afetam a qualidade da imagem. Para JPG
, tente
jpegtran ou
jpegoptim (disponível somente no Linux;
executar com a opção --strip-all). Para PNG
, tente
OptiPNG ou
PNGOUT.
Usar sprites de imagem
![Folha de sprite de imagens usada no exemplo](https://web.developers.google.cn/static/articles/responsive-images/image/image-sprite-sheet-used-5dca0dfa226c5.png?authuser=6&hl=pt-br)
Os sprites CSS são uma técnica pela qual várias imagens são combinadas em uma única "folha de sprite" imagem. É possível usar imagens individuais especificando imagem de plano de fundo de um elemento (a folha de sprite), além de um deslocamento para exibir o na parte certa.
.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 criação de sprites tem a vantagem de reduzir o número de downloads necessários para várias imagens, permitindo 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 a conteúdo tenha concluído o carregamento e a renderização. Além do desempenho o uso do carregamento lento pode criar experiências de rolagem infinita.
Tenha cuidado ao criar páginas de rolagem infinita, pois o conteúdo é carregado como ele se tornar visível, talvez os mecanismos de pesquisa nunca vejam esse conteúdo. Além disso, usuários que procuram informações que esperam ver no rodapé, nunca veem o rodapé porque conteúdo novo é sempre carregado.
Evitar imagens completamente
Às vezes, a melhor imagem é a que não existe. Sempre que possível, use os recursos nativos do navegador para fornecer os mesmos recursos funcionalidade de armazenamento. Os navegadores geram elementos visuais que precisariam de imagens de contêiner. Isso significa que os navegadores não precisam mais fazer o download arquivos, evitando assim imagens dimensionadas de forma inadequada. É possível usar Unicode ou fontes de ícones para renderizar ícones.
Coloque o texto na marcação em vez de incorporá-lo às imagens
Sempre que possível, textos devem ser textos e não incorporados em imagens. Para exemplo, usar imagens para títulos ou inserir dados de contato, como números de telefone ou endereços, ou seja, diretamente nas imagens, impede que os usuários copiar e colar as informações; ela torna a informação inacessível leitores de tela e não é responsivo. 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
Navegadores modernos podem usar recursos CSS para criar estilos que anteriormente
as imagens obrigatórias. Por exemplo: gradientes complexos podem ser criados usando a
background
, as sombras podem ser criadas usando box-shadow
e arredondadas
cantos podem ser adicionados com a propriedade border-radius
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sentado de Pellentesque amet augue eu magna scelerisque porta ut ut dolor. Placerat egestas em Nullam "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 pode ser significativa em dispositivos móveis. Se elas forem utilizadas excessivamente, você perderá todos os benefícios ganharam e podem prejudicar o desempenho.