Repasamos en detalle todo lo que tienes que saber para añadir imágenes de forma óptima a tu sitio web con las últimas técnicas para que no pierdas ni un segundo de carga.

Novedades de ManualesJoomla.es

•  Trabajando en la nueva versión de Frontend User Manager con plugins

Novedades en Extly

• Nueva Composer App para Perfect Publisher lista para publicar.

Actualidad Joomla

• Joomla 4 Beta 7 y Joomla 3.10 Alfa 5
• JDay USA
• Píldoras de actualidad de Sergio Iglesias
• Multa a vueling por una web poco accesible

¡Estáte al día de la actualidad Joomla suscribiéndote a la newsletter de ManualesJoomla.es!

Cómo poner imágenes en tu web

Un poquito de HTML

• Las imágenes suelen ir dentro de etiquetas div, picture o figure
• Si lo metes dentro de un p lo normal es que el navegador la saque a su propio p a menos que por CSS le indiques que es inline

¿Cuándo usar picture, img o figure?

• Usamos img cuando la imagen está directamente relacionada con el contenido que tiene antes y después
• Usamos figure para darle una entidad propia
• Usamos picture para poder configurar varios tamaños de imagen

Tamaño de las imágenes

• Deben ser el justo y necesario. Ni más ni menos.
• Optimizador de imágenes Compressor.io
• Optimizador de imágenes Sqoosh

Un tamaño de imagen para cada pantalla

• Elemento picture
• usando srcset

Carga en diferido (lazyload)

• Usando carga en diferido nativa en tu sitio web

Etiquetas Alt

• Artículo en la magazine Joomla sobre cómo rellenar el atributo ALT en nuestras imágenes de Brian Teeman

Relación de aspecto

•  Artículo sobre los atributos width y height en las imágenes

¿Cómo añades imágenes a tu sitio? ¡Dinoslo aquí abajo en los comentarios del programa!

• Anterior
• Siguiente