Cómo servir fácilmente imágenes escaladas en WordPress (paso a paso)

¿Desea publicar imágenes a escala en su sitio de WordPress?

Los principiantes suelen ralentizar sus sitios web subiendo imágenes sin prestar atención a su tamaño.

Servir las imágenes con las dimensiones correctas mejorará el rendimiento de su WordPress sin reducir la calidad.

En este artículo, le mostraremos cómo servir fácilmente imágenes escaladas en WordPress.

¿Por qué servir imágenes escaladas en WordPress?

En su sitio web WordPress, necesitará imágenes para las entradas de su blog, miniaturas, cabeceras de página, imágenes de portada, etc.

Dependiendo de su tema, estas imágenes ocuparán un determinado número de píxeles. Por ejemplo, su imagen destacada puede ocupar 680×382 píxeles y una miniatura de 100×100 píxeles.

Es importante utilizar imágenes que se hayan escalado para ajustarse a las dimensiones correctas necesarias para su sitio. Por ejemplo, si las imágenes destacadas ocupan 680×382 píxeles, debe guardarlas exactamente a ese tamaño.

De lo contrario, su sitio puede ralentizarse o la calidad de la experiencia del usuario disminuirá. Estas son algunas de las razones más comunes:

• Sus visitantes tendrán que descargar archivos más grandes de lo necesario, aumentando los tiempos de carga.
• Si utiliza imágenes con menos píxeles que el espacio permitido, se verán borrosas cuando se muestren a mayor tamaño.
• Tu sitio web tendrá que cambiar el tamaño de las imágenes sobre la marcha, lo que significa que tiene que ejecutar más procesos antes de poder mostrar el contenido a los usuarios.

En cualquier caso, dará a tus usuarios una mala experiencia y también puede afectar negativamente al SEO de tu imagen.

Por eso, si pruebas el rendimiento de tu sitio web explorando GTMetrix, a menudo te recomendará que sirvas imágenes a escala para acelerar tu sitio web.

Dicho esto, echemos un vistazo a cómo servir fácilmente imágenes escaladas en WordPress. Vamos a cubrir dos métodos:

Método 1: Servir imágenes escaladas con un plugin

La forma más sencilla de servir imágenes a escala es utilizar un plugin que muestre automáticamente las imágenes de su sitio web al tamaño correcto. Este método es el más sencillo, pero no permite tanta flexibilidad como el segundo.

El plugin gratuito Optimole es uno de los mejores plugins de compresión de imágenes para WordPress y escalará automáticamente tus imágenes. Sin embargo, si recibes más de 5.000 visitas al mes, necesitarás la versión premium.

En primer lugar, debe instalar y activar el plugin Optimole. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, accederá automáticamente a la página Medios ” Optimole y se le pedirá que se registre para obtener una clave API o que introduzca su clave API existente. Esto es muy fácil.

Sólo tiene que asegurarse de que su dirección electrónica es correcta y hacer clic en el botón “Crear y conectar su cuenta”. La conexión con Optimole se realizará automáticamente. Ni siquiera tendrá que visitar otro sitio web o pegar manualmente la clave.

Optimole empezará a optimizar sus imágenes en segundo plano. Elegirá automáticamente el tamaño de imagen correcto para el dispositivo y navegador de cada visitante y servirá las imágenes desde la rápida CDN Optimole Cloud Service.

Al hacer clic en la pestaña “Ajustes”, verá que las imágenes de sus entradas y páginas se sustituirán automáticamente por las optimizadas y escaladas por Optimole.

Esto no se hace sobre la marcha porque es a través de un CDN, lo que significa que su sitio no tendrá un golpe de rendimiento.

Además, el plugin ha habilitado la carga lenta, lo que significa que las imágenes de la página que no estén visibles en ese momento no se cargarán hasta que se necesiten. Esta es otra forma eficaz de reducir el tiempo de carga de la página y mejorar el rendimiento del sitio web.

Estos ajustes funcionarán bien para la mayoría de los sitios web. Sin embargo, puede personalizar Optimole aún más utilizando los ajustes del menú “Avanzado” para ver qué funciona mejor para su sitio web.

Si realizas algún ajuste, no olvides hacer clic en el botón “Guardar cambios”, al final de la página.

Método 2: Servir imágenes escaladas manualmente

También puede escalar imágenes sin un plugin. Hay tres maneras de hacerlo: puede utilizar el software de edición de imágenes, la característica de edición de imágenes en la biblioteca de medios de WordPress o cambiando los valores en los ajustes de medios de WordPress.

Escalado de imágenes con software de edición de imágenes

Antes de subir las imágenes a su sitio web, puede ajustarlas a las dimensiones correctas utilizando un programa de edición fotográfica en su ordenador, como Adobe Photoshop o Affinity Photo.

El programa te permite elegir el número correcto de píxeles para tu imagen y guardarla con un tamaño de archivo pequeño y el formato de archivo que prefieras.

Por ejemplo, aquí tienes una captura de pantalla que muestra la herramienta de recorte de Affinity Photo.

Además de elegir bien el tamaño de las imágenes desde el principio, hay otras cosas que puedes hacer antes de subirlas para asegurarte de que no ralentizan tu sitio web.

Para más información, consulte nuestra guía sobre cómo optimizar las imágenes para el rendimiento web.

Escalado de imágenes en la biblioteca de medios de WordPress

¿Sabías que puedes hacer edición básica de imágenes en WordPress? La característica “editar imagen” de WordPress le permite recortar, girar, voltear y escalar imágenes.

Al editar una entrada o página, debes hacer clic en la imagen que deseas editar. A continuación, debes hacer clic en el botón “Reemplazar” y luego seleccionar “Abrir biblioteca de medios” en el menú.

Esto abrirá la biblioteca de medios de WordPress con la imagen seleccionada.

A la derecha hay un área donde puede añadir texto alternativo, un título, una leyenda y una descripción de la imagen. También encontrarás un enlace “Editar imagen”.

Basta con hacer clic en ese enlace para visitar la página “Editar imagen”.

Aquí encontrarás una vista previa de la imagen, botones de edición y otras opciones útiles para escalar o recortar la imagen.

Para escalar la imagen, basta con cambiar uno de los valores de “Nuevas dimensiones” en Escalar imagen, a la derecha.

Por ejemplo, esta imagen tiene una resolución muy grande de 2560×1637 píxeles. Podemos reducirla a una anchura de 1200 píxeles escribiendo en el primer campo “Escalar imagen”.

Todo lo que tiene que cambiar es el Ancho porque el valor de la altura de la imagen cambiará automáticamente para mantener la imagen en proporción.

Después, basta con hacer clic en el botón “Escala” para cambiar la resolución de la imagen.

Tenga en cuenta que solo puede reducir el tamaño de una imagen en WordPress. No puede aumentar el tamaño de una imagen aumentando sus dimensiones.

Para obtener instrucciones detalladas, consulte nuestras guías sobre cómo realizar una edición básica de imágenes en WordPress y cómo recortar y editar miniaturas de entradas en WordPress.

Cómo ajustar el tamaño de las imágenes en los ajustes de medios

Cuando usted sube imágenes a su sitio web, WordPress crea automáticamente varias copias en diferentes tamaños. Puede personalizar estos tamaños visitando la página Ajustes ” Medios en el área de administrador de WordPress.

Aquí puedes cambiar fácilmente las dimensiones de las imágenes en miniatura, medianas y grandes.

En algunos sitios web, es posible que necesite más tamaños de imagen que miniatura, mediano y grande. Puedes aprender a crear estos tamaños siguiendo nuestra guía sobre cómo crear tamaños de imagen adicionales en WordPress.

Si cambia los tamaños de imagen por defecto o crea tamaños de imagen adicionales, solo se verán afectadas las imágenes nuevas. Debe volver a generar los tamaños de imagen para las imágenes existentes.

Cuando añades una imagen a una entrada o página, puedes seleccionar el tamaño de la imagen en los ajustes del bloque situados a la izquierda de la página.

Esperamos que este tutorial te haya ayudado a aprender cómo servir imágenes escaladas en WordPress. También puedes consultar nuestra guía sobre cómo optimizar el SEO de las imágenes en WordPress o echar un vistazo a nuestro artículo sobre el uso de la IA para generar imágenes para las entradas del blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.