Mastermind Web

El Podcast sobre desarrollo web para que potencies tus proyectos



Un lienzo vacío es una maravilla viva - Mucho más adorable que algunas pinturas.


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

Novedades en Extly

Actualidad Joomla

¡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

Un tamaño de imagen para cada pantalla

  • Elemento picture
  • usando srcset

Carga en diferido (lazyload)

Etiquetas Alt

Relación de aspecto

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


Escuchar en ivoox

Comentarios gracias a CComment


¡Escúchanos donde quieras!

mastermindweb.es is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.


mastermindweb.es no tiene afiliación alguna ni está recomendada por el proyecto Joomla! Project™. El uso del nombre Joomla!®, su símbología, y logotipo y sus marcas relacionadas está permitido bajo una licencia limitada concedida por Open Source Matters, Inc.