Em relação à otimização da tecnologia CSS Sprites, quanto podemos fazer e quanto podemos reduzir o número de solicitações? Isso não pode ser feito unilateralmente, tudo depende da cooperação entre imagens XHTML, CSS e CSS Sprites. Até o momento, não existe um método de otimização absoluto. É por isso que costumo medir a relação entre imagens CSS Sprites e XHTML em projetos, como: "Um plano de fundo implementa grade adaptável de nove grades". otimização de imagem.
Otimização de imagem
Para GIFs não animados, é recomendado usar PNG8 porque ele também pode obter o mesmo efeito e economizar de 10% a 30% do tamanho do arquivo.
Comparado ao Fireworks, o Photoshop exporta imagens PNG da mesma qualidade, mas o tamanho é um pouco maior. Embora o Fireworks tenha feito otimizações de compactação correspondentes, ele não obteve a melhor compactação.
O software de design que conheço não atinge a melhor compactação para processar imagens PNG, e o tamanho da imagem ainda possui uma certa quantidade de espaço de compactação. Você pode tentar usar a "Ferramenta de Otimização de Imagem" apresentada abaixo para obter uma otimização de compactação sem distorção.
Em termos de volume e tamanho da imagem, recomenda-se que o tamanho seja mantido dentro de 100K (o que está mais de acordo com os melhores requisitos de TAMANHO das condições nacionais) e o tamanho seja 800px (o melhor tamanho). (Aprendido por uma fonte oficial de pessoal, não há como verificar os detalhes)
Técnica de corte de imagem de Sprites CSS
A ordem das imagens dos Sprites CSS e as imagens combinadas são adicionadas de cima para baixo, da esquerda para a direita. A posição de fundo geralmente é posicionada usando uma combinação de números, o que pode reduzir problemas desnecessários causados pela manutenção.
Não é recomendado manter um determinado espaçamento nas imagens CSS Sprites porque o tamanho do arquivo aumenta e o tamanho do arquivo aumenta.
Em CSS Sprites, combinar cores próximas ou iguais pode reduzir o número de cores, pois o tamanho do arquivo de imagens com um pequeno número de cores será relativamente pequeno.
Há uma grande lacuna nas imagens CSS Sprites do mesmo tamanho, o que na maioria dos casos aumenta o tamanho até certo ponto, portanto, as imagens CSS Sprites não devem ter lacunas.
Entre imagens CSS Sprites do mesmo tamanho, imagens organizadas verticalmente terão tamanhos de arquivo maiores do que imagens organizadas horizontalmente. Demonstração
Em imagens CSS Sprites, as imagens organizadas horizontalmente terão tamanhos de arquivo maiores do que as imagens organizadas verticalmente. Demonstração
Mesclagem igual de imagens: Ao aplicar imagens CSS Sprites, mescle imagens idênticas de forma adequada para economizar espaço e reduzir o volume. Demonstração
Distinguir imagens que não precisam ser mescladas: Se o usuário atual determinar que apenas um estado ou nível será exibido, não há necessidade de mesclar imagens de outros níveis ou estados. Demonstração
Posição de corte dourada: A posição mais flexível no lado direito ou esquerdo da imagem CSS Sprites é a posição mais adequada para colocar o ícone na frente do texto. Portanto, não sofrerá interferência de outras imagens CSS Sprites, e há. não há necessidade de reservar uma determinada largura de linha.