Estou construindo um site e quero fazer consultas HTTP o mínimo possível para uma melhor velocidade e SEO do site. A página que acabei de criar mostra imagens em rolagem (as imagens têm um atributo data-scr que é convertido em src quando o usuário rola para baixo na respectiva imagem).

Como todas as imagens têm o data-srcatributo em vez de src, o W3C me mostra erros.

Neste momento, encontrei duas opções para resolver este problema:

1. O src inicial de todas as imagens é um URL de uma imagem 1x1 em branco
2. O src inicial de todas as imagens para ser uma imagem em branco da base de dados 64

Quando estou usando um URL de uma imagem 1x1 em branco, (testado com tools.pingdom.com), ele mostra 1 solicitação HTTP. Quando estou usando uma imagem em branco do banco de dados64, ela mostra tantos pedidos quanto o número de imagens na página.

Qual deles é a maneira mais eficiente, para um site ter velocidade mais rápida e fazer menos solicitações HTTP? (suponha que o usuário esteja carregando a página da Web a uma velocidade de 14,4 kbps na Internet - a primeira velocidade da Internet).

Mas para SEO?

Existe alguma outra opção?

A opção de imagem base64 deve ser usada onde você teria apenas um número muito pequeno de imagens e deseja eliminar a sobrecarga da rede ao buscar uma imagem no servidor. No entanto, pelo que você está indicando na pergunta, presumo que isso possa ser dimensionado para um grande número de imagens. Nesse caso, eu usaria uma única imagem transparente de 1 px x 1 px do servidor com uma vida útil longa do cache, pois ela será buscada no servidor uma vez armazenada em cache no navegador e em qualquer servidor proxy intermediário.

Como exemplo, esta imagem teria cerca de 95 bytes de tamanho ( https://commons.wikimedia.org/wiki/File:1x1.png ), para uma sequência de imagens codificadas em base64, você descobriria que o tamanho seria igual a esta imagem tamanho do arquivo, mas seria repetido para todas as imagens adicionadas.

Para 2-5 imagens, o tamanho e a velocidade seriam insignificantes e diminuiriam o tráfego do servidor, eliminando uma busca inteira, mas, além disso, o tamanho da página começaria a ficar muito grande, o que afetaria o tempo de carregamento e, por sua vez, a classificação do SEO.

Definitivamente, vá com o URI de dados, a menos que você precise de suporte para o IE <8. ( Suporte ao navegador ).

A incorporação de muitas imagens minúsculas diretamente no HTML pode exigir mais largura de banda do que vinculá-las diretamente, mas o aumento será atenuado pelo gzip ; a única diferença no tamanho da página será a diferença de comprimento entre um URI de dados de uma imagem em branco e um URL da imagem no servidor. Um GIF em branco pode ter até 43 bytes. Codificado na base 64, ou seja, 82 bytes. Não há como ter um desempenho pior do que uma solicitação HTTP> 500 bytes , uma resposta de tamanho semelhante e, então, nem estou levando em consideração o tamanho do pacote TCP e outras despesas gerais.

Aqui está a imagem GIF de 43 bytes codificada em Base 64:

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Quanto ao SEO, consulte o código-fonte de um site do Google, por exemplo, o Google Notícias , e pesquise por data:image/gif,base64…

Nesse momento, encontrei duas opções para solucionar esse problema: O src inicial de todas as imagens era uma imagem em branco da base de dados 64

Essa opção não requer apenas um navegador moderno, mas pode ser mais lenta no lado do cliente, pois o navegador deve decodificar com base 64 os dados da imagem para produzir a imagem.

O src inicial de todas as imagens é um URL de uma imagem 1x1 em branco

É uma mudança OK, desde que o URL da imagem em branco para todos os slots de imagem seja exatamente o mesmo URL e que tenha uma vida útil longa do cache definida no cabeçalho HTTP "controle de cache". O problema é que, à medida que os novos arquivos de imagem são carregados, os quadrados da imagem saltam para o novo tamanho, o que pode tornar a experiência do usuário não tão maravilhosa.

A idéia quase perfeita é essa ...

Quando a página for inicializada, apresente uma grade com caixas de tamanho fixo que podem acomodar cada imagem. Tudo bem se a grade inteira não couber na tela. Em seguida, crie o javascript que é executado após o carregamento do HTML e, nesse javascript, crie um novo elemento de imagem e anexe-o a cada célula da grade e defina a origem da imagem no arquivo de imagem correto. Faça isso até que a primeira tela seja exibida. Em seguida, detecte a rolagem no javascript e, quando ocorrer a rolagem, repita o processo acima para as novas células.

Agora, se você deseja o melhor dos melhores, e a qualidade não é uma grande preocupação, o que eu recomendo (que eu também implementei no meu site) é construir uma grade e configurá-la de forma que a imagem de plano de fundo dessa grade seja uma folha de sprite de todas as imagens formatadas como quadrados de imagens. Esse método é flexível e rápido de carregar, pois é necessária uma solicitação para todas as imagens.

Aqui está um modelo de HTML para usar se você quiser seguir o caminho mais rápido. Apenas duas solicitações são feitas. O código HTML e a imagem única. Neste código, presumo que cada imagem da planilha tenha 100 pixels de largura e 200 pixels de altura e que cada imagem esteja perfeitamente alinhada uma com a outra, sem espaços.

<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>

No meu código eu adicionei 3 pontos. Isso significa que você pode continuar adicionando imagens aumentando os números e aumentando a posição em 100 a cada vez, desde que sua planilha de sprites tenha apenas uma linha de imagens. Além disso, em alguns navegadores como o Opera, pode ser necessário adicionar um sinal negativo na frente dos valores da posição de segundo plano para que eles funcionem.

A imagem, porque manutenção.

Na minha experiência , funciona melhor usar a imagem. Isso é mais óbvio no código real e mais fácil de lembrar. Duvido que você se lembre da seqüência codificada de uma imagem transparente e, mesmo que você lembre, de seus sucessores / colégios.
Se você voltar a esse código após algumas semanas, terá perdoado a base64.

Será muito mais fácil manter o código, se você usar a imagem, os profissionais mínimos não pesam até isso.

Que tal apenas ~ 3 bytes extras, 0 solicitações HTTP extras e 0 comprimento extra de img src (ou 0 espaços reservados para imagem de dados não armazenados em cache). Você pode usar um src em branco para imagem?

<img src data-src="banannanannas.jpg" />

E se eles tiverem alttags, você poderá ocultá-las da imagem de erro / falha:

<img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" />

Exibe: nada. Hackear a tag alt tem um leve atraso FOUC da borda do espaço reservado da imagem. Talvez isso possa ser limpo também.