WeePics

Installation

Ajoutez simplement le js avant la balise de fermeture du body. Vous pouvez utiliser wee.pics ou votre domaine CDN particulier si vous avez souscris à l'option.

<!-- [...] -->
<!--other scripts -->
<script async defer src="https://wee.pics/scripts/v1.0/script.min.js"></script>
</body>
<!-- [...] -->

Utilisation dans une image

Pour utiliser une image dynamique qui se chargera lors de l'affichage :

<img class="weepiks"
src="https://wee.pics/img/cover=ratio=1:1/mini_blurry/cantal_vacances.svg"
data-src="https://wee.pics/img/cover=ratio=1:1/cantal_vacances.jpeg"
alt="image cover 1:1">

Si votre image doit disposer d'un attribut srcset vous pouvez utiliser l'attribut data-srcset example :

<img alt="maurs leve soleil"
 class="weepiks"

 data-srcset="https://wee.pics/img/cover=ratio=16:9/resize=size=800/maurs_leve_soleil.jpg 800w,
https://wee.pics/img/cover=ratio=16:9/resize=size=1000/maurs_leve_soleil.jpg 1000w,
https://wee.pics/img/cover=ratio=16:9/resize=size=1200/maurs_leve_soleil.jpg 1200w"

 data-src="https://wee.pics/img/cover=ratio=16:5/resize=size=900/maurs_leve_soleil.jpg"
 src="https://wee.pics/img/cover=ratio=16:5/resize=size=900/mini_blurry/maurs_leve_soleil.svg">

Utilisation dans un background-image

Pour utiliser une background-image dynamique qui se chargera lors de l'affichage dans une div :

<div class="col-sm-12 weepiks"
             data-src="https://wee.pics/img/cover=ratio=16:5/resize=size=1200/maurs_leve_soleil.jpg"
             style="min-height: 30vh;background-image:url('https://wee.pics/img/cover=ratio=16:5/resize=size=1200/mini_blurry/maurs_leve_soleil.svg');background-size: cover;background-repeat: no-repeat">
        </div>

Intro

Les modificateurs sont des operations appliquées a l'image ciblée, ils permettent d'optimiser une image pour un affichage particulier.

Les modificateurs disponibles

Cover

cover=<size=200x200|ratio=4:3>

Le modificateur cover se comporte comme la propriété CSS "cover". Il redimensionne l'image de manière à ce qu'elle remplisse complètement la zone cible tout en conservant le rapport d'aspect original. Si certaines parties de l'image se retrouvent en dehors de la zone couverte, elles sont recadrées.
Si on l'applique sur une image de 3000x2500 avec pour parametre size=300x300 voici quel serais le resultat :

Il est aussi possible d'utiliser un ratio comme par example 1:1 ou 16:9 en utilisant le parametre ratio=1:1 example :

Resize

resize=<size=200|size=m300|p300>

Le modificateur resize change les dimensions de l'image en gardant le ratio si une seule valeur est envoyée. Si on l'applique sur une image de 3000x2500 avec pour parametre size=400 voici quel serais le resultat :

Il est aussi possible d'utiliser une valeur relative comme par example +200(pixel) ou -500(pixel) en utilisant le parametre size=p200 et size=m500 example avec 200 pixel en moins :

MiniBlurry

miniBlurry

Le modificateur miniBlurry transforme une image en une preview ultra-légére floutée. Si on l'applique sur une image de 3000x2500 voici quel serais le resultat :

Webp

webp

Le modificateur webp transforme une image en image au format webpb. Si on l'applique sur une image de 3000x2500 voici quel serais le resultat :

Ce modificateur est automatique si le navigateur supporte le format webp