Imágenes

Las imágenes son una parte esencial del diseño web. Hacen que una página web resulte atractiva para el visitante. Pueden incluirse fácilmente en un documento HTML mediante la tag <img>.

• src - atributo obligatorio. Su valor es la ruta a la ubicación de la imagen. La ruta puede ser absoluta y relativa;
• alt - atributo obligatorio. Proporciona un texto alternativo que se puede mostrar cuando la imagen no se puede renderizar;
• width y height - especifica el tamaño de la imagen en píxeles. Sin estos atributos, la imagen se mostrará en su tamaño original.

atributo alt

Hacemos que la descripción de la imagen sea informativa y significativa. Ayuda a describir la imagen para las personas con problemas de visión o que no pueden verla. De esta manera, el navegador leerá el atributo alt, y un usuario podría entender por qué tenemos esta imagen.

Imaginemos el siguiente ejemplo. Tenemos una fuente sobre carreras de caballos. Queremos mostrar cómo se preparan los competidores para las carreras.

Un mal valor para el atributo alt sería:

Un buen valor para el atributo alt sería:

Good value for the alt attribute will be:

The alt text "A man on a horse" is too generic and lacks context. It provides a basic description, but it doesn't convey useful details about the scene or the purpose of the image.

Nota

Para resumir la diferencia entre rutas relativas y absolutas, una ruta absoluta representa el enlace real que cualquiera puede utilizar para acceder a una imagen. Por otro lado, una ruta relativa es un enlace dentro del contexto de su propio proyecto. Se refiere a una imagen local y a una ruta a la que cualquiera dentro del proyecto puede acceder.

Relative path

It specifies the location of the image file relative to the current document. For example:

It means that the image.jpg file located in the images directory.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.