12.170 cursos gratis
8.782.689 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Capýtulo 9:

 Reducir tamaño de 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.

1. Vamos a bajarnos de Internet una imagen y vamos a llamarla estrellas.jpg. Para ello ves a este enlace y descarga la imagen. Guárdala en la carpeta de siempre.

                                   imagenes

http://www.nasa.gov/images/content/415700main_wise20100106-516.jpg

Como veréis la imagen tiene unas dimensiones muy grandes 516x516 y 504 Kb.

2. Haz doble clic sobre el acceso directo de GIMP situado en el escritorio:

                                                           digital      

3.  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 estrellas.jpg .Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.

    digital

4. Pulsa sobre el botón Abrir.  

5. En la ventana de imagen elige Imagen > Escalar la imagen…               

6. Se muestra el cuadro de diálogo Escalar la imagen.

                      digital

7. En Tamaño de la imagen se muestra la Anchura y Altura en píxeles de la imagen actual. Observa que puedes modificar estos valores mediante los botones de incremento/decremento o bien tecleando otros. Sin embargo si entre ambas casillas y a la derecha aparece un icono de cadena cerrada, cuando trates de modificar la anchura, automáticamente se definirá la altura respetando las proporciones originales y evitando que la imagen se deforme. Al hacer clic sobre este icono de bloqueo se desactivará esta proporcionalidad y podrás definir valores independientes.

8. 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.

                      digital

9. En la lista de Interpolación elige la opción Cúbica para definir el método que utilizará GIMP para reducir la imagen.

10. Clic en el botón Escala.

 

11.Se puede deshacer la operación de escala seleccionando en la barra de menús de la ventana de imagen: Edición > Deshacer.

 

12. A continuación elige Archivo > Guardar como…

 

13. En el cuadro de diálogo Guardar imagen define como nombre del nuevo archivo, por ejemplo, estrellas_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á (usa la carpeta de siempre para no equivocarte).

digital 

14. Clic en el botón Guardar.

15. 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.

16. Pulsa en el botón Aceptar.

 

                                    digital

17. 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: estrellas.jpg

 

18. Abre la carpeta destino y encontrarás en ella los archivos JPG: estrellas.jpg, Estrellas_50.jpg, estrellas_30.jpgestrellas_10.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.

Capýtulo siguiente - Modificar tamaño del lienzo
Capýtulo anterior - Reducir paleta de colores

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratarý tus datos para realizar acciones promocionales (výa email y/o telýfono).
En la polýtica de privacidad conocerýs tu derechos y gestionarýs la baja.

Cursos similares a Diseño páginas web. Insertar imágenes



  • Výdeo
  • Alumnos
  • Valoraciýn
  • Cursos
1. Diseño páginas web con editor HTML
Diseño páginas web con Editor HTML , cuantas veces al visitar una Web , nos hemos... [02/03/10]
3.716  
2. Impedimentos del éxito de las páginas web
Una página web , conocida como página de Internet , es un documento adaptado para... [19/10/10]
353  
3. Adobe Flash. Insertar imágenes a la galería
En este video tutorial aprenderemos a acabar los apartados de nuestra... [24/09/10]
952
Curso con video

ýQuý es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail