à propos de la taille des images du header et du footer

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] à propos de la taille des images du header et du footer

    Bonjour,

    Quelles sont vos pratiques, vous, pour ce qui est de la taille des images utilisées en header et en footer ?
    Moi j'ai beau avoir compressé et optimisé ces 2 images, compte tenu de leur taille (1600x304 en haut et 1600x1200 en bas), elles pèsent quand même (surtout celle du bas, évidemment, avec 103 Ko...).
    Pour être adaptable à tous les écrans, je pense qu'il y a moyen d'indiquer une image différente via les media queries, mais... quelles dimensions choisir ??
    Je lis tout et son contraire sur le net, et j'aimerais connaître, selon vous, les bonnes pratiques.

    Par exemple, mon footer n'a vraiment besoin d'être haut que lorsque l'écran est étroit (pour afficher tout ce qu'il est censé contenir).
    A l'inverse, sur grand écran, il peut être bien moins haut.
    Je me doute qu'il y une part de tâtonnements, mais avant de perdre un temps monstre à redimensionner, essayer, corriger, je ne peux m'empêcher de penser qu'il doit forcément y avoir quelques règles de base... non ?

    Merci d'avance pour vos précieux conseils
    Dernière édition par FlodAriege à 12/05/2019, 15h54 Raison: Tâtonner, jusqu'à trouver les bonnes dimensions ! (sur la base des media queries les plus fréquentes, et des tailles d'écran indiquées sur plein de sites)
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    Hello,
    https://responsiveimages.org peut-être ?
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Ah oui, et ça aussi, que j'ai déjà utilisé :
      Automatically adapt your existing website images for mobile devices. No mark-up changes needed. For use with CSS3 Responsive Designs.
      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        Hello,
        j'ai utlisé ce code pour le logo qui fonctionne très bien :

        Code PHP:
            <img src="<?php echo $this->baseurl?>/images/dossier/new-img-bckgrd.svg"
              srcset="
            <?php echo $this->baseurl?>/images/dossier/new_logo.svg 320w,
            <?php echo $this->baseurl?>/images/dossier/new_logo.svg 480w,
            <?php echo $this->baseurl?>/images/dossier/new_logo.svg 768w,
             <?php echo $this->baseurl?>/images/dossier/new-img-bckgrd.svg 1024w,
              <?php echo $this->baseurl?>/images/dossier/new-img-bckgrd.svg 1280w"

            sizes="
              (max-width: 20em) 30vw,
            (max-width: 30em) 60vw",
         (max-width: 40em) 90vw"

            />
        * pour le logo, j'utilise du .svg
        * j'avais besoin de 2 images, une pour les grands formats, une pour mobiles/tablettes. Juste une particularité de mon dispositif.
        * un (gros) hic : j'ai placé ce code sur l'index.php du template. Donc, faire gaffe lors de la mise à jour du template.
        woluweb aime ceci.
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Effectivement le "srcset" est la façon de procéder. Néanmoins dans l'exemple fourni, ce qui m'interpelle, c'est que pour le SVG, c'est inutile puisqu'il s'agit d'une image vectorielle qui a toujours le même poids, quelle que soit sa taille.
          Si deux images différentes sont nécessaires, en fonction de la taille de l'écran, il vaut mieux gérer ça avec les "media queries" dans le CSS (ou les propriétés CSS propres au templates, comme "ul-visible@lg" et "uk-hidden@sm" de UIkit par exemple). Ça évite d'inclure du code dans un fichier qui risque d'être remplacé par un update. Encore que un template par un développeur sérieux devrait vous permettre de faire une surcharge, même du fichier "index.php".

          Pour revenir au "srcset", certains framework de template, comme Yootheme pro, font le boulot pour vous : vous chargez une image "haute définition" et le framework calcule et génère les images adaptées aux différents formats. Je suppose que la fonction doit être présente chez d'autres développeurs.
          woluweb aime ceci.
          Tous les services pour les sites Joomla! : sécurité, nettoyage de sites piratés, hébergement, SEO, applications Fabrik, migration, compatibilité mobiles, accessibilité, ...
          Administrateur certifié Joomla! 3
          https://www.betterweb.fr

          Commentaire


          • #6
            Néanmoins dans l'exemple fourni, ce qui m'interpelle, c'est que pour le SVG, c'est inutile puisqu'il s'agit d'une image vectorielle qui a toujours le même poids, quelle que soit sa taille.
            euh, non, justement.
            new_logo.svg (pour mobiles) fait 8k
            new-img-bckgrd.svg (pour écrans larges) fait 74k

            Si deux images différentes sont nécessaires, en fonction de la taille de l'écran, il vaut mieux gérer ça avec les "media queries" dans le CSS
            Effectivement. Mais je n'avais trouvé pas cette précision, par rapport à la structure de l'index.php de ce template dans le header, plutôt mal foutue,

            Encore que un template par un développeur sérieux devrait vous permettre de faire une surcharge, même du fichier "index.php".
            Tellement d'accord !

            UIKIT est un outil formidable. Mais je ne voulais pas rajouter encore des fichiers pour gérer 2/3 éléments de l'affichage.
            Pour UIKIT v. 3.1.4
            257k pour uikit.min.css
            134k pour uikit.min.js
            63k pour uikit-icons.min.js
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Juste par curiosité, "new_logo.svg (pour mobiles) fait 8k new-img-bckgrd.svg (pour écrans larges) fait 74k", d'accord mais il s'agit de deux images différentes ? Si non, il y a toujours quelque chose qui m'échappe avec le SVG.
              Tous les services pour les sites Joomla! : sécurité, nettoyage de sites piratés, hébergement, SEO, applications Fabrik, migration, compatibilité mobiles, accessibilité, ...
              Administrateur certifié Joomla! 3
              https://www.betterweb.fr

              Commentaire


              • #8
                "new_logo.svg (pour mobiles) fait 8k new-img-bckgrd.svg (pour écrans larges) fait 74k", , d'accord mais il s'agit de deux images différentes ?
                Oui, oui.
                Je viens de me relire et c'est vrai que ce n'était pas assez clair. C'est un dispositif un peu particulier, c'est pour cela que j'avais besoin de la précision du srcset.
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  Merci pour toutes ces informations très intéressantes.
                  Ce n'était pas vraiment ma question, mais je me suis débrouillée.
                  Sujet clos, merci.
                  Flo, Ariège

                  Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X