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?
13
Respostas:
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 .fonte
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.
fonte
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:
fonte
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.
fonte
Use sprites CSS , especialmente para ícones.
fonte
Faça as suas imagens tão pequenas quanto possível. Você pode usar o smush.it para remover bytes desnecessários.
fonte