La optimización de imágenes es una parte importante del proceso de creación de un sitio web. Al principio, la elección puede parecer una tarea simple, y por eso algunas veces dejamos de darle la atención necesaria.

Las imágenes, así como los textos y otros elementos de un sitio web, necesitan ser optimizadas. La optimización de imágenes es clave no solo por una preocupación estética; sino también por que  pueden afectar el tiempo de carga, ayudar en el posicionamiento de Google y mucho más.

SEO

Un sitio ligero mejora el posicionamiento en Google, pues la velocidad de carga del sitio es uno de los criterios evaluados para determinar el posicionamiento. Los sitios rápidos generan una mayor satisfacción a los visitantes y consecuentemente, aumentan las conversiones.

Para garantizar que tus imágenes sean encontradas por los motores de búsqueda, asegúrate de adicionar el título y los atributos alt a las imágenes. Además de ganar en SEO, estarás garantizando una mejora significativa en la usabilidad del sitio.

Formatos

Hay diversos formatos de archivos para imágenes digitales. Los más usados en la web son PNG, JPEG y GIF, pero cada uno se comporta de una manera diferente. Escoger el formato más adecuado es el inicio para optimizar las imágenes.

• GIF: El formato GIF soporta hasta 256 colores y guarda las imágenes en un formato pequeño – lo que es práctico para internet. Admite la transparencia en la imagen, pero sólo una transparencia completa. También mantiene la fidelidad de la imagen y soporta pequeñas animaciones.
• PNG: El formato PNG también mantiene la fidelidad de la imagen y soporta transparencia, pero con el canal alfa – que hace posible definir el nivel de opacidad de cada pixel. El patrón PNG en las herramientas gráficas es de 24 bits, que soporta 16 millones de colores, pero también existe el de 8 bits, que posee 256 colores como el formato GIF. En general, el formato PNG es superior al GIF ya que preserva los detalles sutiles, y si necesitas elementos geométricos también es una gran opción para el uso vectorial.
• JPG (o JPEG): JPG es el formato más indicado para fotografías y el más popular en internet, sin embargo en su comprensión siempre causa perdida de calidad. No es compatible con la transparencia pero soporta 16 millones de colores.

Simplificando: Utiliza JPEG para fotos, PNG para vectores y GIF para animaciones.

Dimensiones

Piensa en tu sitio y visualiza donde será insertada cada imagen, escogiendo la cantidad de espacio que va a ocupar. De esa forma puedes realizar la optimización de imágenes durante la producción o la elección en un banco de imágenes; podrás tener en mente las dimensiones necesarias y buscar un archivo adecuado para utilizar el tamaño real de la imagen.

Conocer el espacio que cada imagen va a ocupar ya define la preparación de cada una de ellas. Por ejemplo; si tienes un espacio con una dimensión de 600 pixeles de ancho en tu diseño, no será necesaria una imagen con un tamaño superior a ese, basta con obtener una imagen con el tamaño correcto.

Recuerda: usar imágenes con alta definición y dimensiones mayores a lo necesario hace que el tiempo de carga sea muy elevado; esto deja tu sitio más pesado. Por otro lado, si utilizas imágenes con baja resolución y dimensiones inferiores el archivo puede quedar borroso o estirado.

Comprensión

Otro paso en el proceso de optimización de imágenes para dejar tu sitio más leve es la comprensión.

Esto ayuda a reducir el tiempo de carga de la página; en cada archivo de imagen hay metadatos e informaciones duplicadas – lo que hace los archivos más pesados.

Entonces, en forma simplificada, comprimir o compactar es eliminar información redundante y disminuir el peso del archivo. En la comprensión, la información de los pixeles se almacena y se repite en otros semejantes a él. Para realizar este procedimiento, tendrás que utilizar herramientas y hemos seleccionado dos opciones para ti:

• TinyPNG: Es una herramienta que reduce el tamaño del archivo disminuyendo selectivamente el número de colores. A pesar del nombre, TinyPNG acepta otros tipos de formatos de archivos y permite subir hasta 20 archivos simultáneos cada uno con 5 MB.
• Smush.it: Es una herramienta en línea y también un pluggin para WordPress. Con esta herramienta puedes optimizar y redimensionar las imágenes que están en tu directorio.

CSS

Crear un elemento gráfico en tu sitio no tiene por qué ser solo con archivos de imágenes. Puedes hacer, por ejemplo, algunos botones personalizados con hojas de estilo CSS. Así, el mantenimiento y la personalización de los elementos es más fácil y practico; además de ser mucho más ligero que una imagen.

¿Te gustaron los consejos? Ahora solo queda comenzar a optimiza las imágenes para mejorar la carga de tu sitio y recibir muchos visitantes.

Si quieres saber más sobre la optimización de imágenes y sitios web, te puede interesar Cómo saber si tu empresa tiene un sitio web de calidad