WeePiks2 Js API documentation

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.
Ajoutez aussi la balise script dans le header de votre site. Attention n'ajoutez pas le code CSS dans votre style CSS celui ci doit etre present dans le header.

<head>
<!-- [...] -->
    <style>
        .weepiks__wrapper {
            position: relative;
            width: 100%;
            height: 0;
        }
        .weepiks__wrapper > img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
        }
    </style>
<!-- [...] -->
 </head>
<!-- [...] -->
    <!--other scripts -->
    <script async defer src="https://wee.pics/scripts/v2.0.0/script.js"></script>
</body>
<!-- [...] -->

Les options

Pour modifier les paramétres par défaut de weepiks ajouter une variable _WEEPIKS_OPTIONS à window.

<head>
<!-- [...] -->
    <script>
window._WEEPIKS_OPTIONS = {
    network_adaptative: true,
    mobile_breakpoint: 759,
    bestCase_W: [
        414, // 414x869
        750, // 414x869
        1366, // 1366x768
        1440, // ??
        1536, // 1536x864
        1920, // 1920x1080
    ],
    sizes: {
        414: 500, // 414x869
        750: 800, // 414x869
        1366: 1080, // 1366x768
        1440: 1280, // ??
        1536: 1440, // 1536x864
        1920: 1920, // 1920x1080
    }
}
    </script>
<!-- [...] -->
 </head>

Les options et leurs valeurs :

key	type	default	description
network_adaptative	boolean	true	Utilise ou non la prédiction de qualité de connexion pour optimiser les images
mobile_breakpoint	integer	759	Largeur en pixel au dessus duquel WeePiks estime que le device est desktop
bestCase_W	array\|integer[]	[414, 750, 1366, 1440, 1536, 1920]	Liste de largeurs en pixel utilisables par WeePiks, un trop grand nombre de largeur peut être nefaste.
sizes	array\|object[]	...	Liste d'objets mettant en relation la taille selectionné dans bestCase_W et la taille réelle des images

Utilisation dans une image

Exemple ici pour utiliser une image dynamique en 16/9 qui se chargera lors de l'affichage :


<figure class="weepiks__wrapper" style="padding-top: calc(9 / 16 * 100%);">
    <img data-src="https://wee.pics/img/cover=ratio=16:9/resize=size=%screenw%/maurs_leve_soleil.jpg"
         data-weepiks-ratio="1.7777777777777777"
         data-weepiks-autosize="1"
         data-weepiks-max-width="1920"
         src="https://wee.pics/img/cover=ratio=16:9/resize=size=1024/mini_blurry/maurs_leve_soleil.svg"
         class="img-fluid weepiks"
         style="width: 100%"
         alt="">
</figure>

Biensur l'utilisation avec des valeurs fixe comme dans weepiks v1 est toujours possible.

Les options et leurs valeurs :

key	Mandatory	description
data-weepiks-autosize	no	Remplace %screenw% dans le data-src avec une taille optimisé pour le device actuel
data-weepiks-ratio	yes, if autosize turned on	Le ratio calculé en float ou integer de l'image à afficher
data-weepiks-max-width	no	La taille maximum de l'image à afficher
data-weepiks-desktop-p	no	La taille en % de la largeur total que prendra l'image en desktop ex : 50 veut dire 50%

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

Chainage de modificateurs

Les modificateurs sont des operations qu'il est possible d'enchainer, par exemple nous pouvons changer le ratio d'une image à un format carré (1:1), puis la resize à 200 pixel de large et enfin en changer le format.

image chained mini_blurry — Image Preview
https://wee.pics/img/cover=ratio=1:1/resize=size=200/mini_blurry/cantal_vacances.svg

image chained — image finale
https://wee.pics/img/cover=ratio=1:1/resize=size=200/cantal_vacances.jpeg

WeePiks²

Introduction