Como añadir imágenes a una página web

Las imágenes añaden una nota de color al blog y a cualquier página en general, proporcionan un descanso en la lectura al usuario y muchas veces sirven de explicación gráfica para lo que se está contando.

Por ello, contar con imágenes a la hora de postear puede suponer un beneficio para el usuario.

A la hora de encarar un proyecto, un diseñador web freelance debe estar capacitado para añadir imágenes que aporten información útil, ayuden al usuario y a la vez hagan el diseño atractivo. Todo ello sin penalizar la velocidad de carga de la web.

En este artículo te explicamos cómo poner imágenes en tu web de forma correcta, ya seas diseñador web o tengas un proyecto propio.

Código para añadir una imagen a un sitio web

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

Atributo src, la ruta de la imagen

Indica la ruta del archivo. Si el archivo de imagen se encuentra en la misma carpeta que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta podría ser así:

src="/carpeta/archivo.jpg"

También se puede llamar a una imagen con la dirección completa:

 src="https://web.com/carpeta/archivo.jpg"

Alto y ancho de la imagen

Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

Cómo insertar imágenes con enlaces

Ejemplo:

<a href="carpeta/web.html"><img src="archivo.png"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="https://www.lawebera.es/">
   <img src="/carpeta/archivo.png" />
</a>

Atributo alt, la descripción de la imagen

Este atributo especifica un texto alternativo que se muestra en lugar de la imagen cuando ésta no existe o el navegador no es capaz de cargarla. En estos casos, el texto alternativo es la única forma que tienen los visitantes de conocer el contenido de la imagen.

El atributo alt se expresa así:

<img src="nombrearchivo.jpg" alt="texto alternativo descriptivo" />

Código completo para añadir una imagen a una web

Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la imagen (recordemos que es muy importante el uso de imagenes en los blogs y en portales web).

Veamos un ejemplo con lo aprendido:

<a href="paginaweb.html">
    <img src="archivo.png"
    width="300" height="150"
    alt="texto alternativo de la imagen" />
</a>

Para definir otro tipo de detalles visuales hay que hacer uso de CSS.

Añadir un favicon a tu web

Los favicon son esas pequeñas imágenes personalizadas que aparecen en la barra de direcciones del navegador, y también son esas imágenes que aparecen al lado de los nombres de las páginas que hemos guardado en favoritos.

Por ejemplo el favicon de LaWebera es este:

Para tener un favicon personalizado en tu web sólo tienes que crear una imagen con extensión .ico y subirla a la carpeta raíz de tu espacio web con este nombre: favicon.ico. Una vez subida la imagen añade este código en las páginas de tu web y listo:

<link rel="shortcut icon" href="http://www.miweb.com/favicon.ico">

Ahora bien. Para crear la imagen .ico no vale cualquier programa.

Por ejemplo, Photoshop que es de los más usados, no reconoce este tipo de archivos. Pero no pasa nada, porque como siempre en Internet tenemos herramientas gratuitas que nos solucionan el problema.

Le indicas la ubicación del archivo que quieres convetir en favicon (el archivo debe ser en formato gif, jpg, png o bmp) y pulsas “crear icono”. De forma predeterminada te genera el favicon con un tamaño de 16×16 píxeles, listo para subir a tu web, pero si también quieres hacer un favicon más grande para el escritorio o cualquier otra cosa permite crearlos de 32×32 o 48×48 px.

Una buena forma de destacar tu web entre los favoritos de tus visitantes y de darle un toque personal en el navegador.

Mapas de imágenes

Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.

Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto:

<img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
  <area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
  <area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html" alt="Europa" />
</map>

En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del elemento “map”.

En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo “name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.

Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas.

Para la primer área utilizamos una forma rectangular por lo que el atributo “shape” recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo “coords” indica los cuatro valores separados por coma. Pr su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma.

Imágenes de fondo con CSS

Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones.

El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad “background-image“, apegándonos más a los estándares que predominan.

La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo.

Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen.

body { background-image: url(imagenes/webera.jpg); }

Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position.

La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página.

body {
  background-image: url(imagenes/webera.jpg);
  background-attachment: fixed;
}

En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página.

En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es “background-repeat”.

Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.

body {
  background-image: url(imagenes/webera.jpg);
  background-repeat: no-repeat;
}

Esta propiedad también puede tener los valores de:

• “repeat-x” para repetir la imagen únicamente de manera horizontal.
• “repeat-y” para hacer lo mismo pero de manera vertical.

El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad “background-color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido.

Las imágenes de fondos siempre inician en la esquina superior izquierda por defecto, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediante la propiedad “background-position”, que es generalmente utilizada en combinación con la propiedad de repetición.

Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores.

body {
  background-image: url(imagenes/webera.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position.

body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; }

Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página, un párrafo, una tabla, un div, etc.

Dónde alojar las imágenes

La duda es si guardar (o alojar) los gráficos en tu propio servidor web o en un servidor especializado en almacenamiento de archivos, como Amazon AWS. Depende de la cantidad de imágenes que vayas a subir, si son muchas es mejor usar un servicio especializado porque te va a costar mucho más barato.

Si eliges un servidor gratuito de fiar para tus imágenes puede ser útil, porque ahorras algo de dinero, pero si no eliges bien puede fallar el servicio o cargar las páginas con demasiada lentitud y volverse en tu contra.

Dónde conseguir imágenes gratis. Bancos de imágenes

Aunque siempre podemos optar por hacer nuestros propios gráficos, muchos webmasters no tienen tiempo o la habilidad necesarias para hacerlo, por lo que utilizar imágenes gratuitas puede ser una buena solución.

Una alternativa a la creación de imágenes propias para tu web, es utilizar las que existen disponibles en Internet para su libre uso. Algunas páginas donde puedes comenzar a buscar son:

Algunos errores comunes en la utilización de imágenes en la web

• Reducir el tamaño de la imagen directamente en el editor de HTML: si haces esto, no estás reduciendo realmente la imagen, le estás diciendo al navegador que la redimensione en el momento, pero su tamaño (y lo que ocupa) sigue siendo igual y la página tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es enorme. Para cambiar el tamaño de una imagen utiliza un editor de imágenes, así el peso también se reducirá y la página web tardará menos en cargar.
• Usar imágenes en formato BMP: por suerte, este formato está desapareciendo cada vez más de la web, y digo con suerte porque es un tipo de formato que no comprime la imagen, por lo que ésta es muy pesada y ralentiza mucho la carga de la página. Es mejor usar imágenes .gif, .jpg o .png.
• No poner etiquetas alt: las imágenes son importantes en la web, pero no añaden contenido a la página, por lo que añadir una pequeña descripción a la imagen resulta muy útil de cara al posicionamiento en buscadores ya que da información a los buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en los que las imágenes no se muestran en su lugar aparece el texto escrito en esta etiqueta, por lo que los usuarios que los utilizan tienen una guía para saber qué imagen había si escribes un texto descriptivo, algo que mejora mucho la accesibilidad web.