Dimensiones de una imagen
Reducir el tamaño de una imagen
Uno de los principales factores que determinan el peso de un archivo gráfico es el tamaño de la imagen que contiene, es decir, el número de píxeles en anchura y altura. Se recomienda utilizar un programa como GIMP para definir exactamente el tamaño final con que se utilizará cada imagen. Se puede insertar una imagen en una página HTML y luego reducir su tamaño de visualización. Sin embargo esta operación no reduce el peso final resultante del archivo gráfico. Es aconsejable reducir las dimensiones de la imagen previamente con GIMP u otro editor de imágenes, crear un nuevo archivo gráfico más ligero y luego integrarlo en la página. Extrae a una carpeta de tu disco duro el archivo tranvia.jpg contenido en el ZIP que se adjunta a continuación: tranvia.zip. Sus características técnicas son: 800x600 píxeles de tamaño, profundidad de color 24 bits (16,7 millones de colores), resolución 72 ppp, formato JPG y tamaño del archivo 516 Kb.
Haz doble clic sobre el acceso directo de GIMP situado en el escritorio:
Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo tranvia.jpg .Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.
Pulsa sobre el botón Abrir.
En la ventana de imagen elige Imagen > Escalar la imagen ...
En el cuadro de diálogo Escalar la imagen despliega la lista de unidades de tamaño y selecciona porcentaje. De esta forma se definirá el nuevo tamaño de la imagen utilizando un porcentaje de reducción a partir del tamaño original. En la casilla Anchura introduce el valor 50%. Observa que si el bloqueo de proporciones está activado al pulsar enter automáticamente se completa la Altura con idéntico porcentaje.
En la lista de Interpolación elige la opción Cúbica para definir el método que utilizará GIMP para reducir la imagen.
Clic en el botón Escala para aplicar la reducción de tamaño.
Se puede deshacer la operación de escala seleccionando en la barra de menús de la ventana de imagen: Edición > Deshacer.
A continuación elige Archivo > Guardar como ...
En el cuadro de diálogo Guardar imagen define como nombre del nuevo archivo, por ejemplo, tranvía_50.jpg. Es importante que especifiques la extensión (.jpg) y también que definas un nombre distinto para evitar sobrescribir el archivo original. Asegúrate de recordar en qué carpeta destino se guardará.
Clic en el botón Guardar.
En la ventana Guardar como JPEG, sitúa el deslizador Calidad en 100% para evitar pérdidas de calidad y analizar comparativamente el peso del archivo final resultante atendiendo solamente a la reducción de tamaño.
Pulsa en el botón Aceptar.
Cierra esta imagen y repite los pasos 3-16 crear otras dos imágenes que sean respectivamente el 30% y 10% de la imagen original partiendo siempre del archivo inicial: tranvia.jpg
Abre la carpeta destino y encontrarás en ella los archivos JPG: tranvia.jpg, tranvia50.jpg, tranvia30.jpg y tranvia10.jpg que has creado. Si el tamaño de la imagen es menor, el archivo que la contiene tendrá menor peso. Como puedes comprobar en el ejemplo no es necesario utilizar imágenes de gran tamaño en las páginas web. Eso no sólo redundará en una mayor calidad estética sino que hará más rápida la navegación facilitando la descarga de archivos gráficos más ligeros.
Modificar el tamaño del lienzo
En ocasiones es necesario disponer de más lienzo en blanco dentro de una imagen para añadirle más elementos. Extrae a una carpeta el archivo cisne.jpg contenido en el ZIP que se adjunta a continuación: cisne.zip. Sus características técnicas son: 330x240 píxeles de tamaño, profundidad de color 24 bits (16,7 millones de colores), resolución 72 ppp, formato JPG y tamaño del archivo 77 Kb.
Haz doble clic sobre el acceso directo de GIMP situado en el escritorio:
Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo cisne.jpg .Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.
Pulsa sobre el botón Abrir. En esta práctica vamos a ejemplificar cómo redimensionar el tamaño del lienzo de una imagen para añadirle un texto en su base.
En la ventana de imagen elige Imagen > Tamaño del lienzo ...
En el cuadro de diálogo Establecer el tamaño del lienzo de la imagen se muestra la Anchura y Altura actuales del lienzo. En este caso 330x240 píxeles. Clic en el icono de bloqueo de proporcionalidad para poder aumentar la altura sin que ello implique incrementar la anchura. Tras su pulsación el icono debe tener el aspecto de dos eslabones de cadena separados.
En la casilla Altura introduce el valor 330 para aumentarla y pulsa la tecla enter. Observa que en la vista previa de la imagen aparece un espacio en blanco por debajo de la imagen que se corresponde con el lienzo aumentado. Si pulsas el botón Centrar la imagen se centraría horizontal y verticalmente sobre el lienzo. Otra posibilidad es introducir manualmente en las casillas X e Y la posición en píxeles en que se situará la esquina superior izquierda de la imagen en relación con el nuevo lienzo. En el caso que nos ocupa no utilizaremos esta opción ni el botón de centrado porque GIMP crea automáticamente el espacio que necesitamos en la base de la imagen para añadir luego el texto.
Para terminar pulsa en el botón Redimensionar.
Desde la barra de menús de la ventana de imagen elige Imagen > Aplanar imagen. Con esta operación se fusionan las capas y la banda inferior toma el color blanco de fondo.
Para acceder al cuadro de herramientas de GIMP utiliza la barra de tareas situada en la parte inferior del escritorio de Windows. Basta hacer clic sobre el botón de la barra de tareas con el título Gimp. En el cuadro de herramientas de GIMP selecciona la herramienta Texto y a continuación haz clic sobre la banda blanca inferior.
Se muestra una ventana para introducir el texto. Debajo de la barra de herramientas encontrarás un panel donde es posible definir la tipografía del texto: fuente, tamaño, color, estilo, etc. En la pequeña ventana del Editor de textos de GIMP escribe, por ejemplo, "EL CISNE BLANCO" y luego pulsa en el botón Cerrar.
Acerca el puntero del ratón al cuadro de texto y cuando éste adquiera el aspecto de una cabeza de flecha negra con una cruz de doble flecha en su esquina inferior derecha, pulsa sobre el cuadro de texto creado y arrástralo para situarlo más centrado.
Para guardar la imagen elige Archivo > Guardar como ... En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.
Se muestra el cuadro de título Exportar archivo donde se informa de que el formato JPG no conserva las capas por lo que aplanará la imagen para guardarla a continuación. Pulsa en el botón Exportar.
En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en el botón Guardar.
Recortado de imágenes
En este apartado se plantea obtener una nueva imagen a partir de la selección y recortado de un área concreta en una imagen original más grande. Esta tarea puede resultar especialmente útil en la elaboración de imágenes muy utilizadas en una página web y que destacan por una estética marcada por la desproporción entre las dimensiones de anchura y altura. Es el caso de un banner (468x60 pixeles), de una cabecera (768x90 pixeles) o bien de un rascacielos (120x600 pixeles). Extrae el archivo cadenas.jpg contenido en el ZIP que se adjunta a continuación: cadenas.zip
Abre GIMP.
Elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Localiza el archivo cadenas.jpg. Clic sobre este archivo y pulsa en el botón Abrir.
En el cuadro de herramientas elige la herramienta Seleccionar Regiones Rectangulares.
Sobre la ventana de imagen, pulsa y arrastra sobre la fotografía para definir un área rectangular alargada que contenga el monumento central.
En el menú de la ventana de imagen elige Imagen > Recortar a la selección.
Para guardar la imagen elige Archivo > Guardar como ... En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. Ejemplo: banner.jpg De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.
Se muestra el cuadro de título Exportar archivo. Pulsa en el botón Exportar.
En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en el botón Aceptar.