Las imágenes pueden mejorar el diseño y la apariencia de una página web.
Sintáxis
La etiqueta <img> se utiliza para añadir una imagen en una página web.
Técnicamente, las imágenes no se insertan en una página web; las imágenes están vinculadas a las páginas web. La etiqueta <img> crea un espacio para la imagen a la que se hace referencia.
La etiqueta <img> es un elemento vacio, solo contiene atributos y no tiene una etiqueta de cierre.
La etiqueta <img> tiene dos atributos que son obligatorios:
src- especifica la ruta de la imagenalt- especifica un texto alternativo para la imagen
Sintáxis:
<img src="url" alt="texto alternativo">
El atributo src
El atributo requerido src especifica la ruta (URL) de la imagen.
Nota: cuando una página web se carga, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrate de que la imagen realmente permanezca en el mismo lugar en relación con la página web, de lo contrario, tus visitantes obtendrán un ícono de enlace roto. El icono de enlace roto y el texto alternativo se muestran si el navegador no puede encontrar la imagen.
Ejemplo:
El atributo alt
El atributo requerido alt proporciona un texto alternativo a una imagen, si por alguna razón el usuario no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).
El valor del atributo alt debe describir la imagen:
Ejemplo:
Si un navegador no puede encontrar la imagen, mostrará el valor del atributo alt:
Ejemplo:
Para recordar: un lector de pantalla es un programa de software que lee el código HTML y permite al usuario "escuchar" el contenido. Los lectores de pantalla son útiles para las personas con problemas de visión o de aprendizaje.
Tamaños de una imagen
Puedes usar el atributo style para especificar el ancho y alto de una imagen.
Ejemplo:
Pero también, podemos usar los atributos width y height del elemento <img>:
Ejemplo:
Los atributos width y height siempre definen el ancho y el alto de la imagen en píxeles.
Nota: siempre especifique el ancho y alto de una imagen. Si no especifica el ancho y el alto, la página web puede parpadear mientras se carga la imagen.
¿Usar atributos o estilos?
Los atributos width, height y style son todos válidos en HTML.
Sin embargo, sugerimos usar el atributo style o un archivo externo CSS para definir el alto y ancho de una imagen.
Ejemplo:
Imágenes desde otra carpeta
Si tienes tus imágenes en una sub carpeta, debes incluir el nombre de la carpeta en el atributo src:
Ejemplo:
<h2>Imagen en otra carpeta</h2>
<p>Es común almacenar imágenes en una subcarpeta, entonces, debes incluir el nombre de la carpeta en el atributo src:</p>
<img src="/images/html5.gif" alt="Icono HTML5">
Imágenes desde un servidor
Algunos sitios web apuntan a imágenes que están en otro servidor.
Para apuntar a una imagen en otro servidor, debes especificar una URL absoluta (completa) en el atributo src:
Ejemplo:
Notas sobre imágenes externas: las imágenes externas pueden estar protegidas por derechos de autor. Si no tienes permiso para usarlo, es posible que estés violando las leyes de derechos de autor. Además, no puedes controlar imágenes externas; porque se pueden quitar o cambiar de un momento a otro.
Imágenes animadas
HTML permite GIF animados:
Ejemplo:
Imagen como enlace
Para usar una imagen como un enlace, coloque la etiqueta <img> dentro de la etiqueta <a>:
Ejemplo:
Imagen flotante
Usa la propiedad float CSS para dejar que la imagen flote a la derecha o a la izquierda de un texto:
Ejemplo:
Formatos comunes de imagen
Estos son los tipos de archivos de imagen más comunes, compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):
| Abreviatura | Formato Archivo | Extension Archivo |
| APNG | Animated Portable Network Graphics (Gráficos de Red Portátiles Animados) | .apng |
| GIF | Graphics Interchange Format (Formato de Gráficos Intercambiable) | .gif |
| ICO | Microsoft Icon (Icono Microsoft) | .ico, .cur |
| JPEG | Joint Photographic Expert Group image (Imagen Grupo Conjunto de Expertos en Fotografía) | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics (Gráficos de Red Portátiles) | .png |
| SVG | Scalable Vector Graphics (Gráficos Vectoriales Escalables) | .svg |
Resumen
Usa el elemento
<img>para definir una imagenUsa el atributo
srcpara la URL (relativa, absoluta) de la imagenUsa el atributo
altpara definir un texto alternativo para una imagen (buena práctica)Usa los atributos CSS
widthyheightcomo estilos internos o externos (recomendable)
📝Nota: las imágenes grandes pueden tomar mucho tiempo en cargar y ralentizar la página web. Usa las imágenes con cuidado.😉
Traducido con 💚 desde W3Schools.com