Cómo mostrar imágenes de tamaño completo en WordPress (4 maneras fáciles)

¿Alguna vez has subido una foto impresionante de alta resolución a tu sitio de WordPress, solo para descubrir que se ve decepcionantemente pequeña o borrosa? Es una experiencia frustrante, especialmente cuando necesitas mostrar trabajos detallados como fotografía, arte o imágenes de productos.

Desde la versión 5.3, WordPress reduce automáticamente las imágenes grandes para ayudar con la velocidad del sitio, lo cual es una gran característica. Sin embargo, puede sentirse como un obstáculo cuando la calidad de la imagen es esencial para tu portafolio o tienda en línea.

En WPBeginner, hemos navegado por este mismo problema en nuestros propios proyectos. Aprendimos que no tienes que elegir entre imágenes hermosas y un sitio web rápido.

En esta guía, te mostraremos cuatro formas sencillas de mostrar imágenes de tamaño completo en WordPress sin ralentizar tu sitio.

¿Cuándo deberías mostrar imágenes de tamaño completo en WordPress?

Un ejemplo de cuándo podrías necesitar mostrar imágenes de tamaño completo en WordPress es si tienes un portafolio de fotografía o una tienda de diseño gráfico. Si vendes tu trabajo como descargas digitales, entonces podrías querer mostrar imágenes grandes para mostrar a los clientes potenciales su verdadera calidad.

Incluso si administras una tienda WooCommerce para productos físicos de comercio electrónico, es posible que aún necesites mostrar algunas imágenes a tamaño completo. Puedes usar una imagen en miniatura del producto, en la que los usuarios pueden hacer clic para ver el tamaño original de la imagen y acercarse a los detalles del artículo.

Dicho esto, las imágenes grandes pueden causar muchos problemas. Pueden ralentizar tu sitio web, lo que a su vez puede afectar negativamente su optimización para motores de búsqueda (SEO).

Por esta razón, WordPress ahora redimensiona automáticamente las imágenes grandes cuando las subes. Si una imagen es más grande que 2560 píxeles de alto y/o ancho, WordPress la escalará proporcionalmente a un tamaño más pequeño, manteniendo las dimensiones originales de la imagen.

La mayoría de los proveedores de hosting de WordPress también limitan el tamaño de archivo que puedes subir a la biblioteca de medios. Esto puede ser un obstáculo si tienes muchas imágenes grandes que mostrar.

Si deseas cambiar el límite de tamaño, puedes leer nuestra guía sobre cómo aumentar el tamaño máximo de carga de archivos en WordPress.

Ahora, veamos cómo puedes mostrar imágenes a tamaño completo en tu sitio web de WordPress. Tenemos 4 métodos para hacer esto. Algunos pueden funcionar mejor para imágenes individuales, mientras que otros son mejores para varias. Simplemente usa los enlaces a continuación para saltar directamente a tu método preferido:

• Método 1: Usa la URL de imagen completa (mejor para imágenes individuales)
• Método 2: Desactiva el escalado de imágenes en WordPress (recomendado para varios archivos)
• Método 3: Desactiva el escalado de imágenes con un plugin (para principiantes absolutos)
• Método 4: Abrir imágenes de WordPress de ancho completo en un Lightbox (Mejor para galerías)
• Preguntas frecuentes sobre imágenes de tamaño completo
• Bono: Optimiza tus imágenes para una mejor velocidad y SEO

Método 1: Usa la URL de imagen completa (mejor para imágenes individuales)

Si solo quieres mostrar una o dos imágenes grandes en tu sitio web, puedes simplemente agregarlas usando las URLs de imagen originales.

Cuando subes una imagen que excede las dimensiones máximas, WordPress escalará esa imagen para crear una versión más pequeña. Sin embargo, la imagen original y más grande permanece intacta.

Primero, ve a Medios » Biblioteca desde el panel de WordPress. Asegúrate de cambiar tu vista a la vista de 'Lista'.

Después de eso, pasa el mouse sobre tu imagen grande. Busca la que tenga el nombre de archivo con '-scaled' al final.

Cuando aparezca el botón 'Copiar URL', haz clic en él.

Hecho esto, puedes pegar la URL de la imagen en la barra de direcciones de tu navegador y eliminar ‘-scaled….’ del final de la URL de la imagen. Ten cuidado de no eliminar el formato de la imagen (.png, .jpg, .gif, etc.).

Por lo tanto, si la URL de la imagen escalada es http://ejemplo-sitio.local/wp-content/uploads/2024/03/ejemplo-imagen-scaled.jpg, entonces tu URL de imagen original es http://ejemplo-sitio.local/wp-content/uploads/2024/03/ejemplo-imagen.jpg.

Cuando visites esa URL, verás la imagen en sus dimensiones originales.

Ahora, puedes agregar la imagen en cualquier lugar de tu sitio web. Dado que agregamos la imagen usando un enlace, necesitarás incrustarla en lugar de seleccionarla de la biblioteca de medios.

Para hacer esto, abre el editor de bloques de Gutenberg para la publicación o página donde deseas usar la imagen. Luego haz clic en el ícono ‘+ Agregar bloque’ para agregar un nuevo bloque. Aquí, puedes seleccionar el bloque de Imagen.

Hecho esto, haz clic en ‘Insertar desde URL’.

Luego puedes simplemente pegar la URL de la imagen en tamaño completo o imagen grande en el campo, y presiona la tecla ‘Enter’ en tu teclado.

Cuando estés listo para publicar, simplemente haz clic en ‘Publicar’ o ‘Actualizar’. Ahora puedes visitar esta página o publicación para ver la imagen en tamaño completo en acción.

Para agregar más imágenes en tamaño completo, simplemente repite el mismo proceso descrito anteriormente.

Método 2: Desactiva el escalado de imágenes en WordPress (recomendado para varios archivos)

Si planeas mostrar varias imágenes grandes, deshabilitar la función de escalado automático es el mejor enfoque. Si bien puedes hacer esto editando el archivo functions.php de tu tema, este método puede ser arriesgado y podría dañar tu sitio si cometes un error.

Por eso recomendamos usar el plugin gratuito WPCode en su lugar. Como explicamos en nuestra reseña completa de WPCode, es la forma más segura de agregar fragmentos de código, y no se borrarán cuando actualices tu tema.

Primero, necesitarás instalar y activar el plugin. Para este método, la versión gratuita de WPCode es todo lo que necesitas.

Una vez activado, ve a Code Snippets » Add Snippet. Aquí, selecciona ‘Add Your Custom Code (New Snippet)’ y haz clic en ‘Use snippet.’

Ahora, escribe un título para el fragmento de código personalizado. Esto es solo para tu referencia. Después de eso, abre el menú desplegable ‘Code Type’ y selecciona ‘PHP Snippet.’

En el editor de código, agrega el siguiente fragmento de código:

add_filter( 'big_image_size_threshold', '__return_false' );

A continuación, desplázate hacia abajo hasta la sección ‘Insertion’. Asegúrate de que la ubicación esté configurada en ‘Run Everywhere’ para que el código funcione en todo tu sitio web.

Cuando estés listo, desplázate hasta la parte superior de la pantalla y haz clic en el interruptor ‘Inactive’ para cambiarlo a ‘Active.’ Finalmente, haz clic en ‘Save Snippet’ para que el código esté en vivo.

A partir de ahora, WordPress usará las dimensiones originales para cualquier imagen grande que subas, dándote acceso a la versión de tamaño completo.

Método 3: Desactiva el escalado de imágenes con un plugin (para principiantes absolutos)

Si el método del código te parece demasiado intimidante, puedes desactivar el escalado de imágenes usando Perfect Images. Este plugin gratuito te permite crear tamaños de imagen adicionales en WordPress, actualizar los metadatos de tus medios y más.

Primero, necesitarás instalar y activar el plugin Perfect Images. Para más detalles sobre cómo instalar un plugin, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, dirígete a Meow Apps » Perfect Images y marca la casilla Desactivar junto a 'Image Threshold'.

WordPress ahora ya no agregará el atributo '-scaled' a ninguna imagen, por lo que puedes subir archivos multimedia grandes y WordPress los mostrará en su tamaño completo por defecto.

Método 4: Abrir imágenes de WordPress de ancho completo en un Lightbox (Mejor para galerías)

La opción final es agregar un lightbox de imagen de tamaño completo a tu sitio. Esto es perfecto si estás creando una galería de imágenes, un slider o un portafolio de fotos.

Este método te permite mostrar imágenes en miniatura más pequeñas cuando la página se carga por primera vez. Luego, los visitantes pueden hacer clic en cualquier miniatura para ver la imagen de tamaño completo en una ventana emergente.

Solo ten en cuenta que necesitas deshabilitar el escalado de imágenes de antemano usando uno de los métodos anteriores. Si no lo haces, tu lightbox solo mostrará la versión reducida de tus imágenes.

Una vez que hayas deshabilitado el escalado, es hora de crear una galería. Recomendamos usar Envira Gallery. Como explicamos en nuestra reseña completa de Envira Gallery, es el mejor plugin de galería de imágenes para WordPress debido a su potencia y facilidad de uso.

Después de instalar y activar Envira, puedes seguir nuestro tutorial paso a paso sobre cómo agregar una galería con efecto lightbox en WordPress.

Otra gran opción es NextGEN Gallery. Encontramos que este plugin es excelente para fotógrafos profesionales o artistas que necesitan funciones avanzadas para mostrar y vender su trabajo profesionalmente.

Preguntas frecuentes sobre imágenes de tamaño completo

En WPBeginner, frecuentemente recibimos preguntas sobre cómo administrar imágenes en WordPress. Aquí están algunas de las más comunes sobre cómo mostrarlas en tamaño completo.

¿Mostrar imágenes de tamaño completo hará que mi sitio web sea más lento?

Sí, los archivos de imagen grandes pueden aumentar los tiempos de carga de tu página, lo que puede perjudicar la experiencia del usuario y el SEO. Por eso es muy importante optimizar tus imágenes para la web antes de subirlas, incluso cuando las muestras a tamaño completo.

¿Cuál es la forma más fácil de mostrar una sola imagen a tamaño completo?

El método más sencillo es usar la URL directa de la imagen original. Cuando WordPress crea una versión escalada, conserva el archivo original, que luego puedes incrustar usando el bloque de Imagen.

¿Es mejor usar un plugin o código para deshabilitar el escalado de imágenes?

Para la mayoría de los usuarios, especialmente los principiantes, usar un plugin como WPCode es la opción más segura. Agregar código directamente a los archivos de tu tema puede romper tu sitio si no se hace correctamente, mientras que un plugin lo maneja en un entorno seguro.

¿Puedo mostrar una miniatura que abra la imagen a tamaño completo al hacer clic?

Absolutamente. Usar un plugin de galería lightbox como Envira Gallery es la mejor manera de hacerlo. Los visitantes ven miniaturas más pequeñas y de carga rápida y pueden hacer clic para ver la versión de alta resolución en una ventana emergente.

Bono: Optimiza tus imágenes para una mejor velocidad y SEO

Mostrar imágenes a tamaño completo puede ser genial para exhibir tu trabajo, pero los gráficos grandes pueden ralentizar los tiempos de carga de tu sitio web e impactar negativamente tu SEO.

Debido a esto, recomendamos encarecidamente optimizar tus imágenes para mejorar su rendimiento. Un plugin como EWWW Image Optimizer puede ayudar comprimiendo tus archivos para hacerlos más pequeños y que carguen más rápido.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar imágenes de tamaño completo en WordPress. Para más consejos sobre cómo administrar tus archivos multimedia y mejorar tu sitio, puedes explorar nuestras otras guías:

• Cómo optimizar fácilmente archivos de imagen para la web sin perder calidad
• Guía para principiantes de SEO de imágenes – Optimiza imágenes para motores de búsqueda
• Cómo cargar imágenes de forma diferida (lazy load) fácilmente en WordPress
• Formas de prevenir el robo de imágenes en WordPress
• Cómo añadir texto sobre una imagen en WordPress
• Grandes plugins de WordPress para administrar imágenes (Actualizado)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.