Imagen receptiva de Joomla usando srcset y compresión

¿Mejoramiento? Controlar. Lazy loading ? Revisar otra vez. Aún así, tu Joomla! El sitio web se siente torpe y tarda demasiado en cargarse en dispositivos móviles y conexiones lentas. No desesperes: aquí es cuando la estructura HTML resulta útil; más precisamente, los conjuntos de fuentes de imágenes o el srcset .

Quizás tu Joomla! El blog utiliza imágenes de alta calidad y usted simplemente no puede, o no quiere, eliminarlas. Eso no es motivo de preocupación. Con el complemento Droppics de Joomla! Puede aplicar no solo la optimización general para imágenes, sino también servir diferentes archivos dependiendo de los dispositivos de los usuarios.

Imágenes responsivas con HTML srcset

Si alguna vez ha incursionado en HTML, sabrá que las imágenes se definen mediante un atributo de origen: src . La fuente de la imagen es la ubicación desde donde los navegadores cargan imágenes para mostrarlas en su Joomla! usuarios. El problema de utilizar una fuente consistente para una imagen en particular es que siempre se cargará el mismo archivo, sin importar su tamaño.

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

Como su nombre lo 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 para que los dispositivos móviles descarguen pequeñas imágenes y los usuarios que accedan a su Joomla! blog desde computadoras de escritorio descargue la imagen en resolución completa. En otras palabras, image srcset transforma imágenes en imágenes responsivas.

El resultado del uso de conjuntos de fuentes no es solo tiempos de carga más rápidos, sino también mejores puntuaciones de 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. Puede leer más sobre el atributo srcset y todo lo demás relacionado con los conjuntos de fuentes aquí , pero si está impaciente por comenzar a usarlos en su Joomla! blog, sigue leyendo.

Sirviendo imágenes escaladas en Joomla! con droppics

¡Puedes conocer Droppics como simplemente un Joomla! extensión del administrador de la galería, pero hay muchas cosas que suceden debajo del capó de las que puede no estar al tanto. Caso en cuestión: Droppics ahora está utilizando el conjunto de fuentes para cargar las imágenes adecuadas para sus usuarios. Si no conoce esta característica, es posible que tampoco la esté explotando.

Para utilizar el atributo srcset en tu Joomla! blog, primero debes activarlo a través de tu configuración de Droppics. Dirígete a la de parámetros principales en las opciones de Droppics y habilita imágenes responsivas entre las primeras opciones. Guarde los cambios para confirmar la nueva configuración.

Como le indica la de imágenes responsivas , al habilitar la configuración, Droppics crea dos nuevas miniaturas para cada Joomla! imagen que tienes. Estas miniaturas son las propias imágenes responsivas, que se muestran dependiendo del dispositivo utilizado para acceder a tu Joomla! Blog.

Cuando creas una publicación e insertas una imagen de Droppics, la extensión configura automáticamente el srcset por ti. ¿No nos crees? Inspeccione el HTML en la interfaz y encontrará múltiples fuentes para diferentes tamaños de dispositivos.

La optimización general está muy bien, al igual que lazy loading , pero a veces, hay mucho que pueden hacer. En algunos casos, utilizar la técnica HTML moderna de proporcionar conjuntos de fuentes de imágenes, en lugar de fuentes singulares, 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.

Comprime imágenes srcset en Joomla!

Quizás se pregunte si vale la pena tener varias copias de la misma imagen. Quizás desee ahorrar espacio en el servidor o tenga miedo de que las nuevas imágenes se acumulen. El hecho de que esté utilizando el conjunto de fuentes no significa que no pueda combinarlo con otras técnicas de optimización, como la compresión.

ImageRecycle también está disponible en Joomla! y puedes integrarlo sin problemas con Droppics. De hecho, incluso puede configurarlo para que comprima automáticamente su Joomla! imágenes del conjunto de origen inmediatamente cuando se generan. Puede ahorrar hasta un 80% con compresión con pérdida, o con el mejor ahorro, y hasta un 20% con compresión original o sin pérdidas. Puedes leer más sobre la diferencia aquí .

Puede configurar ImageRecycle para que comprima imágenes automáticamente yendo a la configuración de la extensión en Joomla! Desde allí, dirígete a la avanzada y habilita optimizar medios al guardar . Alternativamente, puede elegir manualmente qué imágenes optimizar a través de la interfaz de ImageRecycle

Los tiempos de carga son un problema multifacético. Debe minimizar simultáneamente el tamaño de los archivos y al mismo tiempo mantener la calidad y ahorrar espacio de almacenamiento. Con el conjunto de fuentes mágico de Droppics y la compresión de ImageRecycle , todo esto no solo es posible, sino que también puede ser un proceso sencillo y automatizado.