Optipic: une «api» pour optimiser les images
vendredi 2 décembre 2022 à 11:07
Le cadeau du jour: un script qui permet d'automatiser l'optimisation d'une image pour le ouaibe sans passer par une appli quelconque.
Le problème
Tout le monde est d'accord pour affirmer qu'il est indispensable de minimiser le poids des pages web et que dans cette optique, le premier geste - après avoir viré les bibliothèques inutiles bien entendu - reste l'optimisation des images.
J'avais vu passer un article fort bien écrit sur ce sujet mais hélas, j'ai omis de le bookmarker et paf: le voilà perdu dans les méandres de mon historique sur un des ordinateurs que j'utilise.
Tout le monde est d'accord sur le principe mais souvent, c'est comme l'écriture de la doc ou les tests unitaires: on a la flemme de s'y coller...
Ze solution
L'idéal serait bien sûr que l'optimisation soit transparente et automatique... genre: tu te contentes de passer à la balise img l'URL de l'API avec celle de l'image et POF, tu as l'image en version optimisée.
Optipic est donc un script auquel on passe l'URL d'une image, le format souhaité, le niveau de qualité et -éventuellement - la largeur maximum pour obtenir en retour l'image transformée.
Les paramètres sont les suivants:
- i ➜ l'url de l'image
- maxwidth ➜ la largeur maximum de l'image (opt.)
- format ➜ le format de sortie de l'image : jpg,gif,png,webp,avif (PHP 8 minimum pour l'avif)
- quality ➜ la qualité (niveau de compression) de 0 à 100
Le script renvoie directement l'image transformée avec le header adéquat et du coup, c'est transparent pour HTML/CSS.
Notez que l'image optimisée est sauvée dans le dossier rendered/ afin d'éviter une charge inutile: si une image a déjà été optimisée, le script la sert directement au lieu de la refaire à chaque fois.
But there's more !
Même si ce script est déjà à ce stade absolument fabuleux (si, si !), je me suis dit que les paramètres risquaient de se répéter et qu'il pouvait s'avérer fastidieux de retaper le tout à chaque fois. Par conséquent, j'ai ajouté la possibilité de créer des scripts d'optimisation - un peu comme dans scriptopic.
Ainsi, si vous placez un fichier PHP contenant les paramètres dans le dossier scripts/ , vous pouvez l'appeler via le paramètre $_GET script:
Exemple: je cree scripts/webp.php et je mets dedans:
// webp 50%
$params=[
'format' =>'webp',
'quality' =>50,
'maxwidth' =>null
];
Puis je l'appelle en faisant : api.url/?script=webp&i=http:/image.url/pic.jpg
Pour le moment, il y a quatre scripts: jpg80,jpg70,avif,webp... à vous de créer les vôtres en fonction de vos besoins...
Et ça marche ?
Ben j'ai fait un test dans ce blog pour voir avec mon image de titre LOL:
qui pèse 113 ko en jpg
Puis avec son optimisation via le script webp ci-dessus:
qui ne pèse plus que... 18 ko en webp 50%
Et ça juste en rajoutant https://api.warriordudimanche.net/optipic/?script=webp&i= dans le chemin de l'image.
En cas d'erreur ?
Si Optipic ne parvient pas à créer l'image, il crée une image d'erreur à la place, histoire de voir le souci quand même...
Ce comportement peut être débrayé avec la constante ERROR_PIC ligne 29.
Test, téléchargement pis tout ça
Comme pour toutes les api de ma page, le script est téléchargeable via le ?download : https://api.warriordudimanche.net/optipic/?download et testable au même endroit: https://api.warriordudimanche.net/optipic/?i=...
Nota bene
- Pensez bien à mettre le paramètre d'URL (i) en dernier car sinon, php inclura les paramètres dans l'URL passée
- Même avec un script vous pouvez toujours changer un paramètre. Exemple: ?script=webp&quality=30&i=xxx permet de changer la qualité précisée dans le script (50).
- Par défaut, le format de sortie est le jpeg mais c'est configurable dans la constante
DEFAULT_FORMATligne 28
Au passage, ce script utilise une classe que j'avais codée pour scriptopic: pictools. Grâce à elle, le travail d'optimisation tient en
$picture=new pictool($params);
$picture->load($url);
if (!empty($params['maxwidth'])){
$picture->resize($params['maxwidth']);
}
$picture->save($generated_picture_path);
$picture->display();
Cadeau !
► Commentaires
