Ocultar imágenes sin que se carguen

Si hay un método que se desaconseja para ocultar imágenes cuando utilizamos media queries, ese es el display:none. La razón es simple, y es que aunque le indiquemos al navegador que no muestre la imagen, éste la descargará de todas maneras (a excepción de Opera Mini y Opera Mobile).
He dado con un estudio curioso (http://timkadlec.com/2012/04/media-query-asset-downloading-results/) donde se han realizado tests con varios métodos  para ocultar imágenes y la verdad es que algunos resultados son sorprendentes.
Por ejemplo, si intentamos ocultar una imagen de fondo con el mismo método del display:none obtendremos el mismo resultado: el servidor la carga de todas formas. A menos que (y ahora viene lo bueno!) en vez de poner el fondo a ese elemento, se lo pongamos a su hijo y ocultemos el elemento padre.
Ejemplo del div padre con fondo: 
<div id="test2">div>
#test2 {
    background-image:url(‘images/test2.png’);
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test2 {display:none;}
}
Y esta es la alternativa:
<div id="test3">
    <div>div>
div>
#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}
Pero ¿ qué pasaría si en vez de ocultar un fondo lo que queremos es sustituirlo por otro más pequeño y adaptado a ciertos dispositivos móviles? Por ejemplo así:
<div id="test4">div>
#test4 {
    background-image:url('images/test4-desktop.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test4 {
        background-image:url('images/test4-mobile.png');
    }
}
Pues parece una buena alternativa, pero no es 100% efectiva para todos los navegadores ya que los dispositivos que funcionen con una versión anterior a Android 4.0 recargarán ambas imágenes, lo cual influirá negativamente en el peso y velocidad de nuestra página. Pero hay una buena solución para este problema y es meter  todo el  código que haga referencia a esta sustitución de imágenes en las media queries, indicándoles el min-width y el max-width. De esta manera funcionará en todos los navegadores! 
Bueno..¿he dicho todos? Como IE8 no acepta media -queries habrá  que revisar nuestro código en las css y declararle una imagen para él solito. 
Quedaría así:
<div id="test5">div>
@media all and (min-width: 601px) {
    #test5 {
        background-image:url('images/test5-desktop.png');
        width:200px;
        height:75px;
    }
}
@media all and (max-width: 600px) {
    #test5 {
        background-image:url('images/test5-mobile.png');
        width:200px;
        height:75px;
    }
}
En resumen: si tenemos que ocultar imágenesno debemos utilizar el método display:none, sino buscar alternativas a través de Javascript o o usar algún tipo de programación del lado del servidor.
Si lo que queremos es ocultar un fondo, lo mejor es ocultar el elemento principal que lo contiene.
Si lo que queremos es que cargue cierta imagen y reemplazar la existente  lo mejor es optar por el método min-width y max-width  para englobar ambas  condiciones, ya sea una imagen o un fondo.
Os dejo algún enlace más:

http://webadaptativo.blogspot.com.es/2013/03/ocultar-elementos-en-webs-adaptativas.html

Y sobre las soluciones del lado del servidor os dejo una que parece muy popular en el mundo responsive: Adaptative Image.http://adaptive-images.com/

En esta entrada se especifica un poco más cómo funciona:

Scroll personalizado

Un plugin jQuery muy fácil de insertar y de customizar para hacer scrolls personalizados.

Hay que descargarse los archivos: https://github.com/malihu/malihu-custom-scrollbar-plugin/archive/master.zip

– Añadir en el head el css jquery.mCustomScrollbar.css

– Añadir antes del cierre del body:

  • El enlace del .js de jQuery si no lo tenemos:
  •  El enlace del .js del scroll:
    jquery.mCustomScrollbar.concat.min.js
  • Y después el script para ejecutar:

    Donde “.customScroll” es la clase que tiene el div o contenedor al que queremos aplicar el scroll personalizado.
En la documentación web explican como usar temas, cambiar parámetros, botones, etc.
http://manos.malihu.gr/jquery-custom-content-scroller/ y lo mejor es que es compatible a partir de IE8 😀

Otros plugins


Tinyscrollbar. 
Si no necesitamos mucha personalización podemos usar este otro plugin más sencillo y ligero, pero sin temas y menos parámetros. Su funcionamiento y puesta en marcha es prácticamente idéntico al mCustomScrollbar.
http://baijs.com/tinyscrollbar/