ShortPixel Adaptive Images

Descripción

Un plugin fácil de usar que puede ayudarte a resolver en cuestión de minutos todos los problemas relacionados con las imágenes de tu web.

Muestra imágenes con un tamaño adecuado, recortadas de manera inteligente y optimizadas en tu web. Las imágenes se procesan sobre la marcha y se sirven desde nuestra CDN, en el formato de nueva generación WebP y AVIF, si el navegador es compatible.

¿Necesito este plugin?

Si tienes una web en WordPress con imágenes, entonces la respuesta es: ¡lo más probable es que sí!
¿Alguna vez has probado tu web con herramientas como PageSpeed Insights o GTmetrix y has recibido quejas sobre imágenes que no tienen el tamaño adecuado o que son demasiado grandes? ¿O que deberías usar imágenes «next-gen» como WebP? ¿O que la web debería «diferir las imágenes fuera de pantalla»?
ShortPixel Adaptive Images viene al rescate y te resuelve los problemas relacionados con las imágenes de tu sitio en muy poco tiempo.

¿Qué beneficios tiene?

Imagina que pudieras resolver todos tus problemas relacionados con imágenes de tu web con un simple clic, ¿no sería genial?
Normalmente, las imágenes son el recurso más grande en una página web. Con solo un clic, ShortPixel Adaptive Images reemplaza todas las imágenes de tu web con imágenes redimensionadas, recortadas de manera inteligente y optimizadas correctamente y las descarga desde la CDN global de ShortPixel.
Y para que Google te aprecie más, ¡el plugin sirve imágenes WebP y AVIF a los navegadores adecuados de forma y automática y mágica!

¿Qué características tiene?

  • nuevo y ligero motor de imágenes adaptativas de JavaScript puro (ya no se requiere jQuery) a partir de la versión 3
  • la misma calidad visual pero imágenes más pequeñas gracias a los algoritmos de ShortPixel
  • recortado inteligente – ver un ejemplo
  • sirve solo imágenes del tamaño adecuado en función de la ventana de visualización 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 en navegadores que son compatibles con este formato. ¡GIFs animados también!
  • caching and serving from a global CDN for images, as well as CSS, JS and fonts
  • todas las galerías de imágenes principales, carrusels y maquetadores de páginas son compatibles
  • asistente de iniciación que incluye una herramienta que sugiere la mejor configuración para cada sitio
  • Compatible con marcadores de posición de imágenes de baja calidad (LQIP)
  • compatibilidad para JPEG, PNG, GIF, TIFF y BMP
  • convierte a WebP y AVIF sobre la marcha
  • adjustable size breakpoints when resizing images
  • posibilidad de desactivar la funcionalidad del plugin para usuarios que hayan iniciado sesión
  • variedad de ajustes para una mayor flexibilidad en la funcionalidad del plugin

¿Necesito una cuenta para probar este plugin?

No, simplemente continúa e instálalo y luego actívalo en tu web WordPress y recibirás automáticamente 500 créditos de optimización de imágenes, lo que equivale a 2.5 GB de tráfico CDN, ¡o aproximadamente 2500 visitas!

¿Cuánto cuesta?

Al usar ShortPixel Adaptive Images, solo se cuenta el tráfico de CDN, si eliges usar nuestra CDN. El plan gratuito tiene 100 créditos de optimización de imagen, lo que equivale a 500 MB de tráfico CDN, o aproximadamente 500 visitas. Los planes de pago empiezan a partir de $4.99 y ambos planes de un solo uso y mensuales están disponibles.
Aún mejor: si ya estás usando ShortPixel Image Optimizer, ¡entonces puedes usar los mismos créditos con ShortPixel Adaptive Images!

¿Cómo funciona?

Diferentes visitantes tienen diferentes dispositivos (portátil, teléfono móvil, tablet), cada uno con su propia resolución de pantalla. ShortPixel AI tiene en cuenta la resolución del dispositivo y luego sirve la imagen del tamaño correcto para cada marcador de posición.
Consideremos una página web con una sola imagen de 640×480 píxeles.
Cuando se ve desde un portátil, la imagen conservará su tamaño de 640x480px, pero se optimizará y se servirá desde una CDN.
Cuando la misma página web se ve desde un teléfono móvil, la imagen se redimensionará a 300x225px (por ejemplo), se optimizará y se servirá desde la CDN.
De esta manera, los visitantes no desperdiciarán ni tiempo ni ancho de banda.
Ten en cuenta que la primera vez que se realice la llamada para una imagen específica a nuestros servidores, la imagen original se servirá temporalmente.

Otros plugins de 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 en la biblioteca de medios hay imágenes principales que acaban con el sufijo normal para miniaturas (e.g. -100×100), por favor, escribe esto en el 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 recibo 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, si se reemplazó al menos una URL: spai-block-handled y un evento después de que se reemplace la URL de cada elemento de manera diferida (entrando en la ventana gráfica): spai-element-handled

Para excluir imágenes específicas, también puedes añadir los siguientes atributos al marcado, dentro de la etiqueta IMG:

    <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');

La función recibirá un array y debe añadirse a ese array elementos con la siguiente estructura: [‘tagName’, ‘attrToBeChecked’, ‘classFilter’, ‘attributeFilter’, false(reserved), ‘attributeValueFilter’, isEager(bool)]. Desde la versión 3.0, también puedes añadir instancias ShortPixel\AI\TagRule
Un ejemplo de la vida real para 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) {
    $regexItems[] = array('img', 'data-iconic-woothumbs-src', false, false, false, false, true);
    $regexItems[] = array('img', 'data-large_image', false, false, false, false, true);
    $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;
}

Capturas

  • Sitio de ejemplo en PageSpeed Insights, antes: Low (baja)

  • Sitio de ejemplo en PageSpeed Insights, después: Good (buena)

  • Sitio de ejemplo en GTmetrix, antes: puntuación F

  • Sitio de ejemplo en GTmetrix, después: puntuación B

  • Página de ajustes principales

  • Página de ajustes avanzados

FAQ

¿Qué pasa cuando se supera la cuota?

En tu escritorio de WP se te avisará cuando tu cuota esté a punto de agotarse y también cuando se sobrepase. Cuando se agote la cuota, el plugin simplemente servirá las imágenes originales desde tu servidor, sin compresión ni cambio de tamaño, hasta que se restablezca la cuota.
Las imágenes que aún no estuvieran optimizadas se servirán directamente desde tu web.

¿Qué red de distribución de contenidos (CDN) usáis?

ShortPixel Adaptive Images usa bunny.net para servir las imágenes – una CDN con 54 puntos de presencia alrededor del mundo.
Tanto los planes gratuitos como los de pago utilizan la misma CDN con la misma cantidad de ubicaciones.
Puedes comprobar por ti mismo cómo se compara la CDN de bunny.net con otros proveedores de CDN aquí (internacional) y aquí (América del Norte).

¿Puedo usar una CDN diferente?

Por supuesto. Aquí puedes ver cómo configurarlo con Cloudflare y aquí tienes cómo configurarlo con STACKPATH. Ten en cuenta que al usar una CDN diferente, se contarán créditos de imagen en vez tráfico de CDN.
Si necesitas más ayuda, por favor, contáctanos

¿Qué pasa si desactivo el plugin?

Puedes dejar de usar SPAI cuando quieras, pero esto significa que tu sitio se volverá más lento de repente.
Básicamente, tu web volverá a las imágenes originales, sin optimizar, servidas desde tu servidor.

¿Hay diferentes niveles de optimización de imagen disponibles?

Sí, puedes comprimir imágenes con pérdida, glossy o sin pérdida.
Puedes encontrar más información sobre cada nivel de optimización aquí o puedes hacer algunas pruebas gratis para optimizar imágenes aquí

Ya utilizo ShortPixel Image Optimizer, ¿también puedo utilizar esto?

¡Desde luego!

What is the difference between this plugin and ShortPixel Image Optimizer?

Puedes ver aquí las diferencias entre los dos servicios.

¿Dónde puedo optimizar mis imágenes? No hay nada en mi panel de administración.

SPAI funciona de manera diferente a un optimizador de imágenes normal. Esto es lo que hace.

¿Cómo puedo asegurarme de que el plugin funciona bien?

Tienes más información acerca de esto aquí.

Quiero comenzar a usar el plugin, ¿qué debo hacer?

Las instrucciones exactas para esto están disponibles aquí.

Mis imágenes se redireccionan desde cdn.shortpixel.ai, ¿por qué?

Echa un vistazo a este artículo.

SPAI no está funcionando bien, tengo algunos problemas.

Por favor, comprueba las siguientes cosas:
1) Asegúrate de que tu dominio está asociado a tu cuenta;
2) Asegúrate de tener suficientes créditos disponibles en tu cuenta;
3) Echa un vistazo a este artículo;
4) Visita nuestra base de conocimientos.

Si nada parece funcionar, por favor, contáctanos.

Reseñas

30 de diciembre de 2021
Works like a charm plus super quick support team. Happy to be with them!
28 de diciembre de 2021
I've been using Short Pixel AI for a few months now, and it's helped me reach a perfect A/A score on GTMetrix and 99/100 on Google PageSpeed. I use it for all of my client projects now. On the couple of occasions I've needed to reach out to their support team, they've helped me resolve issues really quickly.
23 de noviembre de 2021
SPAI is great because it makes the page experience and the scores so much better. What I like is the number of options it gives for what types of images to optimize, serve, exclude, etc. And the support is just excellent.
Leer todas las 108 reseñas

Colaboradores y desarrolladores

«ShortPixel Adaptive Images» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«ShortPixel Adaptive Images» ha sido traducido a 2 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «ShortPixel Adaptive Images» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

3.2.0

Release date: December 22nd, 2021
* New: if the same image is present in different sizes on the same page, it will only be loaded once and reused;
* New: added data-spai-crop in the new AI Engine, which can override the crop settings for specific images where this attribute is present;
* New: when purging the caches in WP Rocket, Swift Performance and Litespeed Cache, the CSS served by SPAI will also be purged automatically;
* Tweak: the account status in settings now takes into account the billing cycles and correctly displays the traffic information;
* Tweak: the tool-tips in the Settings look better and are more visible;
* Compat: fixed various compatibility issues with Internet Explorer in the new AI Engine;
* Fix: regex exclusions weren’t properly working in some cases, with the new AI Engine;
* Fix: a fatal error was thrown in certain configurations when WP Rocket cache was purged;
* Fix: do not replace data:image inline placeholders that are not generated by SPAI;
* Fix: the special crop on background images wasn’t properly working for retina displays;
* Fix: the new AI will load the original image if no LQIP is available;
* Fix: loading original URL for backgrounds that also have for ex. background:transparent in styles;
* Fix: elements with other inline images as backgrounds added later to the document via mutations;
* Fix: some of the settings suggested by the automatic settings tool weren’t displayed correctly;
* Fix: background images having gradient an url() with no quotes on Chrome;
* Fix: the Image Checker Tool now works properly with backgrounds handled by the new AI Engine;
* Fix: issues with background-size: auto 100%;
* Fix: if the API key was incorrect in the on-boarding wizard, you couldn’t enter it again;
* Language: 16 new strings added, 4 updated, 0 fuzzed, and 12 obsoleted.

3.1.3

Release date: November 24th, 2021
* Fix: Instagram galleries and feeds should be working properly now;
* Fix: the special crop parameter was multiplying the original resolution of the image on retina displays;
* Fix: AVIF was still served in some cases, even if the option was disabled;
* Fix: serve the new AI JS from the custom domain/CDN, if the JS serving from CDN is enabled;
* Fix: file type options were hidden in the settings when only AVIF was active (no WebP);
* Fix: make no resize exclusions remain lazy;
* Fix: when there were HTML comments before the DOCTYPE declaration, SPAI wasn’t working properly;
* Language: 0 new strings added, 1 updated, 0 fuzzed, and 0 obsoleted.

3.1.2

Release date: November 17th, 2021
* Fix: added back the jQuery dependency for the old AI engine;
* Fix: PHP warning that was showing up in certain cases;
* Language: 0 new strings added, 0 updated, 0 fuzzed, and 0 obsoleted.

3.1.1

Release date: November 12th, 2021
* Fix: deactivate unintentionally left active logging;
* Fix: undefined notice about video-placeholder;
* Fix: various small fixes to the new AI engine’s JS processing;
* Language: 0 new strings added, 0 updated, 0 fuzzed, and 0 obsoleted.

3.1.0

Release date: November 11th, 2021
* New: added Size Breakpoints option for resizing images, especially useful when the images resize a lot on various screen sizes;
* New: the necessary headers are now automatically added when using Apache, in order to avoid CORS issues with the new AI engine;
* New: added font preload support for the CDN (when a CSS file is parsed, the fonts will already be prepared for the CDN);
* New: added separate options for WebP and AVIF, for more control on these settings;
* New: added tooltips for the plugin settings for an easier understanding;
* Compat: added compatibility with the Agile Store Locator plugin;
* Compat: the placeholder image that WP Rocket uses for YouTube embeds is now automatically excluded from being processed;
* Fix: the plugin upgrade notice mechanism wasn’t working anymore;
* Fix: the parsing works now in <style> blocks when the background-image is added right after the {;
* Fix: the image dimensions are now properly retrieved from SVG files, when they have it defined either as viewBox or as width and height;
* Fix: LQIP’s were always displayed when using the new AI Engine, even if the option was disabled;
* Language: 18 new strings added, 0 updated, 0 fuzzed, and 6 obsoleted.

3.0.0

Release date: October 14th, 2021
* New: the new Adaptive Images engine (pure JavaScript based, no jQuery required) can now be enabled from the Behavior tab in Settings -> ShortPixel AI;
* New: option to serve the local JS files from the CDN;
* New: local fonts are now served as well from the CDN, when referred from parsed CSS files;
* Tweak: re-enabled the automatic delivery of AVIF for supporting browsers;
* Tweak: various re-wording and spelling corrections throughout the entire plugin strings;
* Tweak: the plugin is now fully tested with PHP8;
* Tweak: removed the option to revert to the 1.8.x settings upon deactivation;
* Fix: fixed various issues with different integrations (caching plugins, galleries etc.);
* Fix: when deactivating the delivery of next-generation images for certain image types, the entire option was wrongly deactivated;
* Language: 18 new strings added, 51 updated, 0 fuzzed, and 12 obsoleted.

2.3.3

Fecha de lanzamiento: 30 de junio de 2021
* Corrección: problema al validar la clave de API
* Idioma – 0 nuevas cadenas añadidas, 0 actualizadas, 0 confusas y 0 obsoletas

2.3.2

Fecha de lanzamiento: 29 de junio de 2021
* Desactiva temporalmente la corrección de errores del códec pendiente de AVIF (https://github.com/xiph/rav1e/issues/2757)
* Idioma: 0 nuevas cadenas añadidas, 0 actualizadas, 0 confusas y 0 obsoletas.

2.3.1

Fecha de lanzamiento: 28 de junio de 2021
* Nuevo: versione el javascript en el nombre del archivo para evitar cachés más rebeldes
* Solución: no analice las respuestas AJAX a las cargas.
* Solución: elemento anidado que tiene un fondo diferente: estaba tomando el fondo del elemento principal.
* Corregir el aviso en los registros a veces cuando la información del dominio del servidor
* Idioma: 0 cadenas nuevas agregadas, 0 actualizadas, 0 borradas y 0 obsoletas.

Fecha de lanzamiento: 28 de junio de 2021
* Nuevo: versiona el JavaScript en el nombre del archivo para evitar las cachés más rebeldes
* Corrección: no analiza las respuestas AJAX a las subidas.
* Corrección: elemento anidado que tiene un fondo diferente: estaba tomando el fondo del elemento principal.
* Corrección: aviso en los registros a veces cuando la información del dominio del servidor
* Idioma: 0 cadenas nuevas añadidas, 0 actualizadas, 0 confusas y 0 obsoletas.

2.3.0

Release date: June 17th, 2021
* New: images (including the ones from CSS files) are now served automatically in the new AVIF format to supporting browsers;
* New: moved the JS detection mechanism for WebP/AVIF support directly to the CDN level, so no JS is required anymore for this;
* Language: 0 new strings added, 6 updated, 0 fuzzed, and 0 obsoleted.

2.2.4

Release date: June 14th, 2021
* Compat: added a constant – SPAI_ELEMENTOR_WORKAROUND – to deactivate the parsing of Elementor modules that are resulting in critical errors;
* Compat: workaround for WP Rocket that calls in certain circumstances the filter rocket_css_content with only one parameter;
* Fix: some warnings when lqip queue is not array were showing up in some cases;
* Fix: wrong array key when the no background calculation can’t determine crop size and returns just width and height;
* Fix: iPhone issues with parsing stylesheets while also improving page responsiveness while parsing them (async);
* Language: 0 new strings added, 0 updated, 0 fuzzed, and 0 obsoleted.

2.2.3

Release date: May 18th, 2021
* New: also parse inside <script type="text/template"> blocks;
* Fix: the background crop resize wasn’t working in several cases, which is now fixed;
* Fix: update the notification text about the next generation images served by SPIO;
* Fix: cases when a mutation has backgrounds from an existing CSS block are now properly handled;
* Fix: the special crop feature now handles correctly the situations when the width parameter isn’t the first one;
* Fix: the inline background selector will handle situations with no space before the CSS class definition;
* Fix: remove the default values for JS parameters in order to support IE11;
* Fix: the images from li elements added with data-thumb are now replaced;
* Fix: the URL exclusions are checked when replacing inside JS blocks too;
* Language: 0 new strings added, 2 updated, 0 fuzzed, and 0 obsoleted.

2.2.2

Release date: April 29th, 2021
* Fix: the minified version of the plugin CSS files was bigger than the not minified one;
* Fix: find local file when URL contains a path element before wp-content, that is not present on disk;
* Language: 0 new strings added, 0 updated, 0 fuzzed, and 0 obsoleted.

2.2.1

Fecha de lanzamiento: 26 de abril de 2021
* Compatibilidad: añadida integración con Real3D Flipbook;
* Corrección: había un error «Class not found» en algunos casos cuando se vaciaba la caché de LiteSpeed desde nuestro plugin;
* Corrección: en algunos casos, el tamaño de las imágenes de fondo no se establecía correctamente;
* Corrección: protección añadida para un gran número de variaciones de productos; el plugin ahora funcionará correctamente en estos casos;
* Idioma: 0 nuevas cadenas añadidas, 0 actualizadas, 0 confusas y 0 obsoletas.

2.2.0

Release date: April 20th, 2021
* New: added filter shortpixel/ai/customRules for custom replacement rules;
* New: added proper lazy loading for background images;
* New: take into account the background-* CSS styles: size, position, etc.;
* New: lazy load the images in the CSS blocks;
* New: handle correctly multiple URLs in the same background-image: declaration;
* New: when running out of credits you can now have an option to top-up directly from the plugin settings;
* Compat: added an integration with the Uncode theme and its iLightBox component;
* Compat: added integration with WPC Variations Table;
* Compat: added integration with Soliloquy Slider Plugin;
* Compat: also integrate properly with Divi child themes;
* Compat: improved the integration with Elementor, all images should now be properly replaced;
* Fix: WooCommerce product variations were broken if srcset was present, but false;
* Fix: in certain cases, background images with important CSS priority weren’t properly handled;
* Fix: also remove the sizes attribute if we remove the srcset;
* Fix: replacement error when html attribute contains «..» data;
* Fix: various small fixes to settings, fonts, debug messages, ShortPixel account login and lazy loading;
* Language: 7 new strings added, 2 updated, 0 fuzzed, and 3 obsoleted.

EARLIER VERSIONS

  • por favor, consulta el archivo changelog.txt dentro del archivo del plugin.