985 331 381 · 620 062 376 ···
Optimizar el rendimiento de carga de imágenes en diseño web

A nadie le resulta agradable entrar en una página web y comprobar que el contenido tarda demasiado en cargarse. Si crees que el diseño web de tu página es una de estas tortugas 2.0 has de saber que, sin duda, tiene problema de optimización. Pueden ser debidos a múltiples causas pero una de las más frecuentes es el excesivo peso de las imágenes. Muchas veces minusvaloramos la importancia de las imágenes en el rendimiento de nuestra web, sin saber que imágenes pesadas son el equivalente a una página lenta.

Optimiza, modifica, comprime las imágenes. Existen diversas maneras de reducir el tamaño y peso de nuestras imágenes. Lo primero en lo que nos debemos fijar es el formato. Un archivo JPEG por ejemplo nos va a permitir elegir su calidad a la hora de guardarlo con cualquier programa (véase Adobe Photoshop CS6).  Incluso podemos convertir el archivo en un JPEG progresivo si la pérdida de calidad no es suficiente como para que la imagen se resienta. Si el archivo es un PNG entonces deberíamos saber que podemos cambiar un PNG-24 por un PNG-8 por ejemplo para que la imagen ocupe menos.

Las imágenes, tanto los formatos JPG como los RAW, GIF, PNG… llevan información incorporada, que puede ir desde el modelo de la cámara hasta el título de la foto, pasando por las propiedades de brillo o resolución de la imagen. Eliminar (o más bien filtrar) esta información, aunque parezca que no, hace que las fotos pesen menos y carguen antes en la página. Es muy importante que modifiques el tamaño de las fotos antes de subirlas al archivo HTML. ¿Por qué? Muy sencillo. Cuando reduces una imagen en HTML, el servidor carga la imagen como si fuera del tamaño original a la que la subiste, es decir, desaprovechas memoria cargando un tamaño de imagen que en realidad no existe.

Recuerda que puedes usar numerosas herramientas de compresión de imágenes, con pérdida de calidad o sin pérdida. Por citar algunas, tenéis Kraken o Image Optimizer. El uso de sprites no está muy extendido, pero lo recomendamos encarecidamente. El uso del elemento sprite permite que la página consuma mucha menos memoria al eliminar el espacio en blanco que queda entre las fotografías. Las imágenes seguirán pesando lo mismo, pero eliminaremos “manchas blancas” que ralentizan la carga de la página. Podéis encontrar herramientas para generar sprites en páginas como SpriteMe o SpritePad. Para terminar, nunca menospreciéis la importancia de las imágenes en la optimización e incluso en el SEO de vuestra página, y no dudéis en acudir a expertos en diseño web si queréis realizar un plan profesional dirigido a optimizar el rendimiento de vuestra página.

¿TE GUSTA EL ARTÍCULO?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
0 Votos - Promedio: 0,00 de 5
Cargando…
Facebook 0
Google+ 0
Twitter
LinkedIn 0