Un sitio web sin imágenes se ve aburrido incluso con un hermoso diseño, tema y fuentes.
Sin embargo, demasiadas imágenes o aquellas que no cumplen con las pautas de tamaño de imagen del sitio web pueden afectar el rendimiento de su sitio web, lo que hace que sus páginas se carguen lentamente.
Tanto los visitantes como los motores de búsqueda se preocupan por la velocidad de un sitio web. Los clientes potenciales se irán en los primeros segundos si hay retrasos en los tiempos de carga de la página.
Los visitantes del sitio web no pueden convertir si abandonan su sitio web rápidamente. Su clasificación también caerá en las páginas de resultados de los motores de búsqueda (SERPS) debido a las altas tasas de rebote.
Estas son las buenas noticias:
Puede aprender la mejor manera de optimizar las imágenes para páginas de carga rápida.
Este tutorial discutirá la optimización de imágenes, las pautas de tamaño de imagen del sitio web y las formas prácticas de optimizar imágenes para sitios web.
Esto es lo que cubriremos:
- El mejor tamaño de imagen para la web
- Optimización de imagen 101
- Optimización de imágenes y velocidad del sitio web
- Por qué necesita optimizar las imágenes de su sitio web
- Cómo optimizar imágenes para sitios web
- Los 3 mejores plugins de WordPress para optimizar las imágenes de tu sitio web
- Reflexiones finales: Cómo optimizar imágenes para sitios web — La guía definitiva
El mejor tamaño de imagen para sitios web
Cuando se trata de determinar el mejor tamaño de imagen para sitios web, los tamaños de archivo de imagen ideales para su sitio web deben ser inferiores a 500 KB, con un límite de 20 MB para imágenes individuales.
Las dimensiones del ancho de la imagen original deben estar entre 1500 y 2500 píxeles para computadoras de escritorio y 640 por 320 píxeles para dispositivos móviles.
Optimización de imágenes 101
Para optimizar las imágenes de su sitio web, debe reducir el tamaño del archivo de imagen para que el contenido se cargue y se muestre rápidamente en la pantalla del usuario.
Puede utilizar varios métodos para optimizar imágenes, como comprimir archivos grandes, cambiar el tamaño de la imagen o cambiar el formato.
También puede optar por utilizar una herramienta de optimización de imagen para reducir automáticamente la imagen hasta en un 80% sin una pérdida notable en la calidad de la imagen.
Optimización de imágenes y velocidad del sitio web
Si un sitio web tarda demasiado en cargarse, los visitantes se irán. A esto lo llamamos «rebote». La tasa de rebote de una página web aumenta con cada segundo adicional que tarda su página en cargarse.
La optimización de las imágenes de su sitio web será más fácil y rápida de cargar páginas.
Dado que las imágenes suelen estar entre los activos más pesados que se transfieren en una sesión de navegación, pueden ralentizar la velocidad de carga de la página.
Utilice las imágenes con moderación y asegúrese de que estén optimizadas para la web antes de subirlas. Esto mejorará la velocidad de su sitio web, reducirá las tasas de rebote y aumentará las conversiones.
Por qué necesitas optimizar las imágenes de tu sitio web
No podemos exagerar la importancia de las imágenes en su sitio web de comercio electrónico. Además de mejorar la velocidad del sitio, aquí hay otras razones para aprender a optimizar el tamaño de la imagen para los sitios web:
- Reduce las tasas de rebote
- Mejora el rendimiento del sitio web
- Ayuda a que tu página se clasifique más alto en los resultados de los motores de búsqueda
- Aumenta las tasas de conversión
- Ocupa menos espacio en su servidor
- Mejora la experiencia del usuario
Cómo optimizar imágenes para sitios web
El objetivo final de la optimización de imágenes es reducir el tamaño de una imagen manteniendo su calidad. Pero las imágenes pueden hacer o deshacer un sitio web. Demasiadas imágenes o imágenes grandes pueden ralentizar tu sitio web y afectar al rendimiento.
Esto es lo que tienes que hacer para aprender a optimizar imágenes para la web sin perder calidad:
Usar plugins de WordPress
Captura de pantalla
La forma ideal de optimizar las imágenes para tu sitio de WordPress es hacerlo antes de subirlas. Los plugins de compresión de imágenes de WordPress son una gran solución automatizada para optimizar las imágenes de tu sitio web.
Algunos de los mejores plugins de compresión de imágenes de WordPress son:
- Aplastamiento
- Optimole
- Imagificar
- Optimizador de imágenes ShortPixel
- Reciclaje de imágenes
- Optimizador de imágenes EWWW
Asegúrate siempre de que el plugin que elijas esté actualizado para que funcione con la última versión de WordPress.
Relacionado: ¡Echa un vistazo a los mejores plugins de WordPress!
Usar el almacenamiento en caché de imágenes
Una caché es un banco de almacenamiento de datos temporales. Por ejemplo, el almacenamiento en caché de imágenes es cuando los archivos de imagen se descargan en el almacenamiento local para cargarse más rápido cuando un usuario vuelve a visitar un sitio web.
El almacenamiento en caché facilita la visualización de imágenes, ya que los usuarios no tienen que volver a descargarlas cada vez que visitan un sitio web, por lo que obtienen la información que necesitan más rápido.
El almacenamiento en caché de imágenes es una excelente manera de resolver problemas que vienen con imágenes no optimizadas, como páginas de carga lenta.
Puede mejorar el rendimiento de su sitio web almacenando copias locales de los archivos de su sitio web que haya utilizado con frecuencia o recientemente.
Optimización de etiquetas de imagen ALT
ALT o texto alternativo reemplaza una imagen si la imagen no se muestra o si un visitante usa un lector de pantalla. Si bien los usuarios entenderán una imagen si pueden verla, los motores de búsqueda no lo harán.
Es por eso que necesita texto ALT para permitir que los motores de búsqueda indexen de qué se trata la imagen. Por lo tanto, incluso si las imágenes de su sitio web no se muestran, su página seguirá clasificada, ya que los rastreadores web pueden leer el texto ALT.
Esto hace que el texto ALT sea importante para la optimización de motores de búsqueda (SEO). Por lo tanto, debe proporcionar suficientes detalles con palabras clave relevantes en el texto ALT de sus imágenes para aumentar la visibilidad.
El uso de texto ALT también es una excelente manera de que las imágenes de productos de comercio electrónico aparezcan en los motores de búsqueda.
Cambiar el tamaño de las imágenes antes de subirlas
Captura de pantalla
La alta resolución y las grandes dimensiones de la imagen (es decir, su altura y anchura) son excelentes para la producción de impresión, pero no son adecuadas para los sitios web. Debe reducir el tamaño del archivo para que las imágenes se carguen correctamente en su sitio web mientras mantiene una alta calidad.
Puede cambiar el tamaño de las dimensiones del archivo de imagen utilizando un software de edición como Adobe Photoshop para reducir el tamaño total del archivo de sus imágenes.
Alojar imágenes en una CDN (red de entrega de contenido)
Alojar sus imágenes en una red de entrega de contenido (CDN) les permitirá cargarse más rápido en las páginas web.
Una CDN almacena el contenido almacenado en caché del sitio web en diferentes ubicaciones geográficas para ayudar a minimizar los retrasos en la carga del contenido web. Lo hace reduciendo la distancia entre el visitante y el servidor.
Por ejemplo, si su servidor está en Nueva York y un usuario en Suecia visita su sitio web, la CDN les atiende utilizando el servidor más cercano a ellos, no el de Nueva York.
Elija el tipo de archivo correcto
Debe elegir el formato de archivo correcto para sus imágenes porque afecta su optimización y el tamaño total de la imagen. Los formatos de archivo más populares para imágenes en la web incluyen:
- JPEG/JPG (Joint Photographic Experts Group) es un formato de imagen con pérdida que se aproxima a su imagen original.
La compresión con pérdida significa que la calidad de la imagen disminuye con el tamaño del archivo y puede eliminar cualquier dato innecesario de la imagen. El uso de una imagen JPEG da como resultado tamaños de archivo más pequeños y ofrece el mejor tamaño de imagen para imágenes de productos y banners principales de la página de inicio.
- PNG (Portable Network Graphic) es un formato de imagen sin pérdidas y tiene el tamaño de archivo más grande, a la vez que ofrece imágenes de alta calidad. La compresión sin pérdidas significa que no se pierde nada del archivo original después de comprimir los archivos PNG.
Por lo general, las imágenes PNG mantienen su calidad después de la compresión. Por lo tanto, es la mejor opción cuando tu imagen necesita un fondo transparente, como logotipos, ilustraciones o iconos.
- GIF (Graphic Interchange Format) es un formato sin pérdidas ampliamente utilizado para imágenes animadas en memes de redes sociales y anuncios publicitarios.
Usar un plugin de carga diferida
Captura de pantalla
La carga diferida significa retrasar la carga de imágenes en su sitio web hasta que se acerque a la imagen. La imagen en la parte inferior de la página se carga justo antes de que llegue a ella en lugar de cargarse con toda la página. Dado que solo se cargan unas pocas imágenes, ahorra en ancho de banda y su sitio web funciona mejor.
Te recomendamos que añadas el plugin Lazy Load by WP Rocket a tu sitio web si utilizas WordPress.
Comprimir imágenes
A la hora de comprimir tus imágenes, debes conseguir un equilibrio perfecto entre calidad y tamaño. Evita comprimir demasiado tus imágenes. Por el contrario, la compresión dará como resultado tamaños de imagen más pequeños y de menor calidad.
La compresión mínima, por otro lado, da como resultado archivos más grandes pero de mayor calidad.
Hay varias formas de comprimir tus imágenes:
- Utiliza herramientas de edición de imágenes como Adobe Photoshop o ImageOptim
- Utiliza herramientas de compresión web como JPEGmini o TinyPNG
- Utiliza plugins de optimización de imágenes de WordPress como Optimole que comprimen automáticamente las nuevas imágenes cuando las subes a tu sitio web.
Los 3 mejores plugins de WordPress para optimizar las imágenes de tu sitio web
Aquí están los tres complementos de WordPress más importantes para optimizar las imágenes en su sitio web.
Imagificar
Imagify (4.8 de 5 estrellas) reduce drásticamente los archivos de imagen sin perder calidad, lo que hace que su sitio se cargue más rápido. Además, el plugin te da 25 MB gratis cada mes (unas 250 imágenes).
Los planes pagos comienzan en $ 5 y pueden llegar hasta $ 70 por mes, según sus necesidades. «Imagify añade una pantalla a tu panel de control en la que puedes establecer el nivel de compresión para la optimización masiva», explica Cavanagh. «El nivel ultra reducirá el tamaño del archivo, pero mantendrá la misma calidad de imagen».
Reciclaje de imágenes
ImageRecycle (4.5 de 5 estrellas) ofrece optimización de PDF y compresión de JPG, GIF y PNG. Este plugin te da 100 MB de datos como parte de una prueba de 15 días. La buena noticia: 100 MB deberían ser suficientes para optimizar todas las imágenes en un sitio promedio.
Si bien ImageRecycle cuesta dinero (entre $ 10 y $ 50 dependiendo de la cantidad de fotos que cargue durante el año), respalda el gasto con funciones adicionales, como la funcionalidad del tablero y las actualizaciones por correo electrónico.
«Otra cosa buena de ImageRecycle es que se ejecuta en segundo plano, por lo que no afecta a nada más que puedas estar haciendo en el sitio», dice Cavanagh. Estima que optimizar un sitio más grande llevaría de 30 a 45 minutos.
Optimizador de imágenes EWWW
EWWW Image Optimizer (4.5 de 5 estrellas) optimiza automáticamente tus imágenes a medida que las subes a tu sitio. Si bien este complemento carece de las funciones mejoradas de Imagify e ImageRecycle, esta opción gratuita es un buen optimizador de nivel de entrada para propietarios de pequeñas empresas.
«En general, es una opción muy sólida que produce buenos resultados sin costo alguno», agrega Cavanagh.
Menciones
- TinyPNG te da 100 imágenes al mes usando su clave API gratuita. TinyPNG funciona en imágenes JPG y PNG.
- Optimus tiene una opción gratuita, pero solo admite imágenes JPG y PNG de hasta 100 KB de tamaño. La versión empresarial cuesta 99 dólares al año.
- Kraken te dará 100 MB de optimización de imagen gratuita. Las opciones de pago de Kraken se pueden comprar de forma mensual o anual.
- WP Smush funciona con imágenes JPG, GIF y PNG. Admite archivos de hasta 1 MB de tamaño. Tendrás que actualizar a WP Smush Pro para optimizar archivos más grandes.
- ShortPixel te ofrece hasta 100 imágenes al mes de forma gratuita. Sin embargo, los planes de opciones pagas tienen un buen precio, que oscila entre $5 y $30 por mes.
- reSmush.it Image Optimizer admite imágenes JPG, GIF y PNG de hasta 5 MB de tamaño.
Reflexiones finales: Cómo optimizar imágenes para sitios web Cómo optimizar imágenes para sitios web: la guía definitiva
Ahora ha aprendido a optimizar las imágenes de su sitio web para mejorar la velocidad de la página. Sin embargo, si no está utilizando imágenes optimizadas o siguiendo las pautas de tamaño de imagen del sitio web, debe comenzar a hacerlo.
Dado que muchos clientes utilizan dispositivos móviles para acceder a su sitio web, debe asegurarse de que los tamaños y formatos de archivo sean óptimos.
Si has implementado estas estrategias y aún no estás impresionado con el tiempo de carga de tu sitio web, podría ser el momento de pasar al alojamiento de WordPress.
Esto mejorará significativamente los tiempos de carga de su página y lo ayudará a obtener una clasificación más alta en los resultados de los motores de búsqueda, al tiempo que mejorará el rendimiento general de su sitio web. Pruebe el alojamiento de WordPress de Bluehost hoy.
Escriba un comentario