Optimización de imágenes para diseño web con Photoshop CS6

 en Diseño Web, diseño web barcelona

La optimización de imágenes es de suma importancia en el diseño de páginas web. ¿Por qué?

Diseño web y rapidez de carga

Tenemos que encontrar un equilibrio entre el diseño de nuestra página y la rapidez en que se carga. Esto se debe a lo siguiente:

Imágenes pesadas hacen que el tiempo de carga de la página web sea lento.

Páginas web lentas:

  • El usuario se cansa de ver cómo carga la página y se va.
  • Los buscadores (Google, yahoo!, bing…) penalizan las páginas lentas por encima de las que se cargan rápidamente.

Páginas web rápidas:

  • Buena experiencia para el usuario, se mantendrá visitando nuestro sitio Online.
  • Los buscadores nos recomendarán por encima de páginas de competidores que sean lentas.

Es por ello, que cuando queremos subir imágenes,, ya sea a nuestra galería de imágenes, trabajos realizados, productos o tienda online, es importante que las imágenes estén optimizadas. Vamos a explicar cómo optimizar imágenes que no requieran de un tamaño concreto, para el cual ya tendríamos que dar más pasos.

Optimización de imágenes para el diseño web

Recomendamos encarecidamente la optimización de las imágenes a la hora de realizar el diseño de nuestra web. Es un paso muy sencillo, pero que conlleva un resultado notable.

Pongamos el siguiente ejemplo… queremos subir una imagen capturada con nuestra cámara de fotos. En este caso, es una nueva cámara LUMIX GF6, con un nuevo sensor de 16 megapíxeles. La fotografía que hemos obtenido, pesa 8,56 MB.

Optimización de imágenes para diseño web

Captura de Windows. Tamaño de imágen para web excesivo

Este tamaño, es sumamente excesivo para cargarlo en una página web o tienda Online. Esos 8,56 MB, tardarán en ocasiones hasta minutos en descargarse, por lo que tenemos que optimizar esta imagen para su visualización en nuestra web.

La recomendación es que imágenes para galerías de trabajos realizados, o galerías de imágenes tomadas, fotografías de productos… las imágenes tengan una resolución máxima de 1280 x 1024 px.

Para hacer esto, abrimos la imagen con photoshop CS6. Pinchamos sobre el menú “Archivo”, y hacemos clic sobre la opción “Guardar para Web y dispositivos”.

Optimización imágenes para diseño web

Aparecerá el siguiente cuadro de diálogo:

Photoshop diseño web

Escogeremos los siguientes parámetros:

  • Formato JPG (Por defecto aparece marcado el formato GIF)
  • Tamaño de imagen: Si el tamaño de la imagen es mayor de 1280, le indicaremos 1280 px de ancho. El alto, lo calculará automáticamente. si el tamaño original de la imagen es igual o inferior, lo dejaremos tal cual está.

Le damos a guardar, y le ponemos un nombre que relacione la foto con lo que hay dentro de ella. Por ejemplo, en nuestro caso, un bosque de castaños en Asturias (bosque-castaños-asturias.jpg).

Imagen optimizada para diseño web

Captura de Windows. Tamaño de imagen para diseño web aceptable

 

Con este tamaño de imagen, nuestra fotografía ya está preparada para subirla a la galería de imágenes de nuestra web, o para el catálogo de productos o tienda online según corresponda. Puedes ver una diferencia tremenda, entre los 8,56 MB que pesaba la imagen, y los 0.46 MB que pesa ahora. No deja de ser una imagen grande, que correspondería con una galería de imágenes o una imagen de producto detallada, pero en estos casos, se podrá cargar con relativa rapidez en comparación con haber subido nuestra imagen en su tamaño original.

 

Dipixel tiene todas las imágenes optimizadas. ¿Quieres ver como se carga rápidamente? Haz clic sobre los enlaces y descúbrelo:

 

 

Recent Posts

Escribir una opinión

te-pertenece-diseno-webweb trazos y tendencias