Imagens responsivas

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

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

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

Faça o curso

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 descritor x no elemento img 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 imgs 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

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>

Faça um teste

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

Faça um teste

O exemplo acima renderiza uma imagem que tem metade da largura da janela de visualização (sizes="50vw") e, dependendo da largura do navegador e 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">

Faça um teste

O atributo sizes no exemplo acima usa várias consultas de mídia para especificar o tamanho da imagem. Quando a largura do navegador 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

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.

Faça um teste

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.

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 com min-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);
  }
}

Faça um teste

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

Faça um teste

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

Faça um teste

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

Faça um teste

Use 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 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">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Faça um teste

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, tente WebP ou PNG.
• Use PNG em vez de GIF, 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

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

Faça um teste

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.