ShortPixel Adaptive Images – WebP, AVIF, CDN, optimización de imágenes
Un plugin fácil de usar que te permite resolver cualquier problema con las imágenes y mejorar las Core Web Vitals de tu web en un minuto.
Imagínate que pudieras arreglar todos los problemas relacionados con las imágenes de tu web y aumentar la velocidad y el rendimiento de la página con un simple clic, ¿no sería fantástico? Por lo general, las imágenes son el mayor recurso en una página web. Con solo un clic, ShortPixel Adaptive Images reemplaza todas las imágenes de tu web con imágenes del tamaño adecuado, recortadas inteligentemente y optimizadas, y las sube a la CDN global de ShortPixel. ¡Y para que Google te quiera aún más, el plugin sirve imágenes WebP o AVIF de próxima generación a los navegadores adecuados de forma automática y mágica! 🙂
Usar ShortPixel Adaptive Images también ayuda con los Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS) de Core Web Vitals (CWV). Este es un factor de SEO importante que Google utiliza para calificar las páginas. Cuanto más pequeños sean los valores de CWV, mejor para tu web.
¿Necesito este plugin?
Si tienes una web WordPress con imágenes, ¡lo más probable es que la respuesta sea sí! ¿Alguna vez has puesto a prueba tu web con herramientas como PageSpeed Insights o GTmetrix y has recibido mensajes de que las imágenes no tienen el tamaño adecuado o son demasiado grandes? ¿O que deberías usar imágenes de «próxima generación» como WebP o AVIF? ¿O que la web debería «posponer la carga de imágenes que no aparecen en pantalla»? ShortPixel Adaptive Images viene al rescate y resuelve los problemas con las imágenes en tu web al instante. Además de las imágenes, los archivos CSS, JS y de fuentes también se minimizan y entregan desde nuestra CDN global.
¿Qué beneficios tiene?
¿Qué características tiene?
- ¡Nuevo! Ahora puedes establecer tu dominio personalizado para servir imágenes o archivos JSS/CSS, p. ej. cdn.ejemplo.com. Lee más aquí.
- nuevo y ligero motor de imágenes adaptativas en JavaScript puro (ya no se requiere jQuery)
- la misma calidad visual, pero con imágenes más pequeñas gracias a los algoritmos de ShortPixel
- recorte inteligente – ver un ejemplo
- sirve solo imágenes de tamaño apropiado, dependiendo de la ventana del visitante
- compatible con carga diferida con umbral ajustable; compatible también con la carga diferida nativa del navegador
- sirve automáticamente imágenes WebP y AVIF a los navegadores que admiten este formato. ¡Los GIFs animados también son compatibles y se pueden convertir a WebP animado y AVIF animado!
- almacenamiento en caché y servicio desde una CDN global para imágenes, así como CSS, JS y fuentes
- los archivos CSS/JS son minimizados automáticamente
- todas las principales galerías de imágenes, carrusels y maquetadores de páginas son compatibles
- asistente de puesta en marcha que incluye una herramienta que sugiere la mejor configuración para cada web
- compatible con marcadores de posición de imagen de baja calidad (LQIP)
- compatibilidad para JPEG, PNG, GIF, TIFF y BMP
- no es necesario un plugin por separado que convierta las imágenes a AVIF o WebP, las imágenes originales se convierten automáticamente a WebP o AVIF
- puntos de ruptura de tamaño ajustables al redimensionar las imágenes.
- posibilidad de desactivar la funcionalidad del plugin para usuarios que hayan iniciado sesión
- múltiples tipos de exclusiones disponibles, incluida una herramienta avanzada de comprobación de imágenes
- ajustes con modo fácil y avanzado con una variedad de ajustes para una mayor flexibilidad de la funcionalidad del plugin
¿Necesito una cuenta para probar este plugin?
No, simplemente instálalo y actívalo en tu web WordPress. Recibirás automáticamente 500 MB de tráfico de CDN cada mes. ¡Eso es alrededor de 500 visitas/mes!
¿Cuánto cuesta?
Al usar ShortPixel Adaptive Images, solo se cuenta tráfico de CDN si eliges usar nuestra CDN. Con el plan gratuito, obtienes 100 créditos para la optimización de imágenes, lo que equivale a 500 MB de tráfico de CDN o unas 500 visitas/mes. Los planes de pago comienzan a partir de $4.99 y están disponibles en planes de un solo uso y de pago. Aún mejor, si ya usas ShortPixel Image Optimizer, ¡puedes usar los mismos créditos con ShortPixel Adaptive Images!
¿Cómo funciona?
Diferentes visitantes tienen diferentes dispositivos (portátil, móvil, tablet), cada uno con su propia resolución de pantalla. ShortPixel AI tiene en cuenta la resolución del dispositivo y proporciona el tamaño de imagen correcto para cada marcador de posición. Tomemos una página web con una sola imagen de 640×480 píxeles. Cuando se ve desde un portátil, la imagen conserva su tamaño de 640 × 480 píxeles, pero está optimizada y se sirve desde nuestra CDN. Cuando la misma página web se ve desde un móvil, la imagen (por ejemplo) se redimensiona a 300×225 píxeles, se optimiza y se sirve a través de nuestra CDN. De esta manera, no se desperdicia tiempo ni ancho de banda para los visitantes.
Otros plugins de ShortPixel:
- Caché FastPixel – La optimización de WP más fácil
- ShortPixel Image Optimizer – Optimización & compresión de todas las imágenes de tu web, incluída la entrega de WebP & AVIF
- Enable Media Replace – Reemplaza fácilmente imágenes o archivos en la biblioteca de medios
- reGenerate Thumbnails Advanced – Regenera miniaturas fácilmente
- Resize Image After Upload – Cambia automáticamente el tamaño de cada imagen subida
- WP SVG Images – Subida segura de archivos SVG a la biblioteca de medios
¡Contáctanos!
- Email https://shortpixel.com/contact
- Twitter https://twitter.com/shortpixel
Comandos de WP CLI
Usa los siguientes comandos de WP CLI para vaciar la caché de CSS y los marcadores de posición de imágenes de baja calidad (LQIP): wp shortpixel clear_css wp shortpixel clear_lqips
Para desarrolladores
Si hay imágenes principales en la biblioteca de medios que acaban con el sufijo de tamaño de miniatura normal, (p. ej. -100×100), por favor, añade esto en wp-config.php:
define('SPAI_FILENAME_RESOLUTION_UNSAFE', true);
Si necesitas realizar un post-procesamiento en JavaScript después de que ShortPixel AI actualice la imagen/etiqueta, puedes añadir un callback así:
jQuery( document ).ready(function() {
ShortPixelAI.registerCallback('element-updated', function(elm){
// elm is the jQuery object, elm[0] is the tag
console.log("element updated: " + elm.prop('nodeName'));
});
});
Para cambiar la URL original de la imagen, que es detectada por ShortPixel, usa este filtro que recibe la URL original:
add_filter('shortpixel/ai/originalUrl', 'my_function');
A veces, cuando la opción de recortar las imágenes está activa, SPAI cree que no es seguro recortar una imagen, pero quieres recortarla de todos modos. Añade este atributo para forzar el recorte, por favor:
<img data-spai-crop="true" ....
ShortPixel Adaptive Images dispara un evento de JS después del procesamiento inicial de la página HTML en el navegador: spai-body-handled, un evento después de cada mutación DOM procesada cuando al menos una URL ha sido reemplazada: spai-block-handled, y un evento después de que la URL de cada elemento se actualiza diferidamente (al entrar en la ventana): spai-element-handled
Para excluir ciertas imágenes, también puedes añadir los siguientes atributos dentro de la etiqueta ‘IMG’ al marcado:
<img data-spai-excluded="true" ...> --> this will completely exclude from processing the image which has this attribute;
<img data-spai-eager="true" ...> --> this will exclude the image from being lazy-loaded by the plugin;
<img data-spai-noresize="true" ...> --> this will prevent the image from being resized by the plugin.
Para añadir reglas de reemplazo personalizadas, usa:
add_filter('shortpixel/ai/customRules', 'my_function');
A la función se le pasa un array, y debe añadir a ese array elementos con la siguiente estructura: [‘tagName’, ‘attrToBeChecked’, ‘classFilter’, ‘attributeFilter’, false(reserved), ‘attributeValueFilter’, isEager(bool)]. A partir de la versión 3.0, también puedes añadir instancias de ShortPixel\AI\TagRule, algo así. Ejemplo real de atributos de imagen personalizados, un srcset personalizado y un atributo de datos JSON personalizado:
add_filter('shortpixel/ai/customRules', 'spai_to_iconic');
function spai_to_iconic($regexItems) {
//lazy-loaded data-iconic-woothumbs-src attribute
$regexItems[] = new ShortPixel\AI\TagRule('img', 'data-iconic-woothumbs-src');
//eager attribute
$regexItems[] = new ShortPixel\AI\TagRule('img', 'data-large_image', false, false, false, false, true);
//lazy srcset style attribute.
$regexItems[] = new ShortPixel\AI\TagRule('img', 'srcset', false, false, false, false, false,
'srcset', 'replace_custom_srcset');
$regexItems[] = new ShortPixel\AI\TagRule('div', 'data-default', 'iconic-woothumbs-all-images-wrap', false, false, false, false,
'srcset', 'replace_custom_json_attr');
return $regexItems;
}
Los parámetros de la regla son, en este orden: * tagName – el nombre de la etiqueta * atributo a reemplazar * classFilter – solo elementos que tengan la clase, por defecto false * attrFilter – solo elementos que tengan el atributo, por defecto false * attrValFilter solo elementos que tengan el atributo con el valor especificado, por defecto false * mergeAttr – uso avanzado (ver código), por defecto false * eager – si es true la imagen es reemplazada en el lado del servidor, si no, se carga diferidamente * type – uso avanzado (ver código), por defecto es «url», también puede ser «srcset» si tiene una estructura srcset o json * callback – uso avanzado (ver código), por defecto false. Tiene que ser «replace_custom_srcset» si el tipo es srcset o «replace_custom_json_attr» si el tipo es json * quickMatch – uso avanzado (ver código), por defecto falso * frontEager – uso avanzado (ver código), por defecto falso
De la misma manera, si necesitas que una regla se aplique solo en la portada (JavaScript), puedes usar el siguiente filtro:
add_filter('shortpixel/ai/customFrontendRules', 'my_function');
Esta regla solo la aplicará el nuevo motor de JS (por lo que debes tener la opción activada) y es útil si tienes contenido que se procesa mediante JavaScript y necesitas que se realice el reemplazo después de que se procese el contenido.