Optimizacion de imagenes

Optimización de imágenes
para la web

Manual de iniciación

Versión 2.0 - Marzo 2009

Optimización de imágenes para la web
Educastur. Servicio de hospedaje web
Versión 2.0 - Marzo 2009

Índice

Índice ....................................................................................................................................................... 2
1. Conceptos básicos.............................................................................................................................. 3
2. Instalación de IrfanView ...................................................................................................................... 4
3. Conversión de formatos...................................................................................................................... 7
4. Reducción de la paleta de colores ...................................................................................................... 9
5. Reducción de la resolución ............................................................................................................... 10
6. Reducción de lasdimensiones.......................................................................................................... 11
7. Conversión por lotes.......................................................................................................................... 13
8. Galería de imágenes ......................................................................................................................... 15

Página 2 de 18

Optimización de imágenes parala web
Educastur. Servicio de hospedaje web
Versión 2.0 - Marzo 2009

1. Conceptos básicos
Antes de tratar la optimización de imágenes conviene repasar algunos conceptos clave sobre imagen
digital.
1.1 Resolución
Es el número de píxeles o puntos que contiene una imagen por pulgada lineal. Este valor se expresa en
ppp (píxeles por pulgada). Cuanto más píxeles por pulgada contenga unaimagen, mayor será su calidad y
en consecuencia mayor número de bytes ocupará su archivo.
1.2 Profundidad de color
Es el número de bits necesarios para codificar y guardar la información de color de cada píxel. Un bit es una
posición de memoria que puede tener el valor 0 ó 1. Cuanto mayor sea la profundidad de color en bits, la
imagen dispondrá de una paleta de colores más amplia. Se utiliza1-bit para imágenes en blanco/negro sin
grises (0=color negro, 1= color blanco); 2-bits = 4 colores (00=color negro, 01=color X, 10=color Y, 11=color
blanco); 3-bits = 8 colores; ...; 8-bits = 256 colores; ...; 24-bits = 16.7 millones de colores.
1.3 Formatos de imagen
Las imágenes digitales se pueden guardar en distintos formatos. Cada uno se corresponde con una
extensión específica del archivoque lo contiene. Los más utilizados para la publicación web son: GIF, JPG
y PNG.
•

GIF (Graphics Interchange Format : Formato de Intercambio Gráfico)
Admite una profundidad de color hasta de 8 bits como máximo, es decir, una paleta de
256 colores (color indexado). La conversión de una imagen a este formato produce una
disminución del tamaño de archivo por reducción de la profundidad decolor.

•

JPG-JPEG (Joint Photographic Experts Group : Grupo de Expertos Fotográficos Unidos)
A diferencia del formato GIF, admite una paleta de 16,7 millones de colores (24 bits).
Las cámaras digitales suelen almacenar directamente imágenes en formato JPEG con
máxima calidad y sin compresión.
La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. Cuando se
pretendepublicar en la web conviene asumir esta pérdida porque reduce
considerablemente el tamaño del archivo conservando un aspecto aceptable. Si la imagen
procede de una cámara digital es recomendable aplicar una calidad que oscile entre 60-90
% del JPG original.

•

PNG (Portable Network Graphic : Gráfico portable para la red)
Es un formato que surgió como alternativa al GIF. Es soportado por...