PDF de programación - Optimzación de Imágenes para su uso en Internet

Imágen de pdf Optimzación de Imágenes para su uso en Internet

Optimzación de Imágenes para su uso en Internetgráfica de visualizaciones

Actualizado el 21 de Marzo del 2018 (Publicado el 13 de Noviembre del 2017)
1.006 visualizaciones desde el 13 de Noviembre del 2017
70,8 KB
5 paginas
Creado hace 17a (22/02/2007)
Computaci(cid:243)n GrÆfica

Optimizaci(cid:243)n de ImÆgenes para su uso en Internet

Material de Lectura y anÆlisis para debate
Consigna:

Los alumnos deben leer este material par ir analizÆndolo y opinando a medida que se
desarrollan las clases en el laboratorio.


Las imÆgenes de los sitios web deben ser ’livianas’ para que las pÆginas se abran con
mayor rapidez. Les mostramos c(cid:243)mo optimizarlas con el programa Corel PhotoPaint para
publicarlas en la Red o para enviarlas por correo electr(cid:243)nico.
Dos cosas usualmente sacan de casillas a un usuario de Internet y de correo electr(cid:243)nico:
esperar demasiado tiempo a que se despliegue una pÆgina web y no poder recibir un
mensaje de correo con archivos grÆficos anexos. En la mayor(cid:237)a de los casos, eso se debe
a que las imÆgenes del sitio web o los archivos adjuntos a un mensaje de correo son
demasiado voluminosos.
Para reducir el tamaæo de las imÆgenes en Internet se emplean varios mØtodos: se
convierten a formatos grÆficos como GIF y JPEG (que comprimen las imÆgenes), se
reducen sus dimensiones y se disminuye su resoluci(cid:243)n. Eso genera archivos mÆs
pequeæos. Una imagen para Internet debe estar en un archivo pequeæo (entre 2 y 20
kilobytes es una buena medida) para que tome menos tiempo cargarla.

El inconveniente con los archivos anexos a un mensaje es que las cuentas gratuitas o los
servidores de correo electr(cid:243)nico de las empresas ponen l(cid:237)mites al tamaæo de los archivos.
Es por eso que a veces los mensajes no llegan a su destino o jamÆs abandonan el
servidor de correo del remitente.
Si le da un vistazo a los sitios web mÆs conocidos, verÆ que estos casi siempre incluyen
imÆgenes que ofrecen buena calidad pero que tienen un tamaæo pequeæo. Por ejemplo, la
foto de apertura del sitio web de The New York Times (http://www.nyt.com/) normalmente
tiene unas dimensiones de 280 por 170 p(cid:237)xeles y ’pesa’ tan solo 10 kilobytes (el tamaæo
del archivo). Dichas especificaciones deber(cid:237)an ser suficientes para que una imagen sea
clara y ofrezca buena calidad.
¿JPEG o GIF?
JPEG y GIF son los dos formatos grÆficos mÆs usados en Internet. Su ventaja es que
comprimen las imÆgenes y por ello generan archivos de menor tamaæo. Pero ambos usan
mØtodos distintos, y por ello el formato ideal depende del tipo de imagen que vaya a
publicar en Internet.

Si va a publicar fotos o imÆgenes con muchos colores, utilice JPEG. Este formato es el
mÆs œtil en esos casos debido a que comprime las imÆgenes eliminando informaci(cid:243)n que
no es visible para el ojo, pero soporta un gran nœmero de colores (16 millones de colores).
GIF, en cambio, comprime las imÆgenes reduciendo el nœmero de colores a mÆximo 256.
Por ello, es œtil para grÆficos sencillos, logos, botones y otros elementos que tengan
pocos colores. Si se usa GIF en una imagen rica en color, esta quedarÆ de mala calidad.
Para optimizar las imÆgenes y convertirlas a estos formatos puede emplear programas
como Corel PhotoPaint, Adobe Photoshop, Paint Shop Pro, etc. Nosotros escogimos
Corel PhotoPaint versi(cid:243)n 9, que viene incluido en CorelDraw. Sin embargo, los pasos son
similares en otras aplicaciones grÆficas.
A continuaci(cid:243)n mostraremos c(cid:243)mo reducir el tamaæo de un archivo grÆfico sin que se note
mucho el deterioro en la calidad de la imagen resultante (el art(cid:237)culo central de la edici(cid:243)n
55 de ENTER, de marzo del 2003, contiene bastante informaci(cid:243)n sobre resoluci(cid:243)n,
dimensiones de una imagen y otros aspectos te(cid:243)ricos importantes sobre las imÆgenes
digitales).
C(cid:243)mo optimizar una imagen con JPEG
Para nuestro ejemplo utilizaremos una foto que ya estÆ en formato JPEG y tiene unas
dimensiones de 3.699 por 2.646 p(cid:237)xeles, un tamaæo de 17,4 megabytes (MB) y 16,7
millones de colores. La idea es convertirla en una de 250 p(cid:237)xeles de ancho (mÆs pequeæa)
cuyo tamaæo de archivo no exceda los 20 kilobytes (KB).
1. Para abrir una imagen en PhotoPaint, dØ clic en el bot(cid:243)n Abrir de la barra de
herramientas (el que muestra una carpeta) o dØ clic en la opci(cid:243)n Abrir del menœ Archivo.
2. DØ clic en el menœ Imagen y seleccione Nuevo muestreo. El cuadro que se abre le
permitirÆ reducir el tamaæo de la foto.
3. Escoja la opci(cid:243)n P(cid:237)xeles en el menœ desplegable de la derecha. Es posible seleccionar
otras alternativas (como cent(cid:237)metros, picas o mil(cid:237)metros), pero los p(cid:237)xeles son la medida
que se utiliza para trabajar con imÆgenes en las pÆginas web. AdemÆs, verifique que estØ
marcada la opci(cid:243)n Mantener proporci(cid:243)n (para que los cambios que realice mantengan
siempre la proporci(cid:243)n horizontal y vertical de la imagen).
4. Sin cambiar de ventana, vaya a la opci(cid:243)n Resoluci(cid:243)n y reduzca el valor a 72 p(cid:237)xeles por
pulgada; esa es la resoluci(cid:243)n que se necesita para ver imÆgenes en la pantalla del
computador, y por ello es la que se usa para las imÆgenes en Internet (para medios
impresos, en cambio, la resoluci(cid:243)n necesaria es 300 p(cid:237)xeles por pulgada).
Note que con solo variar la resoluci(cid:243)n, los valores Anchura y Altura cambiaron a 888 y
635 p(cid:237)xeles respectivamente y el tamaæo del archivo baj(cid:243) de 17, megabytes (MB) a
aproximadamente 2,2 MB. Si ese tamaæo le sirve para publicar la imagen en su pÆgina
web, dØ clic en Aceptar (un tamaæo de 2,2 MB es impensable para una imagen incrustada
en un sitio web por ser demasiado grande).
5. Si necesita que la imagen quede mÆs grande o mÆs pequeæa, aumente o disminuya las
dimensiones en p(cid:237)xeles en los cuadros Anchura o Altura. Por ejemplo, nosotros

disminuimos la Altura a 179 p(cid:237)xeles. Eso redujo el tamaæo del archivo a 179 kilobytes
(KB), que es la quinta parte de 1 MB. Cuando termine, dØ clic en Aceptar.
6. Para guardar la imagen vaya a Archivo y dØ clic en Exportar (el atajo de teclado es
Ctrl+E). Escriba un nombre para el nuevo archivo en la ventana reciØn desplegada y dØ
clic en el bot(cid:243)n Guardar. Tenga en cuenta el formato en que va a guardar la imagen, que
en este caso serÆ JPEG.
7. Ahora se desplegarÆ una ventana con dos imÆgenes, la de la izquierda corresponde a
la original y la de la derecha a c(cid:243)mo va a quedar despuØs de efectuar los cambios.
Desmarque la casilla Optimizar y escoja la opci(cid:243)n EstÆndar (4:2:2) del cuadro Subformato
para ayudar a comprimir el tamaæo del archivo (el Dr. Enter de la edici(cid:243)n 55 explica para
quØ sirven todas las opciones de esta ventana).
8. En la opci(cid:243)n Compresi(cid:243)n, desplace el selector hacia la derecha para comprimir la
imagen. Compare las imÆgenes y verÆ que si la comprime demasiado, la pØrdida de
calidad serÆ muy notoria. Escoja un valor que no afecte demasiado la calidad. La opci(cid:243)n
Tamaæo
la dimensi(cid:243)n del archivo, si primero da clic en el bot(cid:243)n
Previsualizaci(cid:243)n.
Note que la imagen pas(cid:243) de 33.945 bytes (34 KB, aproximadamente) a 6.731 bytes (7
KB), con una compresi(cid:243)n del 55 por ciento. Finalmente, dØ clic en Aceptar.
ADVERTENCIA:

indicarÆ

le

Cada vez que se edita y se guarda un archivo JPEG se reduce la calidad de la imagen.
Por ello, la idea es que trabaje con una copia del archivo y guarde el original en caso de
que necesite usarlo en el futuro.
C(cid:243)mo optimizar una imagen con GIF

Recordemos que cuando un archivo de imagen se convierte a formato GIF este se
comprime y pierde color. Por eso, este formato no es aconsejable para trabajar fotos e
imÆgenes con muchos colores, ya que mÆximo soporta 256.

Para el ejemplo, trabajaremos con una imagen en mapa de bits o bitmap (.bmp) de 1,37
MB y 800 por 600 p(cid:237)xeles. Aunque es una foto de millones de colores, los mÆs
representativos son los grises, el negro y el blanco, as(cid:237) que la calidad de la imagen final
en formato GIF tendrÆ una apariencia aceptable.
El objetivo es que la imagen quede lista para publicar en Internet, con un tamaæo no
mayor a 20 KB y un ancho de 300 p(cid:237)xeles (por ejemplo, el ancho de la columna central de
la pÆgina de inicio de Eltiempo.com es de 450 p(cid:237)xeles).

1. Para empezar, abra la imagen y siga los pasos para realizar un nuevo muestreo, tal y
como se explica en el tutorial C(cid:243)mo optimizar una imagen con JPEG. En el proceso
Nuevo muestreo le dimos a nuestra imagen un ancho de 300 p(cid:237)xeles a 72 dpi. Eso de por
s(cid:237) reduce el tamaæo del archivo resultante.

2. Exporte la imagen (Ctrl.+E). En la ventana Exportar una imagen en el disco, ponga un
nombre al nuevo archivo y asegœrese de marcar la opci(cid:243)n GIF (cid:150) Mapa de bits
CompuServe, en el menœ desplegable Tipo de archivo. DØ clic en Guardar.

3. La ventana que se abre a continuaci(cid:243)n permite imprimir efectos diferentes a la imagen.
Como no todas las imÆgenes tienen el mismo nœmero de colores, la idea es que pruebe
las diferentes opciones de los cuadros de diÆlogo (por ejemplo, hay imÆgenes que se ven
mejor con 16 colores y no con 256) como Suavizado, Paleta, Tramado e Intensidad de
tramado. Las combinaciones de esas opciones darÆn resultados diferentes. Cuando estØ
satisfecho con el resultado que se muestra en la ventana de la derecha dØ clic e
  • Links de descarga
http://lwp-l.com/pdf7493

Comentarios de: Optimzación de Imágenes para su uso en Internet (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad