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

[FlodAriege]

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

[woluweb]

Hello,
https://responsiveimages.org peut-être ?

[woluweb]

Ah oui, et ça aussi, que j'ai déjà utilisé :

http://adaptive-images.com

[ghazal]

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

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

[jfque]

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.

[ghazal]

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

[jfque]

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.

[ghazal]

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

[FlodAriege]

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.