Portada Diseño Web Cómo Incrementar el Rendimiento Web con Imágenes JPEG Progresivas
En Hostinet no paramos de repetir a nuestros clientes que optimizar las imágenes de una web es un factor muy importante, ya no solo de cara a un mejor posicionamiento en los buscadores (SEO), sino también para reducir los tiempos de carga y mejorar la experiencia de usuario.
A pesar de ello, a diario seguimos viendo como muchos webmaster suben imágenes a su servidor sin ningún tipo de optimización e incluso en algunos casos con tamaños superiores a 1MB, lo cual es una “locura”. Una conexión lenta puede tardar mucho tiempo en cargar una imagen de 1MB, con lo cual si se tienen varias imágenes pesadas el tiempo de carga de un sitio web puede aumentar muchísimo.
Por nuestro blog de formación hemos publicado varias herramientas con las que optimizar imágenes, así como todos los pasos a seguir para ello.
En el día de hoy vamos a hablar sobre las imágenes JPEG progresivas.
De lo primero que vamos a hablar es de la diferencia entre JPEG Baseline (JPEG estándar) y JPEG Progresivo.
Un JPEG progresivo está codificado y se muestra de forma diferente a un JPEG estándar o Baseline.
Lo más habitual es tener JPEG estándar que lo que hace es cargar las imágenes como por “oleadas” de arriba a abajo, por eso si nos vamos a una zona rural cuya conexión de Internet sea extremadamente lenta e intentamos cargar una imagen seguramente esta se nos quede cortada por la mitad o con un trozo al final sin cargar sobre todo debido a que no se ha podido cargar completamente.
Un ejemplo:
En lo que respecta a JPEG progresivo difiere en que en este caso las imágenes sí se cargan de forma completa, pero a menos resolución (de forma pixelada). Con ello lo que se consigue es que se pueda ver siempre la imagen completa. Podríamos compararlo con el servicio de Netflix, cuando este grande del streaming no puede servir calidad HD para sus vídeos lo hace a resoluciones más pequeñas para que los vídeos se sigan viendo, eso sí, a peor calidad, pero se sigue viendo hasta que alcanza la calidad correcta, pues en el caso de las imáganes JPEG progresivas sería similar. Además, en Google Imágenes se ve claramente si al seleccionar una imagen esta se muestra pixelada, pero abajo aparece una barra de carga.
A pesar de mostrarse la imagen pixelada, el JPEG progresivo puede mejorar la experiencia de usuario, ya que brinda una mejor experiencia visual. Además, generalmente de menor tamaño (de un 2% hasta un 10% más pequeñas que las Baseline), el JPEG progresivo también puede reducir el consumo de recursos en el servidor como el ancho de banda y el espacio en disco, lo que ayuda a que el sitio web se cargue más rápido
Los navegadores web más populares como Firefox o Chrome soportan las imágenes JPEG progresivas, sin embargo, versiones antiguas de Internet Explorer no, por lo que hay que asegurarse de utilizar navegadores webs actuales para visualizar correctamente las imágenes.
Quienes agradecerán mucho este tipo de imágenes serán los usuarios de dispositivos móviles con conexiones a Internet poco veloces, ya que tendrán una mejor experiencia, tanto visual como con tiempos de carga mucho más reducidos.
Aquí están los pasos necesarios para optimizar una web con imágenes JPEG progresivas:
Para comprobar que tipo de imágenes JPEG muestra nuestra web, podemos hacer un análisis simple (simple testing) con la herramienta WebPageTest.
Tan solo debemos escribir la URL de nuestra web en Simple Testing y darle al botón de la derecha “Start Test”.
Una vez que se complete el test, en la página de resultados, seleccionamos la pestaña Performance Review (ojo que solo sale esta pestaña si se ha hecho el Simple Testing), en donde poder encontrar el apartado de Use Progressive JPEGs.
Lo cierto es que esta herramienta está muy bien, ya que aparte de indicar cuales son las imágenes que pueden pasarse a este formato, proporciona las versiones progresivas de las mismas para poder sustituirlas a través de la pestaña Details -> View All Images -> Analyze JPEG en cada una de las imágenes (es recomendable guardar todas las imágenes en “Quality 85 Image”, así como con el mismo nombre que las originales).
Pero nosotros no vamos a usar la herramienta WebPageTest para ello, sino Optimizilla que además de convertir las imágenes a JPEG progresivas también puede reducir el tamaño y calidad de las mismas.
Optimilla es especialmente de utilidad cuando se quieren optimizar más de 20 imágenes usando una calidad de 90 o menos.
Para más detalles sobre cómo funciona Optimilla en profundidad se puede consultar nuestro siguiente artículo:
Tras la conversión de las imágenes a JPEG progresivo tocara resubirlas al servidor. Para ello podemos usar un cliente de FTP como FileZilla o el Administrador de Archivos que ofrezca nuestro alojamiento web (cPanel en planes Linux o Plesk en planes Windows).
Las imágenes las podemos borrar y remplazarlas por las nuevas optimizadas en JPEG progresivo o directamente sobrescribir las que tengamos, aunque antes de hacer nada es recomendable disponer de una copia de seguridad de las imágenes por si hubiera algún problema. Y hablando de problemas, también es recomendable usar el mismo nombre para las imágenes optimizadas.
Una vez subidas esas nuevas imágenes, si volvemos a hacer una prueba con WebPageTest nos tiene que dar 100/100.
¡Y eso es todo!
En Hostinet todos nuestros Alojamientos Web SSD vienen por defecto con un panel de control cPanel. Además, pensamos que lo mejor es siempre usar cuentas de email personalizadas con tu propio dominio con el fin de personalizar tu negocio o de dotar de mas seriedad a tus comunicaciones. De hecho, por muy poco al mes puedes contratar el plan de hosting que mejor se adapte a tu proyecto web, así como también un dominio bajo el cual tener todas las cuentas de correo electrónico que necesites.