26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 1/12

Optimización de imágenes para su uso en internet

Si después de leer este manual tienes alguna duda y quieres publicar una pregunta puedes usar el foro devideoedicion.org

http://www.videoedicion.org/foro

Las siguientes categorías del foro están especialmente relacionadas con este manual:

Fotografía e imagen (General) ­> http://www.videoedicion.org/foro/index.php?board=94.0

Por favor, antes de publicar nada asegúrate que conoces las Normas de videoedicion.orgSi todavía no estás familiarizado con el uso del foro, por favor, consulta la Ayuda de videoedicion.org y laAyuda para el uso del foro SMF en videoedicion.orgSi quieres editar algo en esta página, por favor, consulta Cómo se edita una página

Gracias por tu colaboración

http://www.videoedicion.org ­ Ramón Cutanda López (videoed)

NOTA: Puedes complementar la información de este manual con el artículo Cómo hacer que las imágenes pesen poco de la WikipediaNOTA2: Si no estás muy interesado en entrar en las "entrañas" de la optimización y sólo te interesa algo "rápido y fácil" te recomendaría leerúnicamente el apartado Microsoft Image Resizer (o cómo optimizar con sólo 4 clics)

Introducción: ¿por qué debería optimizar?

Antes de que te "calientes la cabeza" leyendo ningún otro apartado de este manual quisiera contestar a la preguntaque, muy seguramente, te estés haciendo: ¿Por qué debería optimizar (signifique lo que signifique optimizar)las imágenes que subo a internet con lo fácil que resulta pinchar en "Subir" para alojar una imagen yolvidarme de todo lo demás? Básicamente por dos motivos:

Por hacerme un favor personal. Si las imágenes están optimizadas se consume menos ancho de banda (segenera menos transferencias de datos), lo que me evita, en la medida de lo posible, tener que contratar másancho de banda... y tener que pagar más por ello. Con las imágenes sucede como con todas las cosas deecología. Casi siempre tenemos la sensación de que "por una foto no pasa nada" pero cuando son MILES defotos las que alojamos las diferencias en las transferencias mensuales pueden ser abismales, tal y comoveremos a lo largo de este manual

Por hacerle un favor a los usuarios con conexiones más lentas o de pago por descarga (como en caso denavegación 3G), ya que las imágenes optimizadas cargan mucho más rápidamente porque se transfierenmuchos menos datos.

Aclarando términos: tamaño y peso

Solemos decir que una imagen tiene un tamaño de 800x600, por ejemplo. También es habitual decir que una imagentiene un tamaño de 300 Kbytes. Es decir, usamos la misma palabra, tamaño, para hablar de dos conceptos totalmentediferentes. Del mismo modo decimos que una imagen de 1024x768 es grande y también decimos que es grandeporque tiene 2 Mbytes. Aunque en el día a día esta imprecisión no suele ser causa de problemas es esencial que a lolargo de este manual quede claro en todo momento a qué aspecto de una imagen nos estamos refiriendo.

Tamaño, en píxeles: Siempre que en este manual hablemos únicamente de tamaño vamos a referirnos a lasdimensiones de la imagen. Las imágenes se forman a partir de puntos de color. Estos puntos se llaman,comúnmente, píxeles. Cuanto más píxeles (puntos) tenga una imagen ésta tendrá mayor resolución, mayordetalle. Esto se comprueba fácilmente haciendo zoom sobre la imagen. En una imagen grande podremos vermuchos detalles aún después de haber ampliado. En una imagen pequeña no sirve de nada ampliar porque solose ven grandes cuadros que desvirtúan por completo la imagen.

Entenderemos que una imagen es:

­ Grande cuando tengo un tamaño superior o igual a 1024x768 píxeles (puntos)

­ Mediana cuando su tamaño oscile entre 320x240 y 1024x768 píxeles (puntos)

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 2/12

­ Pequeña cuando su tamaño sea inferior a 320x240 píxeles (puntos)

­ Muy pequeña cuando su tamaño sea inferior a 100x100 píxeles (puntos)

Peso, en Kbytes: En este manual llamaremos peso al espacio de disco o memoria que necesitamos paraalmacenar una imagen. Así, entenderemos que una imagen es:

­ Pesada cuando su peso sea superior o igual a 1 Mbyte (1.024Kbytes)

­ Peso mediano cuando su peso oscile entre 300Kbytes y 1 Mbyte (1.024Kbytes)

­ Ligera cuando su peso sea inferior a 300Kbytes

­ Muy ligera cuando su peso sea inferior a 100Kbytes

¿Qué entendemos por optimizar?Si has leído los dos párrafos anteriores intuirás que lo que pretendemos es disminuir en lo posible el peso de lasimágenes. Esto es, nuestro objetivo es hacer que las imágenes ocupen el menor espacio posible en la memoria odisco. De esta manera lograríamos los dos objetivos planteados en la introducción:

1. Si las imágenes ocupan menos espacio en el servidor para albergar el mismo número de imágenes necesitocontratar (y pagar) menos espacio a mi proveedor

2. Cuanto menos peso tenga una imagen menos datos hay que transferir desde el servidor hacia el usuario y, portanto, se genera menos gasto de ancho de banda (también pago menos) y la navegación es más rápida.

Pero aligerar peso no es igual a optimizar. Cuando hablamos de optimizar queremos decir lograr imágenesdel menor peso posible sin una reducción de calidad real o, al menos, aparente.

Pongamos un ejemplo. Fíjate en las dos imágenes que presento a continuación y trata de encontrar las 7 diferencias:

Si has encontrado las diferencias.... ¡enhorabuena!... porque no las hay. La calidad en las dos es exactamente lamisma. Sin embargo, la primera imagen tiene un peso de 204 Kbytes mientras que la segunda pesa 3,45 Kbytes. Sí...has leído bien... no me he equivocado con la coma. Si quieres comprobarlo pincha en las imágenes con el botónderecho, ve a Propiedades y compruébalo tu mismo. Teniendo la misma calidad, la primera imagen pesa casi 60veces más que la otra. Dicho de otro modo... en el espacio y tiempo que hemos descargado UNA imagen podríamos haber descargado 60. ¿Te parece suficiente motivo para optimizar?

¿Cual es el truco? Volviendo al ejemplo anterior... ¿cómo es posible que teniendo una calidad idéntica una misma imagen puedapesar 60 veces más que otra? ¿Qué puedo hacer yo para que mis imágenes bajen de peso de forma tanespectacular?

He de reconocer que he elegido un ejemplo "fácil" para llamar la atención... pero tienes que admitir que el ejemplo teha impactactado y, como poco, te pica la curiosidad...

Existen dos tipos de imágenes, artificiales y reales, y los dos se optimizan de forma diferente. Las imágenesartificiales, como la que he usado en el ejemplo, permiten reducciones de peso realmente asombrosas manteniendoun 100% de calidad. Las imágenes reales también pueden reducir su peso de forma notable, pero siempre habrá unapérdida de calidad, aunque dependiendo de cómo lo hagamos la pérdida de calidad, aunque la haya, puede llegar aser inapreciable para el ojo humano.

¿Burro grande... ande o no ande?

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 3/12

Todos estamos de acuedo en que cuanto mayor es el tamaño de una imagen, esto es, cuando más puntos tenga,tiene mejor calidad. Tiene más detalle, más definición, pero la pregunta es.... ¿realmente necesitamos siempreusar imágenes a la máxima resolución, con el mayor tamaño posible? La mayoría de usuarios trabajamos conresoluciones de monitor de entre 800x600 y 1600x1200 puntos (píxeles), luego usar imágenes de un tamaño mayorresulta además de inútil, molesto, porque para poder ver la imagen al completo aparecerán unas molestas barras dedesplazamiento. Las imágenes publicadas en internet deberían tener un ancho máximo de entre 400 y 800puntos. Los tamaños superiores, además de entorpecer la navegación, aumentan innecesariamente el peso de laimagen porque cuantos más puntos (píxeles) tiene una imagen más información contiene; y cuanta más informacióncontiene más peso final tendrá el archivo de la imagen.

Por favor, ten esto en cuenta cuando vayas a publicar imágenes en internet. Si tus imágenes tienen un tamañosuperior a 800 puntos horizontales reduce su tamaño u ofrece, al menos, una versión reducida para presentarla enpantalla y una versión completa para quien quiera ver la imagen con el 100% de calidad (ver Vínculos a imágenes)

Paletas de colores e imágenes artificialesEl secreto está en la masa... ups... perdón... eso era de otro anuncio. Lo que quería decir es que la clave paraaligerar una imagen artificial, esto es, no real, está en optimizar su paleta de colores. La pregunta ahora es... ¿y quénarices es eso de la paleta de colores? (cómo hacerlo lo veremos más adelante)

En la vida real las imágenes tienen millones de colores, pero cuando trabajamos con imágenes artificiales, como lascapturas de pantalla que solemos hacer para explicar cómo funciona un programa, lo habitual es que estas tengan 2,4, 16, 32, 64, 128 ó 256 colores como mucho. La primera imagen del ejemplo anterior está guardada en formato BMPde 32 bits que almacena nada más y nada menos que 4.294.967.296 colores (más de 4.000 millones de colores) deahí su gran tamaño. Sin embargo, esa imagen sólo contiene 88 colores diferentes. Si en lugar de usar el formato BMPusamos un formato que permita limitar la paleta de colores, como GIF o PNG, podemos generar un archivo queúnicamente guarde la información de los colores que REALMENTE se usan en la imagen. Sin perder ni un solo bit deinformación la optimización del peso del archivo es máxima en estos casos, tal y como hemos podido comprobar conel ejemplo anterior.

Compresión e imágenes realesTodos los que hemos comprado una cámara de fotos digital sabemos lo decepcionante que es comprobar que con lamemoria original de la cámara y usando los ajustes que vienen por defeto apenas sí podemos hacer unas 20 fotos.Sin embargo, si bajamos el nivel de calidad podemos aumentar el número de fotos que la cámara es capaz dealmacenar hasta llegar a unas 100 aproximadamente. El espacio físico disponible en la memoria de la cámara es elmismo pero el espacio que ocupan las fotos varía en función de los ajustes de calidad y tamaño que le elijamos.

Los 256 colores que ofrecen las las paletas de los formatos de archivos artificiales resultan del todo insuficientes pararecoger la gama de colores de la vida real. Para trabajar con fotos realistas se usa una profundidad de color de 24bits, esto es 224 colores o, en cristiano, algo más de 16,7 millones de colores. Optimizar la paleta de colores en unimagen real es posible, pero la reducción en su peso es casi despreciable, por lo que para que la optimización deimágenes reales sea afectiva hay que usar otros métodos de optimización.

Existen diversos formatos de archivo que permiten reducir en gran medida el peso de las imágenes de colores reales,pero nos vamos a centrar exclusivamente en uno por ser con diferencia el más empleado: el JPEG. Se puede afirmarque, sin lugar a dudas, el formato JPEG es el más usado a día de hoy. Encontramos imágenes JPEG en internet,CDs, cámaras digitales, teléfonos móviles, PDAs... Es más, los DVDs de vídeo, cámaras DV, DivX, televisión satéliteo digital terrestre... todos ellos usan variaciones del formato JPEG para imágenes en movimiento.

El formato JPEG

NOTA1: En este apartado vamos a ofrecer una visión simplificada y práctica de cómo trabajar con el formato JPEG. Si quieres ampliar informaciónsobre este formato puedes consultar el artículo JPEG (Joint Photographic Experts Group) de la Wikipedia.

NOTA2: Las imágenes de ejemplo únicamente se ven una al lado de la otra cuando se visualiza esta página con una resolución de monitor de, almenos, 1024 puntos. Si las fotos te aparecen una encima de la otra en lugar de una al lado de la otra puedes usar la versión para imprimir paravisualizar correctamente el manual. Disculpa las molestias. No me di cuenta de este detalle hasta después de haber subido las imágenes, y ahorasería muy laborioso volver a prepararlas con un tamaño menor.

El formato JPEG basa su potencia en la explotación de algunas características de la visión del ojo humano, ya que ledamos más importancia a unos datos de las imágenes que a otros. La compresión JPEG desecha de las imágenesaquellos datos que, para el ojo humano, son menos importantes. Esto hace que podamos ver dos imágenes, unacomprimida y una sin comprimir, y a simple vista nos resulte imposible discernir cual es la original y cual es laimagen comprimida, a pesar de que en la comprimida hay una pérdida de calidad con respecto a la original. Hagamosun nuevo concurso. Vuelve a encontrar las diferencias...

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 4/12

En esta ocasión sí que las hay aunque a nuestro ojo le cuesta mucho trabajo encontrar (si es que las encuentra...) lasdiferencias. En la primera imagen se ha desechado bastante información, mientras que la segunda sería la original.Puedes comprobar que no es la misma foto pinchando con el botón derecho en las imágenes y viendo la informaciónque hay en Propiedades. Verás que el peso de las mismas es de 11 Kbytes para la primera foto y de 53 Kbytes parala segunda. Si por más que miras no logras ver diferencias deja que te eche una mano ofreciéndote una visiónampliada de algunas zonas de la imagen.

Uno de los métodos que utiliza el formato JPEG para reducir el peso de las imágenes es dividir, analizar y comprimirla imagen en zonas de 8x8 píxeles. Como consecuencia, cuando se usan altas tasas de compresión aparecen lo que,incorrectamente, solemos llamar "píxeles" Decimos que una imagen está "pixelada" cuando estas zonas cuadriculadasson claramente visibles. Si te fijas en las zona 1 verás como la cuadrícula de la hablo comienza a ser visible, aunqueincluso con la ampliación que he hecho del 500% hay que fijarse para notarla, especialmente si no tienes la originalcomo referencia. He marcado con las flechas la zona en la que más se nota la cuadrícula. Podría haber comprimidomás la imagen para que se apreciara más claramente, pero entonces el ejemplo de antes no habría tenido graciaporque se habría visto claramente cual era la original y cual la comprimida.

Pero la pérdida de calidad no sólo aparece en forma de cuadrícula. También hay pérdida de detalles. Fíjate en la nubeque hay junto a la flecha de la derecha. En la original esta pequeña nube está partida en dos, siendo la parte de laderecha bastante más grande que la de la izquierda. En la segunda imagen se ve claramente que la nube ha sido"encajonada" en una de estas cuadrículas y se ha perdido la pequeña parte de la nube, la que estaba a la izquierda.

Por último, la gama cromática y luminosa de la imagen también sufre. Fíjate en los colores de la zona 2 en las dosfotos. La segunda foto, además de perder muchos de los detalles del mar, está notoriamente más oscura.

Otro ejemplo:

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 5/12

Fíjate en las zonas maracadas con 1 y 3 y verás como en la segunda imagen se ha perdido la definición de loscontornos de la isla. Ahora el contorno no es "limpio", sino que aparece algo borroso, difuminado en rectángulos.Fíjate también en el detalle del mar de la zona 2. En la segunda imagen el mar aparece como una mancha borrosa.

Lo increíble después de ver estas diferencias es volver a ver las imágenes sin ampliar y dejarse los ojos buscando lasdiferencias... Te vuelvo a poner las imágenes del ejemplo. Adivina cual es cual... (para comprobarlo pincha en laimagen con el botón derecho del navegador y ve a Propiedades)

¡Manos a la obra!Optimizando imágenes con Adobe Photoshop

Adobe Photoshop cuenta con una herramienta específica para la optimización de imágenes destinadas a serpublicadas en páginas web que es simplemente perfecta para lograr los objetivos planteados en este manual. Paraacceder a ella debes ir a Archivo ­> Guardar para Web Siguiendo con el enfoque práctico de este manual veremoscómo,optimizar nuestras imágenes de manera más que satisfactoria con apenas un par de clics de ratón. Dejaremosfuera muchas de las opciones que incluye el módulo porque su uso no es estrictamente necesario para lograr nuestropropósito. Lógicamente, quien quiera, puede experimentar o consultar la documentación del programa para ver susposibilidades.

Echemos un vistazo general al módulo de exportación para Web. Únicamente he marcado aquellas zonas que deberíastener siempre bajo control. El resto, como he comentado, no es estrictamente necesario conocerlas y, por tanto, nocomentaré nada sobre ellas:

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 6/12

1. Formato de archivo: Esta primera opción es fundamental, ya que nos permite elegir el formato de archivo enque vamos a grabar nuestra imagen. Como vimos en el apartado ¿Cual es el truco? los formatos destinados aimágenes artificiales almacenan un máximo de 256 colores (8 bits) pero permiten optimizar la paleta decolores, mientras que los formatos destinados a imágenes reales usan profundidades de color de 16,7 millonesde colores (24 bits) peo incluyen métodos de compresión de calidad variable.

Si vamos a archivar una imagen artificial debemos elegir el formato PNG­8 o GIFSi vamos a archivar ua imagen real debemos elegir el formato JPEG

Adobe Photoshop permite guardar las imágenes en otros dos formatos, PNG­24 y WBMP que no debemos usarpor ser el primero un tipo de archivo sin pérdida de calidad con el que obtenemos archivos muy grandes y elsegundo por tener una profundidad de colores de 1bit, esto eso, sólo incluye dos colores: blanco y negro.

2. Entrelazado: Cuando navegas por internet habrás visto que hay algunas imágenes que cargan de golpe y otrasque van apareciendo poco a poco. Eso es precisamente lo que controla esta casilla. Cuando la marcas la foto elnavegador de internet carga poco a poco la imagen en lugar de esperar a haberla descargado por completoantes de mostrarla. Marcar esta casilla aumenta el tamaño del archivo, aunque en cantidades despreciables.

3. Tabla de colores: Esta pestaña aparece únicamente cuando en el apartado 1 hemos elegido los formatos GIF oPNG. Aquí tenemos la clave para la optimización de las imágenes artificiales. Como verás, en este apartado 3hay unidas tres zonas por estar todas íntimamente relacionadas.

Colores: En la parte superior nos encontramos con una casilla llamada Colores que nos permite elegiruno de estos valores: 2, 4, 8, 16, 32, 64, 128 ó 256. Con esta opción limitamos el número máximo decolores que tendrá la imagen. Lógicamente si elegimos una cantidad inferior a los colores que posee laimagen perderemos calidad porque habrá que sustituir los colores originales por colores similares.Photoshop ofrece diversas opciones para controlar como se sistituyen los colores que eliminamos pero,sincemente, creo que no merece la pena calentarse tanto la cabeza para una reducción en el peso de la imagen casi despreciable. Cuando, por el contrario, elegimos un número de colores superior al que tienela imagen pueden pasar dos cosas:

­ Si elegimos el formato GIF deberemos ajustar de forma manual la cantidad de colores al número decolores diferentes presentes en la imagen. De no hacelo aumentaremos innecesariamente el peso del

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 7/12

archivo.

­ Si elegimos el formato PNG­8 deberemos elegir siempre 256 colores porque este formato usa, de formaautomática, únicamente el número de colores diferentes presentes en la imagen.

Tabla de colores: Nos muestra, de forma visual, todos los colores diferentes presentes en la imagen

Tipo de paleta: En la parte inferior derecha nos encontramos con esta útil información que nos indica elnúmero de colores diferentes presentes en la imagen y el tipo de paleta que estamos usando. Estainformación es esencial para poder ajustar correctamente el parámetro Colores cuando trabajamos enformato GIF. Si usas en formato PNG­8 esta casilla es meramente informativa.

4. Formato, peso y tiempo de descarga: Nunca deberías perder de vista esta zona. Aquí verás en todomomento el formato de archivo que has elegido, el peso final que tendrá la imagen y el tiempo que tardaría endescargar en una conexión lenta de 28,8 Kbit/s. Un poco más arriba de la zona marcada como 1 hay unapequeña flechita negra orientada hacia la derecha. Si pinchas en ella podrá seleccionar otros tipos deconexiones para comprobar cuanto tardaría en descargar con cada una de ellas

5. Tamaño de visualización: Por defecto aparece siempre al 100% mostrando por tanto el tamaño real de laimagen ¿Por qué es importante esta opción? Como norma general si la imagen no se puede mostrar al completocon la visualización del 100% muy seguramente nuestra imagen es demasiado grande para subirla a internet ynos convendría reducirle tamaño. Podemos reducir el tamaño de una imagen de forma rápida y sencillamediante la pestaña Tamaño de imagen.

1. Tamaño original: Aquí veremos el tamaño original de nuestra imagen. En el ejemplo vemos que laimagen con la que estoy trabajando es exageradamente grande para subirla a internet (1.728x1152)

2. Tamaño nuevo: Aquí indicaremos de forma manual qué tamaño queremos que tenga finalmente elarchivo de imagen. Si tenemos pinchada la casilla Restringir proporciones nos aseguraremos de nomantener las proporciones cuando reescalamos. En el ejemplo he indicado una anchura de 320 píxeles yla altura se ha ajustado de forma automática a 213 para mantener las proporciones. De no haber tenidopinchada "Mantener proporciones" la altura habría seguido siendo de 1.152 píxeles.

3. Porcentaje: También podemos reescalar la imagen usando un porcentaje en lugar de un dato numérico.En este caso la imagen final tendrá un tamalo del 18,52% con respecto a la original. En mi caso este datoha aparecido de forma automática. Si cambio el porcentaje de forma manual entonces el nuevo tamañocambiará también de forma automática.

4. Calidad: La opción por defecto es Bicúbica. Da muy buenos resultados. Yo no lo cambiaría5. Aplicar: Cuando lo tengas todo listo picha aquí para que los cambios se hagan efectivos

6. Compresión JPEG: La imagen que contiene las zonas marcadas al comienzo de este apartado se correspondecon el formato PNG­8. Cuando elegimos JPEG como formato de archivo desaparecen algunas opciones, como latabla de colores, y aparecen otras específicas del JPEG que veremos a continuación:

1. Formato de archivo: Para ver estas opciones es necesario que esté seleccionado el formato JPEG2. Tipo de compresión: Aquí encontramos unos ajustes preestablecidos de calidad. Prefiero ajustar

manualmente la calidad como se indica en el punto 4 a continuación3. Pogresivo: Tiene la misma función que el entrelazado.4. Calidad: Esta es sin duda, la opción más importante de todo el cuadro de diálogo. Aquí definimos la

degradación de calidad que tendrá la imagen. Valores más pequeños darán como resultado imágenes de

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 8/12

menor peso pero, lógicamente, también de menor calidad. Mi consejo es que vayas experimentando condiferentes valores para encontrar el valor con el que, reduciendo al máximo el peso final del archivo, lacalidad no se vea afectada en exceso. Mientras se experimenta con estos valores suele ser de bastanteutilidad fijarse en la información de formato, peso y tiempo de descarga. Ahí podremos comprobar si lapérdida de calidad que sufre la imagen merece o no la pena.

Por último, cuando lo tengas todo configurado a tu gusto dale a Guardar ¡y listo!

Microsoft Image Resizer (o cómo optimizar con sólo 4 clics)A veces lo bueno, bonito y barato existe o, en este caso, lo bueno, sencillo y barato. Image Resizer es una de lasMicrosoft PowerToys, unas herramientas gratuítas desconocidas para una gran mayoría de usuarios pero que amplíanel sistema operativo Microsoft Windows añadiéndole algunas funcionalidades muy interantes. Su único inconvenientees estar en inglés, pero son tan sencillas que poco inglés se necesita saber para usarlas.

Image Resizer permite cambiar el tamaño de una imagen reduciendo de forma muy considerable su peso. Su facilidadde uso se logra gracias a una simplicidad de uso extrema, pero claro, tanta simplicidad se logra ofreciendo un númeromuy, muy limitado de opciones de configuración. Entre ellas las que más se echa de menos es un nivel de calidadfinal personalizada. Todas las imágenes obtenidas a través de Image Resizer están en formato JPEG y la calidad esbastante buena, aunque justo en el límite de "demasiada" compresión. La ventaja de esa forma de trabajar, noobstante, es que lograremos imágenes de un peso muy, muy contenido con una calidad visual todavía bastantebuena.

Las Microsoft PowerToys se pueden descargar aquí:

http://www.microsoft.com/spain/windowsxp/downloads/powertoys/xppowertoys.mspx

El enlace a directo a Image Resizer en el momento de escribir este manual es éste: (si este enlace se rompe en elfuturo agradecería que lo corrigiérais vosotros mismos, o bien que me avisárais para que sea yo quien lo corrija)

http://download.microsoft.com/download/whistler/Install/2/WXP/EN­US/ImageResizerPowertoySetup.exe

Instalando Image Resizer

La instalación es extremadamente sencilla. No obstante incluyo aquí las capturas de pantallas para que a los que les"asusta" el inglés sepan en todo momento "qué les dice" el programa de instalación:

1. Pantalla de bienvenida: Te da la bienvenida, te informa que vas a iniciar el programa de instalación y teavisa que el programa está protegido por derechos de autor. Es gratis, pero no libre (de código abierto)

2. Licencia de uso: Los puntos más importantes son:

­ Para poder usar este programa es necesario contar con una copia validada de Windows (es decir, original)­ (Sólo para programadores) No está permitido decompilar el programa para acceder al código fuente.­ Queda prohibida su venta

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 9/12

­ Como todo el software norteamericano, hay ciertos países en los que es ilegal usar productos de Microsoft(Ver http://www.microsoft.com/exporting/)­ Como todos los programas, no ofrecen garantía alguna por su uso ni aceptas ningún tipo de responsabilidadderivada de su uso­ Para cualquier cuestión legal referente a este programa se aplicará la legislación norteamericana.

3. Nombre y organización

4. Instalación completa o personalizada: Si eliges personalizada únicamente puedes elegir el directorio deinstalación (c:\windows\systen32 por defecto) Yo no cambiaría nada y dejaría Complete.

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 10/12

5. Último paso: Instalar

Optimizando con Image Resizer

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 11/12

Para optimizar con Image Resizer únicamente hay que pinchar en las imágenes que quieras optimizar on el botón derecho yseleccionar Image Resizer de entre las opciones que aparecen en el menú contextual

A continuación aparecerá la siguiente ventana en la que podremos elegir el tamaño que tendrá la imagen que queresreescalar.

1. Pequeña. Se ajusta a un tamaño de 640x480 píxeles2. Mediana. Se ajusta a un tamaño de 800x600 píxeles3. Grande. Se ajusta a un tamaño de 1024x768 píxeles4. Portátil (para móviles y PDAs). Se ajusta a un tamaño de 200x320 píxeles como máximo5. Opciones avanzadas. Cuando pinchamos aquí se despliegan nos nuevas opciones que veremos a continuación

1. Tamaño personalizado. Te permite elegir qué tamaño final tendrá la imagen2. Reduce el tamaño de las imágenes, pero no las amplía. Es decir, si nuestra imagen original tiene un

tamaño de 800x600 y seleccionamos un tamaño de 1024x768 el cambio de tamaño no se hará efectivo.3. Reescalar la imagen original. Cada vez que reescalamos una imagen se genera de forma automática un

nuevo archivo con el tamaño modificado. Si marcamos esta casilla perderemos la imagen original yobtendremos la imagen reescalada con el mismo nombre de archivo que la original

4. Volver al modo básico de trabajo. Vuelven a desaparecer las opciones que acabamos de ver en esteapartado.

Convertir con ImageResizer muchas imágenes de forma simultánea

Hemos dicho que para convertir UNA imagen hemos de pinchar en ella con el botón derecho pero ¿qué ocurre siquiere reescalar todas las imágenes de una carpeta? Pues selecciona todas las imágenes que quieras transformar ypincha en cualquiera de ellas con el botón derecho. La transformación se hará efectiva para TODAS las imágenes que

26/3/2015 Optimización de imágenes para su uso en internet

http://www.videoedicion.org/documentacion/article/printer/optimizacion­de­imagenes­para­su­uso­en­internet 12/12

hayas seleccionados. Por si todavía no lo sabías, indico a continuación algunos métodos de selección muy útilescuando queremos seleccionar múltiples archivos:

­ Para seleccionar todas las imágenes de una carpeta puedes presionar de forma simultánea las teclas Control y E

­ Para seleccionar un grupo de imágenes correlativas, por ejemplo, si tienes una carpeta con 100 imágenes y quiereseleccionar de la 25 a la 50, aprieta mayúsculas, pincha con el botón izquierdo UNA vez en la imagen 25 y luego, SINSOLTAR MAYÚSCULAS, pinchas una vez en la imagen 50.

­ Para seleccionar varias imágenes pincha UNA VEZ con el botón izquierdo en todas las que quieras seleccionar SINSOLTAR LA TECLA CONTROL

No todos los nombres de archivos son buenosCuando no se tiene mucha experiencia en la publicación de contenidos de internet es muy frecuente encontrarnos conque algunas de las imágenes que hemos usado no cargan. En la mayor parte de las ocasiones el problema es algo tansimple como que el nombre de archivo no sigue unas normas básicas. No todos los servidores son igual de"delicados" en este aspecto y una archivo imagen con eñes en su nombre, por ejemplo, puede cargar perfectamenteen un servidor determinado mientras que si usamos ese mismo archivo en un servidor diferente puede que entoncesno cargue.

Para evitar estos problemas lo más sensato es seguir estas recomendaciones que nos garantizarán que el nombre denuestro archivo nunca será conflictivo en ningún servidor.

Evita tildes y otros caracteres especiales como eñe, vocales tildadas, signos de interrogación o exclamación,etc.

No uses espacios. Si necesitas separar lo ideal son guiones bajos como_en_este_ejemplo o puntoscomo.en.este.otro.ejemplo

Usa nombres de archivos de menos de 32 caracteres.

Puedes ver la versión online de este documento en:http://www.videoedicion.org/documentacion/article/optimizacion­de­imagenes­para­su­uso­en­internet