Des images en cache pour des diaporamas plus rapides

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Les appareils photos d’aujourd’hui ont la folie des pixels.

Lorsque l’on envoie massivement des photos (par ftp dans tmp/upload), il peut être agaçant de penser à les redimensionner pour qu’elle s’affiche rapidement chez l’internaute. Alors plutôt que de le faire soi-même, on va déléguer tout le boulot au serveur avec image_reduire...

C’est tout bête mais il faut y penser ! C’est en cherchant un plugin qui me redimensionnerait automatiquement toutes les images que je me suis rendu compte qu’il y avait bien plus simple avec spip et que mes images étaient très bien en haute def sur mon serveur.

Lorsque l’on a un #URL_DOCUMENT, il renvoi à l’image d’origine. Quand les images font de 1 à 2mo (au delà en général, sur des mutualisés c’est le serveur qui n’en peut plus ), afficher un portfolio avec mediabox par exemple, c’est très lent, à moins d’avoir un super débit. Alors plutôt que d’utiliser #URL_DOCUMENT, on va générer une image en cache de la définition de notre choix, suffisante pour un affichage à l’écran. Il suffisait d’y penser !

au lieu de

...  <a href="(#URL_DOCUMENT)" ...

il suffit de mettre (par exemple) :

... <a href="(#FICHIER|image_reduire{1920,1200}|extraire_attribut{src})" ...   

dans une boucle qui n’appelle que des documents images, soit dans inc-documents de la dist ou dans inclure/documents de zpip. Bien sûr, à vous de choisir quoi mettre pour les dimensions maximales d’image_reduire.

Avec une image d’origine à 2,4mo (4711 × 3140 pixels) j’obtiens une image réduite à 192ko (1801 x 1200 pixels) !

Rien ne vous empêche de proposer en plus un lien vers l’image en haute def’, mais c’est vrai que pour un diaporama, ça n’a que peu d’intérêt d’avoir des images aussi lourdes (et lentes à afficher).

Attention toutefois, pour être réduites et mises en cache il faut que le serveur travaille beaucoup. Il faut aussi veiller à ne pas avoir des images trop lourdes pour être traitées par spip sur ce serveur (cette information est indiquée dans configurations>fonctions avancées)

Discussion

Une discussion

  • 1
    Lire et Écrire

    Pour que le diaporama fonctionne, il faut ajouter rel="ce_que_vous_voulez" dans la balise <a>

    L’exemple ci-dessus deviendrait :

    … <a href="(#FICHIER|image_reduire{1920,1200}|extraire_attribut{src})" rel="diapo" …
    • Lire et Écrire

      Veuillez excuser mon intervention ci-dessus. J’avais testé sur un site de développement où j’avais justement désactivé la MediaBox pour le portfolio.

      Vous pouvez reprendre une activité normale…

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 23 mai 2011