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.
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.
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.
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.