Plugins de optimización de imágenes ¿cuál deberías usar? – Tabla comparativa

¿Usas algún plugin de compresión de imágenes en tu WordPress?

Yo no suelo recomendarlos ni los utilizo porque es «llegar tarde», pues considero que las optimizaciones – y esta es la más importante – de imágenes deben hacerse siempre antes de subirlas ¿por qué?

Si optimizas las imágenes con un plugin

  • Tienes que instalar un servicio/plugin/API con el consiguiente consumo de recursos de tu servidor.
  • Las optimizaciones conllevan tiempo de proceso y consumo de procesador de tu servidor o esperas si se hacen en servidor externo.
  • No controlas al 100% la optimización, dependes de los parámetros disponibles en el servicio/plugin/API.
  • La mayoría de los servicios/plugins/APIs son de pago en cierta medida.

Si optimizas las imágenes antes de subirlas

  • No tienes que instalar ningún servicio/plugin/API en tu sitio, con el consiguiente ahorro de recursos.
  • Las optimizaciones no las sufre tu servidor ni conllevan esperas en tu flujo de trabajo en WordPress.
  • Controlas al 100% la optimización.
  • Tienes montones de aplicaciones gratis para optimizar imágenes, e incluso algunos sistemas operativos ya las incluyen.

Comparativa de plugins de optimización de imágenes

Dicho lo anterior, si por algún motivo necesitas un plugin/servicio/API de optimización de imágenes aquí tienes esta tabla comparativa que han realizado en ResizeMyImg y que he traducido:

EWWW image optimizer WP Smush Imagify ShortPixel image optimizer reSmush.it Imsanity Compress JPEG & PNG by TinyPNG Optimole
Precio $0.003 / imagen o 9$/ month Gratis o pro $49/mes $4.99/mes Gratis o $4.99/ mes Gratis Gratis Gratis o $0.009 por imagen Free or $9/ month
Formatos admitidos JPEG, PNG, o GIF JPEG, PNG, o GIF JPEG, PNG, o GIF JPEG, PNG, GIF, y PDF JPEG, GIF, BMP, y TIF JPEG, PNG, y BMP JPEG y PNG JPEG, PNG, GIF, y PDF
Límite de tamaño de imagen Ilimitado 1MB 2MB Ilimitado 5MB Ilimitado Ilimitado Ilimitado
Compresión sin pérdida Disponible Disponible Disponible Disponible N/A N/A N/A Disponible
Preservación de metadatos Disponible Disponible Disponible Disponible Disponible N/A Disponible Disponible
Carga diferida Disponible Disponible N/A N/A N/A N/A N/A Disponible
Ubicación de la compresión Tu servidor o servidores externos Servidores externos Servidores externos Servidores externos Servidores externos Tu servidor Servidores externos Servidores externos
Informes de rendimiento Disponible Disponible Disponible Disponible N/A N/A Disponible Disponible
Copia de seguridad de archivos Disponible Disponible Disponible Disponible Disponible N/A Disponible N/A
Periodo de restauración 30 días N/A N/A N/A N/A N/A 30 días N/A
Optimización automática Disponible Disponible Disponible Disponible Disponible Disponible Disponible Disponible
Admite WEBP Disponible Disponible Disponible Disponible N/A N/A N/A Disponible
Ajuste manual de altura, ancho y calidad Disponible Disponible Disponible Disponible N/A Disponible N/A N/A
Prueba gratuita Disponible Disponible Disponible Disponible API gratuita Plugin gratuito Disponible Disponible
Compresión por lotes Disponible Disponible Disponible Disponible Disponible Disponible Disponible Disponible

¿Qué plugin de optimización de imágenes debería usar?

Si nos guiamos por la comparativa de la tabla de arriba, claramente yo te recomendaría Imsanity, muy interesante además por otros motivos que ya comenté.

Pero vamos, que como te decía al principio de este artículo, mejor si no usas ninguno.

La entrada Plugins de optimización de imágenes ¿cuál deberías usar? – Tabla comparativa la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

¡Divi ya es un bloque del editor de WordPress!

Supongo que conscientes de que no hay futuro en WordPress sin pasar por los bloques del editor, el equipo de Elegant Themes han lanzado una actualización de Divi (tema y maquetador) en la que se integra totalmente en el nuevo editor de bloques Gutenberg de WordPress.

A partir de ahora, al contrario de como hacen otros maquetadores como Elementor, maquetar con Divi tus páginas ya no es una alternativa al editor de bloques, sino que puedes conjugar ambas tecnologías, con lo que gana el usuario.

Ahora puedes editar una página y, además de los bloques habituales, encontrarás uno nuevo, Divi Layout, desde el que añadir diseños completos prediseñados, personalizados, o lo que quieras.

Una vez añadido, el modo de trabajar es el de siempre de Divi, con total acceso a todas las personalizaciones (infinitas) que ofrece.

Así, ahora podrás incluir en una misma página tus bloques favoritos y tus diseños de Divi más avanzados, sin límite, y cuántos quieras.

Y, por supuesto, sin perder la interfaz visual que tanto gusta del maquetador Divi.

Así que ya sabes, si ya tienes Divi actualiza, en caso contrario aquí te dejo un par de enlaces con descuento:

La entrada ¡Divi ya es un bloque del editor de WordPress! la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo añadir iconos de Font Awesome a tus menús y dónde quieras sin plugins

Los iconos tipográficos son un recurso visual estupendo cuando quieres atraer atención a algún elemento de manera sencilla y ligera, sin usar archivos de imagen.

Ya sea en menús, widgets, o incluso en tus contenidos, los iconos sirven para montones de situaciones y usos.

En este tutorial vamos a ver cómo activar y usar iconos de la biblioteca más popular, Font Awesome, en tu sitio WordPress, para que los incorpores donde quieras.

Activa Font Awesome

Para activar los iconos de FontAwesome y así poder usar sus centenares de iconos gratuitos donde quieras lo primero es añadir una función que cargue su biblioteca.

Para ello debes registrarte (gratis) aquí. Recibirás un correo de confirmación y, una vez hagas clic en el enlace que te llegue, ya tendrás tu kit de Font Awesome, imprescindible para la integración. Tu número único lo tendrás en esta página una vez te registres (te recuerdo que es gratis).

Ahora tienes que añadir el siguiente código al final del archivo functions.php de tu tema hijo. Si aún no has creado un tema hijo puedes hacerlo de este modo o de este otro.

/**
 * Font Awesome Kit Setup
 * 
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

Y, a continuación del código anterior, añadir una línea más como esta:

fa_custom_setup_kit('https://kit.fontawesome.com/42deadbeef.js');

Pero no guardes aún, pues debes sustituir el código del kit por el tuyo, o sea

42deadbeef

por el de tu kit creado al registrarte (u otro que hayas creado, a elegir). Por ejemplo, si tu kit es

f1234x567

la línea sería así:

fa_custom_setup_kit('https://kit.fontawesome.com/f1234x567.js');

Lógicamente, ahora no te olvides de guardar los cambios en el archivo

functions.php

una vez añadas el código anterior.

Añade iconos a tus menús, widgets, contenidos, etc

Ahora que ya tenemos registrado nuestro kit de Font Awesome solo queda usar sus clases CSS en nuestros contenidos, menús, etc, donde queramos.

Añade iconos a los menús

Añadir iconos a los menús es muy sencillo. Lo primero es asegurarte de que está activa la casilla de clases CSS.

En las siguientes capturas tienes dónde se activa en la administración de menús y en el personalizador…


Ahora, al editar un elemento de menú verás una nueva caja en la que aplicar clases CSS.

Ahora tienes que elegir el icono a añadir a tu menú de la lista de los más de 1.500 que hay…

Una vez seleccionado en la siguiente pantalla te mostrará la clase a introducir:

Haciendo clic en ella se copia automáticamente. Así que, simplemente, introduce eso en la caja de la clase CSS, así…

Y aparecerá tu icono antes de la etiqueta de navegación.

Añade iconos en cualquier parte

Añadir iconos de Font Awesome en cualquier otro contenido, widget o lo que quieras es muy sencillo también. Solo tienes que copiar la clase CSS y pegarla donde quieras que se muestre.

Puedes añadirlos así:

O también de este otro modo:

Simplemente prueba y comprueba cómo queda mejor integrado con el resto de tus contenidos, etc.

Por supuesto, deberás hacerlo en HTML, no en un widget de texto, editor visual o bloque de párrafo normal.

Cambia el tamaño de los iconos

Hasta ahora hemos visto el modo básico de insertar los iconos de Font Awesome pero ¿y si quiero que se muestren a otro tamaño?

Debes saber que, por defecto, los iconos heredarán el tamaño del contenedor en el que los añadas (menú, párrafo, etc).

Pues es muy sencillo, solo tienes que añadir un elemento a tu clase CSS en el que indiques el tamaño a utilizar, así:

fab fa-wordpress-simple fa-2x

O así si es el código completo, para tus entradas, widgets, etc:

Si te fijas, simplemente he añadido al final

fa-2x

, que mostrará el icono al doble del tamaño por defecto del contenedor.

Aquí tienes una tabla con todos los tamaños estándar que puedes aplicar y cómo hacerlo:

Clase Tamaño Notas
fa-xs
.75em
fa-sm
.875em
fa-lg
1.33em También aplica un

vertical-align: -25%
fa-2x
2em
fa-3x
3em
fa-4x
4em
fa-5x
5em
fa-6x
6em
fa-7x
7em
fa-8x
8em
fa-9x
9em
fa-10x
10em

Rotar iconos

Hay más cosas que puedes hacer con los iconos además de cambiar el tamaño, y una muy chula es rotar el icono.

Solo tendrías que añadir un parámetro de rotación siguiendo este patrón:

Clase Cantidad de rotación
fa-rotate-90
90°
fa-rotate-180
180°
fa-rotate-270
270°
fa-flip-horizontal
voltea el icono horizontalmente
fa-flip-vertical
voltea el icono verticalmente
fa-flip-both
voltea el icono en horizontal y vertical (requiere la versión 5.7.0 o superior)

Para que tengas un ejemplo, así rotaría el icono de WordPress 180 grados al doble de su tamaño, para que veas un ejemplo de aplicar los dos estilos que hemos visto:

Animar iconos

Igual de fácil es animar iconos. Las animaciones básicas son el giro y el pulso. Se haría añadiendo un parámetro de animación.

Así haríamos girar el icono de WordPress:

Y así añadiríamos una animación que haga pulsos:

Chulo ¿eh?

Cada vez se pueden hacer más cosas con los iconos de Font Awesome, últimamente incluso añadieron la posibilidad de usar dobles tonos, una virguería.

¿Y esto no se puede hacer con plugins?

Aunque no es el objetivo de este tutorial, sí, claro, pero no todo en realidad, solo las opciones básicas.

Tienes plugins como WP Visual Icons del que ya hablé, Menu Icons, o incluso uno de Font Awesome, con el que insertar fácilmente iconos en menús y otros lugares, pero todo el potencial de los iconos solo lo tendrás siguiente esta guía.

¿Por qué no usar mejor los Dashicons que ya incluye WordPress u otros?

Pues buena pregunta, pero resulta que la biblioteca de Font Awesome es la mayor de todas y la que permite mayores personalizaciones.

De todos modos, como de estos otros ya he hablado, aquí te dejo unos enlaces, por si te los perdiste:

La entrada Cómo añadir iconos de Font Awesome a tus menús y dónde quieras sin plugins la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

El plugin de control de consentimientos RGPD y control de cookies casi perfecto

A poco observador que seas ya te habrás dado cuenta de que he cambiado de plugin de gestión de cookies y consentimientos.

Hasta no hace mucho tiempo usaba otro plugin para gestionar los consentimientos de la RGPD y las cookies, pero lamentablemente hace tiempo que no se actualiza, y ya sabes, no hay que usar software abandonado o sin actualizaciones recientes, una pena, porque era bien majo.

¿Qué debe tener mi nuevo plugin de RGPD y cookies?

Así que me puse a buscar y probar todos los plugins habidos y por haber para consentimiento de políticas de privacidad y cookies, que deberían ofrecer lo siguiente:

  • Banner de aviso inicial claro y visible sin duda alguna sobre políticas de privacidad y cookies. La famosa primera capa de información.
  • El banner debe poderse descartar mediante aceptación, rechazo o simple scroll (en este último caso no debe confundir con los botones, o una cosa o la otra, según la última actualización de la AEPD)
  • En el banner debe poderse enlazar a la información completa sobre privacidad y cookies fácilmente.
  • Debe tener una ventana de ajustes desde la que el usuario pueda fácilmente cambiar su decisión sobre aceptación de las políticas de privacidad y cookies.
  • Debe poderse forzar (o no) la aceptación de las cookies imprescindibles o de sesión.
  • Deben poderse aceptar o rechazar las cookies de terceros y adicionales separadamente.
  • Se debe poder especificar la caducidad de la aceptación (por ley 24 meses máximo).
  • Debe disponer de algún sistema para REALMENTE poder controlar y aceptar/rechazar las cookies.
  • Compatible con las herramientas de privacidad de WordPress.
  • Compatible con plugins multilenguaje.
  • Adaptable a todo tipo de dispositivos (responsive).
  • Mejor si es gratuito en las características principales.

Vista la lista, ¿qué encontré?

La cruda realidad

Tras muchos días de pruebas comprobé que la mayoría de plugins de cookies no ofrecen ni la mitad de los requisitos mínimos para ayudarnos a cumplir el RGPD. De hecho, la mayoría solo están pensados para leyes de cookies de países que no son de la UE.

O solo ofrecen un método de consentimiento, o no bloquean realmente las cookies hasta la aceptación, o simplemente solo son un banner que no sirve para nada más que informar, sin consentimiento real por parte del usuario.

La solución: GDPR Cookie Compliance

Así que, tras muchas instalaciones y pruebas encontré uno que sí, que es casi perfecto. Luego te diré lo del «casi» pero primero vamos con lo que ofrece este fantástico plugin: GDPR Cookie Compliance.

  • Banner de primera capa de información personalizable en textos, aspecto y posición.
  • Totalmente editable (textos, aspecto, colores, tipografías, incluso tu propio logo).
  • Ajuste para definir caducidad del consentimiento.
  • Por defecto se pueden configurar la aceptación o no de cada tipo de cookie.
  • Ventanas separadas para cookies de sesión, de terceros y adicionales.
  • Enlace sencillo e integrado a las políticas de privacidad y cookies.
  • Pantalla de revisión de los consentimientos por parte del usuario fácilmente enlazable desde cualquier página.
  • Compatible con WPML, QTranslate, WP Multilang y Polylang.
  • Totalmente responsive.
  • Botones de aceptar/rechazar.
  • Control real de las cookies mediante cajas donde introducir los scripts que no se cargarán hasta la aceptación.

Así que, como ves, cumple con todo lo que buscaba para cumplir el RGPD.

En las siguientes capturas puedes ver cómo se configura todo…










Como puedes ver en la última captura, dispones además de 3 cajas en las que introducir los scripts que generen cookies (Google Analytics, Tag Manager, etc.), ya sea en head, body o footer. Práctico y, sobre todo, funciona, pues todo script que pongas ahí, en vez de a través de plugins, ajustes del tema o insertados, no se cargará hasta que el usuario no acepte la correspondiente pantalla de aceptación (cookies de terceros o adicionales).

Scripts de cookies

Por supuesto, esto implica que no debes usar plugins para insertar este tipo de scripts que creen cookies. Vamos, si quieres cumplir con la legislación europea de protección de datos y cookies.

Por último, además del botón emergente que se puedes mostrar siempre, para que el usuario cambie sus ajustes de privacidad, también puedes añadir un enlace como el siguiente, donde quieras, para que los usuarios puedan abrir la pantalla de ajustes de privacidad y cookies:

#gdpr_cookie_modal

Aquí, por ejemplo: Revisar las cookies y ajustes de privacidad.

Y, por supuesto, aquí tienes unas capturas del plugin en acción…






El «casi»

«Casi» se me olvidaba…

Cuando antes me refería a que «casi» cumple con todo este plugin es porque la nueva opción que da la AEPD del consentimiento por scroll en este plugin no está incluida en la versión gratuita sino en la premium.

Tampoco incluye algo que sí  tenía el plugin  que recomendaba hace tiempo, como es la pantalla de comunicación de brechas de seguridad, ni los formularios para solicitar revisión, borrado de datos, pero WordPress ya incluye estas herramientas, y cualquier formulario de contacto en tu página de privacidad vale para esto, así que no es imprescindible.


No obstante, es opcional, y gratis tienes el consentimiento mediante botones de aceptación/rechazo, pantalla de ajustes, botón de cambio de ajustes, control de caducidad, y todo lo que necesitas.

Yo ya lo tengo implementado en todos mis sitios, y poco a poco lo estoy sustituyendo en webs de clientes, por su seguridad, para garantizar el cumplimiento del RGPD y política de cookies.

¿Y tú? ¿usas algún método para cumplir con el RGPD y la política de cookies de la UE?

Si sabes de algún otro plugin o sistema que, gratis, ofrezca esto o más ya tardas en compartirlo.

Y si no sabes o no quieres hacer por ti mismo la adaptación de tu web al RGPD, que contempla esto, y otras cosas como…

  • Adaptación de formularios a RGPD
  • Adaptación de comentarios a RGPD
  • Adaptación de WooCommerce a RGPD
  • Adaptación de Google Analytics y Tag Manager a RGPD
  • etc.

Siempre puedes contratar a un profesional que lo haga por ti.

La entrada El plugin de control de consentimientos RGPD y control de cookies casi perfecto la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Vivir de un blog – Resumen de diciembre y del año 2019

Vivir de un blog - Resumen mensual¿Notas eso? Ya siento cómo las Mega-Guías cambian sus títulos y fechas al 2020… 🎊 🎊 (Y Felices Reyes).   Así es, llega 2020 con un déficit de promesas incumplidas año tras año (y aun así te sigues prometiendo lo mismo, pero tú y yo sabemos que no irás al gimnasio…). Por ahora, lo que […]

La entrada Vivir de un blog – Resumen de diciembre y del año 2019 se publicó primero en Posicionamiento web | Vivir de un blog.