Optimización de imágenes en sitios web

La optimización de imágenes ofrece el mayor retorno de la inversión en cuanto al rendimiento de WordPress: con estructuras de página y temas idénticos, el simple hecho de asegurarse de que las imágenes tengan el tamaño, el formato y la entrega correctos a menudo puede generar mejoras inmediatas en la experiencia de carga.

Sin embargo, la optimización de imágenes es también la que más probabilidades tiene de conducir a una situación en la que “cuanto más se retoca, peor queda”. La razón no es que la técnica sea demasiado difícil, sino que la información está demasiado fragmentada:
Has leído algunos artículos y has aprendido sobre “compresión”, “WebP/AVIF” y “carga diferida”, pero luego miras la descripción del plugin y dice “100 créditos gratis al mes”, “20MB gratis” y “1 crédito por imagen”... y cuanto más lees, más confundido te sientes. ¿Es realmente suficiente la asignación gratuita? ¿Cómo se deducen los cargos? ¿Acaso has malinterpretado “lo mismo”? Y lo más importante:¿Realmente surtió efecto después de que terminaste?

Este artículo solo hace tres cosas:

1. Aquí tienes una sugerencia práctica.Hoja de ruta(Qué hacer primero, qué hacer después)
2. Explique claramente las opciones que desea seleccionar (qué distingue exactamente a la versión gratuita de la de pago y para quién es adecuada cada una).
3. Enumera los errores más comunes desde el principio (para ahorrarte la molestia de tener que solucionarlos una vez finalizado el proyecto).

1. Núcleo: lo que incluye WordPress por defecto y lo que no incluye.

Si no entiendes primero lo que el núcleo de WordPress ya ha implementado, es probable que se den dos situaciones:

• En lugar de utilizar las “capacidades gratuitas” fácilmente disponibles, hemos desperdiciado tiempo y dinero reinventando la rueda.
• Pensaba que WordPress “convertiría automáticamente todas las imágenes antiguas a WebP/AVIF”, pero resulta que no es así.

El núcleo de WordPress ya incorpora estas capacidades esenciales:

• Imágenes adaptables (srcset/sizes)A partir de WordPress 4.4, el núcleo generará imágenes. srcset 与 sizesy utilizar las imágenes de varios tamaños generadas durante la carga, lo que permite al navegador seleccionar los recursos más adecuados para la carga en función de las condiciones de la pantalla.
• Carga diferida nativaWordPress 5.5 y versiones posteriores habilitan de forma predeterminada la carga diferida nativa para imágenes, utilizando estándares HTML. loading Implementación de la propiedad.
• Admite la carga de archivos WebP.A partir de WordPress 5.8, se pueden cargar y utilizar archivos WebP igual que los JPEG/PNG (siempre que el entorno de alojamiento sea compatible con WebP).
• Admite cargas AVIFA partir de WordPress 6.5, se pueden cargar y utilizar archivos AVIF de la misma manera que los archivos JPEG/PNG (siempre que el entorno de alojamiento lo admita).

Sin embargo, tenga en cuenta lo siguiente:
“Compatibilidad con la carga/el uso” ≠ “Conversión automática/entrega automática”.
En otras palabras: aunque ya estés utilizando WP 6.5, los archivos JPG/PNG de tu biblioteca multimedia no se convertirán automáticamente a WebP/AVIF; tampoco obtendrás automáticamente la capacidad completa de “generar AVIF/WebP en función de la compatibilidad del navegador, recurriendo a la imagen original en el caso de los navegadores no compatibles”, ya que esta funcionalidad suele requerir complementos o servicios adicionales para completarse.

2. Hoja de ruta: optimización de imágenes en 5 pasos

Qué hacer, por qué, qué constituye un desempeño satisfactorio y cuáles son los errores más comunes.

2.1 Primero, asegúrate de que las dimensiones sean las correctas (es lo que más se pasa por alto, pero lo que mayor rendimiento ofrece).

Muchos sitios son lentos no porque no se haya aplicado la compresión, sino más bienSe ha descargado una imagen considerablemente más grande que el área de visualización.：
Por ejemplo, si una página se muestra con un ancho de solo 900 píxeles, pero haces que los visitantes descarguen la imagen completa de 3000 píxeles, el navegador simplemente “la descargará por completo antes de reducirla para mostrarla”. Esto desperdicia ancho de banda, aumenta el tiempo de decodificación y ralentiza la carga de la primera pantalla.

WordPress 4.4 y superiorMecanismo de imagen adaptable（srcset/sizes) precisamente para abordar esta cuestión.

¿Qué constituye una calificación aprobatoria?

• Al abrir la página en un dispositivo móvil, las dimensiones de la imagen descargada deben ser notablemente más pequeñas que en una computadora de escritorio.
• El tamaño del recurso cargado para la misma imagen varía según los diferentes dispositivos (en lugar de descargar siempre la imagen original).

Los errores más comunes:

• Algunos temas/constructores pueden eludir esto tratando las imágenes como imágenes de fondo CSS o empleando métodos de salida personalizados. srcsetlo que da lugar a la descarga constante de imágenes de gran tamaño.
• Al utilizar servicios externos de alojamiento de imágenes o bloques de imágenes de terceros, es posible que se omita el sistema multitamaño generado por la biblioteca multimedia.

---

2.2 Compresión (reduce el tamaño en KB, pero sin comprometer la calidad)

La esencia de la compresión no reside en “cuanto más pequeño, mejor”, sino en lograr “una reducción de volumen que sea claramente perceptible, pero prácticamente imperceptible a simple vista”.

Las reglas son las siguientes:

• Fotografías/Tomas reales (retratos, productos, paisajes)Priorizar la compresión con pérdida (maximiza las ganancias)
• Captura de pantalla/Imagen con texto extensoLa compresión debe ser más conservadora para evitar que el texto aparezca borroso.
• Logotipo/IconoPrioriza SVG u opta por la compresión sin pérdidas (la compresión con pérdidas provoca fácilmente un desenfoque de los bordes).

¿Qué constituye una calificación aprobatoria?

• El tamaño de las imágenes en la mayoría de las páginas ha disminuido significativamente.
• Sin ruido perceptible, bordes borrosos, bandas de color ni texto borroso.

---

2.3 WebP / AVIF (Política de formato: tamaño de archivo más pequeño para una claridad equivalente)

WordPress ahora admite la carga de archivos. WebP (5.8) y AVIF (6.5)。
Sin embargo, para poner realmente en práctica el “formato de próxima generación”, normalmente hay que abordar dos cuestiones:

1. Cómo convertir por lotes archivos multimedia históricos(De lo contrario, solo habrás optimizado las “nuevas imágenes que se suban en el futuro”).
2. ¿Se debe crear un duplicado o se debe reemplazar la imagen original?(Esto marca un punto crítico; más adelante nos centraremos en la “sustitución y eliminación de la imagen original” de Plus WebP).

Estilo de redacción recomendado:

• WebP: Por lo general, es el formato predeterminado preferido (ofrece una compatibilidad más estable).
• AVIF: un paso más en la compresión, adecuado para imágenes grandes, banners de primera pantalla y fotos de álbumes (aunque más...Dependiente del apoyo ambiental）

---

2.4 La carga diferida debe aplicarse con prudencia (evite un enfoque generalizado).

WordPress 5.5 en adelanteCarga diferida por defectoImagen.
Reduce el consumo de ancho de banda durante el renderizado inicial:

• La carga diferida es adecuada para “recursos fuera de pantalla”.”
• La imagen más importante de la primera pantalla (a menudo la imagen principal de la primera pantalla) suele ser inadecuada para la carga diferida.

---

2.5 Capa de entrega: CDN / Imagen CDN

La compresión, el tamaño y el formato responden a la necesidad de “archivos más pequeños y adecuados”.
Sin embargo, si las imágenes se descargan constantemente desde el servidor de origen a través de largas distancias, la latencia de la red seguirá afectando significativamente la experiencia del usuario. En tales casos, se requiere una solución de “capa de entrega” (CDN/imagen CDN).

Dos enfoques típicos:

• Cloudflare Polonia：Documentación de CloudflareEl artículo presenta los métodos de compresión de Polish (sin pérdida/con pérdida/WebP) y menciona el uso de format=auto Se permite el uso de los formatos WebP/AVIF.
• Acelerador de sitios Jetpack：Documentación de JetpackOptimizará las imágenes y las distribuirá junto con los recursos estáticos a través de su red.

La optimización de imágenes se encarga de reducir el tamaño y garantizar su idoneidad.CDN: Entregas más cercanas y fiables

3. Selección: Solo se seguirán dos vías principales.

El error más común en la optimización de imágenes no es “no instalar complementos”, sino instalar demasiados complementos que dan lugar a un procesamiento redundante:
A está comprimiendo, B también está comprimiendo; A está convirtiendo a WebP/AVIF, B también está convirtiendo; A está modificando las URL, B las está reescribiendo... Al final, ni tú mismo puedes explicar lo que está pasando en el sitio.

Reglas:

Solo hay un camino a seguir: almacenamiento local totalmente gratuito o compresión en la nube con tres opciones entre las que elegir.

• Ruta A (totalmente gratuita a nivel local):Además, WebP o AVIF + EWWW Image Optimizer(o seleccione solo uno de ellos)
• Ruta B (Elija una de las tres opciones de compresión en la nube):ShortPixel / Imagify / TinyPNG

---

3.1 Ruta A: Totalmente gratis a nivel local (más WebP o AVIF o EWWW)

Las características que definen esta ruta son:

• No dependes de servicios de compresión de terceros que operan con una cuota mensual o por archivo (aunque ciertas funciones pueden ofrecer servicios opcionales).
• La contrapartida es que el procesamiento por lotes puede suponer una mayor carga para el servidor en términos de CPU/E/S, lo que requiere prestar más atención a la “estrategia y el riesgo”.”

3.1.1 Además, WebP o AVIF.El concepto central es “generación/reemplazo”, y no se trata de una “herramienta de compresión” en el sentido tradicional.”

• Al generar imágenes con resolución completa:El ID del archivo de imagen original se sobrescribirá con WebP/AVIF, el archivo original se eliminará y la URL dentro del contenido también se sustituirá.。
• El complemento proporciona comandos WP-CLI y recomienda utilizar WP-CLI, ya que es más confiable al manejar numerosos archivos.

Esto implica que no “genera silenciosamente un WebP por ti”, sino que puede ser algo puntual.Migración de activos(especialmente cuando se activa la opción “Reemplazar y eliminar la imagen original”).

La diferencia entre los dos modos

Modo 1: Conservar la imagen original + generar una copia WebP/AVIF (más estable)

• Ventaja: más fácil de revertir en caso de problemas de compatibilidad.
• Costo: aumentará el uso del disco (imagen original + nuevo formato + miniaturas de varios tamaños).

Modo 2: Reemplazar y eliminar la imagen original (más agresivo)

• Ventajas: los discos no se expanden tan rápidamente; las referencias internas se convierten automáticamente al nuevo formato.
• Riesgos: al modificar activos y referencias simultáneamente, la resolución de problemas de compatibilidad se vuelve significativamente más costosa (especialmente cuando los sistemas externos o la lógica de los temas dependen de los nombres de archivo, las rutas o los formatos originales).

Errores comunes al utilizar WebP o AVIF

1. Tras la sustitución completa de la base de datos, algunas imágenes de las páginas se muestran incorrectamente.
   La causa no suele ser que “la imagen esté dañada”, sino que algún eslabón de la cadena (como la sustitución de URL, el almacenamiento en caché o las políticas de generación de miniaturas) no se ha alineado correctamente.
2. Cuanto mayor sea el número de miniaturas, mayor será el alcance de los cambios.
   Al subir una imagen a WordPress se generan múltiples dimensiones; los temas o plugins pueden añadir más tamaños. Una sustitución completa implica que es posible que tengas que modificar una gran cantidad de archivos.
3. La migración de formato por sí sola no garantiza el volumen más pequeño posible.
   Los archivos WebP/AVIF suelen ser más pequeños, pero la “estrategia de tamaño” y la “estrategia de compresión” siguen siendo fundamentales. No trate Plus WebP como una “solución de un solo clic para una carga más rápida”.

---

3.1.2 Optimizador de imágenes EWWWSolución de compresión local gratuita

El posicionamiento de la página del complemento EWWW es muy claro:

• Puede utilizar un conjunto de herramientas en su servidor para la optimización (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc.).
• Si necesitas una mayor compresión o quieres ahorrar en CPU, también puedes descargar el procesamiento que consume CPU a tu servidor (opcional).

¿Qué papel debería desempeñar EWWW en la Ruta A?

Si está utilizando Plus WebP para una “estrategia de migración/sustitución de formatos”, entonces EWWW es más adecuado para llevarla a cabo:

• Optimización de compresión y volumen(en particular, la reducción del tamaño de los recursos sin procesar, como los archivos JPG/PNG)
• Optimización por lotes de la biblioteca multimedia histórica(Con el objetivo de “reducir el volumen” en lugar de “sustituir las URL”).

Los clásicos escollos de EWWW

1. La carga del servidor aumenta durante la optimización por lotes.
   Esto se debe a que la compresión local consume CPU/IO. La solución no consiste en “dejar de usarla”, sino más bien en “procesar por lotes, durante las horas de menor actividad, y optar por soluciones de descarga o en la nube cuando sea necesario”.
2. “Generar archivos WebP no significa necesariamente que el frontend esté sirviendo WebP.
   Muchos complementos trabajan bajo este concepto erróneo: la generación es una cosa, y la estrategia de entrega (reescritura, etiquetas de imagen, accesos a la caché, etc.) es otra muy distinta.
3. duplicando la misma funcionalidad que otros complementos
   Si eliges la opción A, evita acumular servicios de compresión de imágenes como ShortPixel/Imagify/TinyPNG; si eliges la opción B, desactiva la lógica de sustitución Plus WebP. Principio básico:Cíñete a un plan de acción.

---

3.2 Ruta B: Elija uno de los tres servicios de compresión en la nube (ShortPixel / Imagify / TinyPNG)

Esta opción es adecuada para aquellos que desean conservar los recursos del servidor, prefieren un enfoque más sencillo para el procesamiento por lotes y se sienten cómodos con los precios de pago por uso.
Sin embargo, el punto más común de malentendido con respecto a la compresión en la nube es:La asignación gratuita no es simplemente una cuestión de “páginas gratuitas”.El número de tamaños de miniaturas, si se genera WebP/AVIF y si se realiza una recompresión repetida, todo ello tendrá un impacto significativo en el consumo de recursos.

A continuación explicaremos: cómo funcionan los niveles gratuitos/de pago, cómo se deducen las cuotas, los errores más comunes que hay que evitar y qué tipos de sitios web son los más adecuados.

---

3.2.1 ShortPixel100 créditos gratis al mes, pero los créditos se consumirán con las miniaturas y las ampliaciones WebP/AVIF.

¿Qué pasa con lo gratuito y lo de pago?

La descripción del complemento ShortPixel indica explícitamente:

• 100 créditos gratis al mes
• También hay “créditos mensuales ilimitados adicionales” (la página del complemento proporciona la información correspondiente sobre los precios).
• También ofrece “paquetes de crédito únicos sin fecha de vencimiento” (con información sobre el precio inicial).

Nota:

• Gratis: una asignación mensual de créditos para sitios web ligeros o con fines de prueba.
• Paquete único: adecuado para sitios con amplias bibliotecas multimedia que desean liquidar su inventario de una sola vez (se compra para un solo uso, normalmente sin fecha de caducidad).
• Mensual/Ilimitado: adecuado para sitios que requieren actualizaciones continuas de imágenes y una optimización estable a largo plazo.

La base de conocimientos oficial de ShortPixel también aborda la diferencia entre “paquetes únicos y planes mensuales ilimitados”.Explicación clara: El plan mensual ilimitado se factura mensualmente (o anualmente) y ofrece créditos ilimitados y un cupo fijo de CDN; los créditos puntuales no caducan, lo que te permite un mayor control sobre el uso según tus necesidades.

El punto más importante: ¿cómo se calculan los créditos de ShortPixel?

Documentación oficial de ShortPixel KB lo expresó muy claramente:

• Al subir una imagen a WordPress se generan varias miniaturas.
• Cada optimización de miniatura cuenta como un crédito.；
• Si eliges generar WebP o AVIF,Cada versión WebP/AVIF de una imagen original y su miniatura consumirán un crédito adicional.；
• Puede excluir ciertas miniaturas de la optimización para reducir el consumo de créditos.

Ejemplo de créditos：

Supongamos que subes una imagen y el tema/plugin genera ocho miniaturas:

• Optimización de la imagen original + miniaturas únicamente: 1 (imagen original) + 8 (miniaturas) = 9 créditos
• Si también se requiere la generación de WebP/AVIF: agregue una versión de última generación para cada uno de los 9 formatos anteriores → luego agregue otros 9 créditos.
  En otras palabras, lo que usted podría considerar “una imagen” podría consumir en realidad casi “créditos de dos dígitos”.

Por lo tanto:“100 créditos gratis” no equivale a “100 imágenes gratis”.

Los errores más comunes de ShortPixel

1. Los 100 créditos gratuitos se agotan rápidamente.
   Causa principal: numerosas miniaturas + créditos adicionales necesarios para la generación de WebP/AVIF.
   Recomendación：

• Primero, evalúa el número de miniaturas que hay en el sitio.
• Elimine los tamaños de miniaturas innecesarios (optimice solo aquellos tamaños que realmente se vayan a utilizar).
• Primero, determine la estrategia de compresión antes de ejecutar lotes, para evitar repetidos intentos de prueba y error que consumen recursos.

2. Superponer simultáneamente otros complementos de conversión de formato.
   Si habilita la sustitución Plus WebP y, al mismo tiempo, indica a ShortPixel que genere/inserte etiquetas de última generación, la lógica se vuelve más compleja, lo que dificulta la resolución de problemas. La ruta B simplemente hace que ShortPixel se encargue de ello de forma independiente.
3. Suponiendo que con solo instalarlo se garantiza que “el frontend sirva WebP/AVIF”.”
   Página del complemento ShortPixelPuede convertir formatos WebP/AVIF e integrar imágenes de última generación en páginas front-end (por ejemplo, mediante la implementación de etiquetas).
   Sin embargo, una vez completados, los resultados aún deben verificarse.

---

3.2.2 Imagify: 201 TP234 T gratis al mes; el límite se deduce en función del “tamaño original de la imagen + número de miniaturas”; la recompresión dará lugar a deducciones duplicadas

Asignación y posicionamiento gratuitos

Página oficial de precios de ImagifyEstá escrito muy claramente:Las cuentas gratuitas tienen un límite mensual de 20MB。
Su página de complementos también indica explícitamente que puede comprimir, cambiar el tamaño y convertir archivos WebP/AVIF.

¿Cómo se deducen las cuotas?

Documentación oficial de Imagify “¿Cómo se calcula el uso de la cuota?” explica claramente el mecanismo de deducción:

• El número de miniaturas afectará al consumo.Por ejemplo, si tienes 10 tamaños de miniaturas, optimizar una imagen se convierte en optimizar 11 imágenes (la imagen original más 10 miniaturas), todas las cuales contribuyen al consumo de la cuota.
• Deduce la cuota en función del tamaño del archivo original.Por ejemplo, si envías una imagen de 100 KB a Imagify, se deducirán 100 KB de tu cuota.
• Cambiar el nivel de compresión y volver a optimizar consumirá cuota de nuevo.。
• La misma clave API se puede utilizar en varios sitios, pero las cuotas se compartirán entre ellos.

Este es el “enfoque de comprensión fundamental” de Imagify:
Es más bien como un paquete de datos: lo que envíes, eso es lo que se deduce; cuantas más miniaturas, más se deduce; las subidas pesadas repetidas provocarán deducciones repetidas.

Ejemplos fáciles de entender sobre las cuotas de Imagify

Supongamos que subes una imagen original de 800 KB y el sitio genera 8 miniaturas.

• Al optimizar con Imagify, se incluyen tanto la imagen original como ocho miniaturas (si seleccionas “Optimizar todo”). Esto significa que esta única operación consumirá una cuota cercana al tamaño original total de todos estos archivos combinados.
  Por eso algunos sitios web se dan cuenta de que su cuota “20MB” se agota rápidamente: no es que Imagify no sea lo suficientemente potente, sino que las imágenes que subes son demasiado grandes, estás generando demasiadas miniaturas y es posible que también estés probando diferentes niveles de compresión una y otra vez.

Errores comunes con Imagify

1. El código 20MB gratuito no es suficiente para realizar un “borrado completo del historial del sitio”
   La versión 20MB suele ser más adecuada para pruebas y actualizaciones menores; si tu biblioteca multimedia ya es grande, es probable que borrarla toda de una vez requiera una actualización.
2. Los ajustes repetidos del nivel de compresión dan lugar a un consumo repetido de la cuota.
   Imagify afirma explícitamenteLa reoptimización volverá a consumir la cuota.
   Es recomendable describir claramente la “estrategia” en esta página:

• Primero, determine el nivel de compresión y la calidad visual utilizando un pequeño número de imágenes.
• Finalice la estrategia antes de ejecutarla por lotes.
  Evita realizar pruebas repetidas de prueba y error en toda la base de datos.

3. Las claves API compartidas entre varios sitios provocan una misteriosa disminución de las cuotas.“
   Si utiliza la misma clave API en varios sitios, las cuotas se compartirán.
   Por lo tanto, en escenarios de equipo/multisitio, es recomendable definir claramente qué sitios comparten recursos y cuáles operan de manera independiente, evitando así la incontrolabilidad presupuestaria.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 créditos gratis al mes; la conversión a WebP/AVIF tiene un costo adicional de 1 crédito por tamaño.“

Asignación gratuita y su enfoque de facturación

La página del plugin TinyPNG para WordPress está redactada con gran claridad:

• 500 créditos gratis cada mes
• En una “instalación estándar de WordPress”, se puede comprimir aproximadamente en Aproximadamente 100 imágenes al mes.
• Sin embargo, si la conversión a AVIF o WebP está habilitada:Cada tamaño de imagen incurrirá en un cargo adicional por crédito.Por lo tanto, probablemente solo se pueda comprimir y convertir. Aproximadamente 50 imágenes al mes.(Dependiendo de cuántos tamaños de miniaturas tengas).

Mientras tanto, Tinify (el desarrollador de TinyPNG/TinyJPG) también ha anunciado en su Página de precios de la APINota: Regístrese para recibir 500 compresiones gratuitas al mes. Más allá de esta asignación, se aplicarán cargos basados en el número de compresiones exitosas, sin necesidad de suscripción obligatoria.

Para resumir TinyPNG en una sola frase:
Funciona con un sistema basado en créditos; cuantos más tamaños de miniaturas utilices y más formatos WebP/AVIF habilites, más rápido se agotarán tus créditos.

Un ejemplo fácil de entender sobre los créditos de TinyPNG

Supongamos que su sitio genera ocho tamaños de miniaturas para cada imagen:

• Solo compresión: Imagen original + 8 miniaturas → Requiere 9 créditos
• Si la conversión a WebP/AVIF está habilitada: se aplica una deducción de crédito adicional por tamaño → Esto puede casi duplicar el costo.
  Esto coincide exactamente con la descripción de la página del complemento: tras habilitar la conversión, la cuota gratuita pasa de aproximadamente “100 imágenes al mes” a “50 imágenes al mes”.

Errores comunes con TinyPNG

1. Suponiendo que 500 créditos = 500 imágenes
   No. Consume créditos en función del “tamaño/variante de la imagen”. La página del complemento indica explícitamente: “La conversión deduce 1 crédito adicional por cada tamaño de imagen”.
2. El plugin de tema/comercio electrónico genera dimensiones excesivas, lo que provoca una reducción significativa de la cuota gratuita.
   Cuanto mayores son las dimensiones, más fácilmente se amplifican y consumen los créditos.
3. Después de habilitar la conversión, descubrí que el límite de crédito se había vuelto insuficiente de repente.
   No se trata de un error, sino de su mecanismo de facturación.
   Recomendaciones estratégicas:

• Si el nivel gratuito se utiliza principalmente para la compresión y la reducción de peso, es posible que inicialmente se centre únicamente en la compresión. Una vez que haya confirmado que la estructura del sitio es estable y que realmente se necesita la próxima generación, podrá iniciar la conversión.

4. Recomendaciones específicas para cada contexto: cómo seleccionar para diferentes tipos de sitios

Aunque todos utilizan WordPress, los sitios de contenido, las plataformas de comercio electrónico, los portafolios y los sitios de membresía presentan cada uno distintos puntos críticos relacionados con las imágenes.

4.1 Sitios web/blogs centrados en el contenido (con numerosas imágenes por artículo y una frecuencia de actualización moderada)

Recomendaciones prioritarias:

1. Estrategia dimensional (Paso 1)
2. Compresión (Paso 2)
3. WebP (Paso 3)

Una ruta más adecuada:

• Para una opción sin complicaciones: elige una de las tres alternativas (ShortPixel / Imagify / TinyPNG).
• Opte por la opción gratuita: Ruta A (Plus WebP + EWWW), pero es recomendable comenzar evaluando los riesgos en “modo conservador (sin eliminar las imágenes originales)”.

Errores comunes:

• La imagen del encabezado del artículo es muy grande y la estrategia de carga diferida no es adecuada.ralentizará la primera pantalla

4.2 Sitios de comercio electrónico/productos (numerosas miniaturas, múltiples variantes de imágenes, estabilidad primordial)

Los problemas más comunes en el comercio electrónico no se deben a “resultados de compresión deficientes”, sino más bien a “dimensiones incorrectas tras la optimización, miniaturas que faltan o componentes front-end que no logran recuperar las imágenes”.

Recomendaciones prioritarias:

1. Proceda con cautela: adopte un enfoque conservador en las estrategias de compresión; evite realizar una sustitución completa de la base de datos de inmediato.
2. Evaluación de las dimensiones de las miniaturas: los temas de comercio electrónico suelen generar más tamaños, lo que aumenta el consumo de cuota (especialmente notable con ShortPixel/TinyPNG).
3. Realizar una validación a pequeña escala antes de ampliarla (extremadamente importante).

Una ruta más adecuada:

• La opción B suele ser menos complicada: ShortPixel/Imagify/TinyPNG admiten el procesamiento por lotes. La clave está en comprender el sistema de cuotas y evaluar los costos por adelantado.
• La ruta A también es viable, pero hay que tener mucho cuidado con el comportamiento de Plus WebP de “anular los ID/eliminar las imágenes originales/reemplazar las URL”: esto constituye una migración de activos, y no es recomendable proceder a un reemplazo total desde el principio.

4.3 Portafolio/sitio web de fotografía (sensible a la calidad de las imágenes individuales, archivos de gran tamaño, altos estándares visuales)

Recomendaciones prioritarias:

1. Estrategia dimensional (control del área de visualización)
2. Estrategia de compresión (es mejor pecar por exceso que por defecto y perder detalles).
3. WebP/AVIF (ofrece ventajas significativas para imágenes de gran tamaño, aunque la calidad visual requiere verificación)

Una ruta más adecuada:

• Imagify: Asignar cuotas basadas en el “tamaño original de la imagen” hace que estos sitios sean más propicios para el “control presupuestario” (ya que se sabe aproximadamente cuánto consumirá cada imagen grande), pero evita comprimirlas repetidamente.
• ShortPixelSi el número de tamaños de miniaturas es limitado, el consumo de créditos sigue siendo manejable; sin embargo, cuando se generan numerosos tamaños junto con activos de última generación, el uso de créditos aumenta significativamente, lo que requiere una planificación previa.

5. Comparación entre asignación y facturación: explicación de si la asignación gratuita es suficiente.

¿Cuál es realmente más rentable y cuánto tiempo durará el periodo gratuito?

5.1 Tres modelos de deducción de comisiones

• ShortPixel(créditos)Los créditos se calculan en función del número de imágenes originales más las miniaturas; la generación de versiones WebP/AVIF supondrá deducciones adicionales de créditos por cada formato correspondiente.
• Imagify(Cuota MB)Las deducciones de la cuota se basan en el tamaño original del archivo; un mayor número de miniaturas implica mayores deducciones; la recompresión provocará deducciones adicionales.
• TinyPNG(créditos): 500 créditos al mes; habilitar la conversión a WebP/AVIF supondrá créditos adicionales por el tamaño de la imagen.

5.2 Métodos de estimación rápida

Puede estimarlo de la siguiente manera:

1. Elige cualquier “imagen original que suelas subir” y comprueba su tamaño aproximado (por ejemplo, 300 KB / 1MB / 3MB)
2. Calcule el número aproximado de tamaños de miniaturas que genera su sitio (por ejemplo, 5 / 10 / 20).
3. Determinar si se debe generar WebP/AVIF (Sí/No)

A continuación, utilice el siguiente “cálculo mental” para comprender el consumo:

• ShortPixelCada imagen ≈ (1 + número de miniaturas) créditos; si se genera WebP/AVIF, ≈ aproximadamente el doble (ya que las versiones de última generación también requieren créditos).
• ImagifyCada imagen consume aproximadamente una cuota equivalente al tamaño original de la imagen más el tamaño total de todas las miniaturas. Cambiar el nivel de compresión y volver a comprimirla supondrá una deducción adicional de la cuota.
• TinyPNGGratis: 500 créditos; si tu sitio genera numerosos tamaños de imagen por imagen y la conversión está habilitada, la asignación gratuita disminuirá significativamente (la página del complemento proporciona una estimación intuitiva de “aproximadamente 100 imágenes al mes” frente a “aproximadamente 50 imágenes al mes”).

6. Divulgación de riesgos

Riesgo 1: Evita tener varios complementos que realicen la misma función de forma redundante.

Esta es la causa más común de desastres.“

• Ruta A:Además, WebP o AVIF + EWWW(Divida las responsabilidades entre ambos; no realice conversiones y entregas similares simultáneamente, ni instale solo uno de ellos).
• Ruta B: ShortPixel / Imagify / TinyPNG Elija una de las tres opciones(Selecciona uno responsable de compresión y próxima generación)

Riesgo 2: La funcionalidad “anular ID / eliminar imagen original / reemplazar URL” de Plus WebP constituye una migración de activos.

Una vez más, hay que recalcar:Más WebP La descripción indica explícitamente que, durante la generación completa, se sobrescribirá el ID de la imagen original, se eliminará el archivo original y se sustituirá la URL del contenido.
Esto significa que no se trata de un ajuste menor que pueda revertirse fácilmente, sino más bien de una modificación a nivel de activos.

La estrategia recomendada debería ser:

• Pruebas iniciales a pequeña escala (de decenas a cientos de artículos)
• Confirme que la pantalla frontal, las miniaturas y las actualizaciones de la caché funcionan correctamente.
• Considerar el procesamiento completo de la base de datos.

Riesgo 3: El consumo real de la “asignación gratuita” de compresión en la nube depende del número de miniaturas y de las opciones de última generación seleccionadas.

• ShortPixelLas miniaturas y la próxima generación tendrán un impacto significativo en los créditos.
• TinyPNGHabilitar WebP/AVIF supondrá deducciones de crédito adicionales por cada tamaño de imagen.
• Imagify: Deduce según el tamaño original de la imagen; cuantas más miniaturas, mayor será la deducción. Una compresión elevada dará lugar a deducciones repetidas.

Riesgo 4: “WebP/AVIF generado” no equivale a “Frontend que entrega WebP/AVIF”.”

Muchos usuarios informan que sienten que su sitio no se ha vuelto más rápido después de la conversión, y la causa principal es que la interfaz continúa generando archivos JPG/PNG (debido a discrepancias en cualquier etapa del proceso: almacenamiento en caché, reescritura, etiquetas o negociación del navegador).

7. ¿Cómo puedo verificar si ha surtido efecto después de completar la tarea?

Cuatro puntos de verificación muy sencillos:

1. Al actualizar la misma página por segunda vez, ¿el proceso de carga es más estable y rápido?(Eficacia percibida del almacenamiento en caché y la optimización)
2. ¿Existe una diferencia notable en las dimensiones de las imágenes entre la carga en dispositivos móviles y en computadoras de escritorio?(Responsivo) srcset/sizes Si es eficaz
3. Revisa varias imágenes: ¿Hay archivos o recursos WebP o AVIF?¿El sitio está realmente en uso? próxima generación）
4. Revisa varias imágenes al azar: amplía la imagen para determinar si se ven notablemente borrosas o si el texto aparece difuminado.(¿Es excesiva la calidad de compresión?)

Si se cumplen los cuatro criterios, significa que la ruta que ha elegido ya está operativa. Continúe con el siguiente paso. CDN “Capa de entrega”Se mejorará la estabilidad general.

8. Recomendaciones para la acción

1. Primero elige tu ruta:

• Me gustaría que siguiera siendo gratuito en la medida de lo posible.Además, WebP o AVIF + EWWW (o instala solo uno de ellos).
• Para ahorrar recursos del servidor y disfrutar de mayor tranquilidad con la facturación de pago por uso.Elija uno de ShortPixel / Imagify / TinyPNG

2. Realizar una prueba a pequeña escala (varias docenas de artículos).
3. Confirme que todo está en orden antes de continuar con el lote.
4. Se requieren más mejoras para aumentar la estabilidad de la entrega:Lectura CDN Aceleración

Preguntas frecuentes

1. ¿Cuántos complementos debo instalar? ¿Puedo instalarlos todos?

Intenta seguir una sola ruta.

• Ruta A: Plus WebP o AVIF + EWWW Image Optimizer (o instale solo uno de ellos)
• Ruta B: Elige una de las siguientes opciones: ShortPixel / Imagify / TinyPNG
  Tener varios complementos realizando simultáneamente “compresión/conversión a WebP/AVIF/modificación de URL/reescritura de entrega” dentro del mismo sitio web probablemente se volverá cada vez más caótico y será muy difícil de solucionar.

2. ¿WordPress no es compatible ya con WebP/AVIF? ¿Sigo necesitando un complemento?

Es necesario distinguir:
“Compatibilidad con la carga/el uso” ≠ “Conversión automática/entrega automática”.
WordPress 6.5 no convertirá automáticamente por lotes los archivos JPG/PNG antiguos a WebP/AVIF, ni gestionará automáticamente todo el flujo de trabajo de “generar AVIF/WebP en función de las capacidades del navegador con alternativas”. Para actualizar las bibliotecas multimedia históricas, normalmente se requieren complementos o servicios para completar el proceso.

3. Dentro de la optimización de imágenes, ¿qué paso ofrece el mayor retorno de la inversión?

Por lo general, es En primer lugar, asegúrate de que las dimensiones sean correctas (srcset/sizes).。
Muchos sitios funcionan lentamente no porque carezcan de compresión, sino porque las páginas solo muestran 900 píxeles, mientras que obligan a los usuarios a descargar la imagen completa de 3000 píxeles. La compresión ahorra kilobytes, pero las dimensiones desiguales pueden desperdiciar varias veces más datos sin motivo alguno.

4. ¿Cómo puedo confirmar que la imagen que se está cargando actualmente es la “más pequeña”, en lugar de descargar continuamente la original?

Observe dos fenómenos:

• Al abrir la página en un dispositivo móvil, las dimensiones de la imagen descargada son notablemente más pequeñas que en una computadora de escritorio.
• El tamaño del recurso de la misma imagen varía cuando se carga en diferentes dispositivos.
  Si siempre se descargan las imágenes originales, una causa común es que el tema/constructor trata la imagen como una imagen de fondo CSS o una salida personalizada, omitiendo así las capacidades multitamaño y la funcionalidad srcset de la biblioteca multimedia.

5. ¿“WebP/AVIF generado” significa necesariamente que la interfaz está generando WebP/AVIF?

No es lo mismo que.
La generación es simplemente la finalización de la “capa de archivos”; que el frontend realmente sirva WebP/AVIF depende de factores como la reescritura, la estrategia de etiquetas de imagen, los aciertos de caché y si la negociación del navegador surte efecto. Una vez que haya terminado, debe “verificar aleatoriamente los tipos de recursos de varias imágenes”.

6. ¿Cuál es exactamente el riesgo que entrañan los formatos WebP o AVIF? ¿Puedo realizar una conversión con un solo clic en toda la biblioteca?

Su punto de riesgo no es la “compresión”, sino más bienModificación del nivel de migración de activos：

• Durante la generación a escala real, es posible que se sobrescriba el ID del archivo de imagen original, se elimine el archivo original y se sustituyan las direcciones URL del contenido.
  Por lo tantoNo es recomendable reemplazar toda la base de datos de inmediato.Primero, realice pruebas a pequeña escala (de decenas a cientos de registros) y asegúrese de que haya copias de seguridad disponibles antes de considerar el procesamiento completo de la base de datos.

7. ¿Cómo elegir entre los dos modos de Plus WebP: conservar la imagen original o reemplazar y eliminar la imagen original?

En términos sencillos:

• Modo 1: Conservar la imagen original + generar una copia WebP/AVIF (más estable)Es conveniente para las reversiones, pero aumentará el espacio en disco (imagen original + nuevo formato + miniaturas de varios tamaños).
• Modo 2: Reemplazar y eliminar la imagen original (más agresivo)La ampliación del disco no es fácil de lograr, pero cuando se modifican los activos y las referencias simultáneamente, el costo de solucionar los problemas de compatibilidad aumenta considerablemente.
  Cuanto más complejo sea el sitio (comercio electrónico/múltiples complementos/múltiples tamaños), más recomendable es comenzar con un enfoque más estable.

8. ¿Es suficiente la compresión local gratuita que ofrece EWWW Image Optimizer? ¿Podría sobrecargar el servidor?

EWWW es más bien una “herramienta de compresión local”: consume CPU/IO.
Es habitual que la carga aumente durante la optimización por lotes. Esto no significa que el enfoque sea inadecuado, sino que la estrategia debe ser la adecuada: implementar por lotes, durante las horas de menor actividad, y optar por soluciones de descarga o en la nube cuando sea necesario.
Si busca una solución sin complicaciones o tiene limitaciones en los recursos del servidor, la ruta B es más eficiente para el servidor.

9. Los 100 créditos gratuitos al mes de ShortPixel: ¿por qué parece que se agotan tras unas pocas imágenes?

Porque Los créditos no son el “número de imágenes”.”se mostrarán en miniatura y se ampliarán con tecnología de última generación:

• La imagen original + cada miniatura cuenta como crédito.
• Si se genera WebP/AVIF, cada versión correspondiente incurrirá en un consumo adicional de crédito.
  Por lo tanto, podría pensar que “1 imagen” podría consumir en realidad cerca de “créditos de dos dígitos”. ShortPixel

10. ¿Por qué se agota tan rápido la asignación gratuita de 201 TP234 al mes de Imagify?

Imagify se asemeja más a un “paquete de datos”:

• Según su mensajeTamaño del archivo originaldeducir cuota
• Cuantas más miniaturas, mayor será el consumo.
• Cambiar el nivel de compresión para volver a optimizar consumirá cuota de nuevo.
• Una única clave API se comparte entre varios sitios, con cuotas compartidas en consecuencia.
  Por lo tanto, el mensaje “20MB se agotará pronto” suele deberse a que las imágenes son demasiado grandes, hay demasiadas miniaturas o a repetidos intentos fallidos.

11. TinyPNG ofrece 500 créditos gratis al mes, entonces, ¿por qué el plugin dice que solo son unas 100 imágenes al mes? ¿Y por qué baja a 50 imágenes al mes después de habilitar WebP/AVIF?

Porque los créditos de TinyPNG también se amplifican por “tamaño/variante”:

• Una instalación estándar de WordPress suele comprimir aproximadamente 100 imágenes al mes.
• Habilita la conversión a AVIF o WebP:Cada tamaño de imagen incurrirá en un cargo adicional por crédito.Por lo tanto, es probable que solo sea posible comprimir y convertir aproximadamente 50 imágenes al mes (dependiendo del número de tamaños de miniaturas).
  Por lo tanto, 500 créditos no equivalen a 500 imágenes.

12. ¿Cuántas miniaturas hay en mi sitio web? ¿Por qué tienen un impacto tan significativo?

Al subir una imagen a WordPress se generan múltiples tamaños; los temas/plugins (especialmente los de comercio electrónico) pueden añadir más dimensiones.
Los créditos/cuotas de compresión en la nube suelen calcularse como “imagen original + miniatura combinadas”, por lo que cuanto mayor sea el número de miniaturas, menos durará la asignación gratuita.

13. ¿La carga diferida siempre acelera las cosas? ¿Por qué algunos afirman que en realidad las ralentiza?

La carga diferida es adecuada para recursos que no están en pantalla.
Si la imagen grande más importante de la primera pantalla también se retrasa, puede ralentizar la experiencia de carga inicial. Aunque la carga diferida predeterminada de WordPress 5.5 es generalmente aceptable, evita un enfoque generalizado.

14. ¿Cuándo necesito el CDN / Imagen CDN si elijo la ruta A o la B?

La compresión, el tamaño y el formato responden a la necesidad de “archivos más pequeños y adecuados”.
El modelo CDN garantiza una entrega más rápida y fiable。
Cuando se produce una latencia significativa debido a que las imágenes se recogen de un servidor de origen lejano, añadir CDN por imagen (por ejemplo, Cloudflare Polish o Jetpack Site Accelerator) suele traducirse en una experiencia más estable, lo que facilita la lectura del contenido. Aceleración de WordPress CDN。

15. ¿Cuál es la forma más sencilla de verificar que realmente funciona después de haberlo hecho?

El método de verificación que más tiempo ahorra:

• Al actualizar la misma página por segunda vez, ¿el proceso de carga es más estable y rápido?
• ¿Existe una diferencia notable en las dimensiones de las imágenes entre la carga en dispositivos móviles y en computadoras de escritorio (¿funcionan srcset/sizes como se espera)?
• Revisa varias imágenes: ¿Hay archivos o recursos WebP o AVIF?
• Revisa varias imágenes al azar: amplía la imagen para determinar si se ven notablemente borrosas o si el texto aparece difuminado.