Etiquetas de Imagen

Etiqueta <img>

<img 
  src="imagen.jpg" 
  alt="Texto alternativo para quienes no puede ver la imagen"
  title="Detalle de lo que trata la imagen">

La descripción de alt aparecerá antes de que se cargue el archivo asociado o en su sustitución. Debe asegurar que mediante texto identifique de qué trata la imagen (texto alternativo).

El title aparece cuando el puntero del mouse pasa por encima de la imagen.

Etiquetas Semánticas para Imágenes

<figure> y <figcaption>

<figure> 
  <img 
    src="imagen.jpg" 
    alt="Texto alternativo para quienes no puede ver la imagen" 
    title="Detalle de lo que trata la imagen"> 
  
  <figcaption>Pie de foto</figcaption> 
</figure>

• <figure> - Define que el contenido allí serán ilustraciones, diagramas, fotos, etc.
• <figcaption> - Define el “pie de foto” o “título de la misma”. Puede usarse antes o después de la etiqueta <img> pero dentro de <figure> (Opcional)

Imágenes Decorativas

Si una imagen es puramente decorativa y no contribuye al mensaje o la funcionalidad, es recomendable no incluirla en el HTML, sino más bien integrarla mediante CSS como fondo.

De esta manera, si la imagen no se carga correctamente, no se perderá información, ya que su ausencia no afectará el contenido sustancial, sino simplemente el adorno visual.

Propiedades de Background

background-color

Define el color de fondo de un elemento

background-color: transparent / yellow / #00ff00 / rgb(255,0,255)

background-position

Define la posición inicial de la imagen de fondo especificada.

background-position: left top / center / bottom / center top / center / bottom / right top / center / bottom

background-image

Establece una o más imágenes de fondo para un elemento.

background-image: url("../img/imagen-de-ejemplo.jpg")

background-repeat

Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

background-repeat: repeat / repeat-x / repeat-y / no-repeat

background-attachment

Determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

background-attachment: scroll / fixed

Abreviatura background

background: #00ff00 center top no-repeat fixed url(img.jpg);
background: red repeat-x url(img.jpg);
background: right repeat-y url(img.jpg);

Los valores se pueden agregar en cualquier orden. Cualquiera de estos valores puede ser omitido.

Nota: Siempre que se use una imagen de fondo se recomienda agregar un color de fondo similar a la imagen para que aquellas personas que deshabilitan las imágenes, puedan ver el sitio sin problemas.

Background-size

Especifica el tamaño de las imágenes de fondo.

contain

Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.

cover

Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.

Porcentaje

Escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo.

Píxeles

Escala la imagen de fondo a la longitud especificada en la dimensión correspondiente.

auto

Escala el fondo de la imagen en la dirección correspondiente de modo que su proporción esencial se mantiene.

Background-clip

Especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

• border-box (por defecto) - El fondo se extiende hasta el borde exterior del contenedor.
• padding-box - El fondo no se muestra a través del borde (se extiende hasta el borde exterior del padding)
• content-box - El fondo se dibuja desde donde inicia el contenido.

Background-origin

Especifica la posición del fondo, desde donde se debe extender la imagen de fondo. Siempre de arriba a la derecha.

• border-box - Relativo al borde.
• padding-box - Relativo al padding.
• content-box - Relativo al contenido.

Nota: Cuando el background-attachment es fixed, se anula esta propiedad.

Prefijos del Navegador

Existen propiedades CSS que aún no son soportadas por algunos navegadores o se encuentran en fase experimental, por lo que existen PREFIJOS que aseguran que la propiedad sea soportada por determinados navegadores.

• -webkit- (Chrome, Safari, nuevas versiones de Opera, casi todos los navegadores iOS)
• -moz- (Firefox)
• -o- (Versiones antiguas, pre-Webkit, de Opera)
• -ms- (Internet Explorer y Microsoft Edge)