Imágenes HTML – Barcelona Geeks

En este artículo, conoceremos la imagen HTML , cómo agregar la imagen en HTML, además de conocer su implementación y uso a través de los ejemplos. En épocas anteriores, las páginas web solo contenían contenido textual, lo que las hacía parecer bastante aburridas y poco interesantes. Afortunadamente, no pasó lo suficiente como para que se añadiera a los usuarios la capacidad de incrustar imágenes en páginas web. En este artículo, sabremos cómo agregar imágenes a la página web que harán que el sitio web sea atractivo y varios métodos para insertar las imágenes.

Hay 2 formas de insertar las imágenes en una página web:

Al proporcionar una ruta o dirección completa (URL) para acceder a un archivo de Internet.
Al proporcionar la ruta del archivo en relación con la ubicación del archivo de la página web actual.

Primero discutiremos la inserción de la imagen en la página web y, simultáneamente, entenderemos los dos enfoques anteriores.

Agregar imágenes en una página web: la etiqueta <img> se usa para agregar o incrustar las imágenes en una página web/sitio web. La etiqueta «img» es una etiqueta vacía, lo que significa que solo puede contener una lista de atributos y no tiene una etiqueta de cierre. La adición de imágenes mejora la calidad junto con la mejora de la estructura de diseño y la apariencia de la página web. Hoy en día, un sitio web no agrega imágenes directamente a una página web, ya que las imágenes están vinculadas a páginas web mediante el uso de la etiqueta <img> que contiene espacio para la imagen.

Sintaxis:

<img src="url" alt="some_text" width="" height="">

Atributo: La etiqueta <img> tiene los siguientes atributos:

src : se utiliza para especificar la ruta a la imagen.
alt : se utiliza para especificar un texto alternativo para la imagen. Es útil porque informa al usuario sobre lo que significa la imagen y también debido a cualquier problema de red si la imagen no se puede mostrar, se mostrará este texto alternativo.
crossorigin : Se usa para importar imágenes de sitios de terceros que permiten usar el acceso de origen cruzado con canvas.
altura : Se utiliza para especificar la altura de la imagen.
ancho : Se utiliza para especificar el ancho de la imagen.
ismap : se utiliza para especificar una imagen como un mapa de imagen del lado del servidor.
cargando : Se utiliza para especificar si un navegador debe diferir la carga de imágenes hasta que se cumplan algunas condiciones o cargar una imagen inmediatamente.
longdesc : se utiliza para especificar una URL a una descripción detallada de una imagen.
referrerpolicy : se utiliza para especificar qué información de referencia usar al obtener una imagen, es decir, sin referencia, sin referencia cuando se degrada, origen, origen cuando se cruza el origen, URL insegura.
tamaños : se utiliza para especificar tamaños de imagen para diferentes diseños de página.
srcset : se usa para especificar una lista de archivos de imagen para usar en diferentes situaciones.
usemap : se utiliza para especificar una imagen como un mapa de imagen del lado del cliente.

src: El src significa fuente. Cada imagen tiene un atributo src que le dice al navegador dónde encontrar la imagen que desea mostrar. La URL de la imagen proporcionada apunta a la ubicación donde se almacena la imagen. Cuando la página web se carga por primera vez, el navegador obtiene la imagen de un servidor web y la inserta en la página. Si el navegador no detecta la imagen, los usuarios obtendrán un icono de enlace roto. Podría ser posible si la ruta del archivo es incorrecta o si la imagen se eliminó de esa ubicación.

Ejemplo 1: este ejemplo simple ilustra el uso de la etiqueta <img> en HTML que se usa para incrustar la imagen en la página web.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Welcome To GFG</title>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
    <p>This is the demo of <img> tag.</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
         alt="GFG image" /> 
</body>
</html>

Producción:

Agregar el logotipo de GFG usando la etiqueta <img>

Ejemplo 2: El ejemplo ilustra el uso del atributo src en la etiqueta <img>.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"/> 
</body>
</html>

Producción:

Uso del atributo src

alt: si la imagen no se puede mostrar, el atributo alt actúa como una descripción alternativa para la imagen. El valor del atributo alt es un texto definido por el usuario. Generalmente sucede cuando el usuario, por alguna razón, no puede visualizarlo debido a una conexión a internet lenta o un error en el atributo src, o si el usuario utiliza un lector de pantalla.

Ejemplo 3: El ejemplo ilustra el uso del atributo alt en la etiqueta <img>.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Alt Attribute Example</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="This is GeeksforGeeks logo" /> 
</body>
  
</html>

Producción:

Agregar nombre de imagen en el atributo alt

Configuración del ancho y alto de la imagen: los atributos de ancho y alto se utilizan para especificar el alto y el ancho de una imagen. Los valores de los atributos se especifican en píxeles de forma predeterminada. Los atributos de ancho y alto siempre se declaran en píxeles. Consulte la sección ¿Cómo configurar el ancho y el alto de una imagen usando HTML? artículo para más detalles.

Ejemplo 4: El ejemplo ilustra el uso del atributo ancho y alto en la etiqueta <img>.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Setting width and height of image</title>
</head>
  
<body>
      
<p>inserted image using<img> tag:</p>
  
   
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" 
         width="300" 
         height="300" /> 
</body>
  
</html>

Producción:

Configuración del ancho y alto de la imagen

Agregar títulos a la imagen: junto con las imágenes, también se pueden agregar títulos a las imágenes para proporcionar más información relacionada con la imagen insertada. Para insertar un título, se utiliza el atributo de título. Consulte el HTML | artículo de atributo de título para obtener más detalles.

Ejemplo 5: El ejemplo ilustra el uso del atributo de título en la etiqueta <img>.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" 
         width="200" 
         height="200" 
         title="Logo of GeeksforGeeks" /> 
</body>
  
</html>

Producción:

Agregar el título a la imagen

Configuración del estilo de la imagen: en este ejemplo, estamos usando la propiedad de borde para decorar la imagen. De forma predeterminada, cada imagen tiene un borde alrededor. Al usar el atributo de borde, se puede cambiar el grosor del borde. Un grosor de «0» significa que no habrá borde alrededor de la imagen. Consulte el HTML | Atributo de borde <img> para obtener más detalles.

Ejemplo 6: Este ejemplo ilustra el uso de la propiedad de estilo dentro de la etiqueta <img> en HTML.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Setting border to image</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" 
         width="200" 
         height="200" 
         border="5" /> 
</body>
</html>

Producción:

Establecer el borde de la imagen

Alineación de una imagen: de forma predeterminada, una imagen se alinea en el lado izquierdo de la página, pero se puede alinear al centro o a la derecha usando el atributo de alineación. Consulte el HTML | <img> alinear atributo para más detalles.

Ejemplo 7: Este ejemplo ilustra el uso de la propiedad de alineación en la etiqueta <img> cuyo valor se establece a la derecha.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Aligning an image</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" 
         align="right" /> 
</body>
  
</html>

Producción:

Alinear la imagen a la derecha

Adición de una imagen como enlace: una imagen puede funcionar como un enlace con una URL incrustada. Se puede hacer usando la etiqueta «img» dentro de una etiqueta «a». Necesitamos especificar la ruta del archivo para mostrar la imagen en la página web. Las rutas de archivo se utilizan para vincular recursos externos, como imágenes, videos, hojas de estilo, JavaScript, mostrar otras páginas web, etc. Para insertar un archivo en una página web, se debe conocer su origen.

Las rutas de archivo son de dos tipos:

Rutas de archivo absolutas : siempre contiene el elemento raíz junto con la lista completa de directorios necesaria para localizar el archivo.
Rutas de archivo relativas: es la representación de ruta jerárquica que ubica el archivo o la carpeta en un sistema de archivos a partir del directorio actual.

Ejemplo 8: Este ejemplo ilustra el uso de la propiedad de enlace en la etiqueta <img>. Aquí, hemos utilizado el enlace de la ruta absoluta para proporcionar el enlace a la imagen. Consulte el HTML | ¿ Rutas de archivo y cómo convertir una imagen en un enlace en HTML? artículo para más detalles.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Adding image as link</title>
</head>
  
<body>
    <h3>GeekforGeeks</h3>
    <p>inserted image using <img> tag:</p>
    <a href="https://ide.geeksforgeeks.org/tryit.php"> 
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" /> 
    </a>
</body>
  
</html>

Producción:

Añadir la imagen como enlace

Agregar imagen animada: también se pueden agregar imágenes animadas en formato .gif usando la etiqueta «img».

Ejemplo 9: Este ejemplo explica la adición de una imagen en formato GIF en HTML.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h3>Adding a gif file on a webpage</h3> 
    <img src="smiley.gif" 
         alt="smiley" 
         style="width: 200px; height: 200px" /> 
</body>
</html>

Producción:

Agregar una imagen en formato GIF

Uso de la imagen como fondo: una imagen se puede usar como fondo para una página web. Para ello, utilizamos la propiedad background-image de CSS. Consulte el HTML | <body> atributo de fondo para obtener más detalles.

Ejemplo 10: Este ejemplo ilustra el uso de la propiedad de fondo del cuerpo en la etiqueta <img>.

HTML

<!DOCTYPE html>
<html>
  
<body style="background-image: url (
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png' 
);">
    <h2>Image As a Background</h2>
    <p>
       In this example we have specified a 
       background for a webpage using an image. 
    </p>
  
  
</body>
</html>

Producción:

Agregar la imagen como fondo

Formato de imagen común: este es el formato de archivo de imagen de uso común que es compatible con todos los navegadores.

S. No.	Abreviatura	Tipo de archivo	Extensión
1.	PNG	Gráficos de red portátiles.	.png
2.	JPEG.	Imagen del Grupo Conjunto de Expertos en Fotografía.	.jpg, .jpeg, .jfif, .pjpeg, .pjp
3.	SVG	Gráficas vectoriales escalables.	.svg.
4.	GIF	Formato de gráficos intercambeable.	.gif
5.	OIC	Icono de Microsoft.	.ico, .cur
6.	APNG	Gráficos de red portátiles animados.	.apng

Navegadores compatibles:

Google Chrome 93.0
Internet Explorer 11.0
Microsoft Edge 93.0
Firefox 92.0
Ópera 78.0
Safari 14.1

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

S. No.

Abreviatura

Tipo de archivo

Extensión

Deja una respuesta Cancelar la respuesta