jQuery Picture : Un plugin para implementar imágenes de diferentes tamaños

jQuery Picture  es un pequeño plug-in (2kb) para  usar imagenes de diferente tamaño en  nuestro sitio web  dependiendo del tamaño del navegador.

Básicamente Jquery Picture redimensiona  una imagen  hasta llegar a un punto  limite donde manda  llamar a otra   y reemplaza  la existente  evitando así que la imagen original se distorsione, esto es muy útil para implementar en sitios web responsivos .

Tienes dos  maneras de utilizar el plugin, con la etiqueta <figure> o con  las etiquetas  <picture> y   <source> , aunque estas ultimas no son etiquetas validas para algunos navegadores .

Para usar el plugin :

$(function(){
    $('figure.responsive').picture();
});

Para utilizar la etiqueta <figure> es necesario  agregar la url de las imágenes que vamos a cargar mediante   atributos y agregamos el tamaño con el que se condicionara la carga de la imagen quedando de esta forma «data-media440» de esta forma le indicamos  al plugin  que  cuando la ventana del navegador llegue a 400px  o menos   cargue  la imagen correspondiente  :

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

Con <picture> en lugar de declarar las imágenes en los atributos  data, vamos a usar la etiqueta <source> para incluir cada una de ellas   especificando con  ‘ media=»(min-width:440px)»‘  los puntos donde se llamara a la imagen  :

$(function(){
    $('picture').picture();
});

Este seria el código usando <picture> :

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

[ Enlace : jQuery Picture ]