Review y tutorial de ShortPixel

Logo de ShortPixel

Hoy vamos a hablar y a hacer una review de ShortPixel, uno de los mejores plugins (¿plúguines?) de optimización de imágenes que hay para WordPress, para poder ahorrar algo de nuestro preciado espacio en disco del alojamiento web que estamos pagando.

¿De dónde viene ShortPixel?

ShortPixel nació en Rumanía, hace ya unos años, en 2014. La compañía, operada por 3 chicos, empezó ofreciendo una API para que cualquiera pudiera usarla. Es decir, cualquiera con un poco de conocimiento de código podía mandar una foto a los servidores de ShortPixel y recibirla de nuevo bien reducida de tamaño sin perder apenas calidad. Pero enseguida vieron que no era demasiado cómodo para los usuarios. Es por eso que de ahí crearon el plugin para WordPress, lo que verdaderamente les dio el éxito.

Hoy en día, ShortPixel ya está instalado en más de 100000 webs, y es una de las primera opciones que todo el mundo recomienda en cuanto se trata de optimizar imágenes.

Características de ShortPixel

  • Traducido al español
  • Comprime JPG, PNG, GIF y PDF
  • Sin límite de tamaño
  • Crea versiones WebP de tus imágenes gratuitamente
  • Soporte 24/7
  • Restauración de imágenes en un solo clic
  • Compatible con WPML
  • 100 créditos gratuitos al mes (1 crédito = 1 imagen o miniatura de imagen (thumbnail en inglés) optimizada)
  • Y mucho más

Instalando ShortPixel

Para instalar ShortPixel se hace como cualquier otro plugin. Uno va al repositorio de plugins de WordPress y lo busca. Aquí está el enlace: https://wordpress.org/plugins/shortpixel-image-optimiser/

Una vez instalado, lo primero que veremos será esto:

Validar la API en ShortPixel

Si ya tenemos una clave de API porque ya hemos comprado algún plan, la podemos poner en la segunda casilla. Si no, ponemos nuestro email en la primera casilla, le damos al botón de Solicitar Clave y automáticamente iremos al menú de configuración y recibiremos un correo electrónico con nuestra clave de API (por si la queremos guardar) y nuestra contraseña de nuestra cuenta de ShortPixel.

Configuración de ShortPixel

En los ajustes de ShortPixel nos encontramos con 4 pestañas. Vamos a ver con detalle cada una de las opciones

General

Clave de API

Este es simple, un campo de texto para introducir nuestra clave de API, que por cierto, se puede compartir entre varios sitios web. Veremos que ya se encuentra lleno si hemos puesto la clave de API en la instalación.

Tipo de compresión

Tipos de compresión de ShortPixel

Aquí escogemos el tipo de compresión que queremos para la imagen. Cada uno funciona de manera diferente:

  • 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.

Si tienes dudas, siempre puedes hacer pruebas en la web de ShortPixel: https://shortpixel.com/online-image-compression

Incluir también miniaturas

En WordPress, por cada imagen se generan un número determinado de miniaturas, que son versiones más pequeñas de la imagen original. Estas miniaturas vendrán determinadas por los plugins que uses, el tema que uses y los ajustes de WordPress (en Ajustes > Medios). Normalmente, por cada imagen tendremos entre 5 y 15 miniaturas, aunque depende de la web podrás tener más o menos.

Este ajuste, por tanto, activa o desactiva la optimización de las miniaturas existentes, que recordemos que ShortPixel las cuenta, por lo que cada imagen en nuestra web en realidad descontará X créditos de nuestra cuenta de ShortPixel, donde X es igual a la imagen original + las miniaturas de la imagen.

Copia de seguridad de la imagen

Si esta casilla está marcada, se guardará una copia de la imagen original como «copia de seguridad» por si la quieres restaurar más adelante. Yo te recomiendo marcarla siempre y cuando tengas suficiente espacio en disco en tu alojamiento web, ya que técnicamente estaremos creando más archivos (la imagen original y sus miniaturas + la imagen original optimizada + las miniaturas optimizadas).

Eliminar EXIF

Cuando una cámara hace una foto, esa foto va a llevar unos cuantos datos incrustados (y obviamente invisibles) tipo a qué hora se hizo la foto, datos GPS, modelo de cámara… Un usuario normal no necesita todo eso al subir la imagen a la web, así que lo recomendado es marcar la casilla para ahorrar un poco más de espacio.

Redimensionar imágenes grandes

Otra herramienta muy útil es la de redimensionar las imágenes al momento de subirlas. Hoy en día, con el puñado de megapíxeles que tienen las cámaras, cada imagen es normalmente gigantesca. Por ejemplo, cualquier cámara de móvil va a tener como mínimo 8 megapíxeles, y eso son fotos de 3264 píxeles de ancho y 2468 píxeles de alto, lo cual es muy grande. Para nuestra web no las necesitaremos tan grandes (normalmente).

Así que vamos a marcar la casilla y vamos a poner unos valores en las casillas. Por ejemplo, 1200 x 1024:

Ajuste de redimensionado de imágenes de ShortPixel

Y vemos dos imágenes. ¿Qué son? Teniendo en cuenta que ShortPixel nunca cortará las imágenes y solo les cambiará el tamaño:

  1. Si marcamos la primera, ShortPixel se fijará en el lado más pequeño de la imagen y lo reducirá al valor establecido arriba. Por ejemplo, si ponemos 1200 x 1024, una imagen de 2000 x 3000 cambiará de tamaño a 1200 x 1800, mientras que una imagen de 3000 x 2000 cambiará de tamaño a 1536 x 1024.
  2. Si marcamos la segunda opción, ShortPixel cogerá el lado más grande de la imagen y lo reducirá al valor establecido arriba. Por ejemplo, si ponemos 1200 x 1024, una imagen de 2000 x 3000 cambiará de tamaño a 683 x 1024, mientras que una imagen de 3000 x 2000 cambiará de tamaño a 1200 x 800.

Avanzado

Carpetas adicionales de medios

En WordPress, la carpeta por defecto donde se almacenan todos los medios está en wp-content/uploads. ShortPixel optimiza esta carpeta automáticamente, pero ¿qué pasa si, por la razón que sea, tu instalación WordPress tiene imágenes fuera de ella, en otra carpeta? Esta es la opción que vas a necesitar usar.

Simplemente dale clic al botón Seleccionar… que abrirá una pequeña ventana para escoger la carpeta que quieras. En mi caso, por poner un ejemplo, he escogido esta carpeta en wp-content/themes/bb-theme-child/classes:

Seleccionar carpeta adicional de imágenes

Le doy clic a Seleccionar y cuando se cierre la ventana, habrá que hacer clic en el botón Añadir carpeta para aplicar los cambios.

Ahora, a parte de estar automáticamente optimizados a partir de ya, si vamos al menú Medios > Otros medios, podremos ver los archivos de las carpetas que hayamos seleccionado para interactuar con ellos como si fueran parte de nuestra biblioteca de medios.

Convertir imágenes PNG a JPEG

Como dice el título, convierte todos los archivos PNG que no tienen píxeles transparentes a JPEG (aunque al marcar la casilla también te da opción de forzar la conversión en ficheros con píxeles transparentes). Esto puede ayudar en gran manera a reducir el tamaño del archivo. El plugin también buscará referencias de la imagen en las entradas y/o páginas y las reemplazará. Si la imagen resultante es más grande que la original, la conversión no se realizará.

Conversión CMYK a RGB

El modelo de color CMYK se utiliza básicamente para archivos que van a ser impresos en papel, y el RGB para archivos que van a ser mostrados digitalmente (en una web, por ejemplo). Aquí puedes ver la diferencia entre ellos: Diferencia entre CMYK y RGB.

Por tanto, es recomendable marcar esta opción a menos que realmente necesitemos un archivo con colores en CMYK, para obtener un tamaño de fichero más pequeño.

Imágenes WebP

ShortPixel te permite crear gratuitamente archivos WebP a partir de los originales. 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

Pues bien, si marcamos la casilla, ShortPixel creará tales WebP y además te ofrece la posibilidad de mostrarlas automáticamente en vez del original, de 2 formas diferentes:

  1. Utilizando <picture> en vez de <img>: ShortPixel reemplazará cada etiqueta <img> de la web con una <picture>, lo que proporcionará el WebP a los navegadores compatibles, y el JPG a los no compatibles con WebP. Aunque esta es la opción recomendada por todo el mundo, es también recomendable hacer pruebas y comprobar que tu web funcione correctamente después de activar esta opción, ya que si los estilos que tu tema usa dependen de la posición de la etiqueta <img> podrías tener problemas de visualización.
  2. Modificando el archivo .htaccess: esto proporcionará el WebP o la imagen original usando la misma URL. Debido a las infinitas configuraciones que puede tener el archivo .htaccess, es fácil que esta opción no funcione como debería, así que es más recomendable usar la primera.

En definitiva, en ambos casos prueba a fondo el resultado antes de darlo como definitivo.

Optimizar imágenes Retina

Las pantallas Retina son un tipo de pantalla presente en los dispositivos de Apple, que tiene una densidad de píxeles más alta que sus pantallas normales. Esta pantalla permite que las imágenes tengan un aspecto extremadamente nítido, como si se hubieran impreso, utilizando imágenes de doble resolución, en lugar de las imágenes de resolución habituales para el mismo espacio de pantalla.

Por tanto, si no proporcionas imágenes a doble resolución en tu web, tus imágenes se verán igual que en otra pantalla. Ni mejor ni peor. Pero si sí que proporciones tales imágenes, tus imágenes se verán mucho mejor, más nítidas y bonitas (en esos dispositivos Apple).

Hay plugins que automáticamente crean estas imágenes y se encargan de mostrarlas cuando toca (como WP Retina 2x); el problema viene en el tamaño, que puede ser de hasta 4 veces más grande.

Por tanto, esta opción lo que te permite es optimizar las imágenes Retina al igual que las normales.

Optimizar otras miniaturas

Hay algunos plugins que crean miniaturas pero no las registran correctamente en WordPress. Es decir, las miniaturas se crean pero otros plugins, temas o el mismo WordPress no las detectan. Con esto, vas a optimizar tales miniaturas.

Optimizar PDFs

No hay mucho que decir: optimiza los PDF también.

Patrones de exclusión

Si hay algunas imágenes que no quieres que se optimicen, este es el sitio. Si lees la explicación del plugin, parece complicado, pero no lo es. Aquí tienes que introducir patrones, dependiendo de lo que quieres excluir, y pueden ser de 3 tipos, todos siguiendo la fórmula tipo:valor.

  • Excluir ficheros -> patrón name. Ejemplo: «name:fotosincomprimir.jpg« para excluir solo un fichero o «name:foto» para excluir todos los ficheros que contengan foto.
  • Excluir carpetas -> patrón path. Usando expresiones regulares, se puede excluir un subdirectorio completo por ejemplo. Ejemplo: «path:/\/2019\/02\//» excluye todos los ficheros del subdirectorio 2019/02. Y quien dice subdirectorio, dice, por ejemplo, todas las imágenes PNG que tengan un prefijo numérico: «path:/[0-9]+[^\/]*\.(PNG|png)/».
  • Excluir por tamaño -> patrón size. Ejemplo: «size:1000-1100×2000-2200» excluye las imágenes con tamaños entre 1000 x 1100 y 2000 x 2200.

Cada patrón se separa del siguiente con una coma, y cada patrón va sin las comillas que he escrito 😉

Credenciales HTTP AUTH

Es posible que para acceder a tu sitio (al front-end) se requiera un usuario/contraseña porque no es de acceso público. Si no sabes qué es esto, entonces deja los campos vacíos.

Procesar en portada

Si quieres que ShortPixel optimice automáticamente las imágenes que los usuarios suban desde la web, marca la casilla. Aunque hay que tener en cuenta que si tienes muchos usuarios podrías tener problemas con tu hosting. Antes de activar esta casilla, es mejor asegurarse con tu proveedor de hosting que no vas a tener problemas.

Optimizar los medios al subirse

La casilla para activar o desactivar la optimización automática de los medios al subirse. Es decir, si la casilla está desactivada, solamente podrás optimizar las imágenes manualmente, desde el menú Medios.

Excluir los tamaños de miniaturas

Aquí puedes excluir las miniaturas que no quieras que se optimicen automáticamente. Al marcar una casilla, tal miniatura quedará excluida.

API de Cloudflare

En el caso que estés utilizando la CDN de Cloudflare, para un correcto y óptimo funcionamiento de ShortPixel tendrás que introducir los siguientes datos aquí. Esto es simplemente para que cualquier imagen optimizada/restaurada por ShortPixel también se actualice automáticamente en Cloudflare.

Email de Cloudflare

El email que usas para iniciar sesión en Cloudflare.

Clave de API global

Ve a tu cuenta de Cloudflare (https://www.cloudflare.com/a/profile), ve al final de la página y haz clic en el botón View de la fila Global API key.

Botón Ver de la sección de APIs de Cloudflare

Te pedirá la contraseña y a continuación podrás copiar y pegar tu clave de API global, que será del estilo 7d1d01be415e45dac31e1ccd6b3a3b08a5a16.

ID de zona

De nuevo ve a Cloudflare y haz clic en tu dominio. En el primer icono/pestaña, el de Overview, fíjate en la barra lateral y allí verás la sección Zone ID. Será una cadena de caracteres similar a la clave de API, así que cópiala y pégala en los ajustes de ShortPixel.

ID de zona en el dashboard de Cloudflare

Estadísticas

Aquí tienes tu sección de estadísticas, para ver cuántos créditos te quedan en ShortPixel, la compresión media de tus archivos, y más. También, en la parte de abajo, hay un botón para vaciar las copias de seguridad de las imágenes optimizadas, por si nos estamos quedando sin espacio en el hosting.

Botón de vaciar copias de seguridad en ShortPixel

Recursos WP

Esto solo aparecerá en el caso que tengamos solo el plan gratuito. Es simplemente una sección donde ShortPixel promociona otros servicios (o sea, publicidad).

Precios y planes

ShortPixel tiene varios planes con diferentes precios. Recordemos que 1 crédito = 1 imagen optimizada, y que las miniaturas cuentan como imagen, por lo que si tenemos 5 miniaturas por imagen (por ejemplo), gastaremos 6 créditos por imagen subida a nuestra biblioteca. Vamos a repasarlos.

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 por $10 de nada ya tienes 10000 créditos, lo que dará para más de 1000 imágenes optimizadas. Poca gente va a tener más de 1000 imágenes en una web…

Por poner un ejemplo de uso en una web de uno de mis clientes:

Hemos comprimido un 40% de media las imágenes, y eso teniendo en cuenta que muchas de las imágenes ya venían en baja calidad porque se guardaron así en Photoshop. Esta web tiene de todo un poco, imágenes grandes, logos, imágenes pequeñas… Así que un usuario medio podrá esperar una compresión media de un 50% o 60%.

Además, viene traducido al español (por mi :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 o review de ShortPixel te haya ayudado a decidirte.