Des images en cache pour des diaporamas plus rapides

This is an « educational contribution » which shows, with concrete example, how to develop a new functionality for 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

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

il suffit de mettre (par exemple) :

  1. ... <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)

updated on 23 May 2011

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 :

    1. … <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…

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom