2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web

Optimizar Imágenes para Internet

El recorte de imágenes es una tarea muy mecánica que en poco tiempo puede estar finalizada. Pero hay que tener varios factores en cuenta para preparar las imágenes y optimizarlas al máximo.

Nuestro objetivo es lograr un balance entre calidad de imagen y el peso de la misma y así evitar hacer esperar al usuario a que se cargue la imagen en la página. Te muestro una serie de factores muy básicos a tener en cuenta antes de empezar.

1. La resolución de píxeles necesarios para visualizar imágenes en la pantalla es de 72pp.
2. El peso final de una imagen debe estar comprendido entre 2 y 20kb (kilobytes).
3. Los formatos principales para web serán: GIF, PNG y JPG.

Si quieres conocer más acerca de qué formato es el recomendable para usar en un sitio web, el siguiente enlace me parece de los más interesantes:
http://blogandweb.com/blogger/conoce-mas-sobre-los-formatos-de-imagenes-para-web/

 

Y una vez vistos los tres puntos básicos te muestro la manera en la que recorto una imagen optimizada para web con un ejemplo muy sencillo.

Con la herramienta Recortar (C) defino los límites de la imagen quedando de la siguiente manera:

Una vez tenemos la imagen recortada y todo está correcto, para guardarla hacemos clic en Archivo > Guardar para Web y Dispositivos cargándose la siguiente pantalla:

Optimizar Imágenes para Internet

En la opción Ajuste preestablecido tenemos la opción de elgir el formato que mejor se adapte para el sitio web. Yo suelo guardar en formato PNG cuando se trata de imágenes con colores planos, transparencias y según qué tipo de texturas y el formato JPEG lo uso en fotografías y siempre con calidad entre 60 y 80.

Al hacer clic en Guardar y ubicando la imagen en la carpeta del proyecto, ya tenemos nuestra primera imagen optimizada para web. Guardándolas de esta manera, nos aseguramos en gran parte que cumplimos con los 3 puntos principales a tener en cuenta que hemos tratado al principio.

¿Empezamos ya a maquetar?


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

2 comentarios en «2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web»

  1. Gracias. muy interesante. Yo aprendi a crear web sin estos pasos. Pero estimo que esto perfecciona profesionalmente un diseño y definitivamente eso es algo muy importante.

    • ¡Muchas gracias Froilan!
      Por supuesto, hay muchas maneras y esta no tiene por qué ser ni mucho menos la definitiva. Yo expongo mi metodología y por supuesto me encantaría conocer la tuya! 🙂
      ¡Espero verte más a menudo por aquí!

Los comentarios están cerrados.