Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Ahorrando ancho de banda con las imágenes

Ahorrando ancho de banda con las imágenes 24.SEP.15

Alvaro José Rios Ch
Fundador WebBizarro

Ahorrar ancho de banda es muy importante no solo para los usuarios de tu sitio web sino para ti ya que te permite ahorrar dinero y una buena forma es usar imágenes óptimas para la web que no pesen demasiado y sin embargo sigan manteniendo calidad.

Lo primero que debes considerar es el formato, cada uno tiene sus pro y contras.

GIF, este formato es muy bueno para imágenes con transparencias y animaciones sin embargo no es nada bueno para imágenes con alta calidad ya que solo soporta 256 colores, es útil para logos o imágenes planas con pocos colores.

PNG, este formato soporta transparencia y es muy útil para imágenes con pocos colores como dibujos o ilustraciones, sin embargo para imágenes complejas como fotografías es poco usado porque las imágenes sueles ser muy pesadas. Hay que tener en cuenta que hay dos formatos para estas imágenes el PNG8 que soporta 256 colores al igual que el GIF y el PNG 24 que soporta 16 millones de colores por lo que si necesitas un botón con un color plano la opción de 256 colores puede ser suficiente.

JPEG, este formato se usa para imágenes de fotográficas, este formato comprime las imágenes permitiendo mantener la calidad con un menor peso, sin embargo este formato no soporta transparencia.

El botón de exportar para web es de mucha ayuda ya que te ayuda a ahorrar algunos KB en el peso de las imágenes, así que siempre que vayas a guardar imágenes para sitios web procura usar esa opción.

Otra cosa importante es cargar las imágenes del tamaño adecuado, si tienes un diseño responsive no vale la pena cargar imágenes grandes en un celular con una pantalla de 320x480.

Si puedes hacer algo con CSS3 evita usar imágenes, las imágenes solo agregan peso a tu aplicación y el CSS es mucho más flexible.