Préparer ses médias sous wordpress

De nombreuses extensions vous permettent d’optimiser vos images a posteriori, en les retraitant et en les remplaçant automatiquement.

Vous avez préparé sur papier la structure de votre site web et vous avez déjà réfléchi aux extensions dont vous avez besoin : avant de passer à la pratique, il est important de réunir et d’optimiser tous les éléments visuels que vous allez déployer sur votre site web.

Il est plus que jamais impensable de publier votre site web sans l’accompagner de solides éléments visuels : même sur mobile, nos connexions nous permettent aujourd’hui d’afficher de grandes images en guise d’arrière-plan et même des séquences vidéo. Comme nous l’avons vu lors de notre parcours des dernières tendances en matière de webdesign, ce sont des effets que l’on privilégie pour habiller des en-têtes de sections, voire introduire directement la page d’accueil d’un site vitrine.

Pour autant, vous ne devez pas faire n’importe · quoi et imposer le chargement d’images de plus de cinq mégaoctets, un volume aujourd’hui très fréquent avec des photographies en haute définition : vous devez impérativement prendre le temps de les optimiser manuellement, en particulier car Google prend en compte les performances de votre site web pour le classer parmi les résultats d’une recherche. Mais il n’y pas que les images qui méritent un traitement particulier : en fonction des objectifs de votre projet web et de la nature de votre contenu, vous êtes susceptible de l’accompagner de séquences vidéo et même d’extraits audio. Là encore, ces formats spécifiques méritent un traitement particulier, d’autant plus que les dernières technologies du Web permettent d’intégrer directement un lecteur à vos pages, sans nécessairement invoquer Flash Player.

Les images de votre bibliothèque de médias occupent une place significative, optimisez-les afin de réduire le temps de chargement de votre site web.

Optimiser au mieux les images

On distingue trois types d’éléments visuels : votre logo, les images qui accompagnent vos articles et les grandes photographies que vous affichez éventuellement en arrière-plan. Ces éléments appellent des traitements spécifiques.

Pour votre logo, vous ne devez pas lésiner sur la qualité visuelle et la finesse d’affichage – dans la mesure du possible, évitez rigoureusement les formats avec une compression destructive, comme le JPEG. Choisissez de préférence le format PNG, en activant la transparence afin que votre logo, s’il n’est pas parfaitement rectangulaire, s’intègre au mieux à vos pages. Avec WordPress, l’intégration et les dimensions de cet élément dépendent très largement du thème que vous avez installé : en règle générale, vous transférez le fichier en cliquant sur Apparence> Personnaliser dans l’interface d’administration de votre site. Vous y trouverez bien souvent des conseils sur les dimensions minimales et maximales d’un tel élément mais retenez toutefois qu’avec les thèmes responsive, votre logo est susceptible d’être affiché dans une grande variété de tailles différentes. Vous avez donc intérêt à prévoir une certaine marge de sécurité, en particulier pour les écrans Retina de certains mobiles, qui affichent une définition n’ayant rien à envier aux grands moniteurs : mieux vaut donc réduire une image trop grande qu’étirer un logo trop petit. Il existe une astuce, souvent employée par les thèmes premium, pour adapter automatiquement la taille du logo à tous les supports : charger ce logo en guise d’arrière-plan dans un bloc <div> en haut de votre thème. Grâce à la règle css background-size : cover;, l’image adapte ses dimensions pour épouser tout l’espace prévu par ce bloc.

À ce titre, si vous êtes en panne d’inspiration pour créer votre logo, deux solutions existent. Vous pouvez tout d’abord explorer la possibilité d’utiliser des typographies spéciales : les web fonts, ces polices directement hébergées sur un serveur web, vous permettent de sortir des traditionnel es

polices Arial, Helvetica ou Times New Roman. Reportez vous à l’adresse https://fonts.google.com pour parcourir le catalogue du service Google Fonts. Il comprend à l’heure actuelle plus de 800 polices de caractères différentes, dont certaines sont vraiment très élaborées et s’articulent autour d’une série de « glyphes » en forme d’images. Leur utilisation est gratuite et vous profitez d’un véritable assistant pour les intégrer au mieux à votre thème, à l’aide de règles CSS que vous devez copier dans le fichier styles.css (cliquez sur Apparence> Éditeur puis sélectionnez cet élément dans le volet droit afin de modifier directement les styles CSS de votre thème depuis votre interface d’administration). L’autre solution consiste à dépenser quelques euros pour utiliser directement la création d’un designer spécialisé. Nous vous recommandons par exemple de vous rendre sur GraphicRiver.net, un service qui dispose d’une section Logos. En règle générale, vous téléchargez après le paiement une composition au format PSD de Photoshop – vous pouvez librement l’éditer et ainsi ajouter le nom de votre blog ou site web.

Les images des articles

Pour les images susceptibles d’accompagner vos articles, vous devez essentiellement veiller à leur niveau de compression. Outre l’utilisation d’un logiciel spécialisé, comme Photoshop (reportez-vous à l’encadré), sachez qu’il existe un service très performant accessible à l’adresse https://compressor.io. Pour ces images, outre leur optimisation individuelle, envisagez l’installation d’une extension de « light box ». Il s’agit d’un effet ajoutant un lien hypertexte à chacune de vos images, pour les afficher ensuite en version « large » dans une fenêtre apparaissant en surimpression sur la page. Ce type d’effet est aujourd’hui incontournable et vous permet d’intégrer des images aux dimensions modestes dans le corps de vos articles, avec un bien plus grand niveau de détails dans cette fenêtre modale sans pour autant imposer l’ouverture d’une pop-up ou d’un nouvel onglet dans le navigateur. Si vous utilisez ce type de système, vous devez donc nécessairement transférer une image de haute qualité et choisir d’intégrer la version en « taille moyenne » à votre article (WordPress est capable de décliner automatiquement vos images en de multiples dimensions, rendez-vous à la section Réglages > Médias pour choisir ces valeurs).

Optimiser vos images avec Photoshop

Si vous utilisez déjà Photoshop pour créer et retoucher vos images, le célèbre éditeur dispose d’une fonction Exportation extrêmement pratique pour optimiser vos images. Après avoir retouché une image, déroulez le menu Fichier et cliquez sur Exportation>Exporter sous… C’est une bonne stratégie pour optimiser chacun de vos fichiers avant de les transférer à votre site WordPress.

Image mise en avant

Pour vos articles, vous devrez choisir l’image principale de chaque billet, qui lui sera directement associée sous forme de vignette dans le parcours de la catégorie correspondante (la fameuse «image mise en avant »). Pour ces images, vous devez vous plier aux spécificités de votre thème : en règle générale, il impose un certain format et vous avez donc intérêt à créer directement une image aux bonnes dimensions. Par ailleurs, il est primordial qu’elle présente un bon impact visuel et qu’elle donne envie aux visiteurs de consulter l’article ; préparez-la avec soin.

Image d’arrière-plan

Enfin, pour les grandes photographies que vous affichez en arrière-plan af n d’illustrer des sections entières, vous devez impérativement proposer des visuels en 1920×1080 pixels au minimum. Les écrans Retina et les grands moniteurs 2K ou 4K ne sont plus rares, et vous ne perdrez pas vraiment en détail lorsque vous étendez ces images à l’ensemble de l’affichage, en particulier à travers l’astuce de la règle CSS « background-size » que nous avons évoquée en préambule.

Les autres types de médias

En fonction de la nature de votre projet, vous êtes susceptible d’intégrer d’autres types de médias, comme des séquences vidéo par exemple. Dans la mesure du possible, privilégiez une publication des séquences dont vous avez besoin sur l’une des grandes plates-formes du marché, comme YouTube. Leur intégration est très facile (notamment par les blocs du nouvel éditeur de page) et vous déléguez ainsi totalement leur prise en charge à ces services : c’est une tâche très coûteuse en ressources, vous soulagez ainsi votre propre espace web. Par ailleurs, de nombreux thèmes et extensions sont capables « d’habiller » le lecteur type de YouTube et d’utiliser une séquence vidéo en guise d’arrière-plan, par exemple. C’est notamment le cas de WP Bakery qui remplace au pied levé l’éditeur de WordPress et permet de découper vos pages en de multiples « sections », avec éventuellement une vidéo en arrière-plant issue de l’une de ces plates-formes de publication.

Vous hésitez pourtant à déposer vos séquences vidéo sur YouTube ou DailyMotion car vous n’appréciez pas l’allure du lecteur par défaut, quis s’intégre mal à votre thème ? Grâce à l’extension « Video.js » que vous trouverez dans le catalogue gratuit, vous êtes en mesure de remplacer au pied levé le lecteur classique et de charger vos propres boutons (même si la vidéo reste hébergée sur YouTube par exemple), à travers un élément entièrement composé en HTML5 – vous n’imposez pas le Flash Player, aujourd’hui remisé aux oubliettes. Pour gagner en autonomie, vous pouvez toutefois préférer déposer vos propres séquences vidéo sur votre serveur web : la même extension est capable de charger les fichiers de votre choix. Gardez toutefois à l’esprit que les navigateurs ne reconnaissent pas tous les mêmes formats et vous avez intérêt à préparer au moins trois fichiers : .mp4 (Chrome, Firefox, Safari), .ogv (Opera, Firefox, Chrome) et .webm (Edge, Firefox, Chrome). Là encore,

la plupart des extensions déployant un lecteur vidéo HTML5 sur votre site WordPress vous laisseront préciser l’URL de chacun de ces trois formats. Si vous n’avez que quelques séquences à convertir, vous pouvez vous rabattre sur un service en ligne (http://tinyurl.com/zqcdvw3). Si vous avez un plus grand nombre de fichiers à traiter, nous vous recommandons une application bureautique gratuite comme Any Video Converter (http://tinyurl.com/374joh).

Enfin, si vous montez un site personnel pour présenter vos créations musicales ou si vous avez envie d’agrémenter votre site d’une bande sonore, nous vous recommandons d’utiliser le service spécialisé SoundCloud.com. À l’instar de YouTube, l’intégration à un blog ou un site WordPress est prévue par défaut : après avoir transféré gratuitement vos pistes audio sur le service, cliquez sur le bouton Partager puis reportez-vous à l’onglet « Embarquer ». Cochez la case « Code WordPress » et copiez la ligne qui apparaît à l’écran : il s’agit d’un « shortcode » que vous pouvez directement coller dans l’éditeur d’article et qui est automatiquement reconnu par les dernières versions de WordPress.

Le nouvel éditeur de WordPress permet d’intégrer des sons assez facilement en ajoutant un bloc Son. Parmi les options disponibles la lecture automatique, la répétition en boucle et le préchargement

Compressor.io
Un outil en ligne et gratuit pour compresser vos images.

Choisir les éléments à optimiser

Outre la possibilité d’optimiser vos images avec un éditeur professionnel comme Photoshop, il existe de multiples services web permettant d’aboutir à un excellent résultat. Compressor.io a particulièrement retenu notre attention par son interface intuitive et ses traitements rapides et performants. Il autorise deux types de compression, dont une sans la moindre perte de détails ce qui conviendra à de nombreux éléments de votre site web. Rendez-vous à l’adresse https://compressor.io.

Compresser une grande image

Vous avez préparé une image que vous allez utiliser dans un article ou en guise d’arrière-plan et vous consentez à sacrifier un peu sa qualité afin d’obtenir un fichier de petite taille ? Avant de transférer le fichier vers le service Compressor.io, cliquez sur le bouton Lossy (avec pertes) puis cliquez sur Select File et choisissez votre élément. Au bout de quelques secondes, vous découvrez le niveau de compression : dans certains essais, nous avons réduit le fichier de 86 % ! Utilisez la réglette au milieu de l’image pour comparer la qualité avant et après.

Télécharger le résultat

Vous êtes satisfait du niveau de la qualité et vous ne constatez pas de réel endommagement de votre image ? Cliquez sur le bouton Download your file, en bas de l’écran : votre navigateur vous renvoie immédiatement le fichier résultant, avec le suffixe «-compressor» dans son titre. Vous avez intérêt à supprimer cet intitulé avant de le transférer dans la bibliothèque de médias de WordPress, afin de ne pas pénaliser votre référencement et de préserver des noms de fichiers courts. Sachez que ce système offre d’excellents résultats, sauf peut-être sur les tons chair et les zones les plus claires. Hélas, Compressor.io ne vous permet pas de traiter plusieurs fichiers à la fois et vous devrez nécessairement vous résoudre à cliquer sur Compress another picture pour enchaîner avec une autre image. Pour certains éléments qui ne peuvent souffrir d’aucune détérioration, comme votre logo par exemple, vous devez cliquer sur Lossless afin d’appliquer une compression sans perte. Le résultat sera moins spectaculaire, mais vous pouvez malgré tout gagner une place significative. Téléchargez ensuite le fichier résultant comme précédemment.


Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *