En este artículo te explicaremos que es un Hero Image para que así puedas entender que es un Hero Slider, además te mostraremos como hacer uno utilizando solo HTML y CSS.

¿Qué es Hero Image?

Un Hero Image es un término que se usa en diseño web para referirse a un banner de gran tamaño que se coloca generalmente en la página principal de un sitio web. Existe una gran variedad de Hero Images en el mundo del diseño web desde imágenes estáticas hasta imágenes con textos, botones o formularios de búsqueda. Veamos un ejemplo en la siguiente imagen.

¿Qué es un Hero Slider?

Ya conocemos que es un Hero Image, partiendo de ese concepto un Hero Slider es casi lo mismo que un Hero Image pero con la diferencia que este es animado, es decir, la imagen de fondo cambia cada cierto tiempo como un Slider normal. En el siguiente vídeo te mostramos como desarrollar tu propio Hero Slider utilizando únicamente HTML y CSS. Además, al final de este articulo te dejamos el código fuente del ejemplo que desarrollamos en el vídeo.

¿No sabes cómo reducir el tamaño de tus imágenes?

No te preocupes a continuación te dejaremos un vídeo donde te mostramos como reducir el tamaño (peso) de tus imágenes y lo mejor de todo sin que estas pierdan calidad.