Programación en XHTML: imágenes
Archivos de Imagen
Las imágenes son el mejor recurso para enriquecer nuestra web, pueden servir para aclarar o ayudar con algún concepto, mejorarlo o simplemente embellecer nuestra página (fotos, logos, fondos, botones, diseño en general). Hay que ser muy cuidadosos al momento de seleccionar las imágenes ya que por su tamaño (peso), dimensiones y formato afectarán el rendimiento y/o desempeño de nuestro sitio Web.
Existen distintos formatos de archivos de imágenes, cada uno de ellos posee una serie de características que lo hacen apropiado para cada caso. Por ejemplo, las imágenes en JPG o JPEG, se utilizan exclusivamente en fotografías o donde requiera la mejor calidad de imagen. Los tipos más ulitizados en la web son: JPG, GIF y PNG.
Formatos de archivo de imagen
Éstas son sólo algunas de las características de cada formato:
JPG
- Muy buena calidad y altísimos niveles de compresión. Se obtiene un archivo de imagen de alta calidad y un tamaño (peso) de archivo pequeño.
- Idóneo para trabajar con fotografías. Imágenes con alta gama de colores.
- 24 bits de profundidad. Muestra más de 16,7 millones de colores.
- Compresión con pérdida de calidad. La calidad en la imagen se va perdiendo a lo largo de cada grabación. A simple vista es imperceptible, pero la información que se pierde en el proceso no se puede recuperar.
GIF
- Compresión sin perdida de calidad.
- Ideal para imágenes con colores planos, como logos, botones, iconos ,etc.
- Permite transparencia. Uno de los colores que conforma la imagen se puede establecer como transparente.
- Permite animación. Se puede generar una secuencia, por ejemplo un conteo, una barra de progreso ,etc.
- 8 bits de profundidad. Muestra como máximo 256 colores.
PNG
- Compresión sin perdida de calidad.
- Permite transparencia. Se puede definir un canal alfa para establecer transparencia.
- 24 bits de profundidad. Muestra más de 16,7 millones de colores.
Insertar imágenes en nuestra Web
Para mostrar o "insertar" una imagen en una página web se utiliza la etiqueta "img". Ésta etiqueta necesita una serie de atributos y se define de la siguiente forma:
El atributo que indica la ubicación de la imagen es "src", si el archivo de imagen está en nuestro servidor (host), y comparte el directorio con la página web, sólo hay que indiar el nombre de archivo y su extensión. En el ejemplo la imagen estaría dentro de la carpeta "images". Otro caso sería que la imagen que deseemos mostrar esté en la web, en este caso hay que indicar la dirección URL completa.
Por ejemplo:
Cabe aclarar que la imagen no queda "incrustada" en el archivo, al igual que un documento de MS Word, sino que se indica qué imagen mostar y dónde se encuentra la misma. Es decir al momento de subir o alojar nuestra página en un servidor (host), debemos disponer de todas ellas. Al igual que copiar el sitio web a otra PC, debemos llevar todos los archivos .html junto a las imágenes.
Siguiendo las recomendaciones del W3C, no sólo basta con el atributo "src", sino que debemos definir también el atributo "alt". Con él se establece pequeña descripción sobre la imagen, es un texto que se asocia a ella, la cual veremos en caso de no cargarse la imagen correctamente. También es importante para los motores de búsqueda y para los lectores de pantalla. Con estos dos atributos nuestro código pasará la validación con la herramienta del W3C.
Existen otros atributos que podemos definir en la etiqueta "img", como "title", "width" y "height".
Por ejemplo:
Si bien los atributos alto (height) y ancho (width) permiten "redimensionar" una imagen, esta práctica no se recomienda. Ya que sólo se cambiará la presentación por parte del navegador. Es decir, si tengo una imagen de 1.600x1200px con un tamaño (peso) de 418 KB y utilizando estos atributos la defino como 200x180px, la imagen "real" seguirá pesando lo mismo (418 KB) y por lo tanto llevará el mismo tiempo para descargar y mostrar dicha imagen.
En caso de necesitar una miniatura (thumbnail) se la debe generar a través de algun editor de imágenes, como resultado tendremos un nuevo archivo que tan solo pesará un par de KB.
Entonces qué valores defino en el atributo width (ancho) y height (alto), pues los valores reales de la imagen. Estos datos le sirven al navegador para preparar o reservar el espacio de la imagen al cargar la página. Algunos navegadores, en caso de no mostar la imagen, dibujan un recuadro con las dimensiones especificadas.
Última actualización: Junio 2021
EPET20 - Programación Web
Made with Bluefish HTML editor.
WebDesign: AFC2011/2020
