Optimiser l'utilisation de vos images

Documentation et tutoriels

  • e-majine
  • Module de base

Optimiser l'utilisation de vos images

Introduction

Cette fonctionnalité d'e-majine permet aux intégrateurs de gérer les tailles d'images directement dans les templates. L'administrateur du site n'a donc plus à se soucier de la dimension et du poids des images qu'il importe.

Fonctionnement

Une balise englobante permet de :

  • Diminuer, agrandir une image dans les dimensions spécifiées dans les attributs de la balise
  • Rogner l'image à des dimensions précises.

Utilisation

L'utilisation de la balise mx « <mx:imgManagerBloc/> » permet de redéfinir la taille de toutes les images contenues à l'intérieur de celle-ci. Vous pouvez redéfinir une ou plusieurs largeurs et/ou hauteurs via l'attribut sizes. L'attribut sizes peut contenir une ou plusieurs dimensions sous un format bien spécifique. A chaque balise mx, la balise img gardera son attribut src de base, l'attribut srcset avec le descripteur "w" seront quant à eux ajoutés vous permettant de définir une image adaptée au terminal de consultation en ciblant la taille de l'écran. Le descripteur "w", pour "width descriptor" informe le navigateur de la largeur de l'image proposée. La valeur précédant "w" désigne bien la taille de l'image et non du viewport ou de la surface de l'écran.

La balise image ressemblera alors à :

<img src="mon-image.jpg"
     srcset="mon-image-320.jpg 320w,
             mon-image-640.jpg 640w">

Si une largeur est définie, les images seront redimensionnées avec la largeur indiquée en conservant les proportions. De même, si une hauteur est définie, les images seront redimensionnées avec la hauteur indiquée en conservant les proportions. En revanche, si la hauteur et la largeur sont toutes deux définies, l'image sera rognée aux dimensions indiquées à partir du centre en couvrant le maximum de contenu possible.

Cette fonctionnalité peut être utilisée sur l'intégralité des images affichées sur le site ainsi que dans les notifications et les emailings.

Exemple de gestion d'images

Taille réelle

L'image sera affichée telle quelle, comme à l'import, sans aucun redimensionnement.

<mx:bloc id="element_109">
	<mx:text id="element_109" />
</mx:bloc id="element_109">

Hauteur définie à 300 pixels

L'image sera redimensionnée de façon homothétique en hauteur et en largeur par rapport à la taille d'origine. L'attribut srcset sera défini avec un descripteur "w" qui reprendra la largeur de l'image initiale.

<mx:imgManagerBloc sizes="x300">
    <mx:bloc id="element_109">
        <mx:text id="element_109" />
    </mx:bloc id="element_109">
</mx:imgManagerBloc>

Largeur définie à 300 pixels

L'image sera redimensionnée de façon homothétique en hauteur et en largeur par rapport à la taille d'origine. L'attribut srcset sera défini avec un descripteur "w" à 300w.

<mx:imgManagerBloc sizes="300x">
    <mx:bloc id="element_109">
        <mx:text id="element_109" />
    </mx:bloc id="element_109">
</mx:imgManagerBloc>

Image rognée

L'image sera redimensionnée puis rognée depuis le centre. L'attribut srcset sera défini avec un descripteur "w" à 300w.

<mx:imgManagerBloc sizes="300x300">
    <mx:bloc id="element_109">
        <mx:text id="element_109" />
    </mx:bloc id="element_109">
</mx:imgManagerBloc>

Gérer plusieurs tailles automatiquement

L'intérêt de ce bloc est bien de pouvoir gérer plus facilement différentes tailles d'images dynamiquement en fonction de la taille de l'écran. Dans ce cas là, il est important de séparer les différentes tailles par une virgule ",".

<mx:imgManagerBloc sizes="300x300,600x600,900x900,1280x1280">
    <mx:bloc id="element_109">
        <mx:text id="element_109" />
    </mx:bloc id="element_109">
</mx:imgManagerBloc>

Utilisation avancée

Une amélioration du système a été mise en place, vous pouvez désormais ajouter des attributs dans les balises mx.
Vous pouvez utiliser l'attribut "format" pour indiquer le format final de votre image après conversion. Vous pouvez utilisez aussi les balises "size" pour le "srcset", et l'attribut "sizeAttr" pour le "size"

L'utilisation de ces différents attributs peut se faire en se basant sur ces exemples.

 

Exemple de gestion d'images

Redimensionnement et changement de format

Template HTML généré 
<mx:imgManagerBloc sizes="300x300, 600x600" format="webp" sizesAttr="(min-width: 600px) 50vw , (min-width: 980px) 30vw , 100vw">
        <img src="mon_image.jpg">
</mx:imgManagerBloc>

<img src="mon-image.jpg"
srcset="mon_image_300x300.webp 300w, mon-image-600x600.webp 600w" sizes="(min-width: 600px) 50vw , (min-width: 980px) 30vw , 100vw">

Redimensionnement sans changement de format

Template HTML généré 
<mx:imgManagerBloc sizes="300x" sizesAttr="(min-width: 600px) 50vw , (min-width: 980px) 30vw , 100vw">
        <img src="mon_image.jpg">
</mx:imgManagerBloc>

<img src="mon-image.jpg" srcset="mon_image_300x.jpg 300w" sizes="(min-width: 600px) 50vw , (min-width: 980px) 30vw , 100vw">

Changement de format sans redimensionnement

Template HTML généré 
<mx:imgManagerBloc format="webp">
        <img src="mon_image.jpg">
</mx:imgManagerBloc>

<img src="mon-image.jpg" srcset="mon_image_x.webp w">

Quand les 2 attributs sizes et format sont omis, aucun traitement ne sera effectué

Template HTML généré 
<mx:imgManagerBloc sizesAttr="(min-width: 600px) 50vw , (min-width: 980px) 30vw , 100vw">
        <img src="mon_image.jpg">
</mx:imgManagerBloc>

<img src="mon-image.jpg">
Article précédent Article suivant