Um sprite de imagem é uma coleção de imagens inseridas em uma única imagem.
Uma página da web com muitas imagens pode demorar muito para carregar e gera várias solicitações do servidor.
O uso de sprites de imagem reduzirá o número de solicitações do servidor e economizará largura de banda.
Sprites de Imagem – Exemplo Simples
Em vez de usar três imagens separadas, usamos esta imagem única (“img_navsprites.gif”):
pode ser usado para esse tipo de imagem tb, só achar as coordenadas corretas,
tem muita animação na internet com esse tipo de imagem , html+ css + javascript
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/sprites-de-imagem-css.jpg) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/sprites-de-imagem-css.jpg) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/sprites-de-imagem-css.jpg" width="1" height="1"><br><br>
<img id="next" src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/sprites-de-imagem-css.jpg" width="1" height="1">
</body>
</html>
<< Anterior Galeria de imagens CSS
Deixe um comentário