Ir al contenido principal

Cómo optimizar las imágenes para el sitio web

Las imágenes optimizadas pueden acelerar tu sitio web y proporcionar a los visitantes una mejor experiencia. Lee esto para saber cómo optimizar las imágenes para tu sitio.

Imagina que un visitante del sitio web acaba de ver tu nueva promoción. Se ha sentido tan atraído por ella que ha decidido echar un vistazo a la oferta que vendes. Por desgracia, no puede acceder la página del carrito de la compra para cargar y finalizar su compra. ¿Qué acaba de pasar?

Muchas circunstancias pueden provocar problemas de carga de páginas. Por ejemplo, para empezar, es posible que no tengas suficiente espacio de almacenamiento en línea para tu sitio. También puede que no dispongas de la memoria caché que necesitas.

Pero, de todos los errores que puedes cometer al crear un sitio web, no optimizar las imágenes para las páginas web puede ser uno de los más problemáticos. No optimizar correctamente las imágenes para la web puede ralentizar tu sitio web y, a su vez, reducir el tráfico y perder oportunidades de venta. A continuación, te explicamos cómo optimizar las imágenes para la web para que puedas crear un sitio web que obtenga resultados.

  • ¿Qué es la optimización de imágenes?
  • ¿Por qué es importante optimizar las imágenes para la web?
  • Cómo optimizar las imágenes para la web
  • Herramientas para la optimización de imágenes
  • Tipos de archivos de optimización de imágenes web
  • Resumen

¿Qué es la optimización de imágenes?

Alrededor del 70 % de las personas afirman que la velocidad de carga de las páginas web afecta a su predisposición a realizar una compra en línea. Además, alrededor del 45 % de estas personas no comprarán en un sitio web si la página se carga más lentamente de lo que esperaban.

MailChimp Longform -15 graphic -1-01

Estas estadísticas subrayan la importancia de la optimización de imágenes web. Si no has tomado medidas para asegurarte de que tus páginas se cargan lo suficientemente rápido, probablemente tengas suerte de que un comprador haya llegado incluso a la página de pago del carrito de la compra. A menudo, este programa comienza cuando llegan por primera vez a la página de inicio de tu sitio. Puedes evitarlo con la optimización de imágenes del sitio web.

La optimización de imágenes es el acto de reducir los tamaños de los archivos de imagen. Sin embargo, también implica no disminuir la calidad de la imagen y los gráficos durante el proceso de “reducción” (compresión).

Una de las razones de la lentitud de carga de los sitios web son las imágenes que no están correctamente optimizadas. Esto significa que los archivos son tan grandes que sobrecargan el resto de tu sitio y colapsan el espacio de almacenamiento en tu sitio web.

Por otro lado, la optimización de imágenes cambia el tamaño de la resolución de las imágenes en la página. La optimización de imágenes también reduce el tamaño de los archivos, por lo que el servidor de tu sitio web tiene más espacio. Al liberar espacio de almacenamiento en tu servidor, puedes reducir los tiempos de carga de la página en tu sitio web, lo que hace que tu sitio sea más fácil y agradable de navegar.

¿Por qué es importante optimizar las imágenes para la web?

Optimizar las imágenes para las páginas web hace felices a tus usuarios. También mantiene tus servidores de dominio funcionando como deberían. Ten en cuenta que aproximadamente la mitad de tus espectadores utilizan teléfonos móviles para buscar información en línea y visitar sitios web, por lo que la optimización de imágenes puede ayudar mucho a optimizar tu sitio web para la velocidad de la página para móvil y el SEO móvil. La optimización de imágenes web puede ayudar a los visitantes a ver tu contenido incluso con una conexión wifi lenta.

En última instancia, optimizar las imágenes para la web puede ayudar a tu sitio web de varias maneras. A continuación, hemos enumerado algunas formas adicionales en las que la optimización de imágenes para la web puede mejorar tu sitio web.

MailChimp Longform -15 graphic -2-01

Haz que las páginas se carguen más rápido

Una de las principales razones para optimizar las imágenes es hacer que se carguen más rápido. Las imágenes que no están optimizadas pueden ralentizar tu sitio web hasta el punto de que sea difícil navegar y frustrante de usar.

Pista: Optimizar las imágenes tiene que ver con reducir su tamaño de resolución, para que no ocupen demasiado espacio de almacenamiento web en línea. También puedes comprimir imágenes, pero mantener la misma calidad de imagen que el original, o utilizar imágenes y gráficos solo cuando sea necesario.

Optimizar la experiencia del usuario

Cuando optimizas imágenes para la web, también optimizas la experiencia del usuario. En otras palabras, reducirás la frustración del cliente. Si no quieres que los visitantes se queden sentados preguntándose cuándo aparecerá el texto y los gráficos en el espacio web en blanco, es hora de cambiar la resolución de cada imagen.

Los visitantes del sitio web apreciarán la mayor comodidad y apariencia que conlleva un tiempo de carga de la página más rápido. En lugar de un mensaje de error en el que deberían estar todas las imágenes, verán los iconos y las imágenes que deben mostrarse.

Aumentar el SEO

Al optimizar las imágenes, puedes potenciar el SEO para tu sitio web. También puedes etiquetar imágenes con etiquetas alternativas para mejorar la accesibilidad y optimizar el SEO. Si utilizas un creador de sitios web, puedes hacerlo fácilmente al cargar imágenes en una biblioteca multimedia.

Las bibliotecas multimedia, como las proporcionadas por WordPress o Mailchimp, proporcionan cuadros de texto donde puedes introducir etiquetas y palabras clave alternativas. Se adjuntarán a la imagen y aparecerán en los motores de búsqueda siempre que hayas permitido que tu sitio web se encuentre en la web.

Minimizar el almacenamiento en tu servidor

Los archivos de imagen, vídeo o gráficos grandes pueden ralentizar los servidores del sitio web. Si los medios que muestras en tu sitio web superan los límites de tamaño recomendados, la página puede tardar demasiado en cargarse o no cargarse en absoluto.

Almacenar menos archivos de imagen en tu servidor mantiene tu sitio web funcionando a la velocidad que los visitantes esperan. Después de aprender a optimizar las imágenes para la web, puedes lograr tiempos de carga de página rápidos.

Cómo optimizar las imágenes para la web

No hace falta mucho para aprender a optimizar las imágenes para la web. A continuación, explicamos cómo comprimir imágenes para tu sitio web y explicamos los pasos básicos que implica optimizar las imágenes para la web.

MailChimp Longform -15 graphic -3-01

Seleccionar un formato de archivo

Puede que te des cuenta de que existen cientos de tipos de archivos diferentes. Algunos de los más comunes incluyen JPEG (o .jpg), PNG o GIF. Pero antes de continuar con la optimización de imágenes web, debes comprender el propósito de cada tipo de archivo.

  • JPEG: es uno de los tipos de archivo de imagen web más comunes. Esto se debe a que proporciona una calidad decente que ocupa menos espacio que un PNG. Sin embargo, es posible que algunos gráficos no siempre conserven su “lustre” si reduces el tamaño del archivo de imagen JPEG (JPG).
  • PNG: este formato a menudo funciona mejor para reducir el tamaño de los archivos de imagen y conservar la calidad. También te permite utilizar y comprimir imágenes que tienen un fondo transparente.
  • GIF: un formato de archivo “GIF” no es especialmente preferible para las imágenes en la web. Está más pensado para crear vídeos gráficos animados. El mejor uso de este tipo de archivo es para tutoriales de demostración. Hoy en día, el GIF puede parecer obsoleto porque puedes alojar archivos MP4, MOV o WMV comprimidos que producen animaciones de mejor calidad que un GIF. Por otro lado, el GIF utiliza menos espacio y recursos del servidor web y no ralentiza la carga de las páginas.
  • SVG: este formato se ha hecho más popular tras la necesidad de hacer que los gráficos respondan a diversos tamaños de pantalla. Un archivo SVG se amplía y reduce en todos los dispositivos, incluidos ordenadores, teléfonos móviles y tabletas, sin reducir la calidad. Sin embargo, es posible que los SVG no se muestren correctamente en todos los navegadores.

Con respecto al tipo de archivo, todos se comprimen de forma diferente. Por ejemplo, los archivos JPEG sufren una compresión con "pérdidas". Necesitarás una imagen casi perfecta para lograr la misma calidad para este tipo.

Por otro lado, la compresión de archivos "sin pérdida" no reduce la calidad del archivo cuando se reduce el tamaño. Ese es a menudo el caso cuando se comprimen las imágenes PNG. Las compresiones "con pérdidas" frente a las compresiones "sin pérdidas" son algunos tipos de compresión que debes tener en cuenta al utilizar complementos para la autorreducción. El tipo de archivo desempeña un papel, pero el diseño del complemento también puede afectar al resultado de compresión final.

Añadir texto alternativo (la forma fácil)

Añadir texto “alternativo” hace más que optimizar una imagen para SEO utilizando palabras clave. También hace que una página web sea más accesible añadiendo una descripción a los gráficos que se están viendo.

El texto alternativo permite que las personas con problemas de visión entiendan las fotos y los gráficos que se muestran. También resulta útil cuando las imágenes no se muestran correctamente en una guía de tutorial, ya que te permite seguir entendiendo las instrucciones.

La forma más fácil de añadir texto alternativo es rellenarlo en el campo proporcionado al cargar una imagen en una biblioteca de imágenes. También puedes cargar imágenes en publicaciones de blogs en la mayoría de las plataformas de alojamiento que ejecutan blogs. Al crear la entrada de tu blog, es probable que veas un campo en el que puedes introducir el texto alternativo al añadir las imágenes.

Añadir texto alternativo (por las malas)

Si tu blog o creador de sitios web no tiene la opción de introducir rápidamente texto alternativo y descripción de imagen, tendrás que usar HTML. Lo harías en un cuadro de texto de una entrada de blog o página o en un archivo que subirías a tu servidor desde un archivo del Bloc de notas.

El uso de HTML es un poco más avanzado que el uso de un blog visual o un editor de páginas web. Esto requiere que tengas el código para copiar y pegar (o escribir desde cero) en modo “texto” frente a “visual” o “fuente”. Si no tienes ni idea de lo que significa esto, mira este ejemplo de cómo se ve el código HTML al añadir texto alternativo a una imagen.

No te preocupes por usar esto si estás empezando con tu sitio web. Puedes crear texto alternativo sin saber HTML si utilizas el método más sencillo descrito anteriormente. De lo contrario, puedes aprender al menos el código HTML necesario para formatear la imagen una vez que la cargues en una entrada de blog.

Aprender el código HTML de las etiquetas alt “por las malas” se refiere sobre todo a las personas que quieren aprender a crear un sitio web desde cero. En ese caso, aprenderían a insertarlo en un archivo de bloc de notas y cargarlo en su sitio web utilizando un cliente FTP o al crear un sitio web utilizando un editor de código.

Probablemente no tengas que hacerlo si acabas de empezar a construir tu sitio. Sin embargo, ahora sabes que es una opción a la hora de optimizar las imágenes para la web.

Optimizar las dimensiones del archivo

Es más fácil optimizar las dimensiones de los archivos si aún no los has cargado en la web. En este caso, puedes guardarlos en tu programa de edición de fotos favorito con el tamaño que necesitas. Esto equivale aproximadamente a 1024 píxeles de ancho x 786 píxeles de alto para los encabezados.

Las imágenes de fondo tendrán que ser de unos 1920 x 1080 píxeles para el fondo. Las imágenes del logotipo varían entre 100 y 400 píxeles de ancho, y normalmente tienen entre 50 y 100 píxeles de alto. Ten en cuenta, especialmente para las imágenes de fondo, que el tamaño que puedes utilizar depende del tamaño del archivo de imagen.

Comprimir las imágenes

Las imágenes del sitio web que más pueden afectar a tus tiempos de carga incluyen las imágenes de encabezado y fondo de página. Para las imágenes de encabezado y de fondo de página, normalmente querrás utilizar compresión GIF o JPEG. Hazlos del menor tamaño posible para proporcionar a tu sitio web la apariencia profesional que necesita.

Usar herramientas y complementos de optimización de imágenes

Una forma de evitar tener que pasar incontables horas optimizando manualmente las imágenes para la web es utilizar herramientas de optimización de imágenes. Estos complementos suelen incluir la mayoría de las principales plataformas de blog y redimensionan las imágenes automáticamente. Los complementos y herramientas de optimización de imágenes también proporcionan una forma rápida de añadir las etiquetas alternativas. Por lo general, solo puedes seleccionar imágenes de la biblioteca de medios que deseas comprimir. Esto sucede con unos pocos clics y reduce su tamaño a la vez que mantiene su calidad.

Herramientas para la optimización de imágenes

Si intentaras optimizar las imágenes de las páginas web una por una, necesitarías conocer código avanzado. Las herramientas para la optimización de imágenes automatizan el proceso. También evita que tengas que eliminar y volver a cargar decenas o incluso cientos de imágenes o archivos gráficos.

En lugar de hacer todo el trabajo duro de cambiar los tipos y tamaños de los archivos de imagen, los complementos lo hacen por ti. Algunos ejemplos incluyen LazyLoad, TinyPNG o Shortpixel. Sin embargo, eso depende de la plataforma de blog que utilices.

En muchos casos, esto es todo lo que tienes que hacer para comprimir automáticamente tus imágenes:

  1. Instala el plugin de compresión de imágenes.
  2. Ajusta los ajustes para cumplir con tus estándares de compresión.
  3. Deja que el compresor haga su trabajo.
  4. Configura manualmente imágenes no modificadas para futuras compresiones.

El cuarto paso anterior se refiere a los momentos en los que un plugin de compresión de imágenes no reconoce las imágenes cargadas. Depende del complemento que utilices, pero puede que no detecte imágenes que no hayas modificado. Sin embargo, tienes la opción de modificar manualmente esa imagen con algunos complementos de compresión de imágenes.

Tipos de archivos de optimización de imágenes web

Como hemos mencionado anteriormente, hay varios tipos de archivos entre los que elegir a la hora de optimizar las imágenes para la web. Los tipos de archivos de optimización de imágenes web comunes incluyen JPG (JPEG), PNG, GIF y, en algunos casos, SVG.

Otro que puedes haber visto es el formato de imagen web (.webp), que se ha vuelto cada vez más útil para universalizar imágenes en todas las pantallas de dispositivos. Algunas versiones de Chrome, Android, Microsoft Edge y Opera o Firefox lo admiten.

Resumen

Cuando aprendas a optimizar imágenes para páginas web, recuerda lo siguiente: puedes reducir su tamaño manteniendo una calidad lo más parecida posible a la original.

Es posible cambiar el tamaño de todas las imágenes automáticamente mediante complementos. Los mejores resultados se obtienen cuando utilizas las herramientas que saben cómo responder a tus tipos de archivo. Siempre que estés satisfecho con la imagen con la que empezaste, optimizarlas para su visualización en la web no debería ser demasiado difícil.

Preguntas frecuentes

¿Cómo comprimo las imágenes de mi sitio web?

Para comprimir las imágenes de tu sitio web, puedes cambiar el tamaño de la imagen a la resolución ideal antes de subirla a tu sitio web. De lo contrario, puedes utilizar un complemento automatizado para que lo haga por ti. Es mejor instalar el complemento en tu sitio web o blog antes de añadir nuevas imágenes, para que se compriman automáticamente. Puedes reducir manualmente los tamaños de imagen después de cargarlos y antes de instalar un plugin de compresión. Esto puede ser necesario solo si el complemento no detecta algunos archivos más antiguos.

¿Cómo optimizo un JPEG para la web?

Comprimir imágenes JPEG puede reducir los tiempos de carga de la página. Por lo general, también te ayuda a conservar la calidad de la imagen original durante el proceso. Sin embargo, primero debes empezar con una imagen de alta calidad para obtener los mejores resultados.

Para comprimir rápidamente un JPEG para la web, considera utilizar herramientas y complementos de optimización de imágenes. Por ejemplo, puedes utilizar el editor de fotos y el gestor de contenido de Mailchimp para editar, cambiar el tamaño y optimizar varios tipos de imágenes.

¿Cuál es el tamaño de imagen ideal para un sitio web?

El tamaño de imagen ideal varía en función de para qué lo necesites. Por ejemplo, el tamaño ideal del logotipo suele ser de unos 100 píxeles de ancho y ajusta su ancho a la pantalla. El tamaño ideal de la imagen de fondo del encabezado es de al menos 1024 píxeles, pero puede ser de hasta 2500 píxeles.

Ten en cuenta que esto no tiene en cuenta el nivel de calidad tras la compresión. Sin embargo, los compresores automáticos te ayudarán a lograr la mejor calidad con el menor esfuerzo.

Comparte este artículo