Imagenes Sensibles

[ferminako]

En cuanto al tema de responsive images, hasta ahora habia cargado una imagen de 500px x 500px por ejemplo con el tag <img y heihght y width al 100% dentro de un div wraper con un width en % , esto hace que se adapte y funciona.

Pero ahora que lo pienso , seria una opcion cargar por css el background-image en el media query para evitar cargar una imagen mas pesada de lo necesario en dispositivos moviles?

De esta manera si entra en una pantalla de 1000px pues cargo una imagen de mayor calidad por ejmplo pesa 300kb pero si entras de movil y se que le ancho maximo sera de 480px y el div de la imagen se reducira hasta unos 250px pues podria cargar una imagen que quizas ocupe 80kb, por lo que la carga seria menor, la experiencia mejoraria en cuanto al tiempo de carga...

Es una buena opcion? una tonteria? tiene contras al no disponer de un tag img con alt para seo???

Gracias.

[memoadian]

depende de si la imagen es dinamica o no, es decir, si vas a cargar esa imagen para cada post, cargarla por css es una terrible idea, pero si es una imagen que se verá en todos lados igual como el logo etc. puede ser buena idea.

[ferminako]

Por que seria una mala idea si tueviera que cargarla varias veces?
En principio la idea es para cargar por ejemplo un logo o similar...
Afecta al seo?

[memoadian]

imagina la cantidad de id's en tu css si estás cargando una imagen distinta desde el css para cada post, si tuvieras 10 post no hay mucho problema pero si tu web crece y tienes mil.

1000 lineas extra de css solo para las imagenes en un solo device, si tienes 4 device, 4000 lineas de código, eso son como 100 kb además del desorden.

[ferminako]

Entendido memodian, y en lo refetente al seo hay algun tipo de problema? es mejor , peor, da iwal?

[pitufoweb]

Me perdi con lo que dice memoadian...Simplemente no logro entender.

En cuanto a la pregunta... Simplemente es una mala idea, por el simple hecho de poner las imagenes del contenido como fondo. Ahora, si solo son imagenes decorativas, no habria ningun problema al ponerlas como fondo.


Saludos

[ferminako]

pitufoweb el tema es q entonces si no puedo hacerlo asi , como cargo diferentes imagenes segun resolucion?

[pitufoweb]

detecta la resolucion con algun script y segun su resolucion envias la imagen con el tamaño adecuado.

Seguro ya hay varios script para eso, solo es cuestion debuscarlos. No te puedo recomendar ninguno, por que no he usado ninguno.


Saludos

[memoadian]

es eso que pensaste exactamente pitufoweb, meter las imagenes de los posts en el css D:

la resolución de pantalla se puede detectar facilmente con javascript

Código javascript:

<script type="text/javascript">
<!--
document.write('<br>Su resolución es de '+screen.width+' x '+screen.height);
//-->
</script>
 

[augusto_cmv]

Usa los Media Querys de CSS3, te funcionaran muy bien: http://www.w3.org/TR/css3-mediaqueries/

[ferminako]

Ya uso media queries para el responsive, pero con ella solo podria modificar el background image, no el img src no? , debeo hacerlo con js co screen.width y segun eso cargar una u otra...

Os parece la mejor solucion?