Como incentivar o navegador a baixar imagens do arquivo CSS mais rapidamente?

Eu uso CSS para colocar muitas das minhas imagens (como pano de fundo <div>) e muitas vezes acho que elas carregam muito lentamente dessa maneira. Eles parecem ser a última coisa a carregar. Mesmo pequenas imagens de ícones demoram um pouco para aparecer dessa maneira. Existe uma maneira de dizer ao navegador uma prioridade para imagens? Ou faça o download das imagens no arquivo CSS mais cedo e as renderize mais cedo?

CSS é para estilizar, não para conteúdo. Os navegadores (com razão) tentam exibir o conteúdo antes de adicionar estilo, daí o motivo pelo qual as imagens nas folhas de estilo geralmente são baixadas por último. Se as imagens são importantes para o seu conteúdo , adicione-as por meio de <IMG>tags HTML padrão .

Use URIs absolutos da sua folha de estilo e adicione as imagens das tags IMG a um oculto <div>na página (isso pressupõe que você esteja usando as mesmas imagens em todas as páginas; idealmente no rodapé, para que todos sejam carregados e armazenados em cache em qualquer chamada de página )

As imagens na página têm prioridade e, depois que as imagens são armazenadas em cache, elas são renderizadas imediatamente nas solicitações de página subsequentes.

Para navegadores que suportam o tipo de URI de dados (consulte http://en.wikipedia.org/wiki/Data_Uri para obter informações), inclua a imagem no próprio CSS.

Isso tem algumas desvantagens:

• Os dados são recarregados quando o CSS é, em vez de serem armazenados em cache separadamente, embora, a menos que seu CSS seja alterado regularmente, isso não será um problema.
• A falta de herança do CSS e, portanto, pode haver momentos (desperdiçando largura de banda) em que você deve incluir o mesmo gráfico várias vezes ou alterar as classes usadas no seu documento.
• As imagens são codificadas em base64 quando usadas dessa maneira, o que significa que elas ocupam mais largura de banda (embora o problema da largura de banda seja muito menos significativo se você estiver enviando os dados compactados).
• Você precisará fornecer estilos alternativos para navegadores que não suportam os URIs de dados, alguns dos quais estão longe de ser incomuns (IE6 e IE7, por exemplo).

No momento, não há como especificar quais arquivos serão baixados primeiro. Para sua informação, as imagens especificadas nos arquivos CSS como imagens de plano de fundo são transferidas por último, provavelmente porque o navegador as vê sem conteúdo e, portanto, com uma prioridade mais baixa, portanto, evite usá-las para imagens importantes que você deseja carregar rapidamente.

Use sprites CSS , especialmente para ícones.

Faça as suas imagens tão pequenas quanto possível. Você pode usar o smush.it para remover bytes desnecessários.