Cómo Incrementar el Rendimiento Web con Imágenes JPEG Progresivas

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.

Diferencia entre JPEG Baseline y JPEG Progresivo

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:

Hostinet JPEG Baseline

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.

Un ejemplo:

Hostinet JPEG Progressive

Beneficios del JPEG Progresivo

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.

Cómo Usar Imágenes JPEG Progresivas

Aquí están los pasos necesarios para optimizar una web con imágenes JPEG progresivas:

Paso 1: Analizar las imágenes JPEG de un sitio web

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”.

WebPageTest Hostinet

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.

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).

Paso 2: Convertir imágenes a JPEG Progresivo con Optimizlla

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:

Cómo Optimizar Imágenes para Web con Optimizilla

Paso 3: Reemplazar Imágenes Antiguas

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.

use progressive jpegs 100

¡Y eso es todo!

Alojamientos Web SSD BY Hostinet

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.

  • Hosting SSD 1desde3´21€ / mes
  • Hosting SSD 2desde3´79€ / mes
  • Hosting SSD 4desde5´59€ / mes
  • Hosting SSD 1desde3´21€/mes
  • Hosting SSD 2desde3´79€/mes
  • Hosting SSD 4desde5´59€/mes
    • Almacenamiento en disco dura ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Tras evaluación de nuestro equipo de migraciones y nuevas altas de Hosting
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Todo lo que necesitas para sacar partido a tu Host
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opcion de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Opción de contratación de certificados SSL Wildcard. Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUI
    • Opción de contratación de certificados SSL Extended Validation (EV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUI
    • Opción de contratación de certificados SSL Organization Validation (OV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUI
    • Con nuestra herramienta WebFácil construye tu página web en solo 5 pasos.
    • Con la herramienta de instalación Softaculous tan solo deberás elegir la aplicación deseada y con tan solo un par de clicks y de forma totalmente automatizada tendrás tus herramientas favoritas instaladas en tu Host.
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting y Dominios
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Precios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contrataciones
    • Precios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contrataciones
    • Precios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contratacionesPrecios para nuevas contrataciones