[vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/2″][vc_empty_space height= »30px »][vc_column_text css= ».vc_custom_1448460282140{margin-bottom: -10px !important;} »]

Optimisez votre contenu

[/vc_column_text][vc_column_text css= ».vc_custom_1474472196520{margin-right: 5% !important;} »]

Pour une meilleure expérience utilisateur, l’optimisation des médias est la clé !

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »50px »][vc_column_text css= ».vc_custom_1474472250331{margin-left: 5% !important;} »]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top= » »][vc_column width= »5/6″][vc_single_image image= »123″ img_size= »full » alignment= »center »][vc_empty_space height= »10px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]1/ Format, taille et colorimétrie de vos images

Créer une maquette sur un logiciel de PAO

1. Pour que votre site s’affiche parfaitement et afin d’éviter les longs temps de chargement, il est conseillé d’optimiser ses images. Pour se faire, le meilleur moyen est de travailler sur une maquette dans un logiciel photo (Photoshop, etc).
2. 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 donc créer donc une maquette de la même taille dans votre logiciel PAO.
3. 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.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »315″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446640303119{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]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 utiliser 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 qui est une animation, image par image.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »318″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446640320715{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »30px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]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.

1. Ouvrez un nouveau document et importez votre calque d’icône.
2. Ajustez la taille du document à celle de de l’icône avec l’outil de recadrage
3. pour enlever les zones vides.

Il ne vous reste plus qu’à exporter cette image : cliquez sur « fichier », puis « sauvegardez pour le Web ».[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »321″ img_size= »full » onclick= »link_image » css= ».vc_custom_1448378998076{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Une fenêtre s’ouvre

1. 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é
2. Dans les réglages, choisissez PNG 24
3. puis cochez la case « transparence ». Voilà il ne reste plus qu’à enregistrer !

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »318″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446640320715{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]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.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »333″ img_size= »full » alignment= »center » onclick= »link_image » css= ».vc_custom_1446641800599{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]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 ».[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »336″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446641697355{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]Copier-coller 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’.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »327″ img_size= »full » alignment= »center » onclick= »link_image » css= ».vc_custom_1446640978135{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]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.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »330″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446640991904{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]Pour vous faciliter la vie, Racontr upload 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, 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.

Quel poids :

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 online qui pourront aider à réduire la taille de vos vidéos. Vous pouvez également utiliser des logiciels de montage pour les compresser.

Quel 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.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »339″ img_size= »large » onclick= »link_image » css= ».vc_custom_1446642408303{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]Pour les autres, il existe des convertisseurs online comme :?http://www.online-convert.com/fr. Ce sont des convertisseurs gratuits et simple 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″[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »342″ img_size= »full » alignment= »center » onclick= »link_image » css= ».vc_custom_1446642790269{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]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- Voila pour vos réglages, il ne reste plus qu’à cliquer sur « convertir le fichier »(5)[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »345″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446642800867{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_separator color= »turquoise »][vc_column_text]Tout comme les vidéos, Racontr upload 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[/vc_column_text][vc_empty_space height= »30px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

1- Rendez vous sur http://www.online-convert.com/fr.

2- Choisissez « convertir Audio »

3- Dans le menu déroulant, choisissez le format « MP3? »[/vc_column_text][vc_column_text]4- Il faut maintenant charger votre fichier audio, soit en allant le chercher sur votre disque, soit en tapant son URL si elle est stockée sur un serveur

5- Dans les paramètres, passez le bitrate à 128 ko/s, puis l’échantillonnage à 32000Hz

6- Voilà pour vos réglages, il ne reste plus qu’à cliquer sur « convertir le fichier »[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »348″ img_size= »full » alignment= »center » onclick= »link_image » css= ».vc_custom_1446642923148{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »351″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446642933386{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width= »1/6″][vc_empty_space height= »50px »][vc_widget_sidebar sidebar_id= »sidebar-1″][/vc_column][/vc_row][vc_row padding_top= »0″ padding_bottom= »0″][vc_column][vc_empty_space][vc_single_image image= »132″ img_size= »full » alignment= »center »][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/3″][vc_empty_space][vc_column_text]

Plus de
tutoriels :

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text]

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text]

• Importer une vidéo
• Importer un son
• Importer une image
• Créer un calque d’action

[/vc_column_text][/vc_column][/vc_row]