homefinance blog
¿Busca el mejor complemento de optimización de imágenes para su sitio de WordPress? Lo sé, probablemente hayas escuchado que siempre debes optimizar tus fotos. Bueno, son lo primero que las personas ven en su sitio y son lo que define la apariencia y la sensación de su marca. La optimización de imágenes también es la clave para que su sitio cargue más rápido, aumentando el número de vistas y conversiones de página. Pero, ¿cómo sabes si estás bien? Todos sabemos lo importante que es tener un sitio web visualmente atractivo, fácil de usar y extremadamente funcional. Las imágenes son una parte integral de esto, pero pueden ser difíciles de optimizar sin la ayuda de complementos. ¿Sabía que las imágenes representan el 21% del peso total de una página web?
Nuestra guía también lo ayudará a comprender las características principales que un buen complemento debería tener para mejorar el rendimiento. ¡Echemos un vistazo a los mejores complementos de optimización de imágenes de WordPress que hemos seleccionado para usted! Cómo elegir el complemento adecuado para optimizar la imagen al optimizar las imágenes en WordPress, acelerará el tiempo de carga y mejorará la experiencia del usuario. Pero, ¿qué haces cuando optimizas tus fotos? La optimización de imágenes web es la acción para proporcionar imágenes de alta calidad en el formato, el tamaño y la resolución correctos, al tiempo que mantiene el tamaño lo más pequeño posible.
La optimización de imágenes se puede hacer de diferentes maneras: cambia el tamaño de las imágenes, comprimiendo el tamaño o memorizándolas en caché usando la carga perezosa. Hay muchos complementos que harán esto por usted automáticamente. Sin embargo, no todos los complementos son iguales. En esta sección, le mostraremos algunas de las características clave que debe ver al elegir un enchufe de optimización de imágenes. Característica de compresión: el proceso de codificación o conversión de un archivo de imagen para consumir menos espacio que el archivo original automáticamente.
Asegúrese de que el complemento pueda optimizar los formatos que desea usar: JPG, PNG, PDF, GIF y WebP.
Conversión automática de WebP para sus imágenes: WebP es un formato de imagen moderno que ofrece una compresión superior sin pérdidas y pérdidas para imágenes web. El complemento que elija debe aceptar y convertir este formato optimizado ampliamente utilizado en la web.
Opción de carga perezosa: muestre imágenes solo cuando los visitantes las ven guardar cinta.
Elija si desea que su imagen se optimice utilizando el algoritmo de compresión sin pérdidas ni pérdidas. Luego, asegúrese de que el complemento tenga ambas opciones de acuerdo con sus necesidades.
Una opción que le permite optimizar las imágenes ya cargadas en su sitio. ¡Esto le ahorrará toneladas de horas! Optimización en VS Optimización única: ambas opciones son muy útiles, ya que es posible que desee optimizar la biblioteca de medios existente o seleccionar manualmente qué imagen Para optimizar.
Una opción de copia de seguridad si tiene que volver a las imágenes originales.
Ahora que hemos visto algunas de las mejores características que debe buscar en un complemento para optimizar sus imágenes, eche un vistazo más de cerca a seis complementos que pueden ayudarlo a lograr este objetivo.
Top 6 complementos de optimización de imágenes (con pruebas finales)
Imaginar
Optimizador de imagen EWWW
Optimole (optimización de imágenes y carga perezosa por Optimole)
Optimizador de imágenes de shortpixel
Resmush.it
Comprimir imágenes JPEG y PNG
Y aquí están. También descubrirá dos bonos de contenido:
Bonificación 1: Prueba de comparación final para complementos de optimización de imágenes
Bonus 2: complemento WP Rocket-Full Suite para optimizar las imágenes y aumentar el rendimiento del sitio
1. Imagine más de 500,000 instalaciones activas, Imagify es una de las herramientas más avanzadas para optimizar sus imágenes directamente en el tablero de WordPress. Con una interfaz muy fácil de usar, Imagify optimizará su almacenamiento de medios, ya que comprime imágenes recién cargadas, así como aquellas que actualmente tiene a mano. Y por último, pero no menos importante, está hecho (con amor) por WP Rocket para el mismo propósito nuevamente: ¡hacer de la Web un lugar más rápido!
Características clave
Acepte PNG, JPG, GIF, PDF y WEBP
La posibilidad de convertir las imágenes en formato webp y también mostrarlas en formato webp en su sitio de WordPress de dos maneras utilizando la etiqueta o en .Htaccesredimensing y optimización se pueden hacer automáticamente al cargar o en el momento del proceso de optimización de existentes imágenes
Tres niveles diferentes de compresión: normal (compresión libre de pérdida), agresivo (compresión de pérdidas), ultra (compresión con pérdidas más agresivas para ahorros de archivos máximos)
Desde el tablero de WordPress, puede comparar cada nivel de compresión utilizando la herramienta de imagen. Intenté y vi que la calidad de la imagen no se ve afectada, ¡pero el tamaño del archivo pasó de 336 kb a 104 kb que representa una economía del 66%!
Imagify Instrument Comparando múltiples niveles de compresión (la calidad no cambia)
La posibilidad de elegir el tipo de imagen que desea optimizar entre miniaturas/medianos/grandes
Cambiar el tamaño automáticamente de las imágenes a un máximo en particular. dimensión
Imagify usa sus propios servidores para optimizar sus fotos (que le permite consumir menos ancho de banda y mantener sus páginas tiempo de carga)
Haga copias de reserva de imágenes originales (para restaurar imágenes después de la compresión)
Optimizador en el bloque para optimizar una biblioteca de medios de un solo clic:
Imagen: optimización en el bloque de precios (según la cantidad de imágenes que desea optimizar)
La tecla API gratuita le permitirá cambiar el tamaño y comprimir 20 MB de imágenes por mes (aproximadamente 200 imágenes). Luego puede pagar $ 4.99 por mes por 500 GB (aproximadamente 5000 imágenes) o $ 9.99 por mes por uso ilimitado. IMPORTANTE: puede usar Imagify a la máxima capacidad utilizando la versión gratuita. La versión premium solo permite el procesamiento de varias imágenes. 2. El optimizador de imágenes EWWW Más de 900,000 sitios web usa el complemento EWWW Image Optimizer para acelerar sus imágenes sin perder su calidad. Optimiza automáticamente las imágenes a medida que las carga. También tiene la opción de optimizar las imágenes JPG previamente cargadas o en el bloque, sin compresión de pérdida. Características clave
Compresión disponible para compresión para archivos JPG, PNG y PDF
Las imágenes se comprimen automáticamente, se escalan para adaptarse a la página, perezoso y convertido en el formato WebP de nueva generación.
Cambiar el tamaño de las imágenes existentes
Agregue las dimensiones faltantes (atributos de ancho/altura para reducir los cambios de aspecto y mejorar la experiencia del usuario)
Optimizar todo en su sitio, no solo en la biblioteca de medios de WordPress
Le permite optimizar imágenes usando herramientas en su propio servidor
Dimensiones de archivo ilimitadas para que no tenga que preocuparse por imágenes grandes y sin comprimir
Opción de bloque disponible: optimizar todas las imágenes de su sola página
Al instalar el complemento, le preguntan cuáles son sus objetivos para nuestra comparación, nos quedaremos en la forma gratuita:
Optimizador de imagen EWWW – Objetivos
La interfaz no es muy fácil de usar, pero hace su trabajo y casi no hay configuración para aplicar antes de usarla. Precio (según las funciones a las que puede acceder) el Ewww Image Optimizer es gratuito, pero si necesita optimizar aún más su sitio, puede elegir el plan premium. El plan premium incluye optimización de JS y CSS, opciones de almacenamiento de caché, un CDN, más ancho de banda y una mejor capacidad de optimización. Limpie la interfaz con instrumentos que se ejecutan en segundo plano sin tener que verificar ninguna opción. La optimización de imágenes requiere crear una cuenta e ingresar la tecla API, ¡pero es muy rápida! Una vez que haya hecho esto, vea todas las imágenes optimizadas en el tablero para cambiar ciertas configuraciones, como reemplazar las imágenes, cambiar el tamaño de imágenes grandes, carga perezosa o calidad de compresión. Esto incluye informes mensuales.
Características clave
Acepte los siguientes tipos de imágenes: formato JPG, PNG y SVG
Easy -para usar la interfaz
Algoritmos con pérdidas y sin pérdidas
4 tipos de niveles de compresión: automóvil, alto, medio, bajo
Tiene un instrumento (similar a Imagify) para comparar la calidad de imagen antes y después de la optimización:
Prueba de calidad de imagen – Panel de Optimole
Admite imágenes de retina y webp
Servir imágenes de un CDN global (¡gratis!)
Está optimizado sobre la base del dispositivo real del visitante
Opción de carga cuadrada
Agregue la marca de agua automáticamente
Corte inteligente: mantenga la parte más interesante de una imagen sin comprometer el rango mensual para el seguimiento y el monitoreo
Precio (según el número de visitas)
Con el plan gratuito, puede optimizar un número inconmensurable de imágenes para hasta 5,000 visitas mensuales.
Optimole-Prices 4. Optimizador de imágenes de shortpixel con más de 300,000 instalaciones activas, su promesa es clara: acelerar su sitio. El complemento de optimización de imágenes Freemium ShortPixel ofrece tres algoritmos diferentes de compresión de imágenes: sin pérdidas, pérdidas y brillantes para que pueda elegir lo que sea mejor para su proyecto.
Características clave
Las nuevas imágenes se dimensionan automáticamente/se redimensionan y se optimizan desde el fondo, el fondo
Tanto la compresión de pérdidas y pérdidas están disponibles en el siguiente formato: JPG, PNG, GIF, WebP, AVIF y PDF
Interfaz con opciones más avanzadas disponibles
Panel de shortpixel
Es compatible con cualquier complemento de galería, control deslizante o comercio electrónico
Reduce automáticamente las imágenes grandes
Convertir automáticamente PNG a JPG si eso da como resultado imágenes más pequeñas
Optimizar cualquier imagen que tenga en su sitio web, incluso imágenes que no figuran en la biblioteca de medios
Para los fotógrafos: mantenga o elimine los datos de Exif y active la compresión de JPEG brillante
Precio (según la cantidad de imágenes que necesita para optimizar) el complemento en sí es gratuito y viene con 100 créditos gratuitos/mes. Se pueden comprar créditos adicionales por $ 4.99 por 7,000 créditos de imagen.
ShortPixel – Precios 5. Resmush.it El optimizador de imágenes resmush.it le permite optimizar sus imágenes de forma gratuita. También puede cambiar el nivel de optimización de sus imágenes de acuerdo con la calidad que necesita o excluir algunas imágenes del proceso de optimización, si lo desea.
Formatos aceptados: imágenes PNG, JPG, GIF, BMP y TIF GRATIS A 5MB
¡Operación en el bloque para optimizar todas sus imágenes en solo 2 clics!
WebP aún no está disponible (pero funciona)
La función “Optimización en la carga” disponible
Resultado de la compresión: la calidad no ha cambiado los precios gratuitos. La única restricción es enviar imágenes por debajo de 5 MB. 6. Comprima imágenes JPEG y PNG Este complemento respeta los elementos básicos y le permite optimizar los formatos JPEG y PNG. Se basa en los servicios de compresión de las imágenes TinyJPG y TinyPng. Ambas herramientas analizan el contenido de una imagen para elegir qué estrategia de compresión es la mejor para cada foto, sin comprometer su calidad.
Características clave
Opción de optimización en el bloque para sus imágenes JPEG y PNG existentes, todas simultáneamente
Se aceptan dos tipos de formato: PNG, JPEG
Ejemplo de PNG antes y después de la compresión
Optimizar automáticamente nuevas imágenes al cargarlas
Optimizar las imágenes individuales que ya están en su biblioteca de medios
Optimización de bloque de su biblioteca de medios existente
Cambiar el tamaño automáticamente de las imágenes cargadas grandes estableciendo un ancho máximo y/o alturas
Codación JPEG Progress: Mostrar imágenes JPEG más rápido
Compresión animada PNG
Seleccione qué tamaño se pueden optimizar las miniaturas de WordPress
Consulte su uso en la página de configuración y durante la optimización en el bloque convierte CMYK en RGB para ahorrar más espacio
Precios
Con una instalación regular de WordPress, puede optimizar unas 100 imágenes de forma gratuita cada mes.Cuando se convierta en un profesional ($ 25/usuario/año), puede deslizar y colocar más de 20 imágenes simultáneamente, actualizar de 5 MB a 75 MB de límite de tamaño del archivo y obtener acceso a las estadísticas utilizando la herramienta Analyzer.
Bonificación 1: puntajes finales de pruebas de comparación para complementos de optimización de imágenes Para probar nuestros complementos, realizamos una prueba utilizando una imagen JPG.También utilicé una versión gratuita para todos los complementos con su configuración predeterminada.Veamos qué complemento de optimización de imágenes de WordPress tiene el mejor rendimiento.Este es mi archivo JPEG y el tamaño del archivo original es de 450 kb:
Pruebe el resultado de la prueba de prueba en mi imagen jpg:
| tamaño original | tamaño después de la optimización | guardado (%) | Método (sin pérdidas – con pérdidas) | |
| imagina | 450 kb | 203 kb | 55% | con pérdidas |
| 450 kb | 400 kb | 11% | con pérdidas | 450 kb | 270 kb | 40% | con pérdidas | Shortpixel Image Optimizer | 450 kb | 166 kb | 63.91% | con pérdidas | resmush.it | 450 kb | 396 kb | 12% | con pérdidas |
| compress jpeg y png | 450 kb | 239 kb | 47% | con pérdidas |
En la primera posición, tenemos píxeles cortos con una economía de 63.91%, ¡seguido de Imagify con 55%! No está mal, dado que no establecí Imagify en modo ultra (configuración de optimización máxima). Bonificación 2: WP Rocket: la suite completa para la optimización de imágenes y el aumento del rendimiento del cohete WP no es un complemento de optimización de vista y es por eso que no lo he incluido en la lista. Sin embargo, es el mejor enchufe de almacenamiento de WordPress e incluye algunas potentes funciones de optimización de imágenes, como la carga perezosa. Tenga en cuenta que WP Rocket no comprime sus imágenes, por lo que le recomendamos que use Imagify con él. Desplácese a la prueba de velocidad para ver cómo WP Rocket e Imagify puede acelerar su sitio cuando se usan juntos. WP Rocket viene con una pestaña de medios dedicada en el tablero de WordPress:
Pestaña de medios: características de la tecla de bashboard WP para optimizar la carga de la imagen: la carga de cohetes WP retrasa la carga o la inicialización de los recursos (imágenes o videos) hasta que se vean. Esto puede abordar la recomendación de PSI “posponer las imágenes fuera de pantalla en su sitio”.
Dimensiones de la imagen: puede agregar automáticamente el tamaño correcto a sus imágenes, evitando un valor acumulativo de desplazamiento de diseño.
Incorporación: WP Rocket evita que otros incorporen contenido.
WebP: la compatibilidad de WebP es un formato que se activará para mostrarse en navegadores compatibles.
Formato WebP: WP Rocket recomienda el uso de Imagify para convertir todas las imágenes en WebP.
Otras características (súper fácil de configurar) para mejorar su sitio web de WordPress: JavaScript y CSS pospuesto, minimización del código HTML, concatena y minimización de CSS y archivos JavaScript.
Precios no hay una versión gratuita de WP Rocket, y los precios comienzan en $ 49 por año.
Cómo usar Imagify y WP Rocket para acelerar su sitio web de WordPress en nuestra auditoría, probaremos nuestra página construida con el generador de páginas Elementor. Habrá 6 fotos de la dimensión respectiva de 512 kb, 543 kb, 456 kb, 678 kb y 720 kb.
Mi sitio de prueba de 6 fotos
Para medir el rendimiento, utilizaremos Google PageSpeed Insights, una poderosa herramienta de faro. En WordPress
cubriremos tres escenarios:
Auditoría n. ° 1: Mediremos la velocidad de nuestro sitio sin ninguna optimización (sin Imagify sin cohete WP) no. 2: La segunda auditoría será medir el rendimiento de nuestro sitio después de optimizar las imágenes con Imagify (Imagify-Without WP Rocket)
Auditoría #3: Finalmente, se realizará una prueba de velocidad utilizando Imagify y WP Rocket
¡Vamos a empezar! En primer lugar, debe abrir las ideas de Google PageSpeed y pegar la URL de su sitio, como se muestra en nuestro ejemplo a continuación:
Ejemplo: Auditoría del sitio web oficial de WP Rocket (puntaje 99/100) -Source: Auditoría PSI #1 sin imagen sin cohete WP para analizar mi sitio. Como podemos ver, mi puntaje es naranja (59/100), y los vitales de la web central no son muy saludables.
Mi nota de rendimiento antes de la optimización – Fuente: PSI Además, tengo algunos problemas relacionados con las imágenes para resolver:
El tamaño correcto de las imágenes
Posponer las imágenes fuera de la pantalla
Servir imágenes en formatos de nueva generación (¡como webp!)
Sección de oportunidades en rojo antes de la optimización: Fuente: PSI En la segunda auditoría, veremos si Imagify puede resolver algunos de los problemas mencionados anteriormente. Auditoría #2 solo Imagine-sin WP Rocket El primer hallazgo es que Imagify ha hecho mis imágenes mucho más fáciles:
| Tamaño del archivo antes de la imagen | Tamaño del archivo (ultra módulo) | ahorros ( %) |
| 296 kb | 42 % | |
| 543 kb | 342 kb | 37 % | 456 kb | 282 kb | 38 % | 400 kb | 41 % |
| 720 kb | 345 kb | 52 % |
Optimización de mis imágenes -Is ha mejorado la puntuación y las secciones de auditoría en PSI:
Otra buena noticia es que mi sección de diagnóstico relacionada con problemas de imagen ahora está en la sección de auditoría “pasada”:
| mi sección de diagnóstico antes de la imagen | Mis auditorías pasaron después de Imagify |
¿Quieres seguir mi camino para optimizar tus imágenes y convertirlas en webp? Aquí está la lista de configuraciones de Imagify que hemos activado para lograr tales resultados: Configuración general
Tipo de nivel de optimización: Ultra
Optimiza automáticamente las imágenes a la carga
Haga de la reserva hijos de imágenes originales
Imagen: configuración de optimización de configuración general
Convierta todas las imágenes a webp (según lo recomendado por Lighthouse)
Mostrar imágenes en formato webp en el sitio
También optimizé mi tema
Cambie las imágenes más grandes en el máximo. 2560 píxeles de ancho (esta es la configuración predeterminada ofrecida por Imagify) Configuración de optimización de imágenes Eventualmente, optimizé (a granel) todas las imágenes. Puede ver cómo se ve el proceso de optimización a continuación:
IAMGIFY: la compresión del proceso de optimización y el cambio de tamaño de las imágenes son medidas cruciales a tomar. Pero, ¿qué sucede después de cargar las imágenes optimizadas? ¿Todavía hay un margen de mejora en términos de rendimiento? ¿Cómo puedes ganar un poco más de velocidad, incluso cuando tienes que alojar más fotos en la página a la vez? La técnica de carga perezosa ofrece una oportunidad de optimización adicional, y si agrega algunas funciones de cohetes WP, puede elevar su sitio. Esto nos lleva al escenario #3. Auditoría #3 – Imagify y WP Rocket para la auditoría final, activado WP Rocket y cambió algunas opciones. La buena noticia, mi puntaje PSI ahora está en verde:
Mi puntaje en verde usando WP Rocket e Imagify – Fuente: PSI Mi sección de auditoría anterior ha aumentado y todos los problemas principales desaparecieron:
La sección de auditoría ha pasado después del uso de WP Rocket e Imagify-Source: PSI nuevamente, si desea optimizar su sitio, asegúrese de que se activen las siguientes opciones:
La pestaña de optimización de medios: opciones de carga perezosa y “agregar el tamaño de la imagen”:
Pestaña de medios con opciones marcadas – WP Rocket Dashboard
Pestaña de optimización de archivos – Optimización CSS:
Reduzca CSS, optimice la entrega de CSS y elimine las opciones de CSS no utilizadas: WP Rocket Dashboard
Pestaña de optimización de archivos – Optimización JS:
Reduzca, posponga y cargue opciones retrasadas JS: WP Rocket Dashboard Para resumir, vi que Imagify y WP Rocket tienen un gran impacto en el rendimiento. ¡Pasé de 59/100 a 93/100 en Google PageSpeed Insights! La sección de auditoría aprobada ha aumentado y ambos complementos abordaron problemas significativos reportados por Lighthouse:
