¿Cómo hago para que la imagen de fondo no pierda su calidad?

[plitre_sys19]

Hola! Voy a empezar a trabajar en un diseño de un sistema web y me gustaría saber cómo hago para que una imagen de fondo que voy a utilizar, no se vea fea, es decir, que no pierda su calidad cuando la coloque pequeña? Ya que tengo pensado utilizar el responsive web design, que formato debe ser la imagen?.

Me gusto este artículo que vi http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/comment-page-1/#comments y me gustaría ser hago así, pero antes todo me gustaría saber lo de la imagen para que luego no pierda su calidad.

Que programa deberia utilizar? photoshop, corel?

[waltersele]

Hola Piltre, para que la imagen no se vea mal cuando achicas o agrandas la pantalla es tema de la resolución imagen, no del css ni del html.

Hay que jugar entre calidad y optimización, pues evidentemente cuantos más pixeles más ocupará.

Las fotografías deben tener el tamaño máximo de pantalla que quieras utilizar para que no pierdan calidad, pero debes optimizar esa imagen para que tenga una buena definición con esas dimensiones y no sea una carga excesiva para la web.

Recuerda que 72ppp es lo máximo que aguanta la web, tener imágenes con más ppp sólo aumentará el tamaño de tu imagen y por tanto el tiempo de carga de tu página (por ejemplo...)

Una practica recomendable puede ser tener varios tamaños y cargar según la resolución.

Para hacer esto tendrías que poner tu imagen como background y cargar con mediaqueries los distintos tamaños.

Un saludo!

[Rafael]

Hola Waltersele. Lo de los 72 dpi es un mito. No afecta para nada los dpi en una imágen en un dispositivo electrónico.

Lee esto: http://www.forosdelweb.com/f6/hablem...6/#post2940917

Pero sí te doy la razón en que conviene usar diferentes tamaños de imagen según el dispositivo.


plitre, para resamplear imágenes no necesitas Photoshop, basta con cualquier editor, gimp gratis o incluso un visor como irfanview. Después de resamplear aplica un poco de sharpen.