Qué tamaño de imagen usar en WordPress (factores clave y consejos)

¿Está experimentando velocidades de carga lentas en el sitio web? La baja velocidad del sitio web puede deberse a muchos factores, y los tamaños de imagen grandes son uno de ellos. Si tiene un sitio web con una gran cantidad de contenido, el tamaño de la imagen probablemente podría ser uno de los factores detrás de la baja velocidad de su sitio. Por lo tanto, es importante optimizar sus imágenes de WordPress para que no obstaculicen su sitio. Esta guía le brindará una descripción general para determinar el mejor tamaño de imagen para su sitio web de WordPress. Esto ayudaría a mejorar la interacción con el cliente y aumentar la productividad.

Comprender los tamaños de imágenes en WordPress

Los tamaños de las imágenes en WordPress están determinados por las dimensiones (en píxeles) y el tamaño del archivo de imagen en kilobytes (KB) o megabytes (MB). Al mostrar una imagen en su sitio de WordPress, es importante saber que el tamaño de la imagen no se trata solo de una cuestión estética: afecta directamente el rendimiento del sitio, la experiencia del usuario y la optimización de los motores de búsqueda (SEO). WordPress ayudará a proteger a los usuarios del uso de imágenes extremadamente grandes al crear automáticamente una versión escalada al cargarlas. Además, cada imagen que cargue tendrá diferentes variaciones o tamaños que se mostrarán dependiendo de dónde se use en su sitio. Más sobre eso a continuación.

Funcionalidad SRCSet

Cuando subes una imagen a WordPress, la plataforma crea automáticamente varios tamaños de esa imagen (miniatura, mediano, grande, etc.). El atributo SRCset permite al navegador seleccionar el tamaño de imagen más apropiado según el tamaño de la pantalla del dispositivo y la densidad de píxeles.

Por ejemplo, si la publicación de su blog contiene una imagen y un usuario visita su sitio web desde un escritorio con una pantalla grande, el navegador podría cargar la versión grande (por ejemplo, 1024 px). Por otro lado, si el usuario navega desde un teléfono móvil, el navegador elegirá una versión más pequeña (por ejemplo, 300px), que es más rápida de cargar.

Estos son los tamaños predeterminados que obtendrás para cada imagen que subas en WordPress:

• Miniatura: 150 x 150 píxeles
• Medio: 300 x 300 píxeles (puede variar según su configuración)
• Grande: 1024 x 1024 píxeles (puede variar según su configuración)
• Tamaño completo: dimensiones originales

Si desea cambiar los tamaños de imagen predeterminados, puede encontrarlos en Configuración → Medios en el panel de WordPress:

¿Qué tamaño de imagen usar en WordPress?

En la mayoría de los casos, el tamaño del archivo de imagen no debe exceder los 200 kb. La mayoría de las imágenes deberían tener un tamaño más cercano a 50 kb-100 kb o menos. Para mantener sus archivos de imagen en ese rango, deberá considerar otros factores como las dimensiones.

A continuación se muestran algunas dimensiones de imagen recomendadas comunes para WordPress:

• Imágenes de publicaciones de blog: 1200 x 630 píxeles
• Imágenes destacadas (miniaturas de publicaciones): 1200 x 800 píxeles
• Imágenes de encabezado/Imágenes principales: 1600 x 900 píxeles o 1920 x 1080 píxeles
• Imágenes de fondo: 1920 x 1080 píxeles
• Controles deslizantes y banners: 1200 x 600 píxeles o 1920 x 800 píxeles
• Imágenes del producto (WooCommerce): 800 x 800 píxeles o 1000 x 1000 píxeles
• Imagen del logotipo: 200 x 100 píxeles o 250 x 100 píxeles

A menos que tenga una razón específica para hacerlo, no debería cargar imágenes de 5 MB que tengan 5000 píxeles de ancho. WordPress ayudará creando más versiones amigables para sitios web que puedas usar. Pero si muestra ese tamaño original, la velocidad de carga de la página se verá afectada.

Elegir el tamaño de imagen correcto para cargar en WordPress es crucial para optimizar el rendimiento de su sitio web y garantizar que las imágenes se vean nítidas en todos los dispositivos. El tamaño de imagen ideal depende del contexto en el que se utilizará la imagen (por ejemplo, para publicaciones de blog, miniaturas, controles deslizantes, etc.), así como de la capacidad de respuesta, el tamaño del archivo y las consideraciones de calidad.

Factores clave a considerar para la imagen del tamaño de WordPress

Al seleccionar o crear imágenes para WordPress, se deben considerar varios factores clave para garantizar que estén optimizadas para el rendimiento y el diseño. Estos factores incluyen el tamaño de la imagen, el tipo de archivo, las dimensiones y más. Aquí hay un desglose detallado:

Dimensiones de la imagen

Las dimensiones de la imagen afectan directamente cómo aparecen las imágenes en diferentes partes de su sitio web. El uso de imágenes demasiado grandes ralentiza los tiempos de carga, lo que afecta negativamente a la experiencia del usuario y al SEO. Las imágenes que son demasiado pequeñas pueden aparecer pixeladas o borrosas, lo que reduce la calidad visual general de su sitio.

Su tema de WordPress a menudo dicta las dimensiones de imagen ideales para diferentes secciones, como encabezados, publicaciones de blog o galerías. Consulte la documentación de su tema para conocer las dimensiones recomendadas.

Tamaño de archivo

Los tamaños de archivo más grandes dan como resultado tiempos de carga más lentos, lo que perjudica tanto la experiencia del usuario (especialmente en dispositivos móviles) como su clasificación en los motores de búsqueda. Los sitios lentos generan tasas de rebote más altas, lo que significa que es más probable que los visitantes abandonen su sitio antes de que se cargue por completo.

Lo ideal es mantener el tamaño de los archivos de imagen por debajo de 500 KB. Sin embargo, si la imagen se muestra de forma destacada, puede permitir hasta 1 MB para obtener una mejor calidad. Utilice herramientas de compresión de imágenes para reducir el tamaño de los archivos manteniendo la calidad visual. Para la compresión manual, herramientas como TinyPNG o JPEG-Optimizer funcionan bien. Después de comprimir, pruebe el tiempo de carga de su página utilizando herramientas como Google PageSpeed ​​Insights o GTmetrix. Si los tiempos de carga son lentos, reduzca aún más el tamaño de las imágenes.

Formato de archivo

Los diferentes formatos de archivo sirven para diferentes propósitos y elegir el correcto puede equilibrar la calidad y el rendimiento. El uso de un formato incorrecto puede generar tamaños de archivo innecesariamente grandes o una calidad de imagen deficiente, especialmente si se trata de transparencia o bordes nítidos.

JPEG (JPG) es mejor para fotografías o imágenes con muchos colores y degradados. Admite la compresión con pérdida, lo que significa que reduce el tamaño del archivo al eliminar algunos detalles, pero es excelente para reducir el tamaño de los archivos de imágenes complejas. Por otro lado, PNG es ideal para logotipos, iconos o imágenes con transparencia. PNG proporciona compresión sin pérdidas, preservando la calidad de la imagen a costa de archivos de mayor tamaño.

Relación de aspecto

Una relación de aspecto consistente garantiza que sus imágenes se muestren correctamente en diferentes dispositivos y tamaños de pantalla. El uso de relaciones de aspecto inconsistentes puede generar imágenes recortadas, distorsionadas o mal alineadas, lo que afecta la coherencia visual de su sitio.

Para imágenes en diseños fijos (como controles deslizantes o pancartas), siga siempre la relación de aspecto recomendada en la documentación de su tema o complemento (por ejemplo, una proporción de 16:9 para pancartas). Para galerías o cuadrículas, elija una relación de aspecto única (por ejemplo, 4:3 o 1:1 para miniaturas cuadradas) y recorte todas las imágenes a esa relación para lograr uniformidad. Si utiliza configuraciones de imagen receptivas, pruebe su sitio en diferentes dispositivos y tamaños de pantalla para asegurarse de que las relaciones de aspecto funcionen bien en varias ventanas gráficas.

Mejores prácticas para tamaños de imágenes de WordPress

La velocidad del sitio web es crucial para la experiencia del usuario y el SEO, y las imágenes de gran tamaño pueden ralentizar significativamente su sitio de WordPress. Optimizar el tamaño de las imágenes es importante para mantener tiempos de carga rápidos sin sacrificar la calidad. Aquí encontrará una guía rápida sobre cómo reducir eficazmente el tamaño de las imágenes y mejorar el rendimiento de su sitio.

Cambiar el tamaño de las imágenes a las dimensiones adecuadas

Cargue imágenes con dimensiones que se ajusten a las necesidades de visualización de su sitio. Evite cargar imágenes grandes cuyo tamaño cambie automáticamente en WordPress, ya que esto consume almacenamiento y ancho de banda. Antes de cargar imágenes, determine las dimensiones máximas que necesita según el diseño de su tema. Por ejemplo, si su área de contenido tiene 800 píxeles de ancho, las imágenes más anchas no se mostrarán correctamente y ralentizarán su página.

Cambiar el tamaño de las imágenes en WordPress

Si ya has subido una imagen de gran tamaño, puedes cambiar su tamaño directamente en WordPress. Vaya a Medios > Biblioteca en su panel de WordPress.

Haga clic en una imagen existente o cargue un nuevo archivo de imagen. En nuestro caso, hemos optado por subir un nuevo archivo de imagen.

Después de hacer clic en la imagen agregada, se le mostrarán todos sus detalles. Haga clic en 'Editar más detalles' en la esquina inferior derecha para acceder a las configuraciones agregadas.

En los detalles de la imagen, haga clic en el botón Editar imagen.

En Escalar imagen, ingrese las nuevas dimensiones (ya sea ancho o alto) y WordPress escalará la imagen proporcionalmente. Haga clic en Escala para aplicar los cambios.

NOTA: No puede escalar sus imágenes a un tamaño mayor que la versión original. WordPress te avisará en caso de que hagas eso.

Utilice herramientas de compresión de imágenes

Como se mencionó anteriormente, comprimir sus imágenes ayuda a reducir el tamaño de su archivo. Se encuentran disponibles varias herramientas de compresión de imágenes, incluido software de edición como Adobe Photoshop o Microsoft Photos.

Alternativamente, puede utilizar herramientas en línea como TinyPNG para lograrlo.

Esta herramienta prefiere la compresión con pérdida para minimizar el tamaño de sus archivos WEBP, JPEG y PNG. Simplemente cargue sus imágenes y TinyPNG se encargará de la compresión por usted.

Alternativamente, puede utilizar un complemento sólido de optimización de imágenes como Imagify. Agregue un nuevo complemento desde la sección "Complementos" de su panel de WordPress antes de instalarlo y activarlo.

Después de instalar y activar Imagify en su sitio de WordPress, navegue hasta Configuración > Imagify para configurar sus preferencias de compresión:

Una vez que esté configurado, haga clic en Guardar cambios. Imagify luego comprimirá automáticamente cualquier imagen que cargue en su sitio.

Cambiar el límite máximo de carga

WordPress establece un tamaño máximo de carga de archivos, que puede variar según los límites impuestos por su proveedor de alojamiento. Vaya a Medios > Agregar nuevo en su panel de WordPress para determinar su límite actual de carga de archivos. La restricción del tamaño de carga se mostrará en esta página.

Generalmente, no es necesario ajustar este límite a menos que planees cargar archivos más grandes. Sin embargo, reducir el límite de tamaño de archivo puede resultar útil, especialmente si administra un blog de varios autores, para evitar que otros carguen imágenes innecesariamente grandes. Puede ponerse en contacto con su proveedor de alojamiento para modificar el tamaño máximo de carga o actualizar el límite editando el archivo php.ini.

Utilice carga diferida

La carga diferida es una técnica de mejora del rendimiento que retrasa la carga de imágenes en una página web hasta que realmente se necesitan. En lugar de forzar que todas las imágenes se carguen inmediatamente cuando se accede a una página, la carga diferida solo carga las imágenes a medida que el usuario se desplaza hacia abajo y aparecen a la vista. Esto reduce el tiempo de carga inicial de la página, ahorra ancho de banda y mejora la experiencia del usuario.

La mayoría de los temas y complementos de WordPress actuales ofrecen soporte integrado para carga diferida. El propio WordPress incluso incluye carga diferida nativa a partir de la versión 5.5. Además, varios complementos como WP Rocket, Lazy Load de WP Rocket y a3 Lazy Load ofrecen un control y personalización más avanzados sobre el proceso de carga diferida, lo que facilita su implementación en cualquier sitio de WordPress sin mucha experiencia técnica.

Todas estas prácticas son fundamentales para mantener tamaños de imágenes profesionales en WordPress. Sin embargo, Divi, nuestro prolífico creador y tema de WordPress, los eleva aún más gracias a sus atributos responsivos.

Cómo crear tamaños de imagen perfectos con Divi

Si desea tener más control sobre el diseño de su imagen y las opciones de tamaño, puede utilizar un creador de páginas como Divi. Divi viene equipado con funciones de respuesta avanzadas. Esta herramienta integra varias funcionalidades en su sitio de WordPress, incluido el cambio de tamaño de la imagen. Aquí, profundizaremos en cómo Divi puede mejorar las dimensiones de sus imágenes manteniendo su calidad.

1. Descargue e instale Divi

Divi se puede comprar a través de Elegant Themes, y ofrece dos opciones de precios: una licencia anual por $89 o una licencia de por vida por $249 . Después de comprar, puedes descargar e instalar fácilmente el tema en tu sitio de WordPress siguiendo estos pasos:

1. En su panel de WordPress, vaya a Apariencia > Temas .
2. Haga clic en Agregar nuevo, luego seleccione Cargar tema.
3. Elija el archivo Divi .zip descargado y haga clic en Instalar ahora.
4. Una vez que se complete la instalación, haga clic en 'Activar' para hacer de Divi su tema activo.

Para obtener una guía detallada, mira el vídeo a continuación.

Después de completar la configuración, puede comenzar a construir su sitio. Para sentirse cómodo con el proceso de antemano, consulte nuestro tutorial sobre el uso de Divi Builder.

Comience con Divi

2. Cree su sitio web, abra Divi Builder y seleccione su imagen

Después de instalar Divi Theme en WordPress, puede crear rápidamente su sitio web. Divi le ofrece múltiples opciones para crear su sitio web. Puede crear su sitio web desde cero, aprovechar nuestros diseños prediseñados o utilizar Divi AI para crear su sitio web.

Además, puede utilizar Divi Quick Sites para crear un sitio web profesional en uno o dos minutos.

Después de crear su sitio web y agregar sus respectivas imágenes, puede acceder a Divi Builder y configurar los tamaños de sus imágenes de WordPress. Primero, vaya a su sitio web Divi establecido y haga clic en "Habilitar Visual Builder".

Haga clic en cualquier imagen agregada para cambiar su tamaño. Abra el módulo de imágenes Divi haciendo clic en el icono de la rueda.

3. Cambie el tamaño de las imágenes agregadas en WordPress con la configuración responsiva de Divi

La configuración responsiva de Divi facilita el cambio de tamaño de las imágenes en WordPress para diferentes dispositivos (escritorio, tableta y móvil). En la configuración del Módulo de imagen, navegue hasta la pestaña "Diseño". Aquí es donde ocurre la mayor parte de la personalización, incluidas las configuraciones responsivas. Dentro de la pestaña Diseño, desplácese hacia abajo para encontrar la sección "Tamaño".

Aquí, puede ajustar múltiples dimensiones de la imagen seleccionada, como:

1. Ancho
2. Ancho máximo
3. Alineación del módulo
4. Altura mínima
5. Altura
6. Altura máxima

NOTA: También puede forzar el ancho completo habilitando la opción proporcionada. Sin embargo, eso hará que el ancho y el ancho máximo no se puedan modificar.

Al lado de cada atributo, verá un pequeño ícono que se asemeja a un teléfono inteligente o una tableta (el ícono de configuración receptiva). Haga clic en este icono para habilitar diferentes configuraciones de vista de escritorio, tableta y dispositivo móvil.

En este caso, estableceremos el ancho máximo de la versión para tableta en 85%. El ancho reducido y el posicionamiento centrado ahorrarán espacio en la página de inicio, haciendo que la imagen sea más atractiva visualmente en dispositivos más pequeños. Haga clic en el botón de marca verde para aplicar los cambios guardados.

Funcionalidad SRCSet

Divi ofrece compatibilidad nativa con SRCSET para todas las imágenes, lo que permite que el tema haga que sus imágenes respondan automáticamente. Garantiza que se entregue la imagen del tamaño adecuado a cada dispositivo, lo que mejora las velocidades de carga al ofrecer imágenes más pequeñas a dispositivos más pequeños. Lo mejor de todo es que sucede automáticamente, sin ningún esfuerzo adicional por su parte.

Obtener Divi

Otras herramientas para la optimización de imágenes

Aunque la configuración responsiva de Divi ofrece una gran solución para cambiar el tamaño de las imágenes en WordPress, es posible que necesites herramientas de optimización adicionales de las que Divi actualmente carece. A continuación se muestran algunas herramientas externas de optimización de imágenes que puede utilizar:

1. EWWW Image Optimizer: un potente complemento de WordPress que comprime automáticamente nuevas imágenes al cargarlas y ofrece un optimizador masivo para los medios existentes. Permite cambiar el tamaño de la imagen y eliminar metadatos y admite la carga diferida y la conversión al formato WebP para una mejor compresión. La versión gratuita opera directamente en su servidor sin límites de tamaño de archivo, mientras que la versión premium aprovecha los servicios en la nube para una optimización mejorada y mayores índices de compresión.
2. ShortPixel Image Optimizer: este complemento optimiza imágenes y archivos PDF mientras cambia automáticamente el tamaño de las imágenes. Ofrece opciones de compresión flexibles (con pérdida, sin pérdida y brillante), lo que brinda una opción equilibrada para los usuarios. El complemento realiza copias de seguridad de las imágenes originales, elimina metadatos y convierte PNG a JPEG, optimizando las imágenes y miniaturas de Retina. Sin embargo, debe compartir su correo electrónico para obtener una clave API.
3. Optimole: un complemento gratuito de optimización de imágenes todo en uno que procesa imágenes en tiempo real a través de un servidor basado en la nube. Se distingue por seleccionar el tamaño de imagen óptimo según la ventana gráfica del visitante e implementar la carga diferida para una visualización eficiente. La actualización a un plan premium ofrece conversiones de imágenes ilimitadas y funciones avanzadas, incluida la compresión de alta calidad que conserva la claridad original al tiempo que reduce el tamaño del archivo y la creación automática de versiones Retina y WebP.
4. WP Smush: este complemento es parte del conjunto de complementos WPMU DEV. Optimiza automáticamente las imágenes después de cargarlas en su sitio de WordPress. WP Smush presenta una opción de optimización masiva que le permite comprimir hasta 50 imágenes a la vez, lo que facilita la mejora de sus medios existentes. El complemento también incluye opciones para cambiar el tamaño de las imágenes y cargarlas de forma diferida, y puede configurarlo para eliminar los metadatos de las imágenes al cargarlas. Admite imágenes de hasta 5 MB, pero deberás actualizar a la versión premium para optimizar archivos más grandes.

Independientemente de su enfoque, puede mejorar el rendimiento de su sitio web. La optimización de imágenes contribuye a mejorar los tiempos de carga y una mejor experiencia de usuario.

Conclusión

En 2024, crear un sitio exitoso en WordPress va más allá de la funcionalidad básica; Proporcionar una experiencia fluida y atractiva a sus clientes es esencial. Optimizar el tamaño de las imágenes es crucial para lograr esto, ya que ayuda a garantizar tiempos de carga rápidos y un diseño visualmente atractivo que refleje la identidad de su marca. Al utilizar complementos inteligentes y opciones de personalización, puede mejorar el rendimiento de su sitio y transformarlo en un atractivo escaparate que cautive a los visitantes.

Si está buscando más opciones de personalización para dimensionar sus imágenes utilizando un creador visual, Divi facilita la realización de esos ajustes sobre la marcha para garantizar que sus imágenes se vean perfectas en todos los dispositivos.

Obtener Divi

¿Quiere potenciar su sitio web de WordPress? Descubra los tamaños de imagen ideales para mejorar el rendimiento y el atractivo visual de su sitio web. Explore nuestra lista seleccionada de herramientas y consejos que pueden ayudarlo a administrar eficazmente los tamaños de imágenes para una mejor experiencia de usuario.