arquer.netarquer en la red
arquer.netUna de las gracias que "quedan bien" en las páginas web son las imágenes.
Mucha gente coloca sus imágenes en la página y se conforma con verlas bien en su propio ordenador, pero los secretos para hacerlas aparecer correctamente en cualquier equipo son elementales y pocas veces se siguen.
Antes de profundizar en cómo insertar imágenes puedes leer una referencia sobre derechos y cuestiones legales que suscitan las imágenes publicadas.
Vamos a insertar una imagen en una página paso a paso:
0.- Primer paso y fundamental, abrimos la imagen con un editor cualquiera y le cambiamos el tamaño para que coincida con el espacio que le vamos a dar en la página; por ejemplo, una imagen de la cámara digital de 2560x1920 que ocupa unos 2,3 megas la podríamos dejar a 400 pixels por 300 para que sea más o menos ligera. A continuación la guardamos con un nombre cualquiera (a poder ser solo minúsculas) y con una calidad del 60 o el 70 por ciento.
Como ejemplo he tomado una imagen de la antena de mi nuevo (y cutre) router wi-fi que pesaba 2,3Mb y la he dejado en 9Kb para insertarla en esta página:
Nota: Como regla general utilizaremos el formato jpeg ó jpg (formato de intercambio de la union de fotografos) para fotografías y el gif (formato para intercambio de gráficos) para dibujos; alternativamente se puede utilizar png (formato de gráficos portables para red) en sus distintos sabores para cualquier cosa pero esto es un tema apropiado para tratarse aparte.
1.- Insertar la imagen: basta con poner la dirección de la imagen dentro de una etiqueta como esta:
<img src="ruta/imagen.jpg">
2.- Informar del significado de la imagen para que los navegadores de texto y las personas con dificultades de visión sepan de qué va, se añade una etiqueta 'alt' con una breve descripción; en el caso de que no sea más que un adorno se pone la misma etiqueta pero con las comillas nada más (vacía). Podría ser necesario un enlace LONGDESC si es que no basta con unas palabrillas.
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo">
A partir de IE8 si deseamos que aparezca un texto al pasar el puntero sobre la imagen será necesario incluir este texto en la etiqueta title o en un archivo al que llamamos con longdesc porque el texto de la etiqueta alt ya no se muestra por defecto.
Para saber en qué orden y en qué condiciones se muestran unos y otros consulta las novedades de Internet Explorer 8
3.- Reservar sitio en la página para que se cargue todo más rápido (ponemos dos etiquetas especificando el ancho y el alto en pixeles y el navegador reserva el espacio todo solito):
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300>
4.- Podemos también alinear la imagen a la izquierda para que se muestre a un lado del texto y las líneas fluyan a su alrededor:
Antes se hacía así:
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300 align="left">
Pero ahora no se hace así, no señor, ahora somos modernos y separamos el contenido del estilo.
Para alinear una imagen tenemos que usar estilos, alinear es un elemento de la presentación, no del contenido asi que lo correcto es 'flotar' la imagen:
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300 style="FLOAT:left">
Y para que 'flote' a la derecha ponemos "FLOAT:right" logicamente.
Podemos verla aquí alineada a la derecha y reducida aún más (menos de 3Kb), queda algo así:
La imágen pesa poco, se entiende de qué trata, se carga muy rápido en todos los navegadores y si no aparece por alguna razón o el visitante no puede ver imágenes, por lo menos puede leer una explicación simple.
La separamos del texto que la rodea con otro elemento de estilo, un margen y listo.
5. Para nota: se puede hacer una imagen con poco peso (LOWSRC) en blanco y negro y cargarla como imagen alternativa mientras se envía la imagen real estas son las dos versiones:
Insertaríamos dos imágenes en la misma etiqueta:
<img alt="Imagen con dos versiones" src="ruta/imagencol.jpg" lowsrc="ruta/imagenbyn.jpg">
En las nuevas versiones de HTML esta etiqueta ha sido retirada.
Para organizar de manera simple varias imágenes podemos utilizar los estilos en la cabecera de la página o incluso en un archivo externo para que se apliquen los mismos estilos a todo nuestro sitio; queda pendiente una explicación sobre este tema de dónde escribir las hojas de estilo.
Seguir unas pautas más o menos correctas no parece un trabajo demasiado duro, pero si nos fijamos en las páginas, incluso profesionales, que abundan por ahí debe ser algo casi imposible.
Para ser totalmente honestos puede que no resulte sencillo hacerlo si se utilizan editores más sofisticados que un simple editor de texto (los usuarios de Windows disponen del notepad y los de *nix de un montón de ellos).
¡Ah! se me olvidaba, no pasa nada por revisar las páginas que editamos con algún navegador distinto del habitual (por ejemplo si utilizas Opera o Firefox, prueba a ver el resultado también en Internet Explorer y viceversa) para asegurarnos de que el resultado es correcto.
De paso se puede verificar la ortografía, que no pasa nada.
Busca en Google evitando contenidos inadecuados desde esta página
La búsqueda segura en Google te ayuda a encontrar paginas con contenidos adecuados para toda la familia