Tamaños de las imágenes en WordPress: Cómo modificarlas y optimizarlas

Con el aumento de la competencia por los contenidos y la disminución de la capacidad de atención de los usuarios, los elementos visuales como las imágenes han cobrado más importancia que nunca. Por lo tanto, elegir el tamaño de imagen de WordPress adecuado también es importante.

gracias a WordPress La flexibilidad para cambiar los tamaños de imagen predeterminados e incluso añadir tamaños de imagen personalizados. Además, diversos plugins de optimización de imágenes facilitan el trabajo.

En este post, echamos un vistazo a cómo los novatos pueden cambiar el tamaño de las imágenes de WordPress, cómo regenerar miniaturas (es decir, aplicar los ajustes modificados a imágenes subidas anteriormente), consejos para optimizar las imágenes y los pros y los contras de los distintos formatos de imagen.

Visión general de los tamaños de imagen en WordPress

Cada vez que se sube una imagen a la biblioteca multimedia de WordPress, WordPress genera una serie de tamaños diferentes para esa imagen, como por ejemplo 700px x 400px. Esto significa que laAnchura de 700 píxeles, altura de 400 píxeles.

Con esta funcionalidad, un sitio web puede mostrar el tamaño adecuado de una imagen en función del escenario en el que se vaya a utilizar, de este modoVelocidad de carga mejoraday efectos visuales.

Estas cifras suelen denominarse "tallas". Dicho de otro modo.Cuanto mayor sea el tamaño de la imagen, más píxeles tendrá y mayor será el tamaño de almacenamiento del archivo.

El tamaño de la imagen también se refiere a la cantidad de espacio de almacenamiento que ocupa la imagen en el dispositivo, normalmente expresado en bytes, por ejemplo 100KB (kilobytes).

Si el archivo de imagen es demasiado grande, el usuario tardará más en descargar la imagen, lo que ralentizará el sitio web. Por lo tanto, el tamaño del archivo debe mantenerse bajo mientras que el tamaño de la imagen debe ser apropiado. Más adelante trataremos más sobre la optimización de imágenes.

¿Cómo maneja y gestiona WordPress las imágenes?

Cuando un administrador sube una imagen a la biblioteca multimedia de WordPress, WordPress crea automáticamente versiones de la imagen en varios tamaños. La imagen original que se sube se denomina "Imágenes a tamaño real", mientras que WordPress genera automáticamente versiones adicionales basadas en dimensiones predefinidas, tales comoMiniatura, tamaño medioresponder cantandotamaño grande.

Estas dimensiones se definen en los ajustes de WordPress y se utilizan automáticamente en función de dónde se muestre la imagen en el sitio (por ejemplo, entradas, galerías o barras laterales).

¿Por qué hace esto WordPress?Es comprensible que WordPress se asegure de que sus imágenes se muestren de forma óptima en diversos escenarios, ya sea en ununa barra lateral (en software), en el pie de página, en el artículo o en la página.

Por ejemplo, una imagen pequeña de 100 píxeles podría ser adecuada para utilizarla como vista previa de un artículo, mientras que la misma imagen escalada al tamaño de un banner también mantendría un buen efecto visual.

WordPress genera estas imágenes en distintos tamaños con el fin de satisfacer las necesidades habituales de las distintas áreas del sitio, evitando al mismo tiempo que las imágenes demasiado estiradas o encogidas provoquen distorsiones.

Tamaño de imagen por defecto de WordPress

Las copias de imagen generadas por WordPress son los tamaños de imagen predeterminados de WordPress. Es posible ajustar estos tamaños para necesidades de diseño específicas. Aprenderemos a hacerlo en esta entrada del blog:

• Miniatura (150 x 150 píxeles):Suele utilizarse para previsualizaciones de imágenes pequeñas.
• Mediana (300 x 300 píxeles): Una imagen de tamaño medio, que suele aparecer en una entrada o página de un blog.
• Tamaño grande (1024 x 1024 píxeles):Se utiliza principalmente para imágenes destacadas, imágenes de ancho completo o cualquier situación en la que se requiera una imagen de mayor tamaño
• A tamaño natural:Este es el tamaño original de la imagen cargada.

Para ver estas opciones, cargue una foto en la página web y haga clic en ella. Las opciones de tamaño de la imagen aparecerán en el panel derecho.

Tamaños de imagen recomendados para WordPress

Las distintas partes del sitio tienen necesidades diferentes y cada área requiere tamaños de imagen distintos. A continuación encontrará recomendaciones específicas:

Optimización de imágenes en WordPress

No es necesario utilizar más del tamaño de imagen requerido.

Los archivos de imagen excesivamente grandes pueden provocar una carga más lenta de las páginas, lo que puede hacer que muchos visitantes abandonen el sitio si están impacientes. Además, esto puede tener un impacto negativo en la clasificación de los motores de búsqueda. (La velocidad de carga también es uno de los factores de inclusión)

Lo ideal sería que el tamaño de las imágenes de WordPress se mantuviera por debajo de 150 KB, pero se pueden tolerar adecuadamente tamaños de archivo mayores para imágenes más grandes.

Estas son algunas cosas que debe tener en cuenta a la hora de optimizar el tamaño de las imágenes en WordPress:

Comprimir imágenes de WordPress

La compresión es el proceso de reducir el tamaño de un archivo sin comprometer la calidad de la imagen.

La compresión de imágenes en un sitio web WordPress es una de las formas eficaces de aumentar la velocidad de su sitio web.

Existen varias herramientas en línea que pueden utilizarse para la compresión:

• TinyPNG
• Squoosh
• Imagify
• Optimizilla
• Compressor.io

Al comprimir todas las imágenes JPEG (fotos) y PNG (gráficos), la velocidad y la eficacia de su sitio web pueden mejorar considerablemente.

Existen dos tipos principales de compresión: con pérdidas y sin pérdidas.

• pérdida de compresión (en tecnología digital)Reduce significativamente el tamaño del archivo eliminando algunos datos de la imagen que pueden no ser visibles. Se aplica a las imágenes web, pero puede provocar una ligera pérdida de calidad de imagen si se comprime demasiado.
• compresión sin pérdidas: Mantiene la calidad de la imagen al tiempo que reduce el tamaño del archivo de forma limitada. La compresión sin pérdidas es útil si desea conservar el mayor detalle posible de la imagen.

El plugin puede ayudar mucho con la compresión de imágenes, más sobre esto más adelante.

Ajuste del tamaño de la imagen

Redimensionar una imagen significa cambiar el tamaño real (no el tamaño en píxeles) de la imagen, incluyendo la anchura y la altura.

Las imágenes más grandes ocupan más espacio en disco y tardan más en cargarse, por lo que deben optimizarse.

Muchos temas ya ofrecen varios tamaños de imagen entre los que elegir. Sin embargo, siempre es mejor redimensionar las imágenes manualmente antes de subirlas a su sitio web.

SEO optimización

La optimización SEO de las imágenes en WordPress es crucial para la clasificación en los motores de búsqueda y el rendimiento del sitio web. Comprimir imágenes es un paso importante para mejorar la velocidad de carga y optimizar el SEO.

Consejos eficaces para optimizar las imágenes

✅ Asegúrese de renombrar la imagen antes de subirlaNo utilice "IMG1425". No utilice "IMG1425". Dé a la imagen un nombre descriptivo como "Tamaño de imagen en WordPress: Cómo modificar y optimizar imágenes.jpg".

✅ Utilice el texto alternativo. Esto es útil tanto para los visitantes (para mejorar la accesibilidad) como para los rastreadores (para ayudar a comprender el contenido de la imagen y mejorar potencialmente las clasificaciones).

✅ Uso de imágenes con capacidad de respuesta, ya que ayudan a mantener o mejorar el rendimiento en móviles, lo que puede ser un factor en la clasificación de los motores de búsqueda.

✅ Añadir etiquetas de esquema a tipos específicos de imágenesAdemás, cree un mapa del sitio de imágenes para ayudar a los motores de búsqueda a indexar mejor las imágenes del sitio web.

Seleccione el formato de imagen adecuado (JPEG, PNG, GIF, etc.)

Además de cambiar el tamaño, también es muy importante elegir el formato de imagen adecuado. Cada formato de imagen tiene sus ventajas e inconvenientes.

He aquí algunos formatos habituales y sus ventajas e inconvenientes:

Puede consultar el artículoTutorial superdetallado de Nanny: Le enseñará a convertir imágenes WebP en WordPress y a acelerar su sitio web.

Plugin de optimización del tamaño de las imágenes de WordPress

Los plugins son muy útiles cuando se trata de optimizar el tamaño de las imágenes en WordPress. Existen muchos plugins fáciles de usar para diferentes necesidades.

Para la compresión y el redimensionamiento, puede utilizar los siguientes plugins:

Optimizador de imágenes EWWW

EWWW Image Optimizer es un popular plugin de optimización de imágenes que las comprime automáticamente. Entre sus principales características se incluyen:

• Compatibilidad con archivos de tamaño ilimitado
• Soporte para la conversión WebP
• El servicio de pago alcanza una tasa de compresión de 80%
• Admite archivos PNG, JPEG, GIF, WebP y PDF.
• puntuación (del trabajo del alumno):: 5/5 (1.725 valoraciones)

precios: Gratis o a partir de $8/mes

Smush

Smush es un gran plugin para comprimir y redimensionar imágenes, y con más de 1 millón de instalaciones se ha convertido en un plugin de imágenes para WordPress muy popular. Entre sus principales características se incluyen:

• Retraso en la carga de imágenes
• Soporte para la conversión WebP
• Proporciona compresión gratuita sin pérdidas
• Integración con bloques Gutenberg
• puntuación (del trabajo del alumno):: 5/5 (6.000 valoraciones)

precios: Precio inicial $6/mes

Imagify

Imagify es otro plugin de optimización de imágenes que ofrece redimensionamiento y compresión sin degradar la calidad de la imagen. Entre sus principales características se incluyen:

• Admite la conversión a los formatos AVIF y WebP
• Optimización de imágenes para dispositivos móviles
• optimización de lotes
• puntuación (del trabajo del alumno):: 4,5/5 (1.406 evaluaciones)

precios: Gratis o a partir de $4,99/mes

Cambiar el tamaño de la imagen por defecto de WordPress

Como se ha mencionado anteriormente, WordPress ya proporciona tres tamaños de imagen predeterminados. Si los ajustes predeterminados no satisfacen sus necesidades, puede cambiarlos.

Por ejemplo, el tamaño predeterminado de las miniaturas (150×150) se considera demasiado grande y debe redimensionarse a un tamaño menor (por ejemplo, 100×100).

Estos son los pasos para realizar el cambio:

• Vaya al backend de administración de WordPress.
• En el panel izquierdo, haga clic en Ajustes > Medios.

• existe Ajustes de los medios puede ajustar los píxeles de cada tamaño. En este ejemplo, he cambiado el tamaño de la miniatura.
• golpe (en el teclado) Guardar cambios para guardar los ajustes.

Atención:Los ajustes modificados ahora sólo se aplican a las nuevas cargas

Cómo regenerar miniaturas

No se preocupe, es fácil aplicar nuevos ajustes a las imágenes existentes. Simplemente utilice el Regenerar miniaturas Con el complemento bastará.

He aquí los pasos para hacerlo:

• Vaya al backend de administración de WordPress de su sitio web.
• En el panel izquierdo, haga clic en Plugins > Instalar Plugins.

• buscar algo Regenerar miniaturas Complementos.
• golpe (en el teclado) montaje.
• golpe (en el teclado) empezar a utilizar.

• Una vez habilitado, vuelva al panel de control y haga clic en el panel izquierdo del Herramientas > Regenerar miniaturas.

• Aquí, haga clic en el Vuelva a generar todas las miniaturas adjuntaspara actualizar todas las imágenes a los nuevos ajustes.

Cómo añadir tamaños de imagen personalizados en WordPress

WordPress proporciona tres tamaños de imagen predeterminados, pero si necesita más opciones de tamaño de imagen, puede editar el archivo funciones.php para añadir tamaños de imagen personalizados.

Así es como funciona:

1. Vaya al backend del administrador de WordPress de su sitio web.

2. En el panel izquierdo, haga clic en Apariencia > Editor de archivos de temas.

3. En el lado derecho, encuentre funciones.php Documentación.

4. En funciones.php añada una función para definir el nuevo tamaño de la imagen utilizando la función add_image_size().

Ejemplo:

Código phpCopyadd_image_size('custom-size-name', 800, 600, true); // 800px ancho, 600px alto, recortado

Entre ellos:

• 'custom-size-name' - Un nombre único para el tamaño de imagen personalizado.
• 800, 600 - La anchura y la altura de la imagen (en píxeles).
• verdadero tal vez falso - Modo de recorte.verdadero Activar el recorte duro (tamaño exacto), elfalso Mantenga la relación de aspecto original (recorte suave).

5. golpe (en el teclado) Documentos actualizados para guardar el archivo.
6. Para mostrar tamaños de imagen personalizados en el tema, pegue el siguiente código:

Código phpCopy<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

💡 Por favor, ¡haga una copia de seguridad de los datos de su página web antes de realizar cualquier cambio!

7. Sustituya "su-tamaño-de-imagen-especificado" por el nombre que estableció en el paso anterior. Por ejemplo, puede cambiarlo por custom-size-name.

Preguntas frecuentes

P) ¿Qué tamaño de imágenes se utiliza en WordPress?
Los tamaños más comunes son:

• 1200×628 px para las imágenes destacadas
• 300 x 300 px para las miniaturas
• 1024×768 px para las imágenes de contenido

Elija los tamaños en función de los requisitos del tema y optimícelos para una carga más rápida.

P) ¿Cómo puedo cambiar el tamaño de las imágenes en WordPress?
entrar en Ajustes > Medios para fijar el tamaño por defecto, o en el mediateca Seleccione y cambie el tamaño de las imágenes individualmente en la

P) ¿Cómo puedo aumentar el tamaño de subida de imágenes en WordPress?
Por edición php.ini Documentación, modificaciones .htaccess o ajuste la configuración en el panel de alojamiento para aumentar el tamaño de carga.

P) ¿Cómo puedo hacer que todas las imágenes de WordPress tengan el mismo tamaño?
Utilizando un plugin de edición de imágenes (por ejemplo Regenerar miniaturas) o ajustando el CSS personalizado para garantizar tamaños de imagen coherentes en todo el sitio.