10

Click here to load reader

Imagenes para la web

Embed Size (px)

Citation preview

Page 1: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Imágenes para web

Formatos de optimización

Page 2: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Consideraciones

• En la práctica, Internet encuentra una de sus mayores limitaciones en la rapidez de transferencia de archivos, y las imágenes con frecuencia traspasan ese límite.

• Existen entonces, consideraciones críticas con respecto del tamaño, el formato y el número de colores de la imagen a emplear

Page 3: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Tipos de archivo

• Los navegadores web permiten la utilización de dos principales tipos de archivos gráficos:GIF y JPG, pensados para optimizar el tamaño de los archivos, ya que se transmiten más rápidamente por la Red. Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG, no obstante, la visualización de imágenes PNG sólo es parcialmente compatible con los navegadores web, encontrando problemas en versiones antiguas de estos.

Page 4: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Imagen GIF

• Las imágenes o archivos GIF (Formato de intercambio de gráficos, Graphic Interchange Format) utilizan un máximo de 256 colores y son idóneos para visualizar imágenes con colores y tonos uniformes. Adicionalmente es posible definir ciertas partes de la imagen como transparentes, indicando que colores no serán visibles, pudiendo colocar la imagen sobre distintos fondos sin que se vea el recuadro donde está inscrita.

Page 5: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Imagen GIF

• La forma en que se simulan los colores no contenidos en la paleta que elijamos para el GIF puede ser: a) convertirlos a los colores más próximos en la paleta disponible; b) simular una trama que se aproxime al color.

• Otra característica de este formato es que permite almacenar varios archivos de imágenes en un documento único, de manera que un visualizador pueda desplegar cada una de las imágenes en orden, a manera de una secuencia GIF animada.

Page 6: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Imagen JPG

• El formato de archivo JPG o JPEG (Grupo conjunto de expertos fotográficos, Joint Photographic Experts Group) es el mejor para imágenes fotográficas o de tonos continuos, ya que puede contener millones de colores.

• A medida que la calidad de un archivo aumenta, también lo hace su tamaño y el tiempo que tarda en descargarse. Es posible conseguir un equilibrio entre la calidad de la imagen y el tamaño de archivo comprimiendo el JPEG.

Page 7: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Diferentes usos

• El formato de archivo GIF se usa para las imágenes que tengan dibujos o colores planos, mientras que el formato JPG se usa para las fotografías. Los dos disminuyen el tamaño de los archivos para guardarlas y la forma de realizar esta disminución es lo que los hace ideales para unos u otros propósitos.

Page 8: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Imagen PNG

• El formato de archivo PNG (Grupo de redes portátiles, Portable Network Group) es un sustituto del formato GIF sin patente compatible con imágenes con color indexado, escala de grises y color verdadero, además de ser compatible con el canal alfa para transparencias.

Page 9: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Resolución

• En cuanto a la resolución de imágenes para la Web, es necesario tener presente que la resolución de los monitores estándares es aproximadamente de sólo 72 dpi (puntos por pulgada), por lo que resoluciones de imagen mayores no redundarán en una mejor calidad de visualización, sino que solo traerán asociados problemas de tiempos de descarga y de espacio en el servidor.

Page 10: Imagenes para la web

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Proceso de optimización

• Uno de los errores más comunes en los principiantes al incluir imágenes en documentos web, es el escalarlas directamente al tamaño que desean en la aplicación de edición web, sin realizar el proceso de optimización en un programa de tratamiento de imágenes, de manera de ajustar la resolución y el tamaño a los requerimientos estándares de la Web.  

• Una solución para esto es utilizar la función “Guardar para Web y Dispositivos” de Adobe Photoshop.