Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Complementos

Manuales necesarios para el desarrollo web distintos de la programación.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 18

Visitas el mes pasado: 73

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes en la web (I)

Generalidades

Tratamiento de imágenes

logo WWW.

En esta sección veremos el tema de las imágenes en Internet. Es decir, qué tipo de imágenes son las más adecuadas, cómo modificar las imágenes para la web, Cuál es la mejor forma de poner una imagen en la web, y otra serie de cuestiones relacionadas con las imágenes.

Existen diversos programas de tratamiento de imágenes, también llamados de diseño gráfico. Con estos programas podemos retocar una imagen, recortar un trozo de la misma, variar los tonos de color, convertirla a blanco y negro, reducirla, etc.

Por lo tanto antes de colgar una imagen en la web, una de las cosas que debemos hacer es mirar si podemos mejorar la imagen mediante algunos pequeños retoques. A veces un cambio en el contraste o en el brillo, o recortando la imagen en el trozo que nos interesa, puede suponer una importante mejora de la imagen.


La imagen en la página

Por otra parte al subir una imagen a una página debemos tener en cuenta una serie de propiedades de la misma para que pueda ser vista sin problemas por los usuarios, y además que no interfiera con el rendimiento o la carga de la página. Debemos tener en cuenta por tanto:

Como hemos visto estas propiedades interfieren unas con las otras. A continuación veremos las que son más importantes para un correcto funcionamiento del sitio Web.


El peso de la imagen.

Para un funcionamiento óptimo de la página, debemos conseguir que sus imágenes no tengan mucho peso. Una página está formada fundamentalmente por archivos de texto e imágenes. Al cargar la página, deben transferirse todos los archivos al ordenador del usuario. Los archivos de texto tienen muy poco peso, por lo que se cargarán enseguida, sin embargo, las imágenes sin embargo son archivos de mayor peso, por lo que tardarán más en cargarse. Si el peso de las imágenes es excesivo, la página tardará múcho tiempo en cargarse, por lo que el usuario tendrá que esperar, lo cual no es muy agradable.

Este problema hoy día no lo es tanto si pensamos que la mayoría de usuarios utilizan conexiones rápidas para Internet (banda ancha, ADSL, etc.) las cuales permiten cargar una imagen pesada en pocos milisegundos. Sin embargo el problema lo tenemos en el espacio que tenemos para nuestra página. El servidor web (ordenador al cual subimos la página para que se vea en Internet), suele ceder al propietario o diseñador de la página un espacio en disco limitado (sobre todo si utilizamos un servidor gratuíto). Cuanto más espacio gastemos en los archivos de fotografías, menos nos quedará para incorporar nuevas páginas al sitio.


Reducir el peso de la imagen

Al reducir el peso de una imagen estamos reduciendo su calidad. Si reducimos demasiado el peso de la imagen esto afectará tambien a la calidad de la imagen en la página. Debemos pues reducir el peso de la imagen sin que por ello afecte a la calidad en nuestra página. Podemos por tanto retocar la imagen para reducir su peso sin perder su calidad en la página mediante un programa de diseño gráfico.

Normalmente la mayoría de las imágenes que hacemos con cámaras digitales (incluso con móviles) tienen un tamaño y resolución mayores que los que necesitamos para mostrar nuestra imagen en la web. Simplemente reduciendo el tamaño o la resolución, podemos conseguir que la imagen tenga un menor peso sin que por ello se vea afectada su calidad en la página.

Otra forma de reducir el peso de la imagen sin perder la calidad puede ser seleccionando el tipo de color que tiene que tener la imagen. Sobre todo cuando las imágenes no son fotografías, podemos reducir la cantidad de colores que debe tener la imagen mediante la "paleta de colores". Un imagen de un dibujo a 256 colores tiene bastante menos peso que en color real, y no suele afectar a su calidad. Por otra parte las fotografías en blanco y negro, sepia, o monocromáticas, ocupan también bastante menos que en color real.

Por otra parte también los formatos que utilicemos para nuestras imágenes no son indiferentes al peso de la misma. Hay formatos que utilizan un mayor nivel de compresión, por lo que permiten guardar la imagen con un menor peso sin por ello perder calidad.


Formatos de imagen para web

El formato viene definido por la extensión del archivo. Los programas de diseño gráfico permiten cambiar la extension del archivo (y por tanto el tipo de archivo) simplemente guardandolos con otra extensión. Esto hace que podamos elegir el tipo de formato que tendrá la imagen.

Veamos ahora los formatos de imagen más comunes para usar en las páginas web.

Formato .bmp

Este formato crea un "mapa de bits" del archivo. Apto para pequeños dibujos. No es muy usado debido a que suele utilizar bastante espacio, lo que suele hacer las imágenes bastante pesadas.

Formato .gif

Apto para dibujos e imágenes con colores planos o poco definidos (escaneos de textos, logos, flechas, botones, imágenes pequeñas, etc). Su peso en Kb suele ser bastante bajo. Además permite tener en la imagen un color "transparente" que hace que en ciertas zonas de la imagen se pueda ver el color de fondo de la página.

Otra característica de este formato es poder realizar imágenes animadas. mediante la inclusión de varias capas con diferentes imágenes, podemos ver estas imágenes una a continuacion de otra en muy cortos intervalos de tiempo. Con esto poniendo imágenes similares, aunque ligeramente variadas, podemos realizar imágenes con animación, conocidos también como gifs animados.

Formato .jpg

Opción para fotografías e imágenes que necesiten verse con amplitud de detalles. El formato .jpg emplea una compresión con pérdidas, es decir el archivo pierde información sin que ésto suponga una gran perdida de calidad.

La mayoría de programas de diseñó gráfico pèrmiten comprimir las imágenes al guardarlas con la extensión .jpg. Una compresión de hasta un 60% - 70% no suele afectar a la calidad de la imagen en la página, y permite reducir bastante el peso de la imagen.

Formato .png

Desarrollado como alternativa a los formatos .jpg y .gif, pretende aunar las ventajas de estos dos formatos. Admite tanto la compresión realizada en los archivos .jpg como el uso de la paleta de colores y las transparencias de los archivos .gif.

Tal vez el principal problema es que al ser un formato de archivo más nuevo, hay algunos navegadores antiguos que no visualizan este tipo de archivos. Sin embargo existen filtros o "plugins" que podemos añadir al navegador para solucionar este problema.


Otras propiedades de la imagen

Aunque las principales propiedades de una imagen que hay que tener en cuenta para ponerla en una página son el peso y el formato, no podemos olvidar otras porpiedades para que ésta no pierda calidad en la página.

la Resolución de la imagen no debe bajar de un cierto nivel, se recomienda unos 75 ppp (pixeles por pulgada) de resolución, y hasta unos 100 ppp para fotografías con un cierto grado de detalle.

El tipo de color que tiene la imagen también es importante, busquemos siempre el tipo de color (color real, paleta 256 colores, blanco y negro, etc.) que más se adapte a la imagen que tenemos para que ocupe el menor peso posible.

El uso de filtros o de otros instrumentos que podamos encontrar en los programas de diseño gráfico pueden también mejorar bastante la calidad de la imagen, sin que por ello tenga que aumentar el peso de la imagen.

Con todo esto no pretendemos dar un cursillo o manual del tratamiento de imágenes, sino unas pautas sobre el tratamiento de imágenes en la web.



Complementos/Programas

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com