La etiqueta para agregar una imagen es la etiqueta <img>, la cual tiene el atributo src (source) que es donde va a mandar a llamar a la imagen, y el atributo alt, que si la imagen está rota, es el texto que va a cargar. Es muy importante dejar un texto alternativo porque para los dispositivos para personas con discapacidad visual, le podemos facilitar una descripción de esa imagen.
Tipos de formato
Los tipos de formato que soporta la etiqueta <img> son:
- .jpg
- .png
- .svg.
- .gif
- webp (formato bastante nuevo).
Las imágenes tienen el atributo width y el atributo height, que indican anchura y altura de la imagen. Lo ideal es no utilizar estos atributos, sino hacerlo desde nuestro CSS.
Truco
Existe una regla CSS que sirve para adaptar todas las imágenes al tamaño de viewport de nuestro navegador siempre.
Ejm
img {
max-width: 100%;
height: auto;
}Vectores
Los vectores los podemos agregar como el src de una etiqueta <img> pero como tal, los vectores son código HTML. Se trata de un código XML, Podemos pegar este código e incluirlo en nuestro archivo HTML. Estos formatos se pueden trabajar con Adobe Illustrator.
Los logotipos, iconos y recursos se suelen pedir en formato .svg.