Optimizar los tamaños de imagen en WordPress es fundamental para mantener un sitio web rápido y fácil de usar.
Los archivos de imagen son uno de los principales factores que contribuyen al bajo rendimiento de un sitio web. Cuantas más imágenes tengas y cuanto más grandes sean, más tardará en cargarse tu sitio web. Las imágenes con el tamaño adecuado no solo mejoran la velocidad del sitio, sino que también reducen el uso innecesario de almacenamiento y mejoran el posicionamiento en buscadores.
Esta guía explica las dimensiones y resoluciones recomendadas para distintos tipos de imágenes en WordPress, técnicas de optimización de imágenes y consejos para gestionar tus archivos de imagen y mantener ordenada tu biblioteca de medios.
Tamaños de imagen predeterminados de WordPress
Cuando subes una imagen, WordPress genera automáticamente varias copias de distintos tamaños para adaptarse a las diferentes ubicaciones de tu sitio. Los tamaños de imagen predeterminados son:
- Miniatura: 150×150 píxeles (recortada para mantener una relación de aspecto cuadrada). Ideal para vistas previas pequeñas o imágenes de galerías.
- Mediano: 300×300 píxeles. Adecuado para imágenes incluidas en el contenido.
- Grande: 1024×1024 píxeles. Se utiliza para contenido de ancho completo o imágenes destacadas.
- Tamaño completo: Dimensiones originales de la imagen subida.
Estos tamaños se pueden ajustar desde Ajustes → Medios en el panel de administración de WordPress. Modificar estos ajustes afectará a las subidas futuras, pero las imágenes existentes no cambiarán.
Dimensiones de imagen recomendadas para usos específicos
Elegir las dimensiones de imagen adecuadas garantiza la nitidez y unos tiempos de carga óptimos. Estos son algunos tamaños recomendados para tipos de imagen habituales:
Páginas y entradas
- Tamaño recomendado: 1200×800 píxeles o 1200×628 píxeles
- Uso: Garantiza imágenes nítidas y de alta calidad para el contenido general de páginas y entradas, equilibrando la estética y el rendimiento. El tamaño de 1200×628 píxeles es el más compatible con las plataformas de redes sociales.
Imágenes destacadas
- Tamaño recomendado: 1200×628 píxeles
- Uso: Se muestra de forma destacada en la parte superior de las entradas o páginas y garantiza la compatibilidad con la opción de compartir en redes sociales.
Imágenes de cabecera o de fondo
- Tamaño recomendado: 1920×1080 píxeles
- Uso: Proporciona una imagen de alta resolución y ancho completo para cabeceras, secciones principales o imágenes de fondo.
Imágenes de logotipo
- Tamaño recomendado: 250×100 píxeles
- Uso: Garantiza claridad y nitidez al mostrarse en la cabecera o el pie de página. Ten en cuenta que el tamaño y las dimensiones exactos de tu logotipo variarán en función de su relación de aspecto.
Imágenes en miniatura
- Tamaño recomendado: 150×150 píxeles
- Uso: Se utiliza para vistas previas pequeñas, como las de galerías o extractos de entradas.
Tu tema o tus plugins también pueden incluir tamaños de imagen recomendados específicos, asignados a determinados tipos de entrada, plantillas de página u otro contenido personalizado. Por ejemplo, el popular plugin de calendario de eventos The Events Calendar utiliza un tamaño de imagen destacada de 1280×720 píxeles.
Cómo personalizar los tamaños de imagen predeterminados
Aunque WordPress proporciona tamaños de imagen predeterminados, es posible que necesites dimensiones personalizadas que se adapten a tu tema o a tus preferencias de diseño. Para añadir tamaños de imagen personalizados, edita el archivo functions.php.
Editar el archivo functions.php:
- Accede al archivo functions.php de tu tema: Se recomienda utilizar un tema hijo para evitar que los cambios se sobrescriban durante las actualizaciones.
- Añade la función add_image_size() al tema: Inserta el código siguiente, sustituyendo «custom-size-name» por el nombre que prefieras y especificando el ancho y el alto deseados en píxeles:
add_image_size( 'custom-size-name', 600, 400, true );- El parámetro true activa el recorte exacto a las dimensiones especificadas.
- Regenerar miniaturas: Después de añadir tamaños personalizados, regenera las miniaturas de las imágenes existentes con un plugin como Force Regenerate Thumbnails. Este plugin eliminará todos los tamaños de imagen de miniatura anteriores y generará imágenes nuevas según los tamaños de imagen que hayas definido.
Este proceso garantiza que tus imágenes se adapten a las necesidades específicas de tu sitio.
Cómo optimizar las imágenes para mejorar el rendimiento web
Hay varias formas de crear imágenes optimizadas para tu sitio web. El método que utilices dependerá en gran medida de tus necesidades concretas, de quién visite tu sitio web y de cómo uses tus imágenes fuera de tu sitio.
Veamos los distintos pasos que puedes seguir para optimizar tus imágenes.
1. Analiza tus imágenes
Si todavía no has subido tus imágenes a tu sitio web, puedes comprobar el tamaño de los archivos y optimizarlas antes de subirlas. Pero ¿qué ocurre si ya has subido tus imágenes a la biblioteca de medios? Desplazarte por ellas desde el panel de administración de WordPress o mediante SFTP puede llevar mucho tiempo.
La forma más rápida de descubrir qué archivos de imagen podrían beneficiarse de un cambio de tamaño y de la compresión es utilizar el plugin Jetpack Boost. Incluye un analizador de imágenes que examina tu sitio e identifica las imágenes que necesitan optimización.
2. Comprime las imágenes
Puedes utilizar aplicaciones de escritorio, herramientas basadas en el navegador o plugins para comprimir tus imágenes.
Hay aplicaciones de escritorio gratuitas como PhotoBulk (para Mac y Windows) o ImageOptim (solo para Mac) y, si ya utilizas software de Adobe, Photoshop ofrece excelentes funciones de compresión de imágenes.
Si las herramientas online te resultan más prácticas o cómodas, TinyPNG e Imagify son dos opciones excelentes para reducir el tamaño de los archivos sin una pérdida de calidad apreciable.
Si prefieres un método más sencillo y rápido, considera instalar un plugin como Jetpack Boost. Convierte automáticamente tus imágenes al eficiente formato WebP y las sirve mediante la CDN de imágenes, lo que garantiza tiempos de carga más rápidos con un esfuerzo mínimo.
3. Usa formatos de archivo adecuados
Los archivos WebP y AVIF ofrecen la máxima compresión de imágenes sin perder calidad. Ambos permiten imágenes transparentes y WebP admite archivos animados (como los GIF). Estos tipos de archivo también son compatibles con la mayoría de los principales navegadores y plataformas de redes sociales.
La desventaja de estos dos tipos de archivo es que no son compatibles con el correo electrónico. Por tanto, si importas contenido directamente de tu sitio web a tu software de correo electrónico (por ejemplo, una integración de WooCommerce que incorpora productos directamente de tu sitio web a tus correos), tus imágenes no se mostrarán en las bandejas de entrada.
Los tipos de archivo con mayor compatibilidad son JPG y PNG. Los JPEG son adecuados para fotografías por sus posibilidades de compresión, mientras que los PNG son mejores para imágenes que requieren transparencia o tienen pocos colores.
Aunque estén comprimidos, los archivos JPG y PNG suelen ocupar más espacio que los archivos WebP y AVIF de calidad similar, pero pueden resultar más prácticos si tu sitio está integrado con varios programas o si la máxima accesibilidad es una prioridad, ya que WebP y AVIF no funcionan en navegadores antiguos.
4. Aprovecha las imágenes adaptables
WordPress incluye automáticamente el atributo srcset en las etiquetas de imagen, lo que permite a los navegadores seleccionar el tamaño de imagen adecuado según la pantalla del dispositivo. Asegúrate de que tu tema sea compatible con esta función.
La mayoría de los temas modernos basados en bloques son compatibles con el atributo srcset, aunque puede que algunos temas antiguos no lo sean. Si no sabes con seguridad si tu tema admite este atributo, puedes comprobarlo con la herramienta de inspección del navegador.
Carga cualquier página de tu sitio web que contenga una imagen. A continuación, haz clic con el botón derecho en la imagen y selecciona Inspeccionar. Localiza el elemento <img> y comprueba si contiene srcset. Si lo ves, sabrás que tu tema lo admite.
Aplicar estas prácticas ayuda a mantener el equilibrio entre la calidad de las imágenes y el rendimiento del sitio. Experimenta con tus técnicas de optimización de imágenes hasta encontrar el equilibrio adecuado para tus necesidades. No olvides aplicar estos métodos a todas las imágenes que subas a tu sitio web, no solo cuando lo crees por primera vez.
Gestionar tamaños de imagen adicionales de temas y plugins
Los temas y plugins pueden introducir tamaños de imagen adicionales, lo que genera archivos innecesarios que ocupan espacio en el servidor. Para gestionar estos tamaños:
Identificar los tamaños de imagen registrados
Usa plugins como Media Hygiene para ver y gestionar todas las imágenes y los tamaños registrados en tu sitio. Comprueba qué tamaños de imagen se están utilizando y decide si quieres eliminarlos.
Desactivar los tamaños de imagen que no se utilizan
Si algunos tamaños no son necesarios, puedes eliminarlos con plugins como Media Hygiene o añadiendo el siguiente código al archivo functions.php de tu tema:
function remove_default_image_sizes( $sizes ) {
unset( $sizes['thumbnail'] );
unset( $sizes['medium'] );
unset( $sizes['large'] );
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');Modifica las líneas unset para que apunten a los tamaños específicos que quieras eliminar.
Revisar y gestionar periódicamente los tamaños de imagen ayuda a mantener organizada la biblioteca de medios y a conservar los recursos del servidor.
Nota: Antes de desactivar o eliminar cualquier tamaño de imagen, haz una copia de seguridad de tu sitio. Lo ideal es probar cualquier cambio importante de este tipo en un sitio de pruebas o en local, en lugar de hacerlo en tu sitio activo.
Cómo garantizar la compatibilidad con pantallas de alta resolución
Con la proliferación de pantallas de alta resolución, como las pantallas Retina, es fundamental ofrecer imágenes nítidas en todos los dispositivos. Para conseguirlo:
- Sube imágenes más grandes: Proporciona imágenes con el doble del tamaño al que se mostrarán. Por ejemplo, para un área de visualización de 300×300 píxeles, sube una imagen de 600×600 píxeles.
- Utiliza el srcset como atributo: Como se ha mencionado anteriormente, la función de imágenes adaptables de WordPress proporciona automáticamente el tamaño de imagen adecuado según las capacidades del dispositivo, siempre que tu tema sea compatible con esta función.
Buenas prácticas para gestionar las imágenes de WordPress
Para mantener optimizada y eficiente tu biblioteca de medios de WordPress, ten en cuenta estas prácticas recomendadas:
- Usa nombres de archivo descriptivos: Cambia el nombre de los archivos de imagen antes de subirlos para incluir palabras clave relevantes (por ejemplo, blue-sneakers-running.jpg en lugar de IMG1234.jpg).
- Organiza la biblioteca de medios: Utiliza carpetas o plugins de gestión multimedia como Media Library Assistant.
- Implementa la carga diferida: WordPress incluye la carga diferida nativa de imágenes, lo que reduce los tiempos de carga inicial al cargar las imágenes solo cuando aparecen en pantalla.
- Optimiza los tamaños de imagen: Usa plugins, aplicaciones de escritorio o herramientas basadas en el navegador para analizar y optimizar tus imágenes y obtener el máximo rendimiento.
- Instala la CDN de imágenes: Jetpack Boost proporciona una CDN de imágenes que redimensiona y sirve tus imágenes de WordPress en formato WebP y otros formatos que mejoran la velocidad de carga de la página.
Problemas habituales con los tamaños de imagen de WordPress
Incluso con la configuración adecuada, pueden surgir problemas. Estas son las soluciones de expertos para los problemas de imagen más frecuentes:
Problema: Mis imágenes aparecen borrosas después de subirlas.
Esto suele ocurrir cuando una imagen pequeña se muestra en un contenedor más grande. El CSS de tu tema puede estar estirándola. Solución: Sube siempre imágenes que sean, como mínimo, tan grandes como el contenedor más grande en el que vayan a aparecer. Usa la herramienta «Inspeccionar» del navegador para averiguar el tamaño del contenedor y sube una imagen que se ajuste a él.
Problema: Mis imágenes destacadas se recortan de forma incorrecta.
Tu tema tiene tamaños de imagen específicos y fijos para las imágenes destacadas. Solución: Consulta la documentación de tu tema para conocer las dimensiones recomendadas de las imágenes destacadas (por ejemplo, 1200 × 675 px). También puedes usar un plugin como «Regenerate Thumbnails» después de cambiar de tema para cambiar el tamaño de las imágenes según las nuevas especificaciones.
Problema: Mi sitio sigue siendo lento a pesar de comprimir las imágenes.
Es posible que el problema sea la gran cantidad de imágenes que se cargan a la vez. Solución: asegúrate de que la carga diferida esté activada (es una función integrada en el núcleo de WordPress desde la versión 5.5). Además, utiliza la CDN (red de distribución de contenido) para servir las imágenes desde un servidor más cercano a tu usuario, lo que reduce drásticamente los tiempos de carga. Jetpack Boost incluye una CDN de imágenes gratuita. Más información aquí: https://jetpack.com/boost/
Preguntas frecuentes
¿Cuál es el mejor tamaño de imagen para una entrada de blog de WordPress?
El mejor tamaño de imagen para la mayoría de las entradas de blog de WordPress es de 1200 píxeles de ancho, con una altura de entre 628 y 675 píxeles. Este tamaño funciona muy bien para las imágenes incluidas en el contenido. También es ideal para las imágenes destacadas, ya que se ve bien al compartirlas en redes sociales.
Procura siempre que el tamaño del archivo sea inferior a 150 KB. Un archivo más pequeño ayuda a que la página cargue más rápido. Una página rápida es importante para mantener satisfechas a las personas que visitan tu sitio y para conseguir una mejor posición en los resultados de los motores de búsqueda. Por tanto, presta atención tanto a las dimensiones como al tamaño final del archivo.
¿Por qué mis imágenes aparecen borrosas en mi sitio web?
Es probable que tus imágenes aparezcan borrosas porque una imagen pequeña se está estirando para ajustarse a un espacio grande. Esto ocurre si subes una imagen más pequeña que el contenedor de la página. Por ejemplo, si el área de contenido de tu sitio web tiene 800 píxeles de ancho, pero subes una imagen de 400 píxeles, el navegador la estirará. Este estiramiento hace que la imagen pierda nitidez.
Para solucionarlo, debes subir una imagen que sea como mínimo tan grande como el contenedor en el que se mostrará. Puedes utilizar las herramientas para desarrolladores de tu navegador para consultar el tamaño del contenedor.
¿Qué diferencia hay entre JPG, PNG y WebP?
JPG, PNG y WebP son distintos tipos de archivos de imagen. Debes utilizar JPG para las fotografías y las imágenes normales con muchos colores. Los archivos JPG pueden ser muy pequeños. Utiliza PNG cuando necesites una imagen con fondo transparente, como un logotipo. Los archivos PNG suelen ser más grandes que los JPG, pero conservan su calidad.
WebP es un formato más reciente que funciona muy bien con todo tipo de imágenes. Crea archivos muy pequeños con una calidad excelente. La mayoría de los navegadores modernos son compatibles con WebP, y utilizarlo puede hacer que tu sitio web sea mucho más rápido.
¿Cómo optimizo las imágenes para SEO en WordPress?
Para optimizar las imágenes para SEO, debes hacer tres cosas principales. Primero, ponle un nombre descriptivo al archivo de imagen antes de subirlo. Por ejemplo, blue-wordpress-t-shirt.jpg es mucho mejor que IMG_1234.jpg. Segundo, escribe un texto alternativo claro y descriptivo para cada imagen que subas.
El texto alternativo ayuda a los motores de búsqueda a entender de qué trata la imagen. También ayuda a las personas que no pueden verla. Tercero, asegúrate de que tus imágenes se carguen rápidamente comprimiéndolas. Las imágenes que se cargan rápido contribuyen a una buena experiencia de usuario, algo que los motores de búsqueda valoran.
¿Qué es una CDN y necesito una para mis imágenes?
Una CDN, o red de distribución de contenido, es un grupo de servidores ubicados por todo el mundo. Estos servidores almacenan copias de los archivos de tu sitio web, incluidas tus imágenes. Cuando alguien visita tu sitio, la CDN envía las imágenes desde el servidor más cercano. Así, tus imágenes se cargan mucho más rápido para todo el mundo, sin importar dónde se encuentre.
Si tu sitio web recibe visitas de distintos países, utilizar una CDN es una forma muy eficaz de mejorar la velocidad de tu sitio y la experiencia de usuario. Muchos proveedores de hosting y plugins modernos, como Jetpack Boost, ofrecen un servicio de CDN.
¿Cómo funciona la carga diferida de imágenes y es beneficiosa para el SEO?
La carga diferida es una técnica que indica a una página web que no cargue una imagen hasta que esté a punto de aparecer en la pantalla del usuario. En lugar de cargar todas las imágenes a la vez, espera a que el usuario se desplace hacia abajo por la página. Esto es muy beneficioso para el tiempo de carga inicial de tu sitio web, que es un factor importante para el SEO.
Una carga inicial más rápida proporciona una mejor experiencia de usuario, y los motores de búsqueda prefieren los sitios que cargan rápido. WordPress incluye la carga diferida como función predeterminada desde la versión 5.5, por lo que ya está ayudando al rendimiento de tu sitio.
¿Cuál es el tamaño adecuado para una imagen destacada de WordPress?
El tamaño más adecuado para una imagen destacada de WordPress suele tener 1200 píxeles de ancho y una altura de entre 628 y 900 píxeles en orientación horizontal. Si prefieres una orientación vertical, utiliza entre 628 y 900 píxeles de ancho y 1200 píxeles de alto. Sin embargo, lo más importante es lo que recomiende el tema específico de WordPress.
Los distintos temas utilizan diseños diferentes y pueden requerir un tamaño concreto de imagen destacada para que esta se vea lo mejor posible. Consulta siempre primero la documentación de tu tema para comprobar si recomienda unas dimensiones específicas para las imágenes destacadas.
¿De verdad las imágenes grandes pueden ralentizar tanto mi sitio web?
Sí, las imágenes grandes son una de las principales causas de que los sitios web sean lentos. Cada imagen de una página es un archivo independiente que el navegador del visitante debe descargar. Cuanto mayor sea el tamaño del archivo de una imagen, más tardará en descargarse.
Si tienes varias imágenes grandes en una misma página, el tiempo total de descarga aumenta rápidamente, lo que hace que la página parezca tardar mucho en cargarse. Un sitio web lento puede frustrar a los visitantes y hacer que se marchen. También puede perjudicar tu posicionamiento en los motores de búsqueda, ya que la velocidad de la página es un factor de posicionamiento conocido.
Jetpack 