Imagen receptiva de Joomla usando srcset y compresión

¿Mejoramiento? Cheque. 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 se desespere: aquí es cuando la estructura HTML resulta útil; más precisamente, los conjuntos de origen de la imagen 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 receptivas con srcset HTML

Si alguna vez ha incursionado en HTML, sabrá que las imágenes están definidas por un atributo fuente src . La fuente de la imagen es la ubicación desde donde los navegadores cargan las imágenes para mostrarlas en su Joomla! usuarios El problema de usar una fuente consistente para una imagen en particular es que siempre se cargará el mismo archivo, sin importar cuán grande sea.

Por ejemplo, si tiene un banner destacado 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, 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 sola fuente. Cada fuente está asociada con un ancho de navegador para que los dispositivos móviles descarguen imágenes pequeñas y los usuarios accedan a su Joomla! blog de escritorios descargue la imagen de resolución completa. En otras palabras, la imagen srcset transforma las imágenes en imágenes receptivas.

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 usar el atributo srcset en tu Joomla! blog, primero debes activarlo a través de tu configuración de Droppics. Dirígete a la parámetros principales en las opciones de Droppics y habilita las imágenes receptivas entre las primeras opciones. Guarde los cambios para confirmar la nueva configuración.

Como imágenes receptivas , al habilitar la configuración Droppics se crean dos nuevas miniaturas para cada Joomla! imagen que tienes. Estas miniaturas son las imágenes receptivas en sí mismas, que se procesan según el dispositivo utilizado para acceder a su Joomla! Blog.

Cuando crea una publicación e inserta una imagen de Droppics, la extensión establece automáticamente el srcset por usted. ¿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 la lazy loading , pero a veces, hay mucho que pueden hacer. En algunos casos, el uso de 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 hay una pieza faltante en el rompecabezas.

Comprimir 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íjase a la avanzada y habilite optimizar medios al guardar . Alternativamente, puede elegir manualmente qué imágenes optimizar a través ImageRecycle .

Los tiempos de carga son un problema multifacético. Necesita minimizar simultáneamente el tamaño de los archivos mientras mantiene la calidad y ahorra espacio de almacenamiento. Con el conjunto de fuentes mágico de Droppics y la compresión de ImageRecycle , no solo es posible, sino que puede ser un proceso sencillo y automatizado.