Diseño Web

Cómo guardar imágenes optimizadas para la web

24 octubre, 2019

Hace tiempo que hablamos como optimizar las imágenes para WordPress, como acelerar la carga de la web. Como ya ha llovido lo suyo veremos las distintas opciones que tenemos hoy en día para optimizar las imágenes de nuestra web, que puede ser un WordPress. Veremos como guardar imágenes optimizadas para tu web.

La mayoría de los principiantes no saben cómo guardar las imágenes correctamente, lo que puede tener un gran impacto en la velocidad del sitio web. En este artículo, te mostraremos cómo guardar correctamente las imágenes optimizadas para la web.

Cada experto en blogs te dirá que las imágenes ayudan a aumentar la fidelización de tus visitantes. Sin embargo, lo que no te dicen es que no optimizar las imágenes para la web puede ralentizar su sitio y nadie visita una web lenta. Algunos estudio nos indican que un retraso de un segundo puede costar el 7% de las ventas, un 11% menos de visitas a la página y una disminución del 16% en la satisfacción del cliente. Solamente tienes que ver como reaccionas tu mismo cuando vas a una web y tarda en cargar, suegro que ni esperas a que cargue y te vas a otro sitio.

¿Cómo guardar las imágenes correctamente?

Cuando guardamos imágenes debemos considerar dos cosas: formato de archivo de imagen y compresión.  Elegir la combinación correcta puede disminuir el tamaño de la imagen hasta cinco veces su peso.

Para la mayoría de nosotros los formatos mas utilizados para la web son JPEG y PNG, pero no son los únicos. Para simplificar las cosas, utiliza el formato JPEG para fotos o imágenes con mucho color, y el formato PNG para imágenes más simples o cuando necesites imágenes con fondo transparente.

Para los que no conocen la diferencia entre ambos formatos solamente comentar que el formato de imagen PNG no está comprimido, lo que significa que es una imagen de mayor calidad. La desventaja es que el tamaño del archivo es mucho mayor. Por otro lado, JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente menor.

La mayoría de las imágenes que utilizo en este blog son JPEG.

Una vez que tenemos claro el formato de imagen. Lo siguiente es la compresión, lo que significa usar una herramienta para guardar imágenes optimizadas para la web. La compresión puede hacer una gran diferencia en el peso del fichero. Veamos algunas herramientas para realizar este trabajo de compresión de imágenes.

Herramientas de compresión de imágenes

A continuación se muestra cómo puede guardar correctamente las imágenes optimizadas para la web y acelerar su sitio.

Adobe Photoshop

Adobe Photoshop es un software de pago y no es barato. Tiene una función para guardar imágenes optimizadas para la web. Simplemente tienes que abrir la imagen y haciendo  clic en el botón Archivo -> Guardar para Web (esta ruta puede varias dependiendo de la versión que tengas de Photoshop, puede que tengas como ruta Archivo -> Guardar como… -> Exportar)

Photoshop: Guardar para Web

Vemos que abre la pantalla de guardado. A la derecha, puede configurar diferentes formatos de imagen. Para el formato JPEG, tienes diferentes opciones de calidad. Cuando seleccionas las distintas opciones te mostrará el tamaño del archivo en la parte inferior izquierda. Prueba las distintas opciones para familiarizarte un poco y compara los resultados. Procura que el fichero tenga el menor peso posible pero que se vea bien.

Como nota, un producto de Adobe que funciona de maravilla para la compresión de imágenes es Firewoks, yo lo utilizo mucho. La pena es que Adobe prácticamente lo ha dejado de desarrollar, por este motivo no he hablado de el como una herramienta mas.

Smush Image Optimization, Compression, and Lazy Load

Smush es un plugin para WordPress muy utilizado. Tiene una opción gratuita que es mas que suficiente para los principiantes. Muy buen resultado en la compresion de imágenes y perfectamente integrado con WordPress.

TinyPNG

TinyPNG es una aplicación web gratuita que utiliza una técnica inteligente de compresión con pérdida para reducir el tamaño de archivos PNG. Todo lo que tienes que hacer es ir a su sitio web y subir tus imágenes. Comprimirán la imagen y le darán el enlace de descarga.

JPEG Mini

JPEGmini utiliza una tecnología de recompresión que reduce significativamente el tamaño de las imágenes sin afectar su calidad perceptiva. Puedes usar su versión web de forma gratuita o comprar el programa. Dispone de una API paga para automatizar el proceso para tu servidor.

ImageOptim

ImageOptim es una utilidad de Mac que te permite comprimir imágenes sin perder calidad al encontrar los mejores parámetros de compresión y eliminar perfiles de color innecesarios.

Trimage

Trimage es la alternativa a ImagenOptim para Windows

Como puedes ver, hay varias herramientas que puedes usar para optimizar imágenes para la web. Prueba y tu mismo decides cual se adapta mejor y optienes los mejores resultados.

Conclusiones sobre la optimización de imágenes

Si no estás guardando imágenes optimizadas para la web, empieza ya a hacerlo. Esto puede marcar una gran diferencia en la velocidad de tu sitio, y tus usuarios te lo agradecerán. Seguramente que la calidad de la imagen disminuye ligeramente pero la mayoría de los usuarios no lo notarán.

Si estás buscando imágenes de calidad, consulte nuestra guía sobre cómo encontrar imágenes libres de derechos que podrás utilizar en las publicaciones de web.

Por último, pero no menos importante, utilizar un CDN para servir imágenes puede acelerar significativamente la velocidad de carga de tu sitio web.

También podría gustarte

Sin Comentarios

Dejar un Comentario