Desafío 1 Imagen-adicto: Tratamiento y optimización de imágenes para Internet

Objetivos

Aprender a trabajar con imágenes es muy importante para una web. A veces nos encontramos con imágenes de las que sólo nos interesa una parte, o bien imágenes muy grandes que nos conviene hacer más pequeñas para no sobrecargar demasiado nuestra web.

Pues bien, el objetivo de esta actividad es aprender a redimensionar y cortar imágenes para ajustarlas en nuestro espacio.

Desarrollo

Tomamos una imagen como la que vemos aquí, será nuestra imagen de partida:

Origen Pixabay. Autor: SkitterPhoto. Licencia CC

La imagen de partida original, con la que nosotros trabajaremos en este desafío, tiene unas dimensiones de 5.803 píxeles de ancho por 3.873 píxeles de alto y un tamaño en disco de 3.858KB.

Una imagen de ese tamaño, ocuparía mucho espacio en nuestra web, y llevaría mucho tiempo descargarla y mostrarla en nuestra página, no es manejable.
Además, imaginemos que para nuestra web necesitamos una imagen cuadrada que muestre sólo el bote de pinceles.

Nos encontramos ante un desafío que como vemos tiene dos partes. En primer lugar conseguir recortar la imagen para que sea cuadrada y muestre sólo el bote de pinceles. En concreto necesitamos una imagen de 300 píxeles de ancho por 300 píxeles de alto.

Y en segundo lugar, necesitamos que ocupe en disco menos de 50KB, para que no penalice demasiado la navegación por nuestra página.

Necesitamos un resultado similar a este:

Y para poder superar este desafío, estos son los pasos que debes realizar:

1.- Descarga la imagen original de partida a tu ordenador, desde este enlace: Imagen de partida

2.- Trata la imagen (bote de pinturas.jpg) para conseguir recortar las dimensiones pedidas

Una pista: Escala la imagen sin deformarla, hasta que tenga una altura de 350 píxeles y a continuación, ajusta el tamaño del lienzo y la posición de la imagen para conseguir un cuadrado de 300x300 con el bote de pinceles centrado en él

3.- Guarda la imagen recortada y reescalada en tu ordenador, ajustando los parámetros de calidad para conseguir que no ocupe más de 50KB en disco.

Entrega

Una vez optimizada la imagen súbela a la plataforma. Para ello, sigue estos pasos:

1. 1. 1. Pulsa el botón de "Agregar entrega":
         
      2. Arrastra la imágenes retocada hasta la zona de archivos de la tarea.
         
         
      3. Cuando hayas incorporado la imagen, y estés seguro de que todo es correcto, envíasela a tu tutor/a utilizando el botón “Guardar cambios”.

Evaluación

Tu tutor comprobará que la imagen ha sido tratada correctamente, que se ajusta a las dimensiones y tamaño pedidos y que la imagen no se ha deformado.