Hosting

Cuál es la diferencia entre un JPEG normal y un JPEG progresivo

Es común que, al tener un proyecto web, la gente le de mucha importancia a su optimización y al tiempo de carga, ya que es algo realmente importante desde el punto de vista del SEO, los buscadores y los usuarios. Pero en muchas ocasiones la gente se olvida de algo muy importante: optimizar las imágenes.

Hay distintas herramientas para mejorar el rendimiento y reducir el tamaño de las imágenes, como escalarlas, pero en esta ocasión queremos hablar a fondo de los JPEG progresivos.

¿Cuál es la diferencia entre un JPEG normal y un JPEG progresivo?

Como seguramente has notado, en algunos sitios las imágenes cargan de arriba abajo y estas se llaman imágenes Baseline. Mientras que las imágenes JPEG progresivas difieren al cargarse completas inmediatamente mientas sigue cargándose parte de la imagen, es decir que podrás ver una versión pixeleada y de poca calidad de la imagen hasta que esté completamente cargada.

Este método de carga se ha comenzado a usar mucho en la web y la puedes ver en muchas partes, aunque el lugar más común seria verlo en google imágenes, cuando seleccionas una imagen carga completa pero muy pixeleada y abajo aparece una barra de carga. Luego de unos segundos la imagen se ve bien. Mira unos ejemplos:

Aquí la imagen sigue cargando:

image03 6

Aquí ya cargo toda la imagen:

jpeg normal y jpeg progresivo

¿Cómo mejoran el rendimiento de mi sitio las imágenes progresivas?

Además de que proporciona una mejor experiencia visual cuando el sitio está cargando, los JPEG progresivos son de un 2% hasta un 10% más pequeñas que las imágenes baseline (normales), así que al usar las imágenes progresivas mejorara el tiempo de carga de nuestro sitio y su desempeño general.

La petición al servidor será más corta y mucho más eficiente, lo que se traduce como una reducción de recursos, de ancho de banda y espacio de disco.

Esto es extremadamente útil y eficiente si tienes un servicio de hosting gratuito o hospedado en un hosting compartido. Los sitios web con una gran cantidad de imágenes JPEG baseline se verán muy beneficiados al cambiar a las imágenes progresivas.

Además, los visitantes que lleguen de dispositivos móviles con poca velocidad a internet tendrán una mejor experiencia, tanto visual como con tiempos de carga mucho más reducidos.

¿Qué necesitas?

Lo único que necesitarás para hacer estos cambios es:

  • Acceso a un cliente FTP.

1.- Analiza tu sitio web

Para localizar las imágenes JPEG baseline que puedes reemplazar por imágenes progresivas puedes usar la herramienta WebPageTest.org. Esta herramienta es realmente útil, ya que además de mencionarte cuales son las imágenes que necesitan un cambio, te proporciona las versiones progresivas para que puedas sustituirlas sin la necesidad de tener que usar otra herramienta.

Una vez que entres al sitio, escribe tu página web y selecciona el botón ‘Start’ para que comience a analizar tu sitio. Al finalizar, selecciona la pestaña ‘Performance Review’, en donde podrás ver muchos detalles sobre el rendimiento de tu sitio.

Baja la página hasta que llegues a ‘Use Progressive JPEGs’:

image00 11

2.- Comienza la descarga de las imágenes JPEG progresivas

Hay una gran variedad de herramientas que te permitirán convertir tus JPEG baseline en JPEG progresivos. Aquí compartimos algunas opciones:

Opción 1: Transformando baseline en progresivos con WebPageTest

Una vez que hayas visto la lista de imágenes que pueden ser reemplazadas. Navega a la pestaña de ‘Details’ y ahí selecciona la opción ‘View All Images’.

image01 10

Esa sección te mostrará todas las imágenes de la página que especificaste en la prueba. Ahora solo tienes que presionar ‘Analyze JPEG’ en cada una de las imágenes.

Al presionar esa opción serás llevado a una página en la que veras las distintas versiones de esa imagen. La que nos interesa es la que dice ‘Quality 85 Image’ de tu imagen original.

Ahora tienes que guardar todas las imágenes ‘Quality 85 Image’ en tu computadora y proceder al siguiente paso. Te recomendamos encarecidamente salvar todas las imágenes con el mismo nombre que las originales, ya que de esta forma se reemplazar naturalmente y no habrá ningún cambio en los códigos.

Opción 2: Convertir las imágenes JPEG baseline en JPEG progresivas con Optimizilla

image02 8

Esta opción es excelente en el caso de que estés planeando subir más imágenes optimizadas a tu sitio, o si tu sitio aún no se ha subido. Ya que Optimizilla convierte las JPEG baseline en imágenes progresivas. Usar esta herramienta es especialmente útiles cuando quieres optimizar más de 20 imágenes y usarlas en Quality 85 o menor.

Optimizilla funciona muy fácil, solo tienes que arrastras o usar el explorador de archivos para seleccionar todas las imágenes que quieres comprimir.

image05 2

Opción 3: Usar un plugin en tu CMS

Los usuarios de WordPress tienen muchos plugins a su alcance que les sirven para hacer esto. Tiny PNG y WP Smush son unas de las opciones más populares.

3.- Reemplaza las imágenes viejas

ADVERTENCIA: Asegúrate de hacer un respaldo de tu sitio web o de las imágenes que tienen planeado reemplazar antes de proceder.

Puedes usar el File Manager de tu hosting o tu cliente FTP favorito para reemplazar las imágenes que lo necesiten. Remueve y subir las fotos con Quality 85 que acabas de descargar.

Recuerda que no se recomienda cambiarles el nombre para que el sitio siga estando tal y como lo dejaste antes de reemplazar las imágenes.

4.- Comprueba los cambios

Una vez que hayas terminado de subir o reemplazar las imágenes que tenías por las imágenes optimizadas. Es momento de regresar a WebPageTest y comprobar que ahora las imágenes estén bien.

Si optimizaste todas las imágenes de tu sitio, entonces en ‘Use Progressive JPEGs’ debes de tener un 100/100.

Conclusión

Recuerda que hacer esto es una excelente forma de mejorar el rendimiento general de tu sitio web. Usar JPEG progresivos es bueno para el tiempo de carga y para disminuir el uso de recursos de nuestro hosting y servidor. Es especialmente útil en los sitios que constantemente están publicando cientos de imágenes.

Mejora el SEO y en rendimiento general de un sitio. Algo importante para que los buscadores te den mejores posiciones en los resultados y para que tus visitantes tengan una mejor experiencia.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.