En Cadeau une photo des nouveaux locaux du PS

Cadeau: les voeux d'Achille Talon en 1978

Et si vous aimez Talon, je rappelle ce lien vers l'intégrale de Greg en PDF : http://edilep78.free.fr/atalon.html

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

1. Pensez bien à mettre le paramètre d'URL (i) en dernier car sinon, php inclura les paramètres dans l'URL passée
2. 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).
3. Par défaut, le format de sortie est le jpeg mais c'est configurable dans la constante DEFAULT_FORMAT ligne 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 !

Hop: le jeu de la semaine est supra land... Je crois que je vais tester !

Yo la #teamvieux fan des BD marvel de notre enfance ? (nova, strange,spécial strange) ?

https://www.extreme-down.io/ebooks/comics/93857-spgcial-strange-115-tomes.html

https://www.extreme-down.io/ebooks/comics/93856-nova-235-tomes.html

https://www.extreme-down.io/ebooks/comics/93848-strange-353-tomes.html

https://www.extreme-down.io/ebooks/comics/93862-marvel-les-grandes-sagas-8-tomes.html

c'est #cadeau

Tiens Borderlands 3 est gratuit cette semaine sur EpicGames store... Faudra que j'y joue...

Mon grand adore: il se fait des builds de fifou dessus !

Si toi aussi tu veux te faire un petit bookmarklet pour envoyer des données de la page courante vers un autre site, alors tu vas kiffer 😍 parce que ce petit bout de code te permet de le faire sans rien coder 😎.

Heing ?! 🤨

J'explique:

Si on veut pouvoir:

• rechercher une sélection sur un site particulier (genre sur wikipedia, jeux videos.com, allocine...) ,
• envoyer le titre de la page en cours et/ou son URL vers un site qui va s'en servir (par exemple pour bookmarker la page en cours),

alors ça peut se faire ici.

Fais voir ?

Voici deux exemples:

Quid ?

Pour faire simple,

1. on donne un nom au bookmarklet,
2. on choisit les données qui doivent être envoyées,
3. on spécifie l'URL vers laquelle elles doivent être envoyées.

Le bookmarklet est généré en temps réel et une fois les réglages faits, il suffit de glisser-déposer le lien du bas.

J'ai ajouté la possibilité de modifier la variable permettant de passer les données; en effet, duckduckgo utilisera q=[recherche] mais un autre site pourra demander query=[recherche]...

De plus, on peut spécifier de ne pas utiliser le format URL?variable=[donnée] mais URL/[donnée] pour les sites ayant une rewriteurl (comme wikipedia qui exige un format fr.wikipedia.org/wiki/[RECHERCHE] )

Enfin, si vous spécifiez une URL contenant déjà des paramètres GET (comme mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32), le script le prendra en compte et les nouveaux paramètres s'ajouteront correctement ( mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32&title=mon cul sur la commode&url=www.monculsurlacommode.fr )

Exemple ?

Vous pouvez essayer de générer un bookmarklet pour rechercher directement la sélection sur youtube:

1. donnez le nom «rechercher sur youtube»
2. cochez le premier item : «le texte sélectionné» et renommez la variable en «search_query»
3. remplissez la case URL avec : https://www.youtube.com/results/

Et voilà.

Ajout

Sur l'idée de DukeArt j'ai ajouté la possibilité d'éditer le code (vive contenteditable et obj.toggleAttribute 👍 ) ! Merci the Duke 🤘😎🤘

License

Vous pouvez utiliser librement et l'outil et le code en mode DBAD. Pour le télécharger, c'est par là

Il est possible de l'utiliser sans serveur php vu que c'est du HTML+JS vanilla (mais le script de téléchargement du script ne fonctionnera pas).

Pine est gratuit sur Epic games en ce moment... Faut que je le teste... Si mes gamins me laissent mes ordis...

Une liste mise à jour des jeux quotidiens gratuits sur epicgames... A voir 😁