Imagen adaptable de Joomla usando srcset y compresión

¿Optimización? Listo. ¿ Lazy loading ? Vuelva a revisar. Aun así, su sitio web Joomla! se ve torpe y tarda demasiado en cargar en dispositivos móviles y conexiones lentas. No se desespere: aquí es donde la estructura HTML resulta útil; más precisamente, los conjuntos de fuentes de imágenes o el srcset .

Quizás tu blog de Joomla! usa imágenes de alta calidad y no puedes, o no quieres, eliminarlas. No hay motivo de preocupación. Con el plugin Droppics de Joomla!, no solo puedes optimizar las imágenes, sino también mostrar diferentes archivos según los dispositivos de los usuarios.

Imágenes adaptables con HTML srcset

Si alguna vez has trabajado con HTML, sabrás que las imágenes se definen mediante un atributo source (src) . El origen de la imagen es la ubicación desde donde los navegadores cargan las imágenes para mostrarlas a los usuarios de Joomla!. El problema de usar un origen consistente para una imagen en particular es que siempre se cargará el mismo archivo, sin importar su tamaño.

Por ejemplo, si tienes un banner principal en la parte superior de un artículo, la misma imagen se cargará en todos los dispositivos. Los navegadores descargan la imagen y luego la reducen, a veces drásticamente, especialmente en dispositivos móviles. Con los navegadores modernos, puedes definir no solo una fuente para las imágenes, sino un conjunto de fuentes: el conjunto de fuentes srcset .

Como su nombre indica, el conjunto de fuentes es una lista de fuentes, en lugar de una única fuente. Cada fuente está asociada a un ancho de navegador, de modo que los dispositivos móviles descargan imágenes pequeñas y los usuarios que acceden a tu blog de Joomla! desde ordenadores descargan la imagen de resolución completa. En otras palabras, el conjunto de fuentes de imágenes transforma las imágenes en imágenes adaptables.

El resultado de usar conjuntos de fuentes no solo es una carga más rápida, sino también una mejor puntuación SEO. Todo esto tiene el pequeño precio de tener copias de la misma imagen con diferentes resoluciones, disponibles para cuando los usuarios las necesiten. Puedes leer más sobre el srcset y todo lo relacionado con los conjuntos de fuentes aquí , pero si estás impaciente por empezar a usarlos en tu blog de Joomla!, sigue leyendo.

Cómo servir imágenes escaladas en Joomla! con Droppics

Quizás conozcas Droppics simplemente como una extensión para el gestor de galerías de Joomla!, pero hay muchas cosas que suceden en segundo plano que quizás desconozcas. Por ejemplo: Droppics ahora usa el conjunto de fuentes para cargar las imágenes correctas para tus usuarios. Si desconoces esta función, es posible que no la estés aprovechando.

Para usar el atributo srcset en tu blog de Joomla!, primero debes activarlo en la configuración de Droppics. Ve a la de parámetros principales en las opciones de Droppics y activa las imágenes adaptables entre las primeras opciones. Guarda los cambios para aplicar la nueva configuración.

Como indica la imágenes adaptables , al activar la configuración, Droppics crea dos miniaturas nuevas para cada imagen de Joomla!. Estas miniaturas son las propias imágenes adaptables, que se visualizan según el dispositivo desde el que se accede a tu blog de Joomla!.

Al crear una publicación e insertar una imagen de Droppics, la extensión configura automáticamente el srcset . ¿No nos crees? Revisa el HTML en el frontend y encontrarás múltiples fuentes para diferentes tamaños de dispositivo.

La optimización general está muy bien, al igual que lazy loading, pero a veces su alcance es limitado. En algunos casos, usar la técnica HTML moderna de proporcionar conjuntos de fuentes de imágenes, en lugar de fuentes individuales, podría ser la clave para superar los tiempos de carga lentos.

Pero espera, eso no es todo. Todavía falta una pieza del rompecabezas.

¡Comprimir imágenes srcset en Joomla!

Quizás te preguntes si vale la pena tener varias copias de la misma imagen. Quizás quieras ahorrar espacio en el servidor o temes que las nuevas imágenes se acumulen. El hecho de usar el conjunto de origen no significa que no puedas combinarlo con otras técnicas de optimización, como la compresión.

ImageRecycle también está disponible en Joomla! y se integra perfectamente con Droppics. De hecho, puedes configurarlo para que comprima automáticamente las imágenes de tu conjunto fuente de Joomla! al generarlas. Puedes ahorrar hasta un 80 % con la compresión con pérdida (o compresión optimizada) y hasta un 20 % con la compresión sin pérdida (o compresión original). Puedes leer más sobre la diferencia aquí .

Puedes configurar ImageRecycle para que comprima imágenes automáticamente desde la configuración de la extensión en Joomla!. Desde allí, ve a la "Avanzado" y activa la opción "Optimizar multimedia al guardar" . También puedes elegir manualmente las imágenes que quieres optimizar desde la interfaz de ImageRecycle

Los tiempos de carga son un problema multifacético. Es necesario minimizar el tamaño de los archivos, manteniendo la calidad y ahorrando espacio de almacenamiento. Con el conjunto de fuentes de Droppics y la compresión de ImageRecycle, esto no solo es posible, sino que también se convierte en un proceso sencillo y automatizado.