Optimización de la imagen del sitio web

La optimización de las imágenes es uno de los aspectos más “gratificantes” del rendimiento de WordPress: para una misma estructura de página y un mismo tema, siempre que el tamaño, las dimensiones, el formato y la entrega de las imágenes sean correctos, la experiencia de carga mejorará inmediatamente.

Pero la optimización de imágenes es también la forma más fácil de liarla, no porque sea técnicamente demasiado difícil, sino porque la información está demasiado fragmentada:
Lees algunos artículos, sabes que “compresión”, “WebP/AVIF”, “lazy loading”, y luego miras la introducción del plugin y dices “¡gratis cada mes! 100 créditos por mes”, “Gratis 20MB”, “1 crédito por imagen”, pero cuanto más leo, más confundido me pongo -. ¿Es suficiente gratis? ¿Cómo deducir la cuota? ¿Ha entendido mal “lo mismo”? Y lo más importante:¿Hizo realmente efecto después de hacerlo o no?

Este artículo sólo hace tres cosas:

1. Darle un ejecutablehoja de ruta (también fig.)(Qué hacer primero, qué hacer después)
2. Ten clara la opción por la que te decantas (cuál es la diferencia entre gratuito/pagado y para quién es adecuado cada uno).
3. Escriba los errores más comunes con antelación (para que no tenga que buscar por ahí para solucionarlos cuando haya terminado).

1. Lo esencial: lo que incluye WordPress y lo que no

Si no averiguas primero lo que ya hace el núcleo de WordPress, es fácil que hagas una de estas dos cosas:

• En lugar de utilizar la “capacidad gratuita” de la que deberías disfrutar, dedicas tiempo/gastas dinero a construir la rueda una y otra vez.
• 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 incorpora estas funciones clave:

• Imágenes con capacidad de respuesta (srcset/tamaños): A partir de WordPress 4.4, el núcleo generará imágenes para las etiquetas srcset 与 sizesy utiliza las imágenes de varios tamaños generadas durante la carga para permitir que el navegador elija un recurso más apropiado para cargar según las condiciones de la pantalla.
• Carga diferida nativaWordPress 5.5 en adelante permite por defecto la carga lenta nativa de imágenes, utilizando estándares HTML. loading implementación de atributos.
• Soporte para cargar WebP: Desde WordPress 5.8, puede cargar y utilizar WebP como JPEG/PNG (siempre que el entorno de alojamiento admita WebP).
• Soporte para cargar AVIFAVIF: Desde WordPress 6.5, puede cargar y utilizar AVIF como JPEG/PNG (también depende del soporte del alojamiento).

Pero presta atención:
“Soporte para carga/uso” ≠ “Conversión automática/entrega automática”.
Es decir: incluso si ya estás en WP 6.5, esos JPG/PNGs en tu biblioteca de medios no se convertirán en WebP/AVIF por sí mismos; ¡no obtendrás automáticamente el enlace completo “salida AVIF/WebP de acuerdo a las capacidades del navegador y fallback a la imagen original para navegadores no soportados”! --esta parte normalmente necesita ser parcheada por un plugin o servicio.

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

Qué hacer, por qué, qué hay que hacer para clasificarse y qué es un pozo típico.

2.1 Acertar primero con el “tamaño” (lo más olvidado, pero lo más gratificante)

Muchas estaciones son lentas no porque no se haga la compresión, sino porque elSe ha descargado una imagen de gran tamaño que sobrepasa el área de visualización.：
Por ejemplo, si la página tiene en realidad sólo 900px de ancho, y se pide al visitante que descargue la imagen original de 3000px, el navegador simplemente “la descarga y luego la encoge”. Esto desperdicia ancho de banda, aumenta el tiempo de descodificación y ralentiza la primera pantalla.

WordPress 4.4+Mecanismo de imagen sensible（srcset/sizes) está diseñado para abordar esta misma cuestión.

Haz lo que cuente como pase:

• Al abrir una página en un teléfono móvil, el tamaño de la imagen descargada debe ser significativamente menor que en el escritorio
• La misma imagen se carga con diferentes tamaños de recursos en diferentes dispositivos (en lugar de descargar siempre la imagen original).

Las trampas más comunes:

• Hay temas/constructores que tratan los diagramas como imágenes de fondo CSS, o los imprimen de una forma personalizada que puede eludir la directiva srcsetEl resultado ha sido un gran cuadro de la
• Puede utilizar camas de imágenes vinculadas externamente, bloques de imágenes de terceros y también puede eludir el sistema de tamaños múltiples generado por la biblioteca multimedia

---

2.2 Compresión (reducir el KB, pero sin “aplastar” la calidad)

El núcleo de la compresión no es “cuanto más pequeño, mejor”, sino “la diferencia apenas se aprecia a simple vista, pero la caída de volumen es evidente”.

Las normas son las siguientes:

• Fotografías/imágenes en directo (personas, productos, paisajes)Prioridad a la compresión con pérdida (ganancia máxima)
• Capturas de pantalla de la interfaz / imágenes con mucho texto: La compresión debe ser más conservadora para evitar texto borroso
• Logo/Icono: SVG prioritario o discreto sin pérdida (con pérdida es fácil pegar bordes)

Haz lo que cuente como pase:

• Reducción significativa del tamaño de la imagen en la mayoría de las páginas
• Sin ruido visible, bordes embarrados, saltos de bloque de color, texto borroso

---

2.3 WebP / AVIF (estrategia de formato: más pequeño para igual definición)

WordPress ya permite cargar WebP (5,8) frente a AVIF (6,5)。
Pero para que el Formato de Nueva Generación funcione de verdad, normalmente hay que resolver dos cosas:

1. Cómo convertir por lotes las mediatecas históricas(De lo contrario, sólo estará optimizando para “nuevas imágenes cargadas más tarde”)
2. Si se genera una copia o se sustituye la imagen original(Esta es una cuenca arriesgada; nos centraremos en “Reemplazar y eliminar la imagen original” de Plus WebP más adelante)

Estilo de redacción recomendado:

• WebP: generalmente preferido por defecto (compatibilidad más estable)
• AVIF: otra dirección de compresión, adecuada para imágenes grandes/imágenes grandes de primera pantalla/imágenes de álbum (pero másDependencia del entorno）

---

2.4 La carga perezosa debe utilizarse correctamente (no es de talla única)

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

• Carga perezosa para “recursos fuera de pantalla”
• La imagen grande más crítica de la primera pantalla (y en muchos casos la imagen clave de la primera pantalla) suele ser inadecuada para la carga diferida

---

2.5 Capa de entrega: CDN / Foto CDN

La compresión, el tamaño y el formato resuelven el problema de los “archivos más pequeños que caben”.
Sin embargo, si las imágenes se extraen siempre a distancia de la fuente, la latencia de la red seguirá afectando significativamente a la experiencia. Aquí es donde entra en juego la solución de “capa de entrega” (CDN/imagen CDN).

Dos direcciones típicas:

• Cloudflare Polaco：Documentación de CloudflareSe presentan los métodos de compresión polacos (lossless/lossy/WebP) y se menciona que la compresión con el método format=auto Se permite el formato WebP/AVIF.
• Acelerador de sitios Jetpack：Documentación de JetpackExplica que optimizará las imágenes y las distribuirá por su red junto con los recursos estáticos.

La optimización de las imágenes se encarga de hacerlas más pequeñas y adecuadas.CDN Responsable de ofrecer una mayor estabilidad y cercanía.

3. Selección: sólo dos rutas principales

El fallo más común en la optimización de imágenes no es “no tener plugins”, sino tener demasiados plugins, lo que da lugar a un procesamiento duplicado:
A está comprimiendo, B está comprimiendo, A está convirtiendo a WebP/AVIF, B está convirtiendo, A está cambiando URLs, B está reescribiendo - ni siquiera puedes saber qué está pasando en la estación.

Reglas:

Sólo hay un camino que tomar: o todo gratis en local o compresión en la nube de los tres.

• Ruta A (todo local gratuito):Más WebP o AVIF + Optimizador de imágenes EWWW(o sólo uno)
• Ruta B (triple opción de compresión en la nube):ShortPixel / Imagify / TinyPNG

---

3.1 Ruta A: Full Free Local (Más WebP o AVIF o EWWW)

Esta ruta se caracteriza por:

• No depende de servicios de compresión de terceros “por mes/por hoja” (aunque algunas funciones puedan ofrecerse como servicios opcionales).
• El coste: el procesamiento por lotes puede consumir más servidores en CPU/IO, lo que exige prestar más atención a la “estrategia y el riesgo”.”

3.1.1 Más WebP o AVIF: el núcleo es “generar/reemplazar”, no es la tradicional “herramienta de compresión”.”

• Al generar imágenes de volumen completo:El ID del archivo de imagen original se sobrescribe con WebP/AVIF, se elimina el archivo original y se sustituye la URL del contenido.。
• El plugin proporciona comandos WP-CLI y recuerda: WP-CLI es más fiable cuando hay muchos archivos.

Esto significa que en lugar de “generar tranquilamente un WebP para usted”, podría ser unMigración de activos(Sobre todo si activas la opción “Sustituir y borrar imagen original”).

Diferencias entre los dos modelos

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

• Pros: Más fácil de recurrir en caso de problemas de compatibilidad.
• Coste: Aumentará el uso de disco (imagen original + nuevo formato + miniaturas de varios tamaños).

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

• Pros: los discos no se expanden tan rápido; las referencias de las estaciones pasan directamente al nuevo formato.
• Riesgo: estás “cambiando activos + cambiando referencias”, lo que hace más costoso solucionar problemas de compatibilidad (especialmente si algunos sistemas externos o lógicas temáticas dependen del nombre de archivo/ruta/formato original).

Errores típicos de Plus WebP o AVIF

1. Después de sustituir toda la biblioteca, algunas imágenes de página se muestran de forma anormal.
   El motivo no suele ser que la imagen esté “rota”, sino que algo en la cadena de sustitución de URL, almacenamiento en caché, política de miniaturas, etc. no funciona correctamente.
2. Cuanto mayor sea el número de miniaturas, mayor será el alcance del cambio
   WordPress genera múltiples tamaños al subir una imagen; los temas/plugins también pueden añadir más tamaños. El reemplazo completo significa que puedes estar alterando una colección muy grande de archivos.
3. El mero hecho de realizar una migración de formato no significa necesariamente que el volumen sea siempre el más pequeño
   WebP/AVIF suelen ser más pequeños, pero la “estrategia de tamaño” y la “estrategia de compresión” siguen siendo fundamentales. No pienses que Plus WebP es “un clic más rápido”.

---

3.1.2 Optimizador de imágenes EWWWrepresentante de la compresión local libre

La página del plugin EWWW está muy bien posicionada:

• Se puede optimizar en el servidor con diversas herramientas (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc.).
• También puede descargar el procesamiento que consume CPU a su servidor (opcional) si necesita una mayor compresión o más ahorro de CPU.

¿Qué papel debe desempeñar EWWW en la Ruta A?

Si utilizas Plus WebP como “estrategia de migración/sustitución de formatos”, entonces EWWW es más adecuado:

• Compresión y optimización del volumen(especialmente la reducción de peso de recursos en bruto como JPG/PNG)
• Optimización por lotes de la mediateca histórica(centrarse en la “reducción de volumen” más que en la “sustitución de URL”)

Fosa típica de EWWW

1. Elevada carga del servidor durante la optimización por lotes
   Dado que la compresión local se come CPU/IO, la solución no es “no usarla”, sino “por lotes, pico bajo, opción de descarga/nube si es necesario”.
2. “Se genera un WebP” no significa que el frontend deba estar produciendo un WebP.
   Muchos plugins adolecen de este malentendido: una cosa es la generación y otra las estrategias de entrega (reescrituras, etiquetas de imagen, visitas a la caché, etc.).
3. Hacer lo mismo una y otra vez con otros plugins
   Si eliges la ruta A, intenta no superponer compresión en la nube del tipo ShortPixel/Imagify/TinyPNG; si eliges la ruta B, no actives la lógica de sustitución Plus WebP. Principio básico:Una ruta hasta el final.

---

3.2 Ruta B: Triple opción de compresión en la nube (ShortPixel / Imagify / TinyPNG)

Esta ruta es adecuada para las personas que “quieren ahorrar recursos del servidor, quieren hacer lotes con menos esfuerzo y aceptan la facturación por crédito/por volumen”.
Pero lo más engañoso es la compresión en la nube:Los créditos gratuitos no son tan sencillos como las “hojas gratuitas”... El número de tamaños de las miniaturas, si se genera o no WebP/AVIF y si se vuelve a comprimir repetidamente pueden afectar significativamente al consumo.

A continuación se explicará: qué ocurre con la gratuidad/tarifa, cómo se deducen los créditos, qué escollos es más probable que se pisen y qué tipos de sitios son apropiados.

---

3.2.1 ShortPixel100 créditos gratuitos/mes, pero los créditos se consumen con las miniaturas y las ampliaciones WebP/AVIF.

¿Qué pasa con la gratuidad/pago?

La descripción del plugin ShortPixel lo indica claramente:

• 100 créditos gratuitos al mes
• También hay “Créditos mensuales adicionales ilimitados” (la página del plugin ofrece información sobre los precios correspondientes)
• También disponibles como “paquetes de créditos únicos que nunca caducan” (con información sobre el precio de salida)

Consejo:

• Gratuito: da una cierta cantidad de créditos al mes para sitios ligeros o pruebas
• Packs desechables: adecuados para sitios con grandes bibliotecas multimedia que quieren vaciar sus existencias de una vez (se compra una vez y se consume, normalmente no caduca).
• Mensual/ilimitado: adecuado para sitios con imágenes actualizadas continuamente y optimización estable a largo plazo.

La KB oficial de ShortPixel también ha ofrecido una actualización sobre “One Time Pack vs Unlimited Monthly”.explicación explícita: Unlimited Monthly es un pago mensual (o anual) que ofrece créditos ilimitados con una asignación fija de CDN; créditos únicos que no caducan, lo que le da más control para utilizarlos según sus necesidades.

En resumen: ¿cómo se calculan los créditos ShortPixel?

Documentación oficial de ShortPixel KB fue muy directo:

• WordPress genera varias miniaturas cuando subes una imagen;
• Cada optimización de una miniatura cuenta como un crédito；
• Si opta por generar un WebP o AVIF, la opciónCada versión WebP/AVIF de la imagen original y de la miniatura consume un crédito adicional.；
• Puedes excluir determinadas miniaturas de la optimización para reducir el consumo de créditos.

Créditos Ejemplo：

Digamos que subes 1 imagen y el tema/plugin genera 8 miniaturas:

• Optimizar sólo la imagen original + miniaturas: 1 (original) + 8 (miniaturas) = 9 créditos
• Si además quieres generar WebP/AVIF: una versión next-gen más por cada una de las 9 anteriores → +9 créditos.
  En otras palabras, lo que usted cree que es “1 foto” puede consumir en realidad cerca de “2 créditos”.

Así que..:“100 créditos gratis” no es lo mismo que “100 imágenes gratis”.

Los escollos más comunes de ShortPixel

1. Los 100 créditos gratuitos se acaban rápido
   Causa: muchas miniaturas + créditos adicionales para generar WebP/AVIF.
   sugerencia：

• Evalúe primero el número de miniaturas del sitio
• Excluya los tamaños de miniaturas innecesarios (optimice sólo los tamaños que se utilizarán realmente).
• Determinar la estrategia de compresión antes de ejecutar en masa para evitar el consumo repetido de ensayo y error.

2. Apilar otros plug-ins conversores al mismo tiempo
   Si tiene sustituciones Plus WebP y ShortPixel generando/insertando etiquetas de nueva generación, la lógica se apila y se hace más difícil de solucionar. Para la ruta B, deja que ShortPixel lo haga solo.
3. Pensé que si lo instalaba, sería “WebP/AVIF en primer plano”.”
   Página del plugin ShortPixelMenciona que convierte WebP/AVIF y puede añadir imágenes de nueva generación a la portada (por ejemplo, mediante etiquetado).
   Pero sigue siendo importante verificar los resultados después de hacerlo.

---

3.2.2 ImagifyGratuito: 20MB/mes; la cuota se deduce en función del “tamaño original de la imagen + número de miniaturas”, se harán deducciones repetidas por reimpresión.

Cantidad libre y posicionamiento

Página oficial de precios de ImagifyLa escritura es clara:Cuenta gratuita Cuota mensual 20MB。
Su página de plugins también deja claro que puede comprimir, redimensionar y convertir WebP/AVIF.

¿Cómo se deduce la cuota?

Documentación oficial de Imagify “¿Cómo se calcula el uso de las cuotas?” desglosa muy claramente el mecanismo de deducción:

• El número de miniaturas afecta al consumoPor ejemplo, si tiene 10 tamaños de miniaturas, optimizar 1 imagen se convierte en optimizar 11 imágenes (original + 10 miniaturas), que contribuyen al consumo de cuota.
• Deducción de la cuota en función del tamaño del documento originalPor ejemplo, si envía una imagen de 100 KB a Imagify, se descontarán 100 KB de la cuota.
• Cambiar el nivel de compresión y volver a optimizar consumirá cuota de nuevo。
• La misma clave API puede utilizarse para varios sitios, pero las cuotas se comparten entre ellos.

Esta es la “forma central de entender” de Imagify:
Se parece más a un paquete de tráfico: descuenta tanto como envíes; cuantas más miniaturas tengas, más descuenta; y repetirás el descuento si lo vuelves a pulsar repetidamente.

Ejemplo de cuota Imagify fácil de leer

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

• Imagify optimiza para incluir la “imagen original + 8 miniaturas” (si eliges optimizarlas todas), lo que significa que esta única acción consume una cuota cercana al “tamaño original de todos estos archivos combinados”.
  Por eso algunos sitios sienten que “20MB se agota rápido”: no es que Imagify no sea suficiente, es que estás subiendo demasiadas imágenes a la vez, demasiadas miniaturas, y probablemente estás probando los niveles de compresión una y otra vez.

Los escollos más comunes de Imagify

1. Gratis 20MB No es suficiente para hacer un “inventario completo del historial del sitio”
   20MB suele ser más adecuado para realizar pruebas con actualizaciones ligeras; si su biblioteca multimedia ya es grande, es probable que una purga única requiera una actualización.
2. El ajuste repetido de los niveles de compresión provoca la duplicación del consumo de cuotas
   Imagify deja claro queLa reoptimización volverá a consumir la cuota.
   Le sugiero que deje clara la “estrategia” en esta página:

• Comience con un pequeño número de imágenes para determinar el nivel de compresión y el aspecto.
• Determine la estrategia y ejecútela en bloque
  Evitar la repetición de pruebas y errores en la biblioteca completa

3. Varios sitios que comparten la clave API provocan una “reducción inexplicable de la cuota”.”
   Si utiliza la misma Clave API para más de una estación, la cuota se comparte.
   Por eso, en los escenarios de equipos/múltiples estaciones, es mejor tener claro: qué estaciones se comparten y cuáles se utilizan individualmente para evitar presupuestos incontrolables.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 créditos/mes gratis; el cambio a WebP/AVIF “descontará 1 crédito por tamaño”.”

Créditos gratuitos y sus ideas de facturación

La página del plugin para WordPress de TinyPNG es muy clara:

• 500 créditos al mes gratis
• En la “Instalación general de WordPress”, probablemente pueda comprimir el Aprox. 100 imágenes/mes
• Sin embargo, si la conversión AVIF o WebP está activada:Cada tamaño de imagen consume un crédito adicionalAsí que presumiblemente sólo se puede comprimir y convertir Aprox. 50 imágenes/mes(dependiendo de cuántos tamaños de miniaturas tenga).

Mientras tanto, Tinify (los desarrolladores de TinyPNG/TinyJPG) también han hecho su Página de precios de la APIDescripción: Regístrese y obtenga 500 compresiones gratuitas al mes; después, se le facturará en función del número de compresiones realizadas con éxito, sin suscripción obligatoria.

Resuma en una frase cómo se entiende TinyPNG:
Cuenta los créditos; cuantos más tamaños de miniaturas tengas y más WebP/AVIF tengas activados, más rápido se consumirán los créditos.

Ejemplos fáciles de leer de créditos TinyPNG

Suponga que su sitio genera 8 tamaños de miniaturas para cada imagen:

• Solo compresión: original + 8 miniaturas → 9 créditos necesarios
• Si la conversión WebP/AVIF está activada: un crédito extra por tamaño → ¡probablemente casi el doble!
  Esto se corresponde con la descripción en la página del plugin: después de activarlo, la cantidad gratuita cambia de aproximadamente “100 tarjetas/mes” a “50 tarjetas/mes”.

Las trampas más comunes de TinyPNG

1. 500 créditos = 500 imágenes
   No lo es. Se consume por “tamaño de imagen/variante”. La página del plugin advierte claramente de que “Las conversiones deducen 1 crédito adicional por cada tamaño de imagen”.
2. Los temas/plugins de comercio electrónico están generando demasiados tamaños y los créditos gratuitos están disminuyendo considerablemente
   Cuantos más tamaños haya, más fácil será ampliar y consumir los créditos.
3. Después de activar la conversión, te encuentras con que los créditos de repente no se utilizan.
   No es un error, es su mecanismo de facturación.
   Consejos estratégicos:

• Si la fase gratuita se utiliza principalmente para la compresión y la reducción de peso, puede comenzar sólo con la compresión y, a continuación, activar la conversión cuando esté seguro de que la estructura de su sitio es estable y que realmente necesita next-gen.

4. Recomendación de subescenarios: cómo elegir distintos tipos de emplazamientos

Además, WordPress, los sitios de contenido, los sitios de comercio electrónico, las carteras y los sitios de afiliación no tienen los mismos “puntos de presión” para las imágenes.

4.1 Sitios de contenido/blogs (muchos artículos gráficos, frecuencia media de actualizaciones)

Recomendaciones prioritarias:

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

Una ruta más adecuada:

• Guarda: Ruta B Triple Elección (ShortPixel / Imagify / TinyPNG)
• Si quieres ir por libre: Ruta A (Más WebP + EWWW), pero se recomienda empezar con el “modo conservador (sin borrar la imagen original)” para evaluar el riesgo.

Típica fosa:

• La primera imagen de la página del artículo es muy grande, estrategia impropia de lazy loadingRalentiza la primera pantalla

4.2 Comercio electrónico/sitio web de productos (muchas miniaturas, muchas variantes de imagen, estabilidad ante todo)

Comercio electrónico es más probable que el problema no es “efecto de compresión no es bueno”, pero “optimizado algunos de los tamaño no es correcto, falta miniaturas, los componentes delanteros no pueden obtener la imagen”.

Recomendaciones prioritarias:

1. Estabilidad ante todo: estrategia de compresión conservadora, no hacer una sustitución completa de la biblioteca de inmediato.
2. Evaluar los tamaños de las miniaturas: los temas de comercio electrónico suelen generar más tamaños, y el consumo de cantidad se magnifica (ShortPixel/TinyPNG se nota especialmente).
3. Validación a pequeña escala antes del lote (muy importante)

Una ruta más adecuada:

• La ruta B suele ser más sencilla: ShortPixel/Imagify/TinyPNG pueden trabajar por lotes, y es fundamental que conozcas el mecanismo de cuotas y evalúes el coste por adelantado.
• La ruta A está bien, pero ten más cuidado con el comportamiento “sobrescribir IDs/borrar imágenes originales/reemplazar URLs” de Plus WebP: es una migración de activos, y no se recomienda reemplazar todo de buenas a primeras.

4.3 Portafolio/estación fotográfica (calidad de imagen única sensible, imágenes de gran tamaño, grandes exigencias de visualización)

Recomendaciones prioritarias:

1. Estrategia de tamaño (control del área de visualización)
2. Estrategia de compresión (mejor ser más grande que aplastar los detalles)
3. WebP/AVIF (las ganancias de escena de gran tamaño son evidentes, pero verifica la vista)

Una ruta más adecuada:

• Imagify: Deducir la cuota en función del “tamaño de la foto original”, este tipo de sitio es más fácil de hacer “presupuesto-controlable” (usted sabe cuánto deducir por cada foto grande), pero evitar repetidas represiones.
• ShortPixel: Si el tamaño de la miniatura no es mucho, los créditos también son muy intuitivos; pero si generas muchos tamaños +next-gen, el consumo de créditos se magnificará, y tendrás que planificarlo con antelación.

5. Comparación cuota/facturación: relativizar el “gratis no basta”.

¿Cuál es la mejor oferta y cuánto durará la gratuidad?

5.1 Tres modelos de contracargo

• ShortPixel(créditos)Créditos basados en “imagen original + número de miniaturas”; se deducirán créditos adicionales por cada versión correspondiente de WebP/AVIF generada.
• Imagify(cuota MB)Deduce la cuota según el “tamaño original del archivo”; cuantas más miniaturas, más deducciones; volver a comprimir deducirá de nuevo.
• TinyPNG(créditos)500 créditos al mes; activar la conversión WebP/AVIF resta créditos adicionales por cada tamaño de imagen.

5.2 Métodos de estimación rápida

Puedes calcularlo así:

1. Busque una “imagen original que suba a menudo” al azar y compruebe su tamaño (por ejemplo, 300 KB / 1MB / 3MB).
2. En función del número de miniaturas que genere su sitio (por ejemplo, 5 / 10 / 20)
3. Decida si desea generar WebP/AVIF (sí/no)

A continuación, utilice la siguiente “matemática mental” para comprender el consumo:

• ShortPixel: ≈ (1 + número de miniaturas) créditos por imagen; si se genera WebP/AVIF, ≈ se duplica de nuevo (ya que la versión next-gen también toma créditos).
• ImagifyCada imagen ≈ (tamaño original + tamaño de cada miniatura) deduce cuota; ¡cambiar el nivel de compresión y volver a comprimir deducirá de nuevo!
• TinyPNG500 créditos gratuitos; si su sitio genera muchos tamaños por imagen, y la conversión está activada, el número de créditos gratuitos disminuye considerablemente (la página del plugin da una expectativa visual de “~100 créditos/mes” frente a “~50 créditos/mes”).

6. Alertas de riesgo

Riesgo 1: No permita que varios plugins hagan lo mismo una y otra vez

Es la “fuente de desastres” más común.”

• Ruta A:Más WebP o AVIF + EWWW(Divida el trabajo entre los dos, no haga conversiones y entregas similares al mismo tiempo, o instale sólo uno de ellos).
• Ruta B: ShortPixel / Imagify / TinyPNG elige tres(elija uno para comprimir con next-gen)

Riesgo 2: Además “Sobrescribir ID / Eliminar imagen original / Sustituir URL” de WebP es una migración de activos.

Énfasis añadido:Más WebP La descripción indica claramente que la generación completa sobrescribe el ID de la imagen original, borra el archivo original y sustituye la URL del contenido.
Esto significa que no se trata de un “pequeño ajuste que puede retirarse en cualquier momento”, sino de un cambio a nivel patrimonial.

La estrategia sugerida debería ser:

• Pequeñas pruebas primero (de unas docenas a unos cientos)
• Confirme que la visualización del frontend, las miniaturas y las actualizaciones de la caché funcionan correctamente.
• Reconsiderar el tratamiento completo de la biblioteca

Riesgo 3: El consumo real de “créditos gratuitos” de compresión en la nube depende del número de miniaturas y de la selección next-gen.

• ShortPixel: Las miniaturas y la nueva generación afectan significativamente a los créditos.
• TinyPNG: Al activar WebP/AVIF se descuenta un crédito adicional por cada tamaño de imagen.
• ImagifyDeducción: se deduce según el tamaño de la imagen original, cuantas más miniaturas se deduzcan más, ¡una fuerte presión repetirá la deducción!

Riesgo 4: “WebP/AVIF generado” no significa “WebP/AVIF está siendo entregado por el front office”

Mucha gente siente que “no es más rápido” después de la conversión porque el frontend sigue emitiendo JPG/PNG (la caché/reescritura/etiquetado/negociación del navegador no están en el lugar correcto).

7. Cómo comprobar que ha surtido efecto después de haberlo hecho

4 puntos de validación muy sencillos:

1. Si la misma página se actualiza por segunda vez y se carga de forma más constante y rápida.(Almacenamiento en caché y optimización del sentido físico de si funciona)
2. ¿Son muy diferentes los tamaños de las imágenes que se cargan en los teléfonos móviles y en los ordenadores de sobremesa?(receptivo) srcset/tamaños (funcionen o no)
3. Comprobación puntual de algunas imágenes: si hay archivos/recursos WebP o AVIF.(¿El sitio utiliza realmente próxima generación）
4. Muestra algunas imágenes: amplíalas para ver si están visiblemente turbias, si el texto está borroso(la masa comprimida no es excesiva)

Si los cuatro coinciden, la ruta elegida se ha ejecutado. A continuación. CDN “Capa de entrega”el conjunto será más estable.

8. Recomendaciones de actuación

1. Elige primero tu ruta:

• Intentando ser lo más libre posible.: Más WebP o AVIF + EWWW (o sólo uno de ellos)
• Quiere ahorrar recursos del servidor, pague por crédito para mayor tranquilidadShortPixel / Imagify / TinyPNG: ¡elija uno!

2. Haga primero una pequeña prueba (unas docenas)
3. Asegúrate de que está bien antes de meterlo en el lote
4. Es necesario seguir mejorando la estabilidad del suministro:leer CDN Aceleración

problemas comunes

1. ¿Cuántos plug-ins tengo que instalar? ¿Puedo instalarlos todos?

Intenta tomar una sola ruta.

• Ruta A: Más WebP o AVIF + Optimizador de imagen EWWW (o sólo uno de ellos)
• Ruta B: ShortPixel / Imagify / TinyPNG - ¡elige uno!
  En la misma estación al mismo tiempo dejar que más de un plug-in para hacer “compresión / transferencia WebP / AVIF / cambiar URL / reescritura de entrega”, lo más probable para conseguir más y más caótico, pero también el más difícil de comprobar.

2. ¿No admite ya WordPress WebP/AVIF? ¿Sigo necesitando un plugin?

Hay que separarlo:
“Soporte para carga/uso” ≠ “Conversión automática/entrega automática”.
WordPress 6.5 tampoco convierte automáticamente por lotes los antiguos JPG/PNG a WebP/AVIF, ni tampoco hace automáticamente por ti lo de “exportar AVIF/WebP para que sea compatible con navegadores y con fallback”. Por lo general, se necesita un plugin o servicio para compensar eso, y es una buena idea conseguir que las bibliotecas de medios históricos sigan el ejemplo.

3. ¿Cuál es el paso más “gratificante” en la optimización de imágenes?

Suele ser Primero hay que corregir los “tamaños” (srcset/sizes).。
Muchos sitios son lentos no porque no tengan compresión, sino porque la página sólo tiene 900px y se pide al usuario que descargue una imagen de 3000px. La compresión ahorra KB, pero el “tamaño incorrecto” le hará descargar varias veces más datos para nada.

4. ¿Cómo puedo estar seguro de que estoy cargando la “más pequeña” y no la imagen original para siempre?

Fíjate en dos fenómenos:

• Al abrir una página en un teléfono móvil, el tamaño de la imagen descargada es notablemente menor que en el ordenador de sobremesa.
• La misma imagen se carga con distintos tamaños de recursos en diferentes dispositivos
  Si la imagen original se descarga para siempre, una razón común es que el tema/constructor trata la imagen como una imagen de fondo CSS o salida personalizada, saltándose el multitamaño de la librería de medios con srcset.

5. ¿Significa “WebP/AVIF generado” que el frontend debe producir WebP/AVIF?

No son iguales.
La generación es sólo la “capa de archivos” hecha; que el frontend entregue realmente WebP/AVIF depende de las reescrituras, las políticas de etiquetado de imágenes, las visitas a la caché, la negociación del navegador en vigor, etc. Cuando hayas terminado, asegúrate de “comprobar al azar algunas imágenes para ver si tienen tipos de recursos”.

6. Además ¿Qué tienen de peligroso WebP o AVIF? ¿Puedo ejecutar toda la biblioteca con un solo clic?

Su punto de riesgo no es la “compresión”, esCambios en los niveles de migración de activos：

• La generación completa puede sobrescribir el ID del archivo de imagen original, eliminar el archivo original y sustituir la URL en el contenido.
  por quéNo se recomienda sustituir toda la biblioteca de buenas a primeras.Prueba primero a pequeña escala (decenas ~ centenares) + disponer de copias de seguridad, después considerar el procesamiento de la biblioteca completa.

7. ¿Cuál es la elección entre los dos modos de Plus WebP: conservar la imagen original frente a sustituir y eliminar la imagen original?

Fácil de entender:

• Modo 1: Conservar imagen original + generar copia WebP/AVIF (más estable): Conveniente para rollbacks, pero el disco sube (imagen original + nuevo formato + miniaturas de varios tamaños).
• Modo 2: Reemplazar y borrar la imagen original (más agresivo)Los discos son menos propensos a hincharse, pero “cambias activos + cambias referencias”, lo que encarece la resolución de problemas de compatibilidad.
  Cuanto más complejo sea el sitio (comercio electrónico/multiplugin/multitamaño), más recomendable es empezar con un modelo más estable.

8. ¿Es suficiente la compresión local gratuita de EWWW Image Optimizer? ¿Sobrecargará el servidor?

EWWW es más bien un “compresor local”: come CPU/IO.
Es habitual que la carga aumente durante la optimización por lotes, lo que no significa que “no funcione”, sino que la estrategia debe ser la adecuada: lotes, picos bajos y opciones de descarga/nube si es necesario.
Si lo que buscas es ahorrar, o si tienes pocos recursos de servidor, la ruta B es más adecuada para el servidor.

9. Los 100 créditos gratuitos/mes de ShortPixel, ¿por qué tengo la sensación de que se han agotado en unas pocas fotos?

debido a créditos no es “número de fotos”.”La próxima generación se ampliará con una miniatura:

• Imagen original + cada miniatura cuenta como crédito
• Si se genera un WebP/AVIF, se consume un crédito adicional por cada versión correspondiente.
  Así que lo que crees que es “1 imagen” puede consumir en realidad cerca de “2 dígitos de créditos”. shortPixel

10. Los 20MB/mes gratuitos de Imagify, ¿por qué también se acaban rápido?

Imagify es más bien un “paquete de tráfico”:

• Como lo enviaste.Tamaño del archivo originaldeducción de cuotas
• Cuantas más miniaturas tenga, más consumirá
• Cambiar el nivel de compresión para volver a optimizar consumirá cuota de nuevo
• Misma clave API para varios sitios, cuota compartida
  Por eso, “20MB se agotará pronto” suele deberse a imágenes demasiado grandes, demasiadas miniaturas o repetidas pruebas de ensayo y error.

11. TinyPNG es gratuito para 500 créditos/mes, ¿por qué el plugin dice que sólo son unos 100 créditos/mes y luego 50 créditos/mes con WebP/AVIF?

Porque los créditos TinyPNG también se amplían por “size/variant”:

• Una instalación normal de WordPress probablemente comprime unas 100 hojas al mes.
• Activa la conversión AVIF o WebP:Cada tamaño de imagen consume un crédito adicionalAsí que probablemente sólo puedas comprimir y convertir unas 50 imágenes/mes (dependiendo del número de tamaños de las miniaturas).
  Así que 500 créditos ≠ 500 imágenes.

12. ¿Cuántas miniaturas hay en mi sitio? ¿Por qué es tan importante?

WordPress genera múltiples tamaños para subir una imagen; los temas/plugins (especialmente los de comercio electrónico) pueden añadir más tamaños.
Los créditos/cuotas de compresión en la nube suelen ser “original + miniaturas juntas”, por lo que cuantas más miniaturas tengas, menos créditos gratuitos podrás utilizar.

13. ¿Es siempre más rápido el lazy loading? 14. ¿Por qué hay gente que dice que el lazy loading ralentiza las cosas?

La carga perezosa es adecuada para los “recursos fuera de pantalla”.
Si la primera pantalla de la imagen más crítica de gran tamaño también se retrasa la carga, puede ralentizar la experiencia de la primera pantalla. WordPress 5.5 desde la carga por defecto perezoso está muy bien, pero no “una talla para todos”.

14. Viajo por la ruta A o B. ¿Cuándo necesito CDN / Picture CDN?

La compresión, el tamaño y el formato resuelven el problema de los “archivos más pequeños que caben”;
CDN La solución es ofrecer una mayor proximidad y estabilidad。
Cuando las imágenes se extraen desde una distancia del sitio de origen que resulta en una latencia significativa, a continuación, complementar CDN / imágenes con CDN (por ejemplo, Cloudflare polaco / Jetpack Site Accelerator) será en general más estable, leer WordPress CDN Aceleración。

15. ¿Cuál es la forma más fácil de comprobar que “realmente funciona” cuando haya terminado?

El método de verificación más eficaz en términos de tiempo:

• Si la misma página se actualiza por segunda vez y se carga de forma más constante y rápida.
• ¿Son los tamaños de las imágenes cargadas en teléfonos móviles y ordenadores de sobremesa notablemente diferentes (entra en juego srcset/tamaños)?
• Comprobación puntual de algunas imágenes: si hay archivos/recursos WebP o AVIF.
• Muestra algunas imágenes: amplíalas para ver si están visiblemente turbias, si el texto está borroso