Cómo optimizar las imágenes en el sitio web de su empresa

La optimización de las imágenes que utiliza en su sitio web marca una diferencia sustancial en la experiencia de usuario que ofrece su sitio web y también en su tiempo de carga. Tiene un impacto directo en su clasificación de SERP y contribuye a muchos factores que pueden ayudar a los motores de búsqueda a comprender mejor el contenido de su sitio web.

Al optimizar las imágenes y usar el tamaño de archivo correcto, tendrá un sitio web que está equipado para cargar más rápido y brindar una mejor experiencia de usuario.

Consideremos esta infografía de Think With Google.

Dada esta estadística, es imprescindible optimizar las imágenes que utilizas, ya que ocupan una gran parte del peso de la página y, por lo tanto, prolongan su velocidad de carga. Pero, ¿cómo se hace eso?

Esta es una guía paso a paso con puntos de acción que te ayudarán a optimizar las imágenes de tu sitio web.

Paso 1: Usa imágenes ordenadas y recortadas

Reducir el tamaño de tus imágenes tanto como sea posible es una de las maneras más sencillas y eficaces de optimizarlas para la web, y aquí te explicamos por qué.

Las imágenes se componen de píxeles y cada píxel contiene datos que aumentan el tamaño del archivo. Recortar estas imágenes a las dimensiones más bajas necesarias elimina una gran cantidad de píxeles innecesarios, lo que reduce el tamaño del archivo y, en consecuencia, el tiempo de carga, sin afectar a la calidad de la imagen.

Paso 2: Decida entre la compresión con pérdida y la compresión sin pérdida

Hay dos tipos básicos de técnicas de compresión que se utilizan ampliamente en varios tipos de archivos, y son la compresión con y sin pérdida.

Como su nombre indica, la compresión con pérdida reduce el tamaño del archivo al omitir los datos de píxeles cuando los píxeles vecinos son similares. Este método aprovecha la forma en que el ojo humano percibe el color y solo omite los datos cuando pueden pasar desapercibidos. Gracias a este proceso, la tasa de compresión es alta, lo que permite obtener un tamaño de archivo considerablemente más pequeño sin ninguna diferencia sustancial en la calidad (a menos que se amplíe hasta cierto punto).

La compresión sin pérdidas no omite ningún dato de píxeles, sino que lo comprime tal cual. Esto da como resultado una imagen más nítida, pero sin una reducción significativa del tamaño del archivo.

Dependiendo de la calidad que necesite y de si el usuario puede ampliar la imagen, puede decidir qué método de compresión seguir. Los programas de edición de imágenes como Adobe Photoshop utilizan una combinación de estas dos técnicas para ofrecerte una alta tasa de compresión, en función de la calidad que elijas.

Paso 3: Elige el tipo de archivo correcto

Hay tres tipos de archivos que se utilizan ampliamente para las imágenes. Son imágenes JPEG (.jpg), `PNG (.png) y GIF (.gif). Elegir el tipo de archivo correcto entre estas opciones puede ayudar a reducir en gran medida el tamaño del archivo de las imágenes. He aquí un vistazo rápido a estos tipos de archivos para ayudarte a decidir.

JPEG es el tipo de archivo más utilizado, y por una buena razón. Tiene la mayor profundidad de color y ofrece compresión con y sin pérdida con calidades y tamaños de archivo ajustables. Los archivos JPEG se utilizan mejor para fotografías e imágenes complejas.

Los archivos PNG solo utilizan compresión sin pérdidas, por lo que producen imágenes ricas, pero a costa de un tamaño de archivo mayor. Este tipo de archivo se usa ampliamente para logotipos y otras imágenes simples.

Los archivos GIF están restringidos a solo 256 colores y solo utilizan compresión sin pérdida. Admiten la animación, por lo que se utilizan habitualmente para imágenes en bucle animadas de baja calidad.

Paso 4: Eliminar el exceso de metadatos

Las imágenes suelen contener metadatos que no son necesarios para su propósito. Estos metadatos no son más que detalles sobre la geolocalización de las imágenes, la marca y el modelo de la cámara, la fecha, la hora, el ISO, la velocidad de obturación y muchos otros ajustes.

Si el único propósito de la imagen es utilizarla en su sitio web, estos datos se convierten en nada más que exceso de equipaje. A continuación te explicamos cómo puedes eliminar estos datos.

• Haga clic con el botón derecho en la (s) imagen (s)

en

en su ordenador y haga clic en «Propiedades».

• Ve a la pestaña «Detalles» y haz clic en «Eliminar propiedades e información personal» en la parte inferior del cuadro.
• Seleccione las propiedades que desee

eliminado

, y haga clic en «Aceptar». También puede elegir si desea eliminar los datos del archivo original o guardar una copia desde este cuadro de diálogo.

Paso 5: ¿Ráster o vector?

Las imágenes rasterizadas y vectoriales son los dos tipos básicos de imágenes gráficas digitales que se utilizan en todas partes. Es muy importante saber qué tipo de imagen gráfica necesitas, pero primero veamos brevemente lo que significan exactamente.

La principal diferencia entre los gráficos rasterizados y vectoriales es que los gráficos rasterizados utilizan píxeles para representar una imagen, mientras que los gráficos vectoriales utilizan rutas (líneas, puntos y polígonos). Esto significa que los gráficos rasterizados son capaces de ofrecer imágenes ricas con detalles finos y muchas formas irregulares. El problema es que el tamaño del archivo va a ser considerablemente alto. Además, las imágenes que utilizan gráficos rasterizados se difuminarán al ampliarlas.

Por otro lado, las imágenes vectoriales tienen un tamaño de archivo mucho más pequeño y son independientes de la resolución, por lo que no se desenfocan, independientemente del zoom. Sin embargo, dado que utilizan trazados en lugar de píxeles, solo son adecuadas para imágenes geométricas, como logotipos e íconos.

Antes de continuar y subir cualquier imagen a tu sitio web, debes pensar en lo que contiene la imagen y su propósito en el sitio. Esto te ayudará a decidir si usar gráficos rasterizados o vectoriales para esa imagen.