El mejor formato de imagen para WordPress es WebP para fotografías y gráficos, con JPG y PNG como respaldo automático y SVG para logotipos e íconos.. WordPress impulsa una gran parte de la web, y las imágenes suelen ser lo más pesado en cualquier página que sirve, por lo que el formato que cargue determina directamente la rapidez con la que se carga su sitio y su clasificación. WordPress maneja muchas cosas por usted, generando múltiples tamaños de cada carga, pero no elegirá el formato ideal a menos que lo configure. Esta guía cubre qué formato usar, cómo WordPress procesa las imágenes y las configuraciones y complementos que mantienen rápido un sitio de WordPress.

Por qué el formato de imagen es tan importante en WordPress

En una página típica de WordPress, las imágenes representan la mayoría de los bytes que descarga un visitante. Eso significa El formato de imagen es el factor más importante en la velocidad de la página.y la velocidad de la página alimenta directamente Core Web Vitals, que Google utiliza como señal de clasificación. Un tema puede ser sencillo y el alojamiento rápido, pero una página repleta de archivos JPG de gran tamaño seguirá rastreando. Elegir un formato eficiente y permitir que WordPress ofrezca versiones de tamaño adecuado es la optimización de mayor impacto que la mayoría de los sitios pueden realizar, y no cuesta nada más que un poco de configuración.

Cómo maneja WordPress la carga de imágenes

Cuando subes una imagen, WordPress no solo la almacena. eso genera varias copias redimensionadas automáticamente, miniatura, mediana, grande y completa, para que pueda servir en un tamaño adecuado a cada contexto. También crea el marcado srcset responsivo para que los navegadores elijan el tamaño correcto por dispositivo. Esto es poderoso, pero funciona con cualquier cosa que cargues, por lo que un original de 5000 píxeles produce copias infladas de todos los tamaños. Cargar un original de tamaño razonable y comprimido de manera eficiente significa que cada versión generada también es sencilla.

WebP: el valor predeterminado moderno

WebP es el formato a estandarizar. Produce archivos Entre un 25 y un 35 % más pequeño que JPG con la misma calidad, admite transparencias como PNG y ahora es compatible con todos los navegadores actuales. WordPress ha admitido cargas WebP desde la versión 5.8 y, con el complemento adecuado, puede ofrecer versiones WebP de sus JPG y PNG existentes automáticamente, recurriendo al original para cualquier navegador que no pueda mostrarlo. Mover una biblioteca multimedia a WebP es a menudo la mayor ganancia de velocidad que puede obtener un sitio de WordPress.

JPG y PNG como alternativas

WebP no significa abandonar los formatos más antiguos. JPG sigue siendo el recurso seguro para fotografías y PNG para gráficos que necesitan transparencia, y un buen complemento de optimización mantiene los originales para que cualquier navegador que no sea compatible con WebP aún obtenga una imagen funcional. En la práctica, usted carga un JPG o PNG como de costumbre y el complemento genera y sirve un WebP junto con él, entregando el archivo más pequeño donde puede. Esto le brinda los ahorros de WebP sin ningún riesgo de compatibilidad, razón por la cual es la configuración recomendada en lugar de solo WebP.

SVG para logotipos e iconos

Para su logotipo e íconos de interfaz, SVG supera cualquier formato rasterizado. es vector, por lo que se mantiene nítido en cada densidad de pantalla desde un archivo pequeño. WordPress no permite cargas de SVG de forma predeterminada por razones de seguridad, ya que un SVG puede contener secuencias de comandos, por lo que se habilita con un complemento que desinfecta los archivos al cargarlos. Una vez habilitado, un logotipo servido como SVG es más pequeño y más nítido que un equivalente PNG y nunca necesita generar múltiples tamaños. Reserve SVG para logotipos, íconos y gráficos simples, nunca fotografías.

Elegir los tamaños de imagen correctos

WordPress genera varios tamaños, pero tú controlas las dimensiones. Establecer el tamaño grande hasta que no sea más ancho que el área de contenido, a menudo entre 1200 y 1600 píxeles, por lo que las imágenes de ancho completo no son innecesariamente grandes. Cargar una foto de 4000 píxeles cuando su columna de contenido tiene 800 píxeles de ancho desperdicia ancho de banda incluso después de que WordPress cambia el tamaño, porque la copia más grande generada todavía está sobredimensionada. Haga coincidir los tamaños de las imágenes registradas con el diseño real de su tema y cada imagen que el sitio ofrece permanecerá proporcional al lugar donde aparece.

Complementos de compresión y optimización

Un complemento de optimización automatiza todo el proceso. Opciones populares comprime cada carga, genera versiones WebP y puede eliminar metadatos innecesarios, todo sin que toques una imagen con la mano. Muchos también optimizan su biblioteca existente de forma masiva, convirtiendo años de JPG y PNG acumulados a WebP en una sola pasada. Algunos descargan el procesamiento a sus propios servidores para ahorrarle alojamiento. Cualquiera que elijas, el efecto es el mismo: las imágenes llegan a la página comprimidas y en el mejor formato automáticamente, lo cual es mucho más confiable que recordar optimizar cada una manualmente.

Carga diferida de imágenes

La carga diferida pospone las imágenes hasta que un visitante se desplaza cerca de ellas, por lo que la carga inicial de una página solo recupera lo que es inmediatamente visible. WordPress permite la carga diferida de forma predeterminada en imágenes debajo del pliegue, agregando el atributo de carga automáticamente. Esto acelera notablemente la primera pintura en páginas con muchas imágenes. La única excepción es la imagen más grande de la mitad superior de la página, a menudo la principal, que debería cargarse rápidamente para no retrasar la métrica de pintura con contenido más grande. La mayoría de los complementos de optimización le permiten excluir esa imagen de la carga diferida con una sola configuración.

Eliminación de metadatos

Las fotografías llevan metadatos, modelo de cámara, ubicación GPS, perfiles de color, que un sitio web rara vez necesita y que añaden peso. Eliminar estos metadatos reduce cada archivo sin cambios visibles, y la mayoría de los complementos de optimización lo hacen como parte de la compresión. Eliminar los datos del GPS también tiene un beneficio de privacidad, ya que probablemente no quieras publicar dónde se tomó una foto. Los únicos metadatos que vale la pena conservar son el perfil de color si la precisión del color es importante. De lo contrario, eliminarlo es una reducción de tamaño invisible y gratuita en toda la biblioteca.

Una configuración de imagen de WordPress recomendada

Júntelo y la configuración es sencilla. Registre tamaños de imagen que coincidan con el diseño de su tema. Instale un complemento de optimización que comprima las cargas, genere y proporcione WebP con respaldos y elimine los metadatos. Habilite SVG desinfectado para su logotipo e íconos. Mantenga la carga diferida predeterminada de WordPress, pero cargue su imagen principal con entusiasmo. Luego, simplemente cargue originales de tamaño razonable y deje que el proceso haga el resto. Una vez implementado esto, cada imagen del sitio se comprime, tiene el tamaño correcto y se muestra automáticamente en el mejor formato, y el sitio se mantiene rápido a medida que crece la biblioteca.

AVIF: el

El siguiente paso más allá de WebP

AVIF es el formato eficiente más nuevo y WordPress también lo admite. Se comprime Incluso más pequeño que WebP, a menudo un 20% más pequeño nuevamente., con la misma calidad visual, con soporte para transparencia y color amplio. La compatibilidad con el navegador ahora es amplia, pero ligeramente por detrás de WebP, por lo que AVIF funciona mejor con un respaldo WebP o JPG. Algunos complementos de optimización pueden generar AVIF automáticamente junto con WebP. Para un sitio que busca los últimos kilobytes de cada imagen, vale la pena habilitar AVIF, aunque WebP sigue siendo el formato principal seguro por ahora.

La mediateca y el servicio de limpieza.

Con el tiempo, una biblioteca multimedia de WordPress se llena de imágenes no utilizadas, versiones antiguas y duplicados que inflan las copias de seguridad y saturan el administrador. Limpiar periódicamente los medios no utilizados mantiene la biblioteca manejable y sus copias de seguridad se reducen. Los complementos pueden identificar imágenes que no están adjuntas a ninguna publicación o página, aunque vale la pena revisarlas antes de eliminarlas, ya que algunas imágenes se utilizan de maneras que el escaneo no puede detectar. Es más fácil trabajar con una biblioteca multimedia ordenada y, una vez optimizada, ofrece una imagen clara de cuánto espacio ocupan realmente sus imágenes.

Regenerar miniaturas después de un cambio de tema

Cuando cambias de tema o cambias los tamaños de imágenes registradas, las cargas existentes aún tienen sus tamaños generados anteriores. La regeneración de miniaturas reconstruye todos los tamaños a partir de los originales. para que coincida con las nuevas dimensiones, lo que un complemento dedicado hace de forma masiva en toda la biblioteca. Omita esto y las imágenes pueden aparecer estiradas o mostradas en el tamaño incorrecto bajo el nuevo tema. Es un paso único después de cualquier cambio en el tamaño de las imágenes, y ejecutarlo mantiene toda la biblioteca coherente con la forma en que el tema actual realmente muestra las imágenes.

Entrega CDN para imágenes

Una red de entrega de contenido acelera la entrega de imágenes al entregar archivos desde un servidor cerca de cada visitante. Una CDN almacena en caché sus imágenes en ubicaciones perimetrales de todo el mundo, por lo que un lector alejado de su anfitrión aún obtiene imágenes rápidamente. Muchos complementos de optimización y almacenamiento en caché de WordPress integran una CDN, y algunas CDN específicas de imágenes también convierten y cambian de tamaño sobre la marcha, manejando el formato y las dimensiones automáticamente. Para un sitio con una audiencia global o mucho tráfico, una CDN elimina la entrega de imágenes como un cuello de botella y, al mismo tiempo, descarga la carga de su servidor de origen.

Imágenes destacadas y avances sociales

La imagen destacada de cada publicación cumple una doble función: aparece en su tema y, a través de etiquetas Open Graph, como vista previa cuando se comparte la publicación. Configure las imágenes destacadas en un tamaño que funcione para vistas previas sociales, alrededor de 1200 por 630, por lo que los enlaces compartidos se ven nítidos en el feed. Un complemento de SEO generalmente asigna automáticamente la imagen destacada a la etiqueta Open Graph. Hacer esto bien significa que cada publicación que se comparte muestra una imagen limpia y del tamaño correcto en lugar de una miniatura recortada o nada en absoluto.

Probando el rendimiento de su imagen

Después de optimizar, mida el resultado. Herramientas como PageSpeed Insights informan sobre problemas relacionados con las imágenes, señalando imágenes de gran tamaño, faltantes de formatos modernos e imágenes sin dimensiones que provocan cambios en el diseño. Se vinculan directamente con Core Web Vitals, por lo que sus consejos se corresponden con lo que mide Google. Ejecutar una prueba antes y después de una pasada de optimización muestra exactamente qué tan rápida se ha vuelto la página y resalta cualquier imagen que aún la retenga. Trate estos informes como una lista de verificación para exprimir lo último del peso de sus imágenes.

Errores comunes en las imágenes de WordPress

Algunos hábitos ralentizan silenciosamente los sitios de WordPress. Cargar imágenes de cámara de resolución completa, omitir la compresión y no habilitar WebP son los más comunes y cada uno deja archivos grandes donde bastarían los pequeños. Otros incluyen olvidarse de establecer las dimensiones de la imagen, lo que provoca cambios en el diseño, y usar un complemento lento y con muchas funciones que agrega más peso del que ahorra. Cada uno de estos es fácil de solucionar con la configuración anterior. Evitarlos mantiene un sitio de WordPress rápido a medida que crece, en lugar de verlo lento año tras año a medida que se llena la biblioteca.

¿Cuál es el mejor formato de imagen para WordPress?

WebP para fotografías y gráficos, con respaldos JPG y PNG, y SVG para logotipos. Los archivos WebP son entre un 25 y un 35 % más pequeños que los JPG con la misma calidad y todos los navegadores actuales los admiten.

¿WordPress es compatible con WebP?

si, desde WordPress 5.8. Puede cargar WebP directamente y un complemento de optimización puede ofrecer versiones WebP de JPG y PNG existentes automáticamente con alternativas.

¿Puedo subir archivos SVG a WordPress?

No de forma predeterminada, por razones de seguridad. Un complemento que desinfecta los SVG al cargarlos lo habilita de forma segura, después de lo cual los logotipos e íconos servidos como SVG son más pequeños y nítidos que PNG.

¿Necesito un complemento de optimización de imágenes?

Es muy recomendable. Un complemento comprime las cargas, genera WebP y elimina los metadatos automáticamente, que es mucho más confiable que optimizar cada imagen a mano.

¿Debo cambiar el tamaño de las imágenes antes de subirlas a WordPress?

Sí. Subir no más ancho que su área de contenido, a menudo de 1200 a 1600 píxeles. Un original enorme hace que todos los tamaños que WordPress genera también sean de gran tamaño.

¿WordPress es compatible con AVIF?

Sí. AVIF se comprime alrededor de un 20% más pequeño que WebP con la misma calidad y algunos complementos de optimización lo generan automáticamente. Sírvalo con un respaldo WebP o JPG para obtener compatibilidad total con el navegador.

¿Debería utilizar una CDN para imágenes de WordPress?

Para un sitio global o de alto tráfico, sí. Una CDN almacena en caché imágenes en ubicaciones perimetrales de todo el mundo, por lo que los visitantes distantes los obtienen rápidamente y la carga sale de su servidor de origen.

¿Por qué mis imágenes se ven mal después de cambiar de tema?

Porque las cargas existentes mantienen sus tamaños generados anteriormente. La regeneración de miniaturas reconstruye todos los tamaños a partir de los originales. para que coincida con las dimensiones del nuevo tema.

¿Debería cargar imágenes de WordPress de forma diferida?

Si, y WordPress permite la carga diferida de forma predeterminada en imágenes debajo del pliegue. Manténgalo encendido, pero cargue con entusiasmo su imagen principal principal en la mitad superior de la página para que no retrase la pintura con contenido más grande.