Optimización de imágenes en sitios web

La optimización de imágenes es uno de los aspectos que más beneficios aporta al rendimiento de WordPress: con la misma estructura de página y el mismo tema, el simple hecho de ajustar correctamente el tamaño del archivo de imagen, las dimensiones, el formato y el método de entrega suele traducirse en una mejora inmediata de los tiempos de carga.

Sin embargo, la optimización de imágenes es también el ámbito en el que es más fácil acabar haciendo un desastre; la razón no es que la tecnología sea demasiado complicada, sino más bien que la información está demasiado dispersa:
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:¿Funcionó realmente una vez que terminaste?

Este artículo hace solo tres cosas:

1. Aquí tienes un consejo prácticoHoja de ruta(Qué hacer primero, qué hacer después)
2. Explique con detalle las opciones que está barajando (qué diferencia exactamente a la versión gratuita de la de pago y para quién es más adecuada cada una).
3. A continuación te presentamos los errores más comunes, enumerados de antemano (para que no tengas que perder tiempo buscándolos y solucionándolos una vez que hayas terminado)

1. Lo básico: lo que incluye WordPress y lo que no

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

• En lugar de aprovechar las “funcionalidades gratuitas” que tenemos a nuestra disposición, hemos malgastado tiempo y dinero reinventando la rueda
• Pensé 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 incluye estas funciones clave:

• Imágenes adaptativas (srcset/sizes): A partir de WordPress 4.4, el núcleo generará imágenes srcset y sizes... y utiliza las imágenes de distintos tamaños generadas durante la subida para permitir que el navegador seleccione los recursos más adecuados para cargar en función de las condiciones de la pantalla.
• Carga diferida nativa: A partir de WordPress 5.5, la carga diferida nativa está habilitada de forma predeterminada para las imágenes, de acuerdo con los estándares HTML loading Implementación de propiedades.
• Admite la subida de archivos WebP: A partir de WordPress 5.8, puedes subir y utilizar archivos WebP de la misma manera que los archivos JPEG y PNG (siempre y cuando tu entorno de alojamiento sea compatible con WebP).
• Admite la subida de archivos AVIF: A partir de WordPress 6.5, los archivos AVIF se pueden subir y utilizar de la misma manera que los archivos JPEG y PNG (siempre que el entorno del servidor lo admita).

Sin embargo, tenga en cuenta lo siguiente:
“Compatibilidad con la carga y el uso” ≠ “conversión automática/entrega automática”.
En otras palabras: aunque ya tengas WordPress 6.5, los archivos JPG/PNG de tu biblioteca multimedia no se convertirán automáticamente a WebP/AVIF; tampoco dispondrás automáticamente de todas las funciones para “mostrar AVIF/WebP según las capacidades del navegador y recurrir a la imagen original en los navegadores que no lo admitan”; para esto, por lo general, se necesita un complemento o un servicio que cubra esa necesidad.

2. Guía práctica: Una guía de 5 pasos para la optimización de imágenes

Qué hacer, por qué, qué se considera una aprobación y cuáles son los errores más comunes.

2.1 Empieza por acertar con las “dimensiones” (lo más fácil de pasar por alto, pero lo que reporta mayores beneficios)

Muchos sitios web son lentos no porque no se hayan optimizado, sino porqueSe ha descargado una imagen mucho más grande que el área de visualización：
Por ejemplo, si una página tiene en realidad solo 900 píxeles de ancho, pero haces que los visitantes descarguen la imagen original de 3000 píxeles, el navegador simplemente “la descargará y luego la reducirá para mostrarla”. Esto desperdicia ancho de banda, aumenta el tiempo de decodificación y retrasa el tiempo que tarda en cargarse la primera pantalla.

Para WordPress 4.4 y versiones posterioresMecanismo de imágenes adaptativas（srcset/sizes) se diseñó precisamente para abordar esta cuestión.

Qué se considera aprobado:

• Cuando se visualiza la página en un dispositivo móvil, las imágenes descargadas deben ser notablemente más pequeñas que en una computadora de escritorio
• El tamaño del archivo de una misma imagen varía según el dispositivo (en lugar de descargar siempre la imagen original)

Los errores más comunes:

• Algunos temas o constructores tratan las imágenes como imágenes de fondo CSS o las representan de una forma personalizada, lo que puede hacer que se omita srcset, lo que hace que la imagen grande siga cargándose
• Si utilizas servicios externos de alojamiento de imágenes o bloques de imágenes de terceros, es posible que puedas evitar el sistema de tamaños múltiples generado por la biblioteca multimedia.

---

2.2 Compresión (reducción del tamaño del archivo sin perder calidad)

La esencia de la compresión no es que “cuanto más pequeño, mejor”, sino más bien que “la diferencia apenas se nota a simple vista, pero el tamaño del archivo se reduce considerablemente”.

Las reglas son las siguientes:

• Fotografías/Imágenes de la vida real (retratos, productos, paisajes): Dar prioridad a la compresión con pérdida (máximo beneficio)
• Capturas de pantalla o imágenes que contienen mucho texto: Aplica una compresión más moderada para evitar que el texto se vea borroso
• Logotipo/Icono: Da prioridad al formato SVG o utiliza la compresión sin pérdida con precaución (la compresión con pérdida puede provocar fácilmente bordes borrosos)

Qué se considera aprobado:

• El tamaño de los archivos de la mayoría de las imágenes de las páginas se ha reducido considerablemente
• Sin ruido apreciable, bordes borrosos, bandas de color ni texto borroso

---

2.3 WebP / AVIF (Política de formatos: archivos más pequeños con el mismo nivel de nitidez)

WordPress ahora admite la subida de archivos WebP (5,8) y AVIF (6,5)。
Sin embargo, para poner en práctica el “formato de última generación”, normalmente hay que resolver dos cuestiones:

1. Cómo convertir por lotes la biblioteca multimedia histórica(De lo contrario, solo optimizarás las “imágenes nuevas que se suban en el futuro”)
2. ¿Debería crear una copia o reemplazar la imagen original?(Este es un punto clave; más adelante nos centraremos en la función “Reemplazar y eliminar el original” de Plus WebP.)

Enfoque recomendado:

• WebP: suele ser la opción predeterminada (ofrece una compatibilidad más fiable)
• AVIF: Un paso más en la compresión, adecuado para imágenes grandes, imágenes grandes en la primera pantalla e imágenes de galería (pero másque depende del apoyo del entorno）

---

2.4 Utiliza correctamente la carga diferida (evita un enfoque único para todos los casos)

A partir de WordPress 5.5Carga diferida predeterminadaImagen.
Reduce el uso de ancho de banda durante la renderización inicial:

• La carga diferida es adecuada para los “recursos fuera de pantalla”
• La imagen grande que aparece en la parte superior de la página (que suele ser la imagen más importante de la primera pantalla) no suele ser adecuada para la carga diferida

---

2.5 Capa de entrega: CDN / Imagen CDN

La compresión, el tamaño y el formato de los archivos permiten reducir su tamaño y hacerlos más adecuados;
Sin embargo, si las imágenes se descargan constantemente desde un servidor de origen remoto, 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 CloudflareEn esta sección se presentan los métodos de compresión disponibles en polaco (sin pérdida, con pérdida y WebP), y se menciona el uso de format=auto Se admiten los formatos WebP y AVIF.
• Jetpack Site Accelerator：Documentación de JetpackEsto significa que optimizará las imágenes y las distribuirá a través de su red junto con los recursos estáticos.

La optimización de imágenes garantiza que estas se reduzcan de tamaño y se redimensionen adecuadamente,CDN: Entregas más cercanas y fiables

3. Elección de la ruta: Siga únicamente las dos rutas principales

El error más común en la optimización de imágenes no es “no instalar un complemento”, sino instalar demasiados complementos, lo que provoca un procesamiento duplicado:
A está comprimiendo, B también; A está convirtiendo a WebP/AVIF, B hace lo mismo; A está cambiando las URL, B está reescribiendo las URL... Al final, ni siquiera tú logras entender qué está pasando realmente con el sitio.

Reglas:

Opta por una sola opción: o bien almacenamiento local totalmente gratuito, o bien una de las tres opciones de compresión en la nube.

• Ruta A (totalmente gratuita y de ámbito local):Además de WebP o AVIF + EWWW Image Optimizer(o elige solo uno)
• Opción B (Elija uno de los tres métodos de compresión en la nube):ShortPixel / Imagify / TinyPNG

---

3.1 Opción A: Alojamiento local totalmente gratuito (más WebP, AVIF o EWWW)

Las características principales de esta ruta son:

• No depende de servicios de compresión de terceros que cobran por cuota mensual o por archivo (aunque algunas funciones pueden estar disponibles como 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 de WebP o AVIF: El concepto fundamental es “generación/sustitución”; no se trata de una “herramienta de compresión” en el sentido tradicional”

• Al generar el conjunto completo de imágenes:El ID del archivo de imagen original será sobrescrito por el archivo WebP/AVIF, el archivo original se eliminará y cualquier URL que aparezca en el contenido también será sustituida。
• El complemento ofrece comandos de WP-CLI y señala que WP-CLI es más confiable cuando se trabaja con un gran número de archivos.

Esto significa que no se limita a “generar un archivo WebP en segundo plano”, sino que puede ser unTransferencia de activos(especialmente si has activado la opción “Reemplazar y eliminar el original”).

La diferencia entre los dos modos

Opción 1: Conservar la imagen original + generar copias en formato WebP/AVIF (más fiable)

• Ventaja: es más fácil revertir los cambios si surgen problemas de compatibilidad
• Inconveniente: el uso de disco aumentará (imagen original + nuevo formato + varios tamaños de miniaturas)

Método 2: Reemplazar y eliminar la imagen original (opción más drástica)

• Ventajas: El disco no se llenará tan rápido; los enlaces internos se convierten automáticamente al nuevo formato
• Riesgo: Si modificas tanto los recursos como sus referencias, resolver los problemas de compatibilidad resultará más costoso (especialmente si algunos sistemas externos o la lógica del tema dependen de los nombres de archivo, las rutas o los formatos originales).

Errores comunes con WebP o AVIF

1. Después de realizar una sustitución completa de la biblioteca, las imágenes de algunas páginas no se muestran correctamente
   Por lo general, el problema no es que “la imagen no se vea”, sino que ha surgido un error en algún punto de la cadena, como un cambio en la URL, el almacenamiento en caché o la política de miniaturas.
2. Cuantas más miniaturas haya, mayor será el alcance de los cambios
   Al subir una imagen a WordPress se generan varios tamaños; los temas y los plugins pueden añadir aún más. Una sustitución completa implica que es posible que tengas que modificar un gran número de archivos.
3. El simple hecho de realizar una conversión de formato no garantiza necesariamente que el tamaño del archivo sea el más pequeño
   Los archivos WebP y AVIF suelen ser más pequeños, pero las “estrategias de dimensionamiento” y las “estrategias de compresión” siguen siendo fundamentales. No consideres Plus WebP como una “solución mágica” para acelerar los tiempos de carga.

---

3.1.2 EWWW Image Optimizer: Un proveedor líder de compresión local gratuita

La página del complemento EWWW tiene un objetivo muy claro:

• Puede optimizar las imágenes de tu servidor mediante diversas herramientas (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 utilizas Plus WebP como “estrategia de migración o sustitución de formatos”, EWWW es más adecuado para gestionar:

• Compresión y optimización del volumen(en particular, la optimización de archivos sin procesar, como los archivos JPG y PNG)
• Optimización por lotes de la biblioteca multimedia histórica(El objetivo es una “reducción del volumen” en lugar de una “sustitución de URL”)

Un error habitual con 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 en “procesar por lotes, durante las horas de menor actividad, y optar por soluciones de descarga o en la nube cuando sea necesario”.
2. “Se ha generado WebP” no significa necesariamente que el front-end esté realmente sirviendo WebP
   Muchos plugins parten de la idea errónea de que la generación es una cosa, mientras que las estrategias de entrega (como la reescritura, las etiquetas `picture` y la caducidad de la caché) son otra muy distinta.
3. Duplica la funcionalidad de otro complemento
   Si eliges la opción A, intenta evitar el uso de herramientas adicionales de compresión en la nube, como ShortPixel, Imagify o TinyPNG; si eliges la opción B, no actives la lógica de sustitución en Plus WebP. El principio fundamental es:Sigue un solo plan de acción.

---

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

Este plan es ideal para quienes desean ahorrar recursos del servidor, prefieren un enfoque sencillo para el procesamiento por lotes y se sienten cómodos con la facturación basada en el uso o de pago por uso.
Sin embargo, el malentendido más común en relación con la compresión en la nube es:La asignación gratuita no se reduce simplemente a unas “hojas gratis”El número de tamaños de miniaturas, si se generan formatos WebP/AVIF y si las imágenes se comprimen repetidamente tendrán un impacto significativo en el uso de recursos.

A continuación, te explicaremos: la diferencia entre las opciones gratuitas y las de pago, cómo se deduce el crédito, los errores más comunes que debes evitar y qué tipos de sitios web son los más adecuados para este servicio.

---

3.2.1 ShortPixel: 100 créditos gratuitos al mes, pero los créditos se consumirán al generar miniaturas y ampliaciones en formato WebP/AVIF

¿En qué consisten las opciones gratuitas y las de pago?

La descripción del plugin ShortPixel indica claramente:

• 100 créditos gratis al mes
• También hay “créditos mensuales ilimitados adicionales” (los detalles de precios se indican en la página del complemento)
• También ofrecemos “paquetes de créditos únicos que nunca caducan” (junto con información sobre los precios iniciales)

Nota:

• Gratis: cada mes se proporciona un número determinado de créditos para su uso en sitios web ligeros o para realizar pruebas
• Paquete único: Ideal para sitios web con una amplia biblioteca multimedia que deseen liquidar su inventario de una sola vez (se compra una sola vez y es válido hasta agotar existencias; por lo general, no tiene fecha de vencimiento)
• Mensual/Ilimitado: Ideal para sitios web que requieren actualizaciones periódicas de imágenes y una optimización estable a largo plazo

La base de conocimientos oficial de ShortPixel también ofrece orientación sobre “paquete único frente a plan mensual ilimitado”Una 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.

Lo más importante: ¿Cómo se calculan los créditos de ShortPixel?

Documentación oficial de ShortPixel KB lo dijo sin rodeos:

• Cuando subes una imagen a WordPress, este genera varias miniaturas;
• La optimización de cada miniatura cuenta como un crédito；
• Si decides generar archivos WebP o AVIF,Cada versión en formato WebP o AVIF de una imagen original y su miniatura contará como un crédito adicional.；
• Puedes excluir ciertas miniaturas de la optimización para reducir el consumo de datos.

Ejemplo de créditos：

Supongamos que subes una imagen y el tema o el complemento genera ocho miniaturas:

• Optimizar solo la imagen original y las miniaturas: 1 (imagen original) + 8 (miniaturas) = 9 créditos
• Si también quieres generar archivos WebP/AVIF: añade una versión de nueva generación a cada uno de los 9 anteriores → más 9 créditos
  En otras palabras, lo que tú crees que es “una sola imagen” podría costarte, en realidad, casi “dos dígitos de créditos”.

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

Los errores más comunes con ShortPixel

1. Los 100 créditos gratuitos se agotarán pronto
   Motivo: Gran cantidad de miniaturas + tiempo de procesamiento adicional necesario para generar archivos WebP/AVIF.
   Recomendaciones：

• En primer lugar, evalúa el número de miniaturas del sitio
• Elimina los tamaños de miniaturas innecesarios (optimiza solo los tamaños que realmente se vayan a utilizar)
• Decide primero una estrategia de compresión y, a continuación, ejecuta el proceso por lotes para no perder tiempo con el método de prueba y error

2. Úsalo junto con otros complementos de conversión de formatos
   Si activas la sustitución de Plus WebP y además configuras ShortPixel para que genere e inserte etiquetas de última generación, las funciones se solaparán, lo que dificultará la resolución de problemas. Con la opción B, ShortPixel se encarga de esta tarea por sí solo.
3. Supuse que, una vez instalado, el frontend generaría automáticamente archivos WebP/AVIF“
   Página del complemento ShortPixelEs capaz de convertir archivos WebP y AVIF, y puede incorporar imágenes de última generación en las páginas front-end (por ejemplo, mediante etiquetas).
   Sin embargo, aún así debes revisar los resultados una vez que hayas terminado.

---

3.2.2 Imagify: 201 TP234 al mes gratis; 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

Franquicia y ubicación

Página oficial de precios de ImagifySe dice muy claramente:Las cuentas gratuitas tienen un límite mensual de 20MB。
En la página del complemento también se indica que puede comprimir, cambiar el tamaño y convertir a WebP/AVIF.

¿Cómo se deduce la cuota?

Documentación oficial de Imagify “¿Cómo se calcula el uso de la cuota?” explica el mecanismo de facturación con gran claridad:

• El número de miniaturas influye en el uso de recursosPor ejemplo, si tienes 10 tamaños de miniaturas, optimizar una sola imagen equivale, en la práctica, a optimizar 11 imágenes (la imagen original más las 10 miniaturas), y todas ellas cuentan para tu cupo.
• Deducir la cuota en función del tamaño original del archivoPor ejemplo, si subes una imagen de 100 KB a Imagify, se te descontarán 100 KB de tu cuota.
• Si se modifica el nivel de compresión y se vuelve a optimizar, se consumirá cuota de nuevo。
• Una misma clave de API se puede utilizar en varios sitios, pero el límite de uso se comparte entre ellos.

Este es el “enfoque fundamental” de Imagify:
Es más bien como un paquete de datos: cuanto más subas, más datos consumirá; cuantas más miniaturas crees, más datos consumirá; y si vuelves a comprimir los archivos repetidamente, consumirá datos repetidamente.

Un ejemplo sencillo de las cuotas de Imagify

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

• Al optimizar con Imagify, se incluyen tanto la “imagen original como las 8 miniaturas” (si seleccionas “Optimizar todo”), lo que significa que esta operación consumirá una cuota equivalente a casi el «tamaño total de todos estos archivos».
  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.

Los errores más comunes con Imagify

1. El código gratuito 20MB 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, borrarla toda de una vez probablemente requerirá una actualización.
2. Ajustar repetidamente el nivel de compresión hace que la cuota se agote una y otra vez
   Imagify: una explicación claraLa reoptimización volverá a consumir la cuota.
   Te recomendamos que expongas claramente la “estrategia” en esta página:

• Empieza utilizando unas pocas imágenes para determinar el nivel de compresión y la calidad visual
• Una vez que la estrategia esté lista, ejecútela por lotes
  Evita el método de prueba y error en toda la base de datos

3. El uso de una misma clave de API en varios sitios provoca que los límites de uso “disminuyan misteriosamente”
   Si utilizas la misma clave de API en varios sitios, los límites de uso se compartirán.
   Por lo tanto, en entornos de trabajo en equipo o con múltiples sedes, es recomendable aclarar qué sedes comparten recursos y cuáles operan de forma independiente, a fin de evitar sobrecostos.

---

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

Los derechos de emisión gratuitos y cómo se calculan

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

• 500 créditos gratis cada mes
• En una “instalación estándar de WordPress”, probablemente puedas comprimir Aproximadamente 100 imágenes al mes
• Sin embargo, si la conversión a AVIF o WebP está habilitada:Cada tamaño de imagen tendrá un costo adicional de un crédito, así que supongo que la única opción es comprimirlo y convertirlo Aproximadamente 50 imágenes al mes(Esto depende del número de tamaños de miniaturas que tengas.)

Por otra parte, Tinify (el desarrollador de TinyPNG y TinyJPG) también ha Página de precios de la APINota: Regístrese para recibir 500 compresiones gratuitas al mes; una vez superado este límite, se le cobrará en función del número de compresiones realizadas con éxito, sin necesidad de suscribirse.

Para resumir cómo funciona TinyPNG en una sola frase:
Se calcula en créditos; cuantos más tamaños de miniaturas tengas y cuanto más utilices los formatos WebP/AVIF, más rápido se agotarán tus créditos.

Un ejemplo sencillo de los créditos de TinyPNG

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

• Solo compresión: Imagen original + 8 miniaturas → Se requieren 9 créditos
• Si la conversión a WebP/AVIF está habilitada: se deducirá un crédito adicional por cada tamaño → esto puede casi duplicar el total
  Esto se corresponde con la descripción que aparece en la página del complemento: una vez habilitada la conversión, la cuota gratuita pasa de ser de aproximadamente “100 al mes” a “50 al mes”.

Los errores más comunes con TinyPNG

1. Pensé que 500 créditos significaban 500 imágenes
   No. Se cobra por “tamaño de imagen/variante”. En la página del complemento se indica claramente que “la conversión tendrá un costo adicional de 1 crédito por tamaño de imagen”.
2. El tema o el plugin de comercio electrónico genera demasiados tamaños de imagen, y la cuota gratuita se ha reducido considerablemente
   Cuantas más dimensiones haya, más fácil es que se agoten los créditos.
3. Después de activar la conversión, me di cuenta de que mi límite de crédito se había agotado de repente
   No se trata de un error; así es como funciona el sistema de facturación.
   Recomendaciones estratégicas:

• Si la fase gratuita está pensada principalmente para la compresión y la reducción de peso, puedes empezar simplemente aplicando la compresión. Una vez que hayas comprobado que la estructura del sitio es estable y que realmente necesitas la próxima generación, podrás iniciar la conversión.

4. Recomendaciones por tipo de sitio web: cómo elegir según el tipo de sitio web

Aunque todos utilizan WordPress, los “problemas relacionados con las imágenes” varían según se trate de sitios de contenido, sitios de comercio electrónico, portafolios o sitios de membresía.

4.1 Sitios web de contenido/blogs (que incluyen numerosas imágenes y artículos, con una frecuencia de actualización moderada)

Recomendaciones prioritarias:

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

Una ruta más adecuada:

• Si quieres una opción sin complicaciones: elige una de las tres de la Opción B (ShortPixel / Imagify / TinyPNG)
• Si quieres una opción gratuita: Ruta A (Plus WebP + EWWW), pero te recomendamos que empieces con el “Modo conservador (no borrar imágenes originales)” para evaluar primero los riesgos

Errores comunes:

• La imagen de cabecera de la página del artículo es muy grande, y la estrategia de carga diferida está mal implementadaEsto ralentizará la carga de la primera página

4.2 Sitios web de comercio electrónico o de productos (con numerosas miniaturas y variaciones de imágenes; la estabilidad es fundamental)

Los problemas más comunes en el comercio electrónico no son que “la calidad de la compresión sea mala”, sino más bien que “algunas dimensiones sean incorrectas tras la optimización, falten miniaturas o los componentes front-end no puedan recuperar las imágenes”.

Recomendaciones prioritarias:

1. Empieza con cautela: adopta una estrategia de compresión más conservadora; no reemplaces toda la base de datos de inmediato
2. Evaluación del tamaño de las miniaturas: los temas de comercio electrónico suelen generar más tamaños, lo que puede aumentar considerablemente el consumo de datos (esto se nota especialmente con ShortPixel y TinyPNG).
3. Realiza primero una prueba a pequeña escala y, a continuación, amplíala a un público más amplio (esto es absolutamente fundamental)

Una ruta más adecuada:

• La opción B suele ser la más sencilla: ShortPixel, Imagify y TinyPNG admiten el procesamiento por lotes; la clave está en comprender el sistema de cuotas y calcular los costos con anticipación.
• La opción A también es válida, pero debes tener mucho cuidado con el comportamiento de Plus WebP, que “sobrescribe los ID, elimina las imágenes originales y reemplaza las URL”: dado que esto supone una migración de activos, no recomendamos realizar un reemplazo completo de inmediato.

4.3 Portafolios/sitios web de fotografía (donde la calidad de la imagen es fundamental, los archivos son de gran tamaño y el atractivo visual es primordial)

Recomendaciones prioritarias:

1. Estrategia de dimensionamiento (Control del área de visualización)
2. Estrategia de compresión (es mejor tener un archivo ligeramente más grande que perder detalles)
3. WebP/AVIF (las ventajas son evidentes en el caso de imágenes de gran tamaño, pero es necesario verificar la calidad visual)

Una ruta más adecuada:

• Imagify: Dado que la cuota se deduce en función del “tamaño original de la imagen”, este tipo de sitio web facilita el control de los costos (ya que sabes aproximadamente cuánto costará cada imagen de gran tamaño), pero debes evitar volver a comprimirlas repetidamente.
• ShortPixel: Si no hay demasiados tamaños de miniaturas, el consumo de créditos es bastante sencillo; sin embargo, si generas un gran número de tamaños, además de versiones de nueva generación, el consumo de créditos aumentará considerablemente, por lo que deberás planificarlo con antelación.

5. Límite de uso frente a facturación: un análisis detallado para determinar si la asignación gratuita es suficiente

¿Cuál ofrece una mejor relación calidad-precio y cuánto dura la prueba gratuita?

5.1 Tres modelos de facturación

• ShortPixel(créditos): Los créditos se calculan en función de la “imagen original más el número de miniaturas”; la generación de archivos WebP/AVIF supondrá un cargo adicional por créditos para cada versión correspondiente.
• Imagify(Cuota MB): La cuota se deduce en función del “tamaño original del archivo”; cuantas más miniaturas haya, más cuota se consumirá; la recompresión provocará nuevas deducciones de cuota.
• TinyPNG(créditos): 500 créditos al mes; la activación de la conversión a WebP/AVIF conllevará un cargo adicional según el tamaño de la imagen.

5.2 Métodos de estimación rápida

Puedes calcularlo de la siguiente manera:

1. Elige cualquier “imagen original que suelas subir” y comprueba su tamaño aproximado (p. ej., 300 KB / 1MB / 3MB)
2. Depende de cuántos tamaños de miniaturas suele generar tu sitio web (por ejemplo, 5, 10 o 20)
3. Decida si desea generar archivos WebP/AVIF (Sí/No)

A continuación, utiliza el “cálculo mental” que aparece a continuación para comprender el consumo:

• ShortPixel: Cada imagen ≈ (1 + número de miniaturas) créditos; si se genera WebP/AVIF, ≈ el doble (ya que las versiones de última generación también requieren créditos)
• Imagify: El límite de almacenamiento para cada imagen es aproximadamente (tamaño original de la imagen + tamaño total de todas las miniaturas); si se modifica el nivel de compresión y se vuelve a comprimir la imagen, se reducirá aún más el límite de almacenamiento.
• TinyPNG: 500 créditos gratuitos; si tu sitio web genera un gran número de tamaños de imagen por imagen y la conversión de imágenes está habilitada, el número de imágenes gratuitas se reducirá considerablemente (la página del complemento ofrece una estimación aproximada de “alrededor de 100 al mes” y “alrededor de 50 al mes”)

6. Información sobre riesgos

Riesgo 1: Evita que varios complementos realicen la misma tarea

Esta es la “causa de los desastres” más habitual”

• Ruta A:Además de WebP o AVIF + EWWW(Repartan las tareas entre los dos; no realicen la conversión y la entrega al mismo tiempo, ni instalen solo una de ellas)
• Opción B: ShortPixel / Imagify / TinyPNG Elige una de las tres(Elige uno para gestionar la compresión y la próxima generación)

Riesgo 2: Además, las funciones de WebP “Sobrescribir ID / Eliminar imagen original / Reemplazar URL” constituyen una migración de activos

Para reiterar:Además de WebP La descripción indica claramente que, durante una 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 se puede revertir en cualquier momento”, sino más bien de un cambio a nivel del activo.

La estrategia recomendada debería ser:

• Empieza con una prueba a pequeña escala (de unas pocas docenas a unos pocos cientos)
• Comprueba que la pantalla del front-end, las miniaturas y las actualizaciones de la caché funcionen correctamente
• Considera la posibilidad de procesar toda la base de datos

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

• ShortPixel: Las miniaturas y las funciones de última generación tendrán un impacto significativo en los créditos
• TinyPNG: Al habilitar WebP/AVIF, se aplicará una deducción adicional de créditos por cada tamaño de imagen
• Imagify: Las tarifas se basan en el tamaño original de la imagen; cuantas más miniaturas haya, mayor será el costo; las descargas repetidas generarán cargos adicionales

Riesgo 4: “Se ha generado WebP/AVIF” no significa que “el front-end esté sirviendo WebP/AVIF”

Muchas personas tienen la sensación de que su sitio web no ha ganado velocidad tras la conversión; la causa principal es que la interfaz sigue sirviendo archivos JPG/PNG (debido a una incompatibilidad en alguno de los siguientes aspectos: almacenamiento en caché, reescritura, etiquetas o negociación del navegador).

7. ¿Cómo puedo comprobar si ha surtido efecto una vez que haya terminado?

4 puntos clave muy sencillos:

1. Al actualizar la misma página por segunda vez, ¿el proceso de carga es más estable y rápido?(¿Hasta qué punto se notan los efectos del almacenamiento en caché y la optimización?)
2. ¿Hay alguna diferencia notable en el tamaño de las imágenes que se cargan en los dispositivos móviles y en las computadoras de escritorio?(Adaptativo srcset/sizes (si funciona)
3. Revisa al azar algunas imágenes: ¿hay algún archivo o recurso WebP o AVIF?(¿El sitio utiliza realmente de última generación）
4. Echa un vistazo a algunas imágenes: amplíalas para ver si se notan borrosas o si el texto se ve difuminado(¿La compresión es demasiado fuerte?)

Si se cumplen estas cuatro condiciones, significa que la ruta que has elegido ya está en funcionamiento. A continuación, pasa a CDN “Capa de entrega”...será más estable en general.

8. Recomendaciones para la acción

1. En primer lugar, elige una ruta:

• Me gustaría que fuera lo más gratuito posible: Además de WebP o AVIF + EWWW (o instala solo uno de ellos)
• ¿Quieres ahorrar en recursos de servidor? Pagar según el uso es más sencillo: Elige entre ShortPixel, Imagify o TinyPNG

2. Empieza con una prueba a pequeña escala (unas pocas docenas)
3. Comprueba que todo esté en orden antes de procesar por lotes
4. Es necesario seguir mejorando la fiabilidad de las entregas:Leer CDN Aceleración

Preguntas frecuentes

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

Intenta seguir siempre la misma ruta.

• Opción A: Plus WebP o AVIF + EWWW Image Optimizer (o instalar solo uno de ellos)
• Opción B: Elige entre ShortPixel, Imagify o TinyPNG
  Utilizar varios complementos en un mismo sitio web para realizar “compresión, conversión a WebP o AVIF, modificación de URL y reescritura de la entrega” al mismo tiempo es la forma más segura de crear un lío y la más difícil de solucionar.

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

Es importante distinguir entre:
“Compatibilidad con la carga y el uso” ≠ “conversión automática/entrega automática”.
WordPress 6.5 no convertirá automáticamente y de forma masiva los archivos JPG/PNG existentes a WebP/AVIF, ni se encargará automáticamente de todo el proceso de “generar archivos AVIF/WebP según las capacidades del navegador y recurrir al formato original en caso necesario”. Para asegurarte de que tu biblioteca multimedia actualizada también se actualice, normalmente tendrás que utilizar un complemento o un servicio que cubra esas carencias.

3. En lo que respecta a la optimización de imágenes, ¿qué paso ofrece realmente el mayor retorno de la inversión?

Por lo general Asegúrate primero de que las dimensiones sean las correctas (srcset/sizes)。
Muchos sitios web son lentos no porque no se hayan comprimido, sino porque muestran una página de solo 900 píxeles de ancho, mientras obligan a los usuarios a descargar la imagen original de 3000 píxeles. La compresión puede ahorrar unos pocos kilobytes, pero unas “dimensiones incorrectas” harán que descargues varias veces más datos sin motivo alguno.

4. ¿Cómo puedo asegurarme de que se está cargando la “versión reducida” y no la imagen original?

Consideremos dos fenómenos:

• Cuando se ven en un dispositivo móvil, las imágenes descargadas se ven notablemente más pequeñas que en una computadora de escritorio
• El tamaño del archivo de una misma imagen varía según el dispositivo en el que se cargue
  Si las imágenes siempre se descargan en su tamaño original, suele deberse a que el tema o el constructor de páginas trata la imagen como una imagen de fondo CSS o como una salida personalizada, lo que hace que se ignore la compatibilidad de la biblioteca multimedia con múltiples dimensiones y el atributo `srcset`.

5. ¿Significa “generado en WebP/AVIF” necesariamente que el front-end está generando archivos WebP/AVIF?

no es igual a.
La generación solo se completa “a nivel de archivo”; que los formatos WebP o AVIF se sirvan realmente al front-end depende de factores como la reescritura, la política de la etiqueta `picture`, las entradas en caché y si la negociación del navegador es efectiva. Una vez que hayas terminado, asegúrate de “verificar aleatoriamente los tipos de recurso de algunas imágenes”.

6. ¿Cuáles son exactamente los riesgos asociados con WebP o AVIF? ¿Puedo realizar una comprobación con un solo clic en toda la base de datos?

El riesgo no radica en la “compresión”, sino enCambios en los niveles de migración de activos：

• Al generar el conjunto completo, es posible que se sobrescriban los ID de los archivos de imagen originales, que se eliminen los archivos originales y que se sustituyan las URL que aparecen en el contenido.
  EntoncesNo recomendamos sustituir toda la base de datos de inmediato: Comience con una prueba a pequeña escala (de unas pocas docenas a unos pocos cientos de registros) y asegúrese de tener una copia de seguridad válida antes de continuar con la base de datos completa.

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

En pocas palabras:

• Opción 1: Conservar la imagen original + generar copias en formato WebP/AVIF (más fiable): Es fácil revertir el cambio, pero ocupa más espacio en disco (imagen original + nuevo formato + varios tamaños de miniaturas).
• Método 2: Reemplazar y eliminar la imagen original (opción más drástica): El disco no tiende a expandirse, pero si modificas los activos y las referencias, resolver los problemas de compatibilidad resulta más costoso.
  Cuanto más complejo sea el sitio web (comercio electrónico, múltiples complementos, múltiples tamaños), más recomendamos 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 sistema esté “fallando”, sino que es necesario adoptar el enfoque adecuado: realizar el trabajo por lotes, durante las horas de menor actividad, y optar por soluciones de descarga o en la nube cuando sea necesario.
Si buscas una solución sin complicaciones, o si los recursos de tu servidor son limitados, la Opción B es más eficiente en cuanto al uso del servidor.

9. ShortPixel ofrece 100 créditos gratis al mes, así que, ¿por qué me parece que se agotan después de solo unas pocas imágenes?

porque “Créditos” no se refiere al «número de imágenes», se ampliará con miniaturas y contenido de última generación:

• Imagen original + crédito de cada miniatura
• Si se generan archivos WebP/AVIF, cada versión correspondiente supondrá un costo adicional en créditos
  Así que lo que tú podrías pensar que es “una sola imagen” podría llegar a consumir casi “dos dígitos de créditos”. ShortPixel

10. ¿Por qué se agotan tan rápido los 201 TP234T gratuitos al mes de Imagify?

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

• Según su mensajeTamaño original del archivodeducir de la cuota
• Cuantas más miniaturas haya, mayor será el consumo de recursos
• Si se modifica el nivel de compresión y se vuelve a optimizar, se consumirá de nuevo la cuota
• Una sola clave de API se puede utilizar en varios sitios, con cuotas compartidas
  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 complemento indica que solo hay unas 100 imágenes al mes y por qué este número se reduce a 50 imágenes al mes tras habilitar WebP/AVIF?

Esto se debe a que los créditos de TinyPNG también se amplían en la sección “Dimensiones/Variantes”:

• Una instalación estándar de WordPress suele comprimir unas 100 imágenes al mes
• Habilitar la conversión a AVIF o WebP:Cada tamaño de imagen tendrá un costo adicional de un crédito, así que probablemente solo pueda comprimir y convertir unas 50 imágenes al mes (dependiendo del número de tamaños de miniaturas).
  Por lo tanto, 500 créditos ≠ 500 imágenes.

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

Al subir una imagen a WordPress se generan varios tamaños; los temas y los plugins (especialmente los de comercio electrónico) pueden generar aún más.
Con la compresión en la nube, los créditos o las cuotas suelen calcularse en función del total combinado de la imagen original y sus miniaturas, por lo que cuantas más miniaturas haya, más rápido se agotará la asignación gratuita.

13. ¿La carga diferida siempre acelera el proceso? ¿Por qué hay quien dice que, en realidad, la carga diferida lo ralentiza?

La carga diferida es adecuada para los “recursos fuera de pantalla”.
Si la imagen grande más importante de la primera pantalla también se carga de forma diferida, esto podría ralentizar la experiencia de carga inicial. Aunque la carga diferida predeterminada en WordPress 5.5 y versiones posteriores funciona bien, no deberías aplicarla de manera generalizada.

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

La compresión, el tamaño y el formato de los archivos permiten reducir su tamaño y hacerlos más 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. Una vez que haya terminado, ¿cuál es la forma más fácil de comprobar que realmente funciona?

La forma más rápida de comprobarlo:

• Al actualizar la misma página por segunda vez, ¿el proceso de carga es más estable y rápido?
• ¿Hay alguna diferencia notable en el tamaño de las imágenes entre la versión móvil y la de escritorio (funcionan correctamente los atributos `srcset` y `sizes`)?
• Revisa al azar algunas imágenes: ¿hay algún archivo o recurso WebP o AVIF?
• Echa un vistazo a algunas imágenes: amplíalas para ver si se notan borrosas o si el texto se ve difuminado