Review y tutorial de ShortPixel Adaptive Images

Ya vimos hace unos días el primer plugin de ShortPixel, ShortPixel Image Optimizer, un magnífico plugin que te permite optimizar tus imágenes, con lo que puedes subir cualquier imagen, del tamaño que sea, y el plugin te la optimizará para que la velocidad de tu web aumente.

Resulta que la misma compañía tiene otro plugin, enfocado de manera ligeramente diferente, que dependiendo de tus necesidades, te irá mejor. Estamos hablando de ShortPixel Adaptive Images (SPAI): un plugin extremadamente fácil de usar que te resuelve, en cuestión de un par de clics, todos los errores relacionados con imágenes que te da GTmetrix o Google PageSpeed Insights. Eso significa que tu SEO aumentará y la velocidad de carga de tu web también. Y aquí te traigo una completa review de Shortpixel Adaptive Images 🙂

¿Qué hace ShortPixel Adaptive Images?

Podríamos resumirlo en 4 puntos:

  1. Sirve tus imágenes desde una CDN: ShortPixel Adaptive Images coge todas las imágenes de la página en concreto que el usuario está cargando y las sirve desde su CDN. ¿Qué es una CDN? Es una Red de distribución de contenidos, en inglés. En palabras sencillas, son muchos servidores distribuidos alrededor del mundo que contienen copias de tu web. Así, tanto el usuario que entre desde Japón, como el que entre desde Finlandia, tendrán buenos tiempos de carga. Al cargar las imágenes desde la CDN de ShortPixel, lo que estás haciendo es aumentar la velocidad de carga de la página (ya que muy probablemente esa CDN cargue más rápido que tu hosting, además de tener servidores en todo el mundo) y ahorrarte algunos recursos en tu servidor, al no tener que cargar desde allí sino desde la CDN de ShortPixel. ¿Cómo hace SPAI para servir las imágenes desde su CDN? Simplemente reemplazando las URL de las imágenes en tus páginas. Por ejemplo, la dirección de la siguiente imagen:

    http://ejemplo.com/wp-content/uploads/2019/07/600×400.jpg

    será reemplazada por está URL:

    https://cdn.shortpixel.ai/spai/w_600+q_lossless+ret_img+to_webp/http://ejemplo.com/wp-content/uploads/2019/07/600×400.jpg

    SPAI no toca el fichero original, de hecho seguirá estando disponible desde la URL original. Simplemente modifica las URL del código de cada página.

  2. Optimiza tus imágenes: las imágenes que se sirven desde la CDN de ShortPixel están optimizadas usando el mismo algoritmo que SPIO utiliza. Puedes ver cómo optimiza ShortPixel las imágenes en mi otra review.
  3. Sirve imágenes adaptativas: de ahí viene el nombre del plugin. Imagina que subes una imagen y la pones a pantalla completa en una página. El usuario que visite tu página desde un smartphone, no necesitará ver la imagen en el mismo tamaño que un usuario que entre desde un ordenador. De eso se encarga el plugin, de servir las imágenes en el tamaño exacto que el dispositivo está pidiendo. ¿Alguna vez has usado GTmetrix y te ha salido el error Serve scaled images? Se está quejando precisamente de esto. ShortPixel Adaptive Images acaba de un plumazo con este mensaje.
    Mensaje Serve scaled images en GTmetrix
  4. Sirve las imágenes en formato WebP automáticamente (si quieres): el formato WebP emplea un algoritmo de compresión más eficiente. Esto hace que los tamaños de archivo de las imágenes en la web sean significativamente más pequeños que un JPEG o PNG, y además mantiene la calidad. Hoy en día, se podría decir que todos los navegadores soportan WebP, a excepción de Safari. ShortPixel Adaptive Images tiene una opción que te permite decidir si quieres que las imágenes se sirvan en formato WebP o no.

Instalación y configuración de ShortPixel Adaptive Images

Instalación

Este es el paso más sencillo, se instala como cualquier otro plugin. Esta es su página: ShortPixel Adaptive Images – WordPress.org

Configuración

En teoría, el plugin puede usarse tal cual sin cambiar ningún ajuste. De todas formas, estos son todos sus ajustes cuando vamos a Ajustes > ShortPixel AI. Empezamos por la pestaña General.

  • Nivel de compresión: aquí podremos escoger qué nivel de compresión queremos que nuestras imágenes tengan.
    • Con pérdida (lossy en inglés): esta es la mejor opción para el 95% de los usuarios. Las imágenes se optimizan al máximo, y la calidad de la imagen se resiente solo un poco; hay que fijarse mucho para notarlo. Por lo tanto, si la velocidad de tu sitio es primordial y quieres el mejor equilibrio entre optimización y calidad de imagen, esta es la opción recomendada.
    • Glossy: es la mejor opción si aún te importa Google Insights pero crees que una ligera pérdida de velocidad en tu sitio es un compromiso aceptable para una calidad de imagen de primera clase.
    • Sin pérdida (lossless en inglés): las imágenes resultantes son idénticas a las originales (cada píxel es igual que el original), pero ofrecen una reducción de tamaño menor en comparación con los otros dos tipos de compresión. Si quieres que tus imágenes permanezcan intactas, selecciona esta opción.
  • Soporte WebP: el formato WebP es un formato de imagen creado por Google que da excelentes resultados de compresión sin apenas perder calidad de imagen. Un ejemplo rápido cogiendo una foto cualquiera de internet y usando un conversor online de JPG a WebP: pasamos de 1.05 MiB a 344 KiB, ¡una reducción de un 67.93% y la calidad de imagen es virtualmente idéntica!
    Conversión de JPG a WebP - resultados
    Marcando esta opción le decimos a SPAI que la imagen que se sirva desde su CDN sea en formato .webp siempre y cuando el navegador sea compatible.
  • Efecto de aparición gradual: para poder funcionar correctamente, ShortPixel Adaptive Images carga las imágenes de manera diferida. Es lo que se conoce como lazy-loading en inglés; las imágenes se van cargando a medida que van apareciendo en la pantalla del usuario. Esto es sobretodo bueno para la velocidad de carga, ya que no se tendrán que cargar todas las imágenes de una sola vez, sino a medida que el usuario va haciendo scroll.Además, para que las imágenes no aparezcan de golpe al cargarse, el plugin aplica un efecto de aparición gradual (fade-in en inglés). Por tanto, esta opción desactiva este efecto. Es útil si experimentas problemas con las imágenes que se amplían al pasar el cursor o tienen otros efectos especiales.
  • Recorte inteligente: esta opción, desactivada por defecto, se usa para que SPAI recorte las imágenes «de forma inteligente», detectando los casos en los que no se muestra toda la imagen y recortándola en consecuencia. Normalmente no lo necesitarás, pero puedes probar en caso de que alguna imagen no se vea bien.
  • Eliminar EXIF: al igual que en ShortPixel Image Optimizer, este plugin te permite eliminar la información «extra» que lleve la imagen, como por ejemplo la ubicación, el autor, el modelo de la cámara… Esta información normalmente no es necesario y te ayuda a rebajar un poco el peso de la imagen. Recomendado marcarla.

Luego, en la pestaña Avanzado las cosas se ponen más interesantes.

  • URL de la API: yo te recomiendo que no lo toques, para así usar la CDN que ShortPixel te proporcione, que funciona de maravilla. Aun así, ¿quieres usar tu propia CDN en vez de la que te proporciona ShortPixel? Puedes hacerlo. Tienes que seguir 2 pasos:
    1. Edita tus registros DNS en tu CDN y añade un registro CNAME que vaya desde cdn.ejemplo.com a no-cdn.shortpixel.ai (reemplaza «ejemplo» por tu dominio actual).
    2. De vuelta a las opciones de ShortPixel AI, cambia la URL de la API a https://cdn.ejemplo.com/spai
      URL de la API personalizada en los ajustes de SPAI
  • Método de reemplazo: depende de la web, un método funcionará mejor que otro. Normalmente el primero (SRC) deberá funcionar bien, aunque si tienes imágenes que cambian dinámicamente de tamaño y SRC causa problemas, prueba con SRCSET.
  • Fondos con carga diferida: Esto hará que los fondos en bloques <style> se carguen después de que se determine el ancho del dispositivo. Lo que se conoce como lazy-load. Por defecto, ShortPixel AI solo lo hace para las imágenes que no son fondos, pero aquí puedes cambiar esto. También aplicará un ancho máximo de los fondos igual al ancho de la ventana.
  • Ancho máximo de fondos: Como dice la descripción de esta opción, úsalo para reescalar los fondos enormes que no se cargan de manera diferida. El valor recomendado es 1920px.
  • Selectores excluidos: aquí puedes excluir las imágenes que no quieras que se procesen por ShortPixel Adaptive Images. Importante: aquí solo puedes introducir selectores de imágenes, no URLs. Un selector de una imagen puede ser por ejemplo .clasedeimagen
    SPAI - Opción para excluir selectores de imagen
  • URLs excluidas: lo mismo que antes pero ahora puedes excluir URLs completas. Importante: tendrás que excluirlas usando reglas de exclusión. Una regla de exclusión empieza por path: o por regex:. En la descripción del ajuste encontrarás más información respecto a como usar estas reglas de exclusión.
    SPAI - Opción para excluir URLs de la optimización

Precios y planes

De manera diferente a ShortPixel Image Optimizer, los créditos para usar ShortPixel Adaptive Images funcionan de la siguiente manera.

Para procesar una imagen, se utiliza un crédito (o llamada de API). El procesamiento de una imagen significa, como ya hemos dicho antes, que se recorta inteligentemente (si se elige), se cambia de tamaño y se optimiza. Una vez que se procesa la imagen, se almacena durante 30 días en los servidores de ShortPixel y se puede servir, a través de su CDN, un número ilimitado de veces durante estos 30 días. Una vez que hayan transcurrido 30 días desde que la imagen se procesó por primera vez, se eliminará de sus servidores y se usará un nuevo crédito para procesarla nuevamente.
Pongamos un ejemplo de una web con una sola página y un total de 20 imágenes. Los visitantes vienen de 3 diferentes tipos de dispositivos con 3 diferentes viewports, por tanto se usarán 3 diferentes tamaños de imagen para cada una de las 20 imágenes. Un total de 60 créditos se usarán durante ese mes, y no hará falta comprar ningún plan de créditos adicional.

En caso que sí necesites más créditos, los planes de créditos que se ofrecen, y que puedes encontrar en su web, son…

Planes mensuales

  • Gratis: 100 créditos al mes
  • Corto ($4.99/mes): 5000 créditos al mes + soporte prioritario
  • Largo ($9.99/mes): 12000 créditos al mes + soporte prioritario
  • XXL ($29.99/mes): 55000 créditos al mes + soporte prioritario

Planes de un solo uso

Esto es como una tarjeta prepago de un móvil, pagas una cantidad puntual y te dan X créditos para gastarlos cuando quieras. Aquí te dan en todos los casos soporte prioritario.

  • 10K: 10000 créditos por $9.99
  • 30K: 30000 créditos por $19.99
  • 50K: 50000 créditos por $29.99
  • 170K: 170000 créditos por $99

Servidores dedicados

Y para los usuarios «hardcore» de verdad, ShortPixel también ofrece servidores dedicados a partir de $350 al mes. En este caso habrá que contactarles antes de hacer la compra. Más información aquí.

¿Vale la pena?

Teniendo en cuenta que lo más pesado de una web siempre son las imágenes y que cada segundo extra que la web está cargando son usuarios perdidos, sí que vale la pena.

Sobretodo teniendo en cuenta que este plugin es instalar y olvidar, y en caso que quieras volver a tus imágenes originales, lo desinstalas y ya está.

Además, viene traducido al español (por mí :D) y después de haber charlado con su soporte puedo confirmar que son muy amables y serviciales. Y otra cosa que yo valoro mucho como diseñador, es el hecho de que sigue los estilos de WordPress, es decir, su panel de control no está diseñado de una forma totalmente distinta como hacen otros plugins.

Un plugin muy recomendable que ayuda a mejorar la velocidad de la web y por consiguiente, a subir tu posición en Google y aumentar tus visitas, y si además lo combinas con un hosting de buena calidad como SiteGround, vas a obtener muy buenos resultados.

¡Espero que este tutorial / review de ShortPixel Adaptive Images te haya ayudado a aumentar la velocidad de tu web!

¿Te ha gustado esta entrada? ¡Compártela!

3 comentarios

  1. Gracias! Me has ayudado!

  2. Hola, gracias, lo he instalado y me hace interferencia con elementor pro en algunos diseños, pop up… sabes si se puede evitar? o no se pueden utilizar juntos?

    Gracias

    • Hola Carolina, ¿a qué te refieres con que te hace interferencia? En teoría deben poder utilizarse juntos.

Los comentarios están cerrados.