Este documento discute los formatos de archivo de imágenes GIF, JPG y PNG y sus usos optimizados para la web. Explica que GIF es mejor para imágenes con colores planos mientras que JPG es mejor para fotos, y también cubre consideraciones como tamaño de archivo, número de colores, compresión y resolución. Recomienda optimizar las imágenes en un programa de edición antes de incluirlas en la web para ajustar su tamaño y resolución a los estándares requeridos.

1. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Imágenes para web
Formatos de optimización

2. 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

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.