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?

  • new, lightweight, pure JavaScript Adaptive Images engine (jQuery not required anymore) starting with version 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!
  • cacheado y servicio desde una CDN global
  • 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
  • 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

In order to exclude specific images, you can also add the following attributes to the markup, inside the IMG tag:

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

The function will receive an array and should append to that array elements with the following structure: [‘tagName’, ‘attrToBeChecked’, ‘classFilter’, ‘attributeFilter’, false(reserved), ‘attributeValueFilter’, isEager(bool)]. Starting 3.0, you can also append ShortPixel\AI\TagRule instances
A real-life example for custom image attributes, a custom srcset and a custom JSON data attribute:

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!

¿Qué diferencia hay entre este plugin y 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

15 de octubre de 2021
Keep it up guys, this plugin has only been getting better. I noticed a big difference, especially in the last major update. Many thanks
24 de septiembre de 2021
Not only are the tools they provide fantastic, their support is also second to none. Their highly responsive and super friendly support team make everything a breeze. Thank you!
27 de agosto de 2021
I've been using this for about 2 years now on all my websites and it helps a lot with the images so that I don't have to worry about it. Affordable and sometimes free if you have a small website so that's a great point. I've only had to contact support maybe twice one with questions and one to change billing, and both times they are very quick to respond and get me the information I need. Highly Rated!
16 de agosto de 2021
I haven't used this plugin enough to provide a detailed review, but I would like to give it 5 stars because of the great support I received from the questions I had and the issues I experienced when setting up the plugin.
Leer todas las 102 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 1 idioma local. 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.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.