¿Quieres mostrar imágenes a escala en tu sitio de WordPress?
Los principiantes suelen ralentizar sus sitios web cargando imágenes sin tener en cuenta su tamaño. Mostrar imágenes del tamaño adecuado mejora el rendimiento de WordPress sin sacrificar la calidad.
En este artículo, le mostraremos cómo mostrar fácilmente imágenes a escala en WordPress.
¿Por qué servir imágenes escaladas en WordPress?
En su sitio web de WordPress, necesita imágenes para las publicaciones de su blog, miniaturas, encabezados de página, imágenes de portada y más.
Dependiendo de su tema, estas imágenes ocuparán una cierta cantidad de píxeles. Por ejemplo, su imagen destacada podría tener 680 × 382 píxeles y un tamaño de miniatura de 100 × 100 píxeles.
Es importante utilizar imágenes que estén escaladas para ajustarse a las dimensiones correctas necesarias para su sitio. Por ejemplo, si sus imágenes destacadas tienen 680 × 382 píxeles, debe guardarlas exactamente en ese tamaño.
De lo contrario, su sitio puede ralentizarse o disminuir la calidad de la experiencia del usuario. Aquí hay algunas razones comunes para esto:
- Tus visitantes tendrán que descargar archivos más grandes de lo necesario, aumentando los tiempos de carga.
- Si usa imágenes con menos píxeles que el espacio permitido, se verán borrosas cuando se vean más grandes.
- Su 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.
De cualquier manera, le dará a sus usuarios una mala experiencia y también puede afectar negativamente el SEO de su imagen.
Es por eso que cuando prueba el rendimiento de su sitio web con el escaneo de GTMetrix, a menudo recomendará mostrar imágenes escaladas para acelerar su sitio web.
Dicho esto, echemos un vistazo a cómo mostrar fácilmente imágenes escaladas en WordPress. Cubrimos dos métodos:
Método 1: mostrar imágenes a escala con un complemento
La forma más fácil de escalar imágenes es usar un complemento que escala automáticamente las imágenes de su sitio web al tamaño correcto. Este método es el más fácil, pero no ofrece tanta flexibilidad como el segundo método.
el libre Optimol El complemento es uno de los mejores complementos de compresión de imágenes de WordPress y escala automáticamente sus imágenes. Sin embargo, si recibe más de 5000 visitantes por mes, necesita la versión premium.
Primero debe instalar y activar el complemento Optimole. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.
Tras la activación, se le redirigirá automáticamente a la Medios » Optimol y se le pidió registrarse para obtener una clave API o ingresar su clave API existente. Esto es muy facil.
Asegúrese de que su dirección de correo electrónico sea correcta y luego haga clic en el botón ‘Crear y conectar su cuenta’. La conexión con Optimole es entonces automática. Ni siquiera necesita visitar otro sitio web o pegar la clave manualmente.
Optimole ahora comenzará a optimizar sus imágenes en segundo plano. Elige automáticamente el tamaño de imagen correcto para el navegador y el dispositivo de cada visitante, y las imágenes se entregan desde el rápido Optimole Cloud Service CDN.
Cuando haga clic en la pestaña Configuración, verá que las imágenes en sus publicaciones y páginas se reemplazan automáticamente con imágenes optimizadas y escaladas por Optimole.
Esto no sucede sobre la marcha porque pasa por un CDN, lo que significa que su sitio no obtendrá un impacto en el rendimiento.
El complemento también tiene habilitada la ‘carga diferida’, lo que significa que las imágenes en la página que no están visibles actualmente no se cargarán hasta que se necesiten. Esta es otra forma efectiva de reducir el tiempo de carga de la página y mejorar el rendimiento del sitio web.
Esta configuración funciona bien para la mayoría de los sitios web. Sin embargo, puede personalizar aún más Optimole usando la configuración en el menú ‘Avanzado’ para ver qué funciona mejor para su sitio web.
Si realiza algún cambio en la configuración, no olvide hacer clic en el botón ‘Guardar cambios’ en la parte inferior de la página.
Método 2: Mostrar imágenes escaladas manualmente
También puede escalar imágenes sin un complemento. Hay tres formas de hacer esto: puede usar el software de edición de imágenes, la función de edición de imágenes en la Biblioteca multimedia de WordPress o cambiando los valores en la configuración de WordPress Media.
Escalado de imágenes con software de edición de imágenes
Puede escalar sus imágenes a las dimensiones correctas antes de subirlas a su sitio web usando un software de edición de fotos en su computadora, como Adobe Photoshop o Affinity Photo.
El software le permite elegir el número correcto de píxeles para su imagen y guardarla con un tamaño de archivo pequeño y el formato de archivo deseado.
Por ejemplo, aquí hay una captura de pantalla que muestra la herramienta de recorte de Affinity Photo.
Además de obtener la imagen correcta desde el principio, hay otras cosas que puede hacer antes de cargar sus imágenes para asegurarse de que no ralenticen su sitio web.
Para obtener más información, consulte nuestra guía para optimizar imágenes para el rendimiento web.
Escalado de imágenes en la biblioteca multimedia de WordPress
¿Sabías que puedes hacer edición básica de imágenes en WordPress? La función de ‘editar imagen’ de WordPress le permite recortar, rotar, voltear y escalar imágenes.
Cuando editas una publicación o página, debes hacer clic en la imagen que deseas editar. Luego haga clic en el botón ‘Reemplazar’ y luego seleccione ‘Abrir biblioteca de medios’ en el menú.
Esto abrirá la biblioteca multimedia de WordPress con la imagen seleccionada.
A la derecha hay un área donde puede agregar texto alternativo, un título, una leyenda y una descripción para su imagen. También encontrará un enlace ‘Editar imagen’.
Simplemente haga clic en ese enlace para ir a la página ‘Editar imagen’.
Aquí encontrará una vista previa de la imagen, botones de edición y varias otras opciones que son útiles al escalar o recortar la imagen.
Para escalar la imagen, simplemente cambie 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 reducirlo a un ancho de 1200 píxeles escribiendo ‘Imagen a escala’ en el primer campo.
Todo lo que necesita cambiar es el ancho, ya que la altura de la imagen cambiará automáticamente para mantener la proporción de la imagen.
Luego haga clic en el botón ‘Escala’ para cambiar la resolución de la imagen.
Tenga en cuenta que solo puede cambiar el tamaño de una imagen en WordPress. No puede agrandar las imágenes aumentando las dimensiones de la imagen.
Para obtener instrucciones detalladas, consulte nuestras guías sobre cómo realizar la edición básica de imágenes de WordPress y recortar y editar miniaturas de publicaciones de WordPress.
Ajuste los tamaños de imagen en la configuración de medios
Cuando carga imágenes en su sitio web, WordPress crea automáticamente varias copias en diferentes tamaños. Puede ajustar estos tamaños yendo a: Ajustes » Medios página en su área de administración de WordPress.
Aquí puede cambiar fácilmente el tamaño de las imágenes en miniatura, medianas y grandes.
En algunos sitios web, es posible que necesite más tamaños de imagen que solo miniatura, mediano y grande. Puede 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 predeterminados o crea tamaños de imagen adicionales, solo se verán afectadas las imágenes nuevas. Debe regenerar los tamaños de imagen para las imágenes existentes.
Cuando agrega una imagen a una publicación o página, puede seleccionar un tamaño de imagen en la configuración de bloque en el lado izquierdo de la página.
Esperamos que este tutorial le haya ayudado a aprender a mostrar imágenes a escala en WordPress. También puede aprender a crear una página de destino o consultar nuestra lista de complementos de redes sociales para WordPress.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.