SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 93 visiteurs en ce moment

Accueil > Optimisation et performances > Des images en cache pour des diaporamas plus rapides

Des images en cache pour des diaporamas plus rapides

6 novembre 2010 – par Guytarr – commentaires

5 votes

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

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

P.-S.

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)

Dernière modification de cette page le 23 mai 2011

Retour en haut de la page

Vos commentaires

  • Le 18 décembre 2015 à 17:21, par Lire et Écrire En réponse à : Des images en cache pour des diaporamas plus rapides

    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" …
    • Le 18 décembre 2015 à 17:48, par Lire et Écrire En réponse à : Des images en cache pour des diaporamas plus rapides

      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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Visualiser un PDF dans un article

    13 juin – commentaires

    SoyezCréateurs utilise un modèle pour afficher un PDF dans le corps d’un article Un peu d’histoire Avant, les navigateurs n’incluaient pas de lecteur PDF nativement ce qui avait conduit à la création du plugin Lecteur pdf javascript pdf.js. Mais, (...)

  • ScolaSPIP 4

    19 janvier 2016 – 346 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Spipagram : Importer des images Instagram dans SPIP

    29 février 2016 – 10 commentaires

    Ce plugin permet d’importer des images Instagram comme articles SPIP dans la rubrique de votre choix avec le hashtag de votre choix. Installation Si vous n’avez pas déjà le dépôt externals dans votre SPIP, ajoutez le dépôt (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2446 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • ORR v2

    21 mai 2013 – 106 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)