À la découverte de TwicPics

Twicpics c’est la solution miracle pour gérer tous vos médias images simplement sur votre site web. Il permet de générer, à la volée, des images toujours optimisées à la taille de son device, à la résolution, ainsi qu’à la taille de son container.
Grâce à cet outil, nous avons toujours la meilleure image, optimisée, parfaitement taillée, croppée et envoyée du serveur le plus proche.
Il n’y a plus besoin de passer des heures à choisir entre qualité et performance, maintenant tout fonctionne, et en plus l’intégration est super simple à mettre en place.

L’API

Vous n’avez rien à faire, ils ont déjà tout développé pour vous. Grâce à l’API, plus besoin de vous embêter avec photoshop, elle vous permet de resizer, cropper, changer le ratio, en à peine une ligne de code.

Placeholder

Nous avons tous eu affaire un jour à un client qui demande la taille d’image à mettre à tel ou tel endroit. Avec TwicPics, tout est simplifié; il suffit de remplacer l’image par le TwicPics placeholder et il pourra display en direct la taille de l’image actuellement affichée sur le site. Et bien entendu, ce dernier s’adaptera au device.

Le SmartCrop

Le problème du cropping au centre de l’image n’existe, presque, plus. Une IA déterminera le point le plus important de l’image et croppera toujours sur celle ci en cas de problème. Bien entendu parfois le résultat n’est pas parfait, l’IA n’étant pas infaillible, mais dans ses cas là il est toujours possible de donner le focus point via un attribute.

Basic implementation

Il suffit d’ajouter le script de TwicPics (https://i.twic.pics/v1/script) en bas de page et de transformer vos balises images.
/ ! \ Attention pour fonctionner chaque image doit avoir un contexte de sizing en valeur absolue ou relative (width:100%; height: auto;) / ! \

Multiple Background

Bien entendu la fonctionnalité ne se limite pas au balise image, il est également possible de la mettre en place via un background image aussi simplement. Les attributs de sizing « contain » et « cover » sont pris en charge !

LQIP : Blurry placeholder

Il est très simple de dégrader la qualité d’une image pour accélerer le chargement de page, et au moment où le javascript se charge, changer les src pour l’image HQ.

Utilisation simple

Utilisation avancée

Best practice

Si vous êtes convaincu, je vous conseille de suivre les conseils fournis par l’équipe de dev de TwicPics afin de mettre en place les “bests practices” sur votre site.

• Les SRCset basique + l’appel directement aux images du CDN TwicPics.
• Des images LQIP pour la suite des images non critiques.
• Pour les images en bas de page quand tout est déjà chargé, mettre uniquement le fonctionnement de base avec le data-src car ces images pourront être très vite disponible, étant donné que le reste de la page aura déjà fini de charger.

A noter que TwicPics prend également en charge la propriété CSS “object-fit” et ses valeurs “contain”, “cover”, “fill”, etc. A consommer sans modération !

TwicPics est une solution SaaS fonctionnant en mode « Pay as you Go » : vous ne payez que ce que vous consommez.
Le metric de mesure est le nombre de GB d’images optimisées livrés par TwicPics sur une base mensuelle.
Jusqu’à 3GB de trafic, la solution est gratuite. Au delà, le coût est de 0,50€ par GB.