Uso de imágenes en HTML

Uso de imágenes en HTML

Uso de imágenes en HTML

El uso de imágenes en HTML es algo imprescindible para que un sitio web luzca bien. Estas pueden ser estéticas, con movimiento, pueden englobar la idea del artículo que se lee o la idea del sitio en general, o bien pueden mostrar información importante de una forma agradable.

Existen cuatro formatos de imagen que se admiten para incrustarse en una página web:

  • GIF
  • JPEG
  • PNG
  • SVG

La meta es encontrar el equilibrio para lograr que la imagen se vea con calidad y su peso en kb sea lo más bajo posible, ya que mientras menos pese, más rápido cargará en el navegador. Para ello, debemos conocer para que tipo de archivo es adecuado cada formato y experimentar con las opciones de compresión de este para lograr el balance mencionado.

Formatos para imágenes en HTML

GIF (Graphics Interchange Format)

Adecuado para

  • Logotipos
  • Imágenes con colores sólidos (Sin degradados).
  • Animaciones simples.

Creado por Compuserve en el año de 1997, sustituyó a un formato llamado RLE, que mostraba imágenes en blanco y negro.

Una imagen con compresión GIF puede contener hasta 256 colores (8 bits), puede contar con transparencia y es posible animarla (como una secuencia de imágenes),  su uso se recomienda para imágenes con colores sólidos, como pueden ser Logotipos.

Optimización

En las imágenes de ejemplo se emplea el “Guardar para web” de Adobe Photoshop CS6, pero las opciones de optimización que se mencionan se encuentran en cualquier otro programa de diseño gráfico.

Reducción de color

Al contar con una paleta de solamente 256 colores, es muy probable que los colores que contiene la imagen original no existan en la Tabla de colores para formato GIF y será necesario utilizar un método para “ajustar” los colores de la imagen a los colores más cercanos disponibles y omitir los que no se utilizan:

  • Perceptual: Da prioridad a los colores que son más sensibles al ojo humano (rojo, verde y azul).
  • Selectivo: Da prioridad a los colores de las áreas más amplias de color en la imagen.
  • Adaptable: Realiza un muestreo de los colores más frecuentes e incluye en la paleta diversas tonalidades de estos.
  • Restrictivo: Utiliza en la paleta de colores lo que se denomina “Web-safe colors”, que son 216 colores que comparten los sistemas operativos OS X y Windows.

Es muy recomendable probar cada uno de ellos y previsualizarlo para juzgar con cual de estas opciones se ve mejor la imagen.

Reducción de color GIF
Opciones de reducción de color para el formato GIF
Tramado

El tramado es el método que se utiliza para simular un color que no existe en la Tabla de colores para formato GIF.

No es necesario utilizarlo si los colores de la imagen son sólidos, pero si contiene degradados o transparencia alpha, es necesario utilizarlo para lograr que se vea con mejor calidad, a costa de un aumento en el tamaño del archivo.

Cuenta con tres opciones:

  • Difusión: Agrega un patrón aleatorio al área donde se aplica, el tramado se difumina con los pixeles que se encuentran alrededor. Cuenta con la opción de agregar o disminuir la aplicación de este mediante porcentaje.
  • Motivo: Agrega un patrón con formas cuadradas.
  • Ruido: Agrega un patrón aleatorio, similar al de Difusión, pero sin difuminado.
Tramado en GIF
Tramado en el formato GIF
Transparencia

La transparencia se emplea para opacar los colores que en la imagen original son transparentes o simular el color si el elemento cuenta con transparencia alpha.

Generalmente se aplica al color de fondo.

Si en la imagen se encuentra un objeto con transparencia alpha, es posible aplicar un tramado para simularla, ya que no es soportada como tal en el formato GIF. Esta puede ser de Difusión, Motivo o Ruido (Véase Tramado).

Transparencia en formato GIF
Simulación de transparencia mediante tramado en formato GIF

JPEG (Joint Photographic Experts Group)

Adecuado para

  • Fotografías

Creado por un grupo de expertos en fotografía, que iniciaron el desarrollo de un método de compresión de imágenes 1986, terminándolo en el año de 1994.

Este formato soporta 16 millones de colores (24 bits), por lo que es ideal para fotografías.

Sin embargo, por su método de compresión no es recomendable para imágenes que contengan textos, ya que estos pierden definición.

OPTIMIZACIÓN

En las imágenes de ejemplo se emplea el “Guardar para web” de Adobe Photoshop CS6, pero las opciones de optimización que se mencionan se encuentran en cualquier otro programa de diseño gráfico.

Calidad

Disminuye la calidad de la imagen para beneficiar la compresión, a menos calidad, menor peso en Kb.

calidad jpg
Calidad en el formato jpg
Progresivo

Con esta opción, la imagen comienza a visualizarse de forma un tanto distorsionada en una página web, mejorando su calidad a medida que se termina de cargar. Esta forma tiene beneficio cuando un usuario accede a la imagen desde una conexión a Internet lenta.

Con esta opción de manera automática se genera un jpeg “Optimizado“.

jpg progresivo
Opción Progresivo en el formato jpg
Optimizado

Utiliza una codificación llamada Huffman, que reemplaza la codificación fija de la imagen en bits por codificación variable (de 1 a 16 bits), logrando un archivo con menos peso en Kb.

Nota: En el caso de Adobe Photoshop, al seleccionar la opción de Optimizado, muestra una leyenda que dice “Crea archivos más pequeños pero menos compatibles”. Se puede hacer caso omiso a esta advertencia, ya que cualquier navegador web de 10 años a la fecha lo soporta sin problemas.

jpg optimizado
Opción Optimizado en el formato jpg

PNG (Portable Network Graphics)

ADECUADO PARA

  • Fotografías con textos
  • Imágenes con transparencia.

Creado por el PNG Development Group como una alternativa al formato GIF en 1995.

Este formato posee la capacidad de manejar 281,474,976,710,656 de colores (48 bits), pudiendo manejar cualquier tipo de gráfico o fotografía. Su tipo de compresión no genera pérdida y se puede emplear en imágenes que contienen textos.

Otra característica importante de este formato es que soporta transparencia y transparencia alpha, puede contener, por ejemplo, un fondo transparente (transparencia) y, a su vez, un segmento semitransparente,  dejando ver lo que se encuentra detrás de este (Transparencia alpha).

La transparencia alpha se conoce como la opacidad que se le da a un objeto desde el programa de diseño gráfico, generalmente se utiliza para dejar ver otro objeto que se encuentra detrás.

Transparencia alpha
Opacidad de un elemento en el programa de diseño gráfico. (Transparencia alpha).

OPTIMIZACIÓN

En las imágenes de ejemplo se emplea el “Guardar para web” de Adobe Photoshop CS6, pero las opciones de optimización que se mencionan se encuentran en cualquier otro programa de diseño gráfico.

Para el formato PNG existen cuatro opciones de optimización:

  • PNG-8 (8 bits – 256 colores)
  • PNG-24 (24 bits – 16,777,216 colores)
  • PNG-32 (32 bits – 4,294,967,296 colores)
  • PNG-48 (48 bits – 281,474,976,710,656 colores)

Los monitores en la actualidad utilizan una profundidad de color de 24 bits, por lo que el uso dePNG-32 o PNG-48 en este momento no representa una ganancia real en la calidad de imagen.

PNG-8

Comparte las características de reducción de color y transparencia del formato GIF, ya que ambos cuentan con una Tabla de colores con un máximo de 256 colores.

Reducción de color
  • Perceptual: Da prioridad a los colores que son más sensibles al ojo humano (rojo, verde y azul).
  • Selectivo: Da prioridad a los colores de las áreas más amplias de color en la imagen.
  • Adaptable: Realiza un muestreo de los colores más frecuentes e incluye en la paleta diversas tonalidades de estos.
  • Restrictivo: Utiliza en la paleta de colores lo que se denomina “Web-safe colors”, que son 216 colores que comparten los sistemas operativos OS X y Windows.Es muy recomendable probar cada uno de ellos y previsualizarlo para juzgar con cual se ve mejor la imagen.
png 8 color
Opciones de reducción de color en el formato PNG-8
Transparencia

La transparencia se emplea para opacar los colores que en la imagen original son transparentes o simular el color si el elemento cuenta con transparencia alpha.

Generalmente se aplica al color de fondo.

Si en la imagen se encuentra un objeto con transparencia alpha, es posible aplicar un tramado para simularla, ya que no es soportada como tal en el formato PNG-8. Esta puede ser de Difusión, Motivo o Ruido (Véase Tramado).

Entrelazado

Esta opción es muy similar a la opción Progresivo de JPEG, la imagen comienza a visualizarse en baja resolución, mejorando su calidad a medida que se termina de cargar. Esta forma tiene beneficio cuando un usuario accede a ella desde una conexión a Internet lenta.

png 8 entrelazado
Entrelazado en el formato PNG-8

SVG (Scalable Vector Graphics)

ADECUADO PARA

  • Ilustraciones
  • Logotipos

Creado por el World Wide Web Consortium (W3C), en el año 2001, es el formato para insertar imágenes vectoriales en una página web.

La imagen se forma mediante instrucciones en formato XML. Al ser vectores la imagen puede mostrarse en cualquier tamaño sin perder resolución, es posible animarla en interactuar con ella, mediante JavaScript y/o CSS.

Actualmente el formato es admitido por los principales navegadores.

Al ser código, no se cuenta con opciones de compresión al guardarse.

Preparación para el uso de imágenes en HTML

Contrario a lo que comúnmente se piensa,  que una imagen para pantalla (web) debe prepararse a una resolución de 72 ppi (pixeles por pulgada), en la práctica, la resolución que se elija es irrelevante para su uso en una página web.

La resolución corresponde al tamaño y calidad que tendrá una imagen al momento de imprimirse desde un programa de diseño gráfico o diseño editorial, no un navegador web.

Lo que nos debe interesar es su tamaño en pixeles, el tamaño del documento aplica solo para impresión:

tamaño en pixeles
Tamaño en pixeles

Tamaño

Como mencionaba, lo que nos debe interesar no es la resolución, sino elegir el formato, la compresión y el tamaño adecuados.

De preferencia debemos conocer, previo a optimizar y exportar la imagen, las dimensiones en que se requerirá, para no tener que redimensionarla mas tarde.

Si la imagen es mas grande de lo que la necesitamos, podemos cambiar su tamaño mediante estilos en cascada para que se muestre mas pequeña sin afectar su calidad. Solo es recomendable si es poco lo que hay que reducirla, ya que tendrá más peso en Kb de lo que debería y por tanto tardará mas tiempo en cargarse.

Si por el contrario, es más chica de lo que necesitamos, aunque se puede redimensionar para que se vea más grande, perderá definición. Las imágenes en bitmap se forman mediante una serie de cuadros, cada uno de un solo color. Al ampliarla, estamos ampliando el tamaño de los cuadros, haciendo que se vea “pixeleada”.

Esto no aplica si la imagen es un vector (SVG).

imagen pixeleada
Apariencia de un bitmap ampliado

Uso de imágenes en HTML

La instrucción que se utiliza para incrustar imágenes en una página web es img:

Imagen (Image)
<img>

elementoLinea Elemento en línea

La instrucción img puede contar con varios atributos:

  • src (fuente -source-) *Requerido: Indica la ruta y el nombre de la imagen. La imagen puede estar dentro de nuestro árbol de documentos o en otro sitio de Internet:

Imagen interna:

<img src="imagenes/imagen.jpg">

El valor del atributo src es la ruta al archivo seguida de una diagonal (/) y el nombre del archivo.

Es necesario seguir las mismas consideraciones que se mencionan en el artículo Ligas o hipervínculos en HTML para seguir la ruta a la imagen de forma correcta.

Imagen externa:

<img src="https://placehold.it/350/350/">

Si la imagen se encuentra en otro sitio web, debemos anteponer a la dirección de la imagen las siglas:

http://

Hyper Text Transfer Protocol: Es el protocolo que permite la transferencia de información en la Web

  • alt (texto alterno -alternate-): Proporciona un texto alterno a la imagen, este texto es útil para los lectores con sintetizador de voz y los motores de búsqueda.
  • title (título -title-): Atributo con el que se incluye un texto que aparece como tooltip al pasar el ratón sobre el elemento.

Figura (Figure)
<figure></figure>

Elemento en bloque Elemento en bloque

Instrucción que permite formar un bloque con una imagen (img) y una leyenda relativa a la imagen (figcaption).

Leyenda de imagen (Figcaption)
<figcaption></figcaption>

Elemento en bloque Elemento en bloque

En esta instrucción incluimos la leyenda relativa a la imagen cuando se está incluida en una figura (figure).

See the Pen figureImg by Miguel Méndez (@codigo-web) on CodePen.0

 

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz