Pour une meilleure expérience utilisateur, l’optimisation des médias est la clé !
Voici les différentes possibilités de RacontR que nous allons aborder :
Optimiser des images
Optimiser des vidéos
Optimiser des sons
Optimiser des images
Format, taille et colorimétrie de vos images
Créer une maquette sur un logiciel de PAO
Pour que votre site s’affiche parfaitement et afin d’éviter les temps de chargement trop longs, il est conseillé d’optimiser vos images. Pour ce faire, le meilleur moyen est de travailler sur une maquette dans un logiciel PAO (Photoshop ou autre).
L’avantage est de pouvoir travailler sa mise en page au même format que votre site. Par exemple si votre site fait 1024 px de large et 720 px de haut, vous pouvez créer donc une maquette de la même taille dans votre logiciel PAO.
Votre maquette devra impérativement, avoir une résolution de 72 DPI , c’est à dire 72 pixels par pouce.
Assurez-vous aussi que votre maquette est en mode colorimétrie « RVB ». Selon le logiciel photo que vous utilisez, vous pourrez normalement configurer ces paramètres dans les propriétés du document. Référez-vous au support de votre logiciel.
Choix du format : PNG / JPEG /GIF : avant d'optimiser vos éléments, vous devez savoir sous quel format ils doivent être enregistrés. Vous avez le choix entre trois formats, le JPEG, le PNG et le GIF.
Le JPEG est couramment utilisé pour toute image fixe.
Le PNG est utilisé pour les images détourées avec transparence, comme les boutons, les pictos, les logos. Ce sont des éléments qui seront animés et interactifs.
Le GIF est une animation, image par image.
Enregistrez une version optimisée de vos images
Optimiser les PNG (sous Photoshop) : votre maquette est terminée, vous devez maintenant exporter toutes vos images. Pour cela, isolez chacun des éléments composant votre maquette (cf : découpage maquette sous Photoshop). Dans notre exemple, nous allons enregistrer un picto en PNG.
Ouvrez un nouveau document et importez votre calque d’icône.
Ajustez la taille du document à celle de de l’icône avec l’outil de recadrage
pour enlever les zones vides.
Il ne vous reste plus qu’à exporter cette image : cliquez sur « fichier », puis «enregistrer pour le Web» (4)
Une fenêtre s’ouvre :
Cliquez sur l’onglet « 2 vignettes », une seconde fenêtre s’ouvre ; c’est la version optimisée de votre image, la première fenêtre étant l’originale. Cela va alors vous permettre de vérifier si l’image que vous optimisez ne perd pas trop en qualité
Dans les réglages, choisissez PNG 24
puis cochez la case « transparence ». Voilà il ne reste plus qu’à enregistrer !
Optimiser les GIF (sous photoshop) : de la même façon nous allons optimiser le gif animé (1). Comme vous pouvez le voir, le gif est une succession d’images (2). Référez-vous au tutoriel de votre logiciel de PAO pour en réaliser.
Enregistrez votre GIF : « Fichier » > Enregistrer pour le web. Dans les paramètres choisir « GIF » (3) puis jouez avec les différents paramètres pour obtenir une bonne qualité de gif (3) et un poids optimisé. Vous pouvez lancer la lecture du gif pour vérifier le résultat en cliquant sur play (4). Vous pouvez aussi choisir de mettre en boucle le GIF en choisissant « Toujours » Dans le menu « Animation ». Une fois vos réglages au point, cliquez sur « enregistrer ».
Optimiser les JPEG (sous photoshop) : copiez-collez votre image dans un nouveau document. De la même façon que pour les PNG, votre JPEG (1) doit être à la bonne taille, ici, l’image fait la taille du site, 1024 par 720 px (2). Sa résolution doit être à 72 dpi (3). Ouvrez la fenêtre « taille de l’image » pour vérifier ses mesures. Assurez-vous aussi que le mode colorimétrique est bien ‘RVB’.
Nous allons maintenant l’enregistrer pour le web. Dans la fenêtre, choisissez «vignettes» (2), ainsi vous pourrez contrôler l’optimisation de l’image (3) .
Dans les réglages, choisir JPEG (4) puis modifier les paramètres de qualité et de flou (5). Vous devez trouver le bon rapport entre qualité et poids de l’image. Pour exemple, si vous baissez la qualité à 50%, l’image perdra en poids, mais risque d’être de moins bonne définition. Vérifiez le poids de votre image optimisée en regardant ses infos en bas de l’images (6). Idéalement une image de 1024 px par 720 px doit avoir un poids compris entre 250k et 600k max.
Optimisez vos vidéos
Pour vous faciliter la vie, RacontR charge vos vidéos et les convertit automatiquement en mp4. Vous pouvez ainsi importer des fichiers.mov, .avi, .flv, .ogv, .avi, .f4v , .h264, .wmv, .wma . Mais il est toutefois préférable, pour que le transfert sur RacontR se passe sans problème, de respecter certaines règles concernant le format, la taille et le poids de vos vidéos.
Voici quelques consignes pour préparer vos vidéos et assurer le bon fonctionnement de votre site :
La taille de votre vidéo :
Tout d’abord, avant de charger votre vidéo sur RacontR, assurez-vous que celle-ci soit à la bonne taille. Il est par exemple inutile de charger une vidéo de 2000px de large alors que sur votre site elle est affichée à 600px.
Cela risque d’alourdir votre page et le temps de chargement de la vidéo. Donc comme pour les images, il faut optimiser au maximum la taille de celles-ci.
Poids de votre vidéo :
RacontR supporte un chargement vidéo de 1giga maximum mais il est bien évident qu’une vidéo lourde prendre énormément de ressources sur votre site. Il faut essayer autant que possible de réduire la taille de vos vidéos. Il existe des outils de compression en ligne qui pourront aider à réduire la taille de vos vidéos. Vous pouvez également utiliser des logiciels de montage pour les compresser.
Format de compression :
Pour les utilisateurs de logiciel de montage vidéo, nous vous recommandons pour la compression de vos vidéos le codec « H264 » (1). Il permet une compression au format MP4 performante et de bonne qualité. Vous devez régler le débit en KBits/s et en fonction de la longueur du média, mettre une valeur comprise en 3000 et 5000 Kbits/s pour une vidéo diffusée sur le web.
Optimisez vos vidéos avec un convertisseur en ligne :
Pour les autres, il existe des convertisseurs en ligne (comme http://www.online-convert.com/fr. ). Ce sont des convertisseurs gratuits et simples d’utilisation.
Voici comment procéder:
1- Rendez vous sur http://www.online-convert.com/fr.
2- Choisissez « convertir vidéo » (1)
3- Dans le menu déroulant, choisissez le format « MP4 »
4- Il faut maintenant charger votre vidéo, soit en allant la chercher sur votre disque, soit en tapant son URL si elle est stockée sur un serveur (3)
5- Vous pouvez changer la taille de votre vidéo (idéal pour optimiser votre page). Il est également possible de lui mettre un débit à ne pas dépasser. Ici, nous mettrons 4000Kbits/s (4)
6- Voilà pour vos réglages, il ne reste plus qu’à cliquer sur « convertir le fichier »(5)
Optimisez vos fichiers audio
Tout comme les vidéos, RacontR importe vos fichiers audio et les convertit automatiquement en MP3. Vous pourrez ainsi importer des fichiers «mp3», «wav», «ogv».
Pour optimiser votre MP3, utilisez un logiciel de montage audio et exportez vos mp3 avec un bitrate à 128 ko/s et un taux d'échantillonnage à 32000HZ
Il existe aussi des convertisseurs en ligne comme : http://www.online-convert.com/fr.
1- Rendez vous sur http://www.online-convert.com/fr.
2- Choisissez « convertir audio » (1)
3- Dans le menu déroulant, choisissez le format « MP3 » (2)
4- Il faut maintenant charger votre fichier audio, soit en allant le chercher sur votre disque, soit en tapant son URL s'il est stocké sur un serveur (3)
5- Dans les paramètres, passez le bitrate à 128 ko/s, puis l’échantillonnage à 32000Hz (4)
6- Voilà pour vos réglages, il ne reste plus qu’à cliquer sur «convertir le fichier» (5)
