14 mayo 2013 ~ Comentarios desactivados en Aumenta la velocidad de carga de tu sitio con CSS Sprites

Aumenta la velocidad de carga de tu sitio con CSS Sprites

En el día de hoy a nuestros lectores les recomendaremos un consejo que les podrá ser de mucha utilidad si lo que están buscando es reducir el tiempo de carga con que sus visitantes acceden en forma completa a las diferentes secciones de sus sitios web. Se trata de una técnica que se ha comenzado a utilizar mucho en los diferentes sitios estáticos y blogs también, aunque en menor medida, ya que el consejo consiste en colocar todas las imágenes o gráficos que publicas en la mayoría de las secciones de tus sitios, en una sola imagen, para que de esa manera cada vez que tengas que cargar una determinada página o sección del sitio no tengas que cargar cada una de las imágenes, sino una sola.

css-sprites

Como podrán deducir, uno de los principales factores que hace que nuestro sitio cargue más lento, son las imágenes, por lo que tendremos que optimizarlas para lograr buenos resultados. Un consejo que viene atado al tema de hoy es el hecho de que traten de utilizar imágenes con dimensiones chicas, de no más de 600 píxeles de ancho, debido que son muchos los dispositivos portátiles o móviles con que personas comunes ingresan a diferentes páginas de Internet, en donde los mismos no poseen pantallas extremadamente grandes para poder visualizar este tipo de imágenes. Lo que trae emparentado al tiempo de carga, debido a que mientras más pequeñas sean las dimensiones de las imágenes, menor será el peso. Recomendamos no utilizar el formato PNG para imágenes grandes, ya que tienen un gran tamaño.

En cuanto a la técnica llamada CSS Sprites, es muy utilizada por webmasters que tienen principalmente sitios estáticos, ya que colocan en una sola imagen todos los íconos, como ser la imagen en miniatura de un autor, los bordes redondeados, íconos sociales de Facebook, Twitter, Feedburner, entre muchos otros elementos. Cabe destacar que algunos estudian tanto el tema que ven convenible utilizar esta técnica para colocar los fondos o backgrounds de distintas secciones y hasta del sitio mismo, ya que una vez que carguen esa sola imagen, ya estarán cargadas todas las imágenes en miniatura e íconos que trae consigo. Te recomendamos estudiar esta téccnica en W3 Schools.

Social Share Counters
Tags:

Comments are closed.