He notado que Facebook e Instagram usan la misma forma de mostrar los íconos que se encuentran en el sitio, que es agregar en un solo archivo PNG todos los íconos y hacer el estilo según su posición.

Eche un vistazo a la forma de hacerlo en Instagram.

Entiendo que de esta manera, el cliente recibirá solo una imagen que se almacenará en caché y el rendimiento del usuario aumentará. Pero, ¿cómo lo hacen?

Gracias por su tiempo!

0
Daniel Turuș 14 nov. 2017 a las 13:30

2 respuestas

La mejor respuesta

Lo hacen haciendo un div o span o lo que sea, con un fondo de esa imagen y luego cambian la posición del fondo.

Ejemplo

.icons {
  height:20px;
  width: 20px;
  background-image: url("path/to/image");
}

.icon1{
  background-position: 0 0
}

.icon2{
  background-position: 30px 0
}

JSFiddle : https://jsfiddle.net/qxjyycv2/

0
ZeWebDev 14 nov. 2017 a las 10:42

Lo que estás buscando son Sprites de imagen.

El div en el que está mostrando la imagen (siempre como una imagen de fondo) se establece en overflow: hidden; mientras que la posición del fondo cambia para mostrar la parte correcta del sprite.

https://www.w3schools.com/css/css_image_sprites.asp

1
Gezzasa 14 nov. 2017 a las 10:33