bloque2 tratamiento y optimizacion de imagenes para internet

8/2/2019 Bloque2 Tratamiento y Optimizacion de Imagenes Para Internet

1/12

ratamiento y optimizacin de imgenes para Internet

Cmo hemos recortado estas imgenes?

Por qu la primera pesa casi 20 KB y la segunda menos de 9 si se ven igual de bien?

Por qu la tercera se ve tan mal?

Qu importancia tiene?

Al f i na l de es ta un idad podr emos responder a t odas es tas p regun tas .

Antes de ver cmo podemos definir la apariencia de nuestras pginas con CSS, vamos a vercmo tratar y guardar las imgenes para Internet correctamente.

A nadie le gusta una pgina que tarda una eternidad en cargar y tiene imgenes mal tratadaso que no guardan sus proporciones.

Es habitual encontrar pginas con imgenes muy pesadas, que tardan mucho en cargar ydesesperan a los usuarios. Muchas veces se guardan imgenes con ms peso del debido;otras veces nos encontramos con imgenes de grandes dimensiones que han sidoredimensionadas en el HTML para que se muestren con un tamao muy reducido. Nohubiese sido mejor utilizar una imagen ligera y con las dimensiones con las que ha demostrarse?

Vamos a ver cules son los formatos de imgenes adecuados para Internet, cundo utilizaruno u otro y cmo tratar las imgenes para que tengan el tamao y adecuado y pesen poco,conservando su calidad.

Qu ven t a jas t i ene h acer un buen uso de las im genes?

Pginas ms ligeras.Correcta visualizacin.Mayor nivel de accesibilidad: si mi conexin no es buena, no podr acceder a pginas muypesadas, por ejemplo. Puede parecer algo raro, pero hoy en da hay muchas conexionesmviles con tasas de transferencia limitadas (100 MB al da, etc.).Menor desgaste del servidor: en el caso de EducaMadrid no lo vamos a notar, pero sitenemos una web alojada en un servidor de pago y tenemos muchas visitas... Losproveedores de alojamiento web suelen cobrar ms a mayor tasa de transferencia. Cuantosms datos se transfieran de un lado a otro, ms "trabajo" para el servidor. Las imgenesson muchas veces las causantes de un excesivo desgaste.

T r a t a m i e n t o y o p t i m i z a c i n d e i m g e n e s p a r a I n t e r n e t

1 . I n t r o d u c c i n

2 . F o r m a t o s d e i m a g e n p a r a p g i n a s w e b


2/12

Utilizaremos tres tipos de archivo: GIF, PNG y JPG. En este apartado los estudiaremos uno auno.

Todos ellos guardan las imgenes comprimidas, pero utilizan diferentes sistemas decompresin.

Algunos e jemp los :

GIF animado

PNG-24

JPG

Caracte r s t i cas de l fo rm ato :

Compresin sin prdida (cuando guardamos, no pierde calidad).Hasta 256 colores.Permite transparencia.Permite animacin (GIF animado).

Pa r a o p t im i za r ( r e d u ci r p e so ) , r e d u cim o s e l n m e r o d e co l or e s d e l a p a l e t a (elnmero de colores que tendr nuestro GIF). Por eso este formato no es bueno, generalmente,para fotografas, ya que estas tienen muchos colores. S es bueno, sin embargo, paraimgenes planas, con pocos colores (un logotipo, por ejemplo).

Esta imagen no debera guardarse en GIF, por ejemplo. La primera imagen es un GIF, y pesacasi 48 KB, mientras que la segunda es un JPG, y pesa slo 24 KB, y adems se ve mejor!Fijaos en la parte izquierda del cielo... El motivo es que el GIF tiene un mximo de 256colores. Est claro que no es un buen formato para esta imagen.

2 . 1 . GI F


3/12

Esta, sin embargo, pesa menos de 2 KB en GIF (primera imagen), y cerca de 7 KB en JPG(segunda imagen), pero el GIF se ve mucho mejor. Es un GIF con slo 6 colores.


Compresin con prdida (al guardar en formato JPG se produce una prdida de calidad enla compresin, de manera que es interesante partir de una imagen con calidad suficiente. Sipartimos de un JPG muy comprimido, nunca podremos obtener la misma calidad deimagen).16 millones de colores.No admite transparencia.

No admite animacin.

Para op t im izar , se reduce la ca l i dad de la im agen .

Este formato es, casi siempre, el mejor a la hora de optimizar fotografas.

Veamos un ejemplo: una imagen JPG con calidad alta y otra con calidad baja. La segundapesa menos, pero se ve mucho peor.

2 . 2 . J P G


4/12


Hay dos tipos de PNG:PNG-8 y PNG-24.

Compresin sin prdida (ambos tipos de PNG).Hasta 256 colores (PNG-8).Color verdadero (PNG-24).Ambos permiten transparencia. El PNG-24 permite adems transparencias con valoresintermedios (opacidad). El PNG-8, en este sentido, es como un GIF: un pxel estransparente u opaco; no hay trmino medio.Animacin: existe una extensin al formato que permite las animaciones. Hasta elmomento, sin embargo, se siguen utilizando de forma masiva los GIF animados.

A continuacin, tres imgenes PNG. La primera es un PNG-24; la segunda y la tercera son

PNG-8. Como vemos, la primera tiene color verdadero, y su transparencia es perfecta. Lasegunda y la tercera tienen un nmero de colores limitado (256), y su transparencia esdiferente (no admite valores intermedios: un pxel, o es transparente o es opaco). Esto lovemos ms claramente en la tercera imagen, cuyos bordes son negros, no del color del fondode la pgina.

PNG es m enos conocido , pe ro cada vez m s u t i l i zado . Uno de sus principales problemas

era la incompatibilidad con algunos navegadores antiguos y todava bastante extendidos(Internet Explorer 6, por ejemplo, no muestra correctamente las transparencias de losarchivos PNG).

Con la llegada navegadores ms modernos, la utilizacin de imgenes PNG es cada vez mscomn.

La com pres in de PNG es me jo r que la de GI F.

Hasta que sepis, con slo ver una imagen, qu formato ser el adecuado, podis probar aguardarla en varios formatos y ver cul es la que tiene la mejor relacin calidad-peso.

En l neas gen erales:

2 . 3 . P N G

3 . E l e c c i n d e l f o r m a t o


5/12

Fotografas: JPG.Imgenes con colores planos o una paleta de colores muy reducida: GIF o PNG.Imgenes con transparencia: GIF o PNG.Imgenes con valores de transparencia intermedios: PNG-24 (atencin a la compatibilidadcon diferentes navegadores).

Un artculo con la descripcin de los principales formatos enDesarrolloWeb.comAtencin, porque este artculo se public hace aos, y no da al PNG laimportancia que tiene en la actualidad.GIF o PNG?

GIMP es un software libre muy potente para el tratamiento de imgenes.

GI M P e s u n p r o g r a m a g r a t u i t o p a r a e l t r a t a m ie n t o d e im g en e s. Algo parecido alfamoso Photoshop, pero libre. No todo el mundo puede tener Photoshop, de manera quevamos a explicar cmo tratar las imgenes con GIMP, que s puede tenerlo todo el mundo.

El sitio web oficial de GIMP es www.gimp.orgEn www.gimp.org.es encontraris el programa en espaol, junto con mucho material deayuda para su manejo.

En este curso, no vamos a explicar cmo descargar e instalar GIMP, pero siendo un cursoavanzado, seguro que no tenis ningn problema para hacerlo. En caso de necesidad, podris

encontrar ayuda en el sitio web de GIMP.

I ns ta l aci n de p l ug ins en GI MP

Para saber ms...

4 . R e c o r t e y o p t i m i z a c i n d e i m g e n e s p a r a w e b c o n G I M P

4 . 1 . I n t r o d u c c i n a G I M P e i n s t a l a c i n d e p l u g i n s
http://www.desarrolloweb.com/articulos/19.phphttp://www.w3.org/QA/Tips/png-gifhttp://www.gimp.org/http://www.gimp.org/http://www.gimp.org.es/http://www.gimp.org.es/http://www.gimp.org/http://www.gimp.org/http://www.w3.org/QA/Tips/png-gifhttp://www.desarrolloweb.com/articulos/19.php


6/12

Quienes conocis Photoshop posiblemente sabris que tiene una opcin muy prctica llamadaGuardar para web. GIMP, desafortunadamente, no la tiene de serie, pero podemos tenerlainstalando un plugin. Es muy fcil.

El plugin se llama Save for web.

Quienes trabajis con MAX ya tendris GIMP y el plugininstalados.

Descarga e ins t a lacin de l p lug in

L inux

Ubuntu: escribe en un terminal sudo apt -get install gimp- plugin-registryOtras distribuciones: descarga el .tar desde http://registry.gimp.org/node/33 y complila

W i n d o w s

1. Descarga el zip desde http://registry.gimp.org/node/332. Descomprmelo3. Copia el archivo webexport.exea la carpeta de plug-ins C: \ Documents and

Sett ings\ < usuario> \ .gimp- 2.6\ plug-insWinXP C: \ Users\ < usuario> \ .gimp-2.6\ plug-ins4. Reinicia GIMP

Eso es t odo. Ya tenemos un GIMP con una buena funcionalidad de guardar para web quenos facilitar la tarea enormemente.

Luego ve rem os cm o func iona .

Imaginemos que parto de esta imagen en alta resolucin:

Descargar la imagen original (1125x1500 pxeles)

Vamos a hacer una imagen de 550x367 pxeles que muestre slo una parte de la imagenoriginal:

4 . 2 . T r a t a m i e n t o d e i m g e n e s
http://registry.gimp.org/node/33http://registry.gimp.org/node/33http://c%7C/Users/Administrador/Desktop/transfer/borrar/hoy/pagina_sola_00/pagina_sola_00/02_imagenes/original.jpghttp://c%7C/Users/Administrador/Desktop/transfer/borrar/hoy/pagina_sola_00/pagina_sola_00/02_imagenes/original.jpghttp://registry.gimp.org/node/33http://registry.gimp.org/node/33


7/12

Pasos

Ab r im o s l a im a g en (atencin: se aconseja trabajar siempre con una copia; nunca con laimagen original. Si por error guardsemos los cambios despus de redimensionar la imagen,podramos perder la foto original).

Con la primera herramienta (parte superior izquierda) de la Caja de herramientas,selecc ionamos e l t r ozo de im agen que queremos mostrar en nuestra web.


8/12

Una vez hecha la seleccin, nos vamos al men Imagen Recor t ar la se lecc in .

Una vez recortada, vamos de nuevo al men Imagen Escalar la im agen . Ah aparecen lasdimensiones actuales de la imagen. Podemos escribir directamente el ancho deseado(habamos dicho que seran 550 pxeles) para hacer la redimensin. Una vez escrita esta cifra,pincharemos en los eslabones que hay justo a su derecha para que el programa calculeautomticamente la altura de la imagen conservando sus proporciones. Establecida la altura,pinchar en el botn Escala.


9/12

Si mi imagen mide justo 550x367 pxeles, habr resuelto el problema, pero tal vez todava no

sea as; todo depende de cmo fuese la seleccin hecha en el paso 1. Si la altura es mayor de367 pxeles, tendr que reco r ta r l os p xe les que sobren . Eso se hace desde Imagen Tamao del lienzo. Estableceremos las dimensiones adecuadas (lo ms normal es que nosconvenga pulsar la opcin "Centrar") y pulsaremos en Redimensionar.

Ya t e n em o s u n a im a g en d e 5 5 0 x3 6 7 p xe l es .


10/12

A continuacin, la guardaremos. Veremos cmo hacerlo bien en el prximo captulo.

En realidad, hay muchas formas de hacer lo mismo.

Por ejemplo: podramos abrir la imagen, cambiar el tamao de lienzo a 550x367pxeles y luego usar la herramienta mover de GIMP para colocar el trozo deimagen donde quisisemos. Tambin podramos utilizar la herramienta deescalado para ajustar an ms el resultado.

Lo mejor es probar y elegir el mtodo que nos resulte ms cmodo. A los pocosdas, el proceso nos llevar apenas unos segundos.

Una vez que tenemos la imagen redimensionada, va m o s a g u a r d a r l a o p t im i zad a .

Iremos a Archivo Save for weby se abrir un cuadro de dilogo con el siguiente aspecto:

La parte marcada en rojo (bloque superior izquierdo) nos permite selecc ionar e l f o rm ato

(JPG, GIF, PNG-8 o PNG-24).Justo debajo marcado en amarillo podremos tocar los a ju s t e s d el f o r m a t oseleccionado . Como vemos, los ajustes no son iguales en todos los formatos.

En el formato JPG, por ejemplo, podemos jugar con la calidad de la imagen (a mayorcalidad, mayor peso final), mientras que en el formato GIF o PNG-8 podremos variar

Debemos tener en cuenta que...

4 . 3 . Gu a r d a d o d e i m g e n e s


11/12

el nmero de colores (desde 2 hasta 256: a menos colores, menos peso final).Una nota para las imgenes JPG: es aconsejable tener activadas las dos primerascasillas (optimizado y progresivo). El progresivo permite que las imgenes se vayanmostrando en el navegador segn se van cargando (lo habris visto muchas veces enla web: entras en una pgina, y las imgenes van cargando, de arriba abajo).

Debajo de la previsualizacin de la imagen (marcado en azul) podemos ver el peso quet e n d r l a im a g en u n a ve z g u a r d a da .

Qu peso debe tener u na im agen?Es una pregunta de difcil respuesta. No podemos decir ms de X est mal, porque cadaimagen es diferente. Depende de sus colores, de la calidad que necesitemos (puedo tenerunas fotos muy buenas y querer que se vean especialmente bien). La mejor respuesta: q u epesen lo m enos pos ib le y qu e se vean su f i c ien tem en te b ien .

Una cifra orientativa: una imagen como la que veis arriba, con unas dimensiones de 550x367pxeles, no debera pesar ms de 50 KB (y si podemos acercarnos a 40 o menos, tantomejor). Para conseguirlo, guardara la imagen en JPG con una calidad de 55 a 65(generalmente, si la calidad de la imagen original es buena, es ms que suficiente con unacalidad inferior a 65. Probadlo: la imagen sigue vindose bien).

Debem os in ten ta r consegu i r im genes l i geras . Cuando ms ligeras, mejor. La clave esten que se sigan viendo bien.

En q u fo r m ato d ebem os guardar las?

Si mi imagen debe tener transparencia, debo descartar el JPG.Si es una foto o tiene degradados y no debe tener transparencia, casi seguro que el mejorformato es JPG.

Lo ideal es ir probando. Gr a cia s al p l u g i n Sa ve f o r w e b p o d e m o s sab e r , a n t e s d eguardar la , cun to pesar y cm o se ver la im agen . Podemos jugar con los ajusteshasta dar con el resultado adecuado. Despus, pulsamos guardar (Save).

Ya t e n em o s u n a im a g en o p t im i za d a.

I m genes de l os con t en idos creados en e l po r t a l

EducaMadr id

Muchos tipos de contenido (por ejemplo una noticia) permiten seleccionar una imagenprincipal. Al crear el contenido, l a p rop ia ap l i cac in crea r de fo rm a au tom t i ca doscop ias de la im agen (una pequea, que se mostrar en la vista resumida del contenido, yuna mediana, que se mostrar en la vista detallada del contenido).

4 . 4 . N o t a s g e n e r a l e s


12/12

La imagen original la que nosotros hemos subido despus de optimizarla se mostrar alpinchar sobre la imagen mediana que vemos en la vista detallada del contenido. Aunque eneste caso una parte importante de la labor de optimizacin la hace EducaMadrid por nosotros,no debemos descuidar la imagen ampliada, para que cargue rpido, se vea bien y no sea nidemasiado grande ni demasiado pequea.

Qu d im ens iones deben t ene r l as im genes?

Las que queris, pero conviene no hacerlas demasiado grandes. Un mximo de 500 550

pxeles de ancho o de alto suele ser suficiente para una correcta visualizacin de lasampliaciones. Las imgenes cuadradas podran ser algo ms pequeas: 400x400 350x350pxeles, por ejemplo.

Utilizar siempre los mismos tamaos puede hacer que nuestras pginas seanms agradables. Podemos definir un tamao para las imgenes verticales, otro

para las horizontales y otro para las cuadradas, y usarlos siempre. Esto, porsupuesto, es a criterio de cada uno.

El proceso es casi idntico, as que si alguien tiene Photoshop y lo prefiere aGIMP, no tendr ningn problema siguiendo las indicaciones anteriores.

De todas formas, aqu tenis algunas indicaciones para Photoshop:

Cambiar el tamao de una imagenRecortar una imagenOptimizar una imagen

Este artculo est licenciado bajo Creative Commons Attribution Non-commercial Share Alike 3.0License

Ignacio Gros Aymerich

Esta obra est bajo una licencia de Creative Commons.

Departamento de TICCRI F " Las Acacias"

Un comentario

Cmo se optimiza en Photoshop?
http://help.adobe.com/es_ES/Contribute/4.1/help.html?content=con_images_im_18.htmlhttp://help.adobe.com/es_ES/Contribute/4.1/help.html?content=con_images_im_18.htmlhttp://www.adobe.com/es/web/tips/phs7optimize/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://www.adobe.com/es/web/tips/phs7optimize/http://help.adobe.com/es_ES/Contribute/4.1/help.html?content=con_images_im_18.htmlhttp://help.adobe.com/es_ES/Contribute/4.1/help.html?content=con_images_im_18.html