Cuarto capítulo de la serie “Reducir el tiempo de carga Web” con el que pretendemos mostrar el camino de cara a mejorar la velocidad de carga de nuestras web, reduciendo así el tiempo de espera del usuario que tanto valor tiene a día de hoy. En esta ocasión revisaremos la forma en la que podremos optimizar nuestras imágenes en formato .JPG… ¡No os lo perdáis!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Este tutorial forma parte de una serie

¿Por qué optimizar las imágenes?

Como habíamos visto en el primer capítulo sobre minimizar las peticiones HTTP, estábamos intentando reducir el número de peticiones HTTP combinando todas nuestras imágenes en una única imagen. Reduciendo el número de imágenes estamos reduciendo también el número de peticiones HTTP.

Una vez tenemos claro el formato de imagen que nos conviene es importante optimizar cada una de nuestras imágenes para reducir su tiempo de carga lo máximo posible.

Ahora que tenemos un menor número de imágenes a cargar, necesitamos reducir el tamaño de estos archivos en disco, reduciendo así el tiempo de carga de nuestra web.

En este artículo trataremos de conocer la forma en la que podemos reducir el peso de las imágenes .JPG.

¿Cómo reducir el tamaño de la imagen sin perder calidad?

Las imágenes JPEG contienen una serie de datos que pueden llegar a ser útiles en numerosas ocasiones, pero esta información carecerá en su mayoría de utilidad a la hora de crear y diseñar un sitio web. A esta información se le conoce como metadata y puede ser:

  • Información sobre la cámara.
  • Fecha y hora de la foto.
  • Miniaturas de vista previa e incluso audio.
  • Información específica de la aplicación (por ejemplo Photoshop).
  • Comentarios acerca de la imagen.
  • Y mucho más…

Como habrás podido suponer los fotógrafos pueden encontrar útil esta información acerca de la cámara, comentarios de las fotos, fechas, configuraciones… pero para nuestros diseños web no necesitaremos este tipo de información, sólo queremos mostrar la imagen.

Eliminando la información oculta reduciremos el tamaño de nuestras imágenes, favoreciendo a una mayor rapidez en la carga de las mismas.

Con toda esta información “inútil” por detrás de la foto nuestras imágenes están ocupando más espacio del que deberían, vamos a ver pues cómo eliminarla y favorecer así a una mayor rapidez en la carga de las mismas. ¡Allá vamos!

Optimizando con la herramienta jpegtran

Como hemos estado comentando a lo largo de esta serie de artículos, JPEG es un formato con pérdida, pero algunas acciones y operaciones no implican una pérdida de calidad en la imagen original, así pues podremos realizar las siguientes operaciones sin pérdida de calidad:

  • Rotación de la imagen.
  • Recortado de una región de la imagen.
  • Modificación de metadata (información).

Así pues emplearemos la herramienta jpegtran para eliminar toda esta información superflua que no nos interesa para nuestros diseños y reducir así el tamaño de nuestras imágenes.

Uso del comando -optimize para optimizar las imágenes JPEG

Si todavía no habéis descargado jpegtran hacedlo, y a continuación probamos el siguiente comando:

jpegtran -copy none -optimize imagen_original.jpg imagen_final.jpg

En algunas versiones de jpegtran, el uso del comando variará ligeramente:

jpegtran -copy none -optimize imagen_original.jpg > imagen_final.jpg

El comando “-optimize” aplicará una mejor compresión sobre nuestra imagen, eliminando además la información inútil oculta en la imagen, permitiéndonos así trabajar con imágenes más pequeñas en tamaño.

Eliminar la información (metadata) de la imagen hará que también se elimine el copyright de la misma, así que tened cuidado, quizás sí os interese / debáis mantener dicha información.

Recordad que existen otras muchas opciones con las que poder rotar o recortar nuestra imagen entre otras, os recomiendo que las miréis con calma en la página oficial y profundicéis en las que os puedan interesar.

Reflexión final

Al igual que en el artículo anterior, con un poco de investigación, uso de las herramientas apropiadas y sentido común podemos conseguir optimizar nuestros sitios web de manera relativamente sencilla.

A pesar de ser un tutorial relativamente corto, hemos visto el empleo básico para optimización de la herramienta jpegtran, con la cual reduciremos de forma sencilla el tamaño de nuestras imágenes JPEG. Ahora lo importante es que vosotros mismos profundicéis en la misma y busquéis nuevas soluciones para vuestros problemas.

En el siguiente capítulo veremos cómo optimizar las imágenes en formato PNG… ¡no os lo perdáis!

¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (6 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Es interesante, pero el próximo capítulo lo será más.

@Alex @Sn gracias por vuestros comentarios :)

Las pruebas que he hecho con Photoshop CS4 (grabar para web) dan una imagen inferior a jpegtran (0.5KB menos), aunque supongo que dependerá de la imagen….

deissy

bueno a mi me ayudo en mi investigacion muy buena tu publicación

Hola Adrian, esta es la solución que yo estaba buscando para mi blog, el cuál es de Tutoriales casi exclusivamente, y me lleva mucho tiempo transformar de bmp a jpg, así que trataré de seguir paso a paso tus indicaciones, y bajar el programa, es que soy novata en el manejo de las herramientas para blogs. Si lo logro les aviso. Gracias por todo.