Cómo guardar nuestras imágenes optimizadas para la Web

Como guardar nuestras imagenes optimizadas para tu Web

Cómo optimizar las imagenes para tu web

En este artículos vamos a ver cómo puedes optimizar las imagenes para tu  web. Al guardar imágenes, debemos tener en cuenta dos cosas: el formato de archivo de imagen y la compresión, eligiendo la combinación correcta, podemos llegar a un grado de compresión óptimo.

La mayoría de usuarios, los dos únicos formatos de imagen que conocen son JPEG y PNG, a modo de resumen, podemos decir que utilizaremos el formato JPEG para fotos o imágenes con mucho color, y el formato PNG para imágenes más simples o cuando necesitemos imágenes con fondo transparente.

Para aquellos que no conocen la diferencia, el formato de imagen PNG es un formato no comprimido, lo que significa que el resultado es una imagen de mayor calidad, por lo que el tamaño del archivo es mucho mayor. Por otro lado, el formato JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente más pequeño.

Lo siguiente es la compresión, lo que significa usar una herramienta para guardar imágenes optimizadas para la web. La compresión puede marcar una gran diferencia.

Ejemplo compresión tras optimizar las imagenes para tu web

A continuación puedes ver una tabla con las combinaciones que podemos usar para guardar nuestras imágenes.

Formato de Imagen Tamaño de Imagen
Photoshop JPEG Optimizado Calidad Alta 70,12 KB
TinyPNG Optimizado 59,2 KB
JPEG Optimizado Calidad Baja 56,6 KB
Photoshop JPEG Optimizado Calidad Máxima 192,1 KB
JPEG No Optimizado Calidad Máxima 140 KB
Photoshop PNG Optimizado 170,3 KB
PNG No Optimizado 172,4 KB

Herramientas de compresión de imágenes para bloggers

Ahora que hemos visto la diferencia que tiene cada tipo de compresión, vamos a ver cómo podemos guardar adecuadamente las imágenes optimizadas para la web y así poder acelerar nuestro sitio web.

Adobe Photoshop

Adobe Photoshop es un software premium (de pago) que viene con una función para guardar imágenes optimizadas para la web. Simplemente abrimos nuestra imagen y hacemos clic en el botón Archivo, y elegimos la opción Guardar para Web y dispositivos.

Esto abrirá una pantalla de Guardar para Web y dispositivos. A la derecha, puedes elegir diferentes formatos de imagen. Por ejemplo, para el formato JPEG, verás diferentes opciones de calidad. Cuando selecciones sus opciones y hagas los cambios que necesites te mostrará el tamaño del archivo en la parte inferior izquierda.

Así de sencillo es utilizar Photoshop para optimizar las imagenes para tu web: elegir la orden Guardar para Web y dispositivos, seleccionar el formato de salida de imagen y elegir su calidad.

Ventana para optimizar las imagenes para tu web

Como alternativa a Photoshop tenemos GIMP. También tenemos otros productos de Adobe como Fireworks que pueden hacer el mismo trabajo.

ImageOptim

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

La alternativa de Windows a esto es Trimage.

Optimiza tus imágenes con ImageOptim

JPEGmini

JPEGmini utiliza una tecnología de recompresión que reduce significativamente el tamaño de las imágenes sin afectar a su calidad perceptual. Podemos usar su versión web de forma gratuita o comprar el programa para instalarlo. Al igual que TinyPNG, también tienen una API paga para automatizar el proceso.

Optimiza tus imágenes con JPEGmini

TinyPNG

TinyPNG es una aplicación web gratuita que utiliza una técnica de compresión con pérdida inteligente para reducir el tamaño de nuestros archivos PNG. Todo lo que tenemos que hacer es ir a su sitio web y subir nuestras imágenes. Comprimirán la imagen y nos darán el enlace de descarga. También tienen una API para desarrolladores que permite convertir las imágenes automáticamente.

Optimiza tus imágenes con TinyPNG

Conclusión

Como puedes ver, hay varias herramientas que podemos usar para optimizar imágenes para la web. Al usar la compresión de Photoshop, vimos los mejores resultados en tamaño, sin embargo, la calidad se vio algo afectada. Sin embargo, TinyPNG fue el claro ganador para guardar cualquier tipo de PNG en la web.

A veces, se suele aconsejar utilizar una combinación de TinyPNG o JPEGmini e ImageOptim para obtener mejores resultados.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 Comentarios

    1. Hola Jose, gracias por tu comentario. Me alegro que te haya gustado el artículo, lo cierto es que no suelo publicar cosas sobre diseño o diseño web, me estoy centrando únicamente en WordPress, pero si me gustaría publicar algunos truquitos, ya veré en qué categoría los meto… Otra cosa, en un par de semanas o así publicaré otro artículo con un plugin muy bueno que he descubierto para optimizar las imágenes.
      Gracias de nuevo por tu comentario.

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *