Fermer

novembre 9, 2021

Transformer et optimiser automatiquement les images et les vidéos sur votre site Web WordPress —9 minutes de lecture



Résumé rapide ↬

Dans cet article, Leonardo Losoviz explique comment l'intégration de Cloudinary peut être utilisée avec WordPress pour produire et offrir des expériences numériques optimales.

Vous voulez donc donner de la personnalité à votre site en le faisant se démarquer de tous les autres sites Web. Pour ce faire, vous développez un style de conception personnalisé, comprenant une certaine combinaison de couleurs, de typographie, d'espacement, d'animations et autres, et appliquez le style de manière cohérente sur l'ensemble de votre site.

Un exemple est ce même site Web, Smashing Magazine. . L'un des objectifs de sa grande refonte était de donner au site une personnalité unique et distinctive. C'est pourquoi tous les avatars, le bouton fléché et de nombreux autres éléments sont tous inclinés, au même angle que le logo Smashing est :

Éléments inclinés dans Smashing Magazine

Éléments inclinés dans Smashing Magazine ( Grand aperçu)

Qu'en est-il des images ? Ils peuvent également participer à la conception unique afin que les visiteurs naviguant sur votre site le reconnaissent immédiatement en regardant simplement le contenu. Par exemple, je me souviens de l'ancien design audacieux de The Verge, qui plaçait des couleurs saisissantes sur ses images :

Ancienne page d'accueil de The Verge

Ancienne page d'accueil de The Verge (Large preview)

L'application de style aux images peut être réalisée avec CSS. Cependant, le style ne sera alors pas présent lors du référencement direct de l'image (comme l'image partagée sur les réseaux sociaux via la balise ), rendant l'image dépourvue de personnalité.

Les images intégrées dans les réseaux sociaux lors du partage de notre le contenu présente un intérêt particulier. Ces images doivent porter la personnalité du sitepour lequel le style doit être intégré dans l'image elle-même, au lieu d'être appliqué via CSS. Par exemple, dans le compte Twitter de SmashingMagl'image vedette de l'article a un style personnalisé et cohérent, ce qui lui confère une personnalité unique :

Article de Smashing Magazines partagé sur Twitter

Article de Smashing Magazine partagé sur Twitter ( Grand aperçu )

L'ajout du style aux images sur notre site peut être effectué manuellement (avec Photoshop ou un autre outil d'édition d'images), mais l'édition d'images demande beaucoup d'efforts. Les images doivent être manipulées et rechargées sur le site, pour toutes les tailles possibles (telles que l'image en vedette et chacune des vignettes) et tous les ensembles de styles définis (par exemple, une page pour les ventes du Black Friday pourrait avoir son propre style).

Il est plus logique d'automatiser cette tâche. L'automatisation est réalisable lorsque le design est basé sur une série de transformations, à appliquer les unes après les autres, telles que :

  • Ajout d'un filigrane ;
  • Arrondir l'image ;
  • Rotation l'image à un certain angle ;
  • Ajout d'une bordure, avec une épaisseur et une couleur spécifiques ;
  • Ajout d'une ombre ;
  • Recadrage de l'image à un certain rapport hauteur/largeur ou à des dimensions fixes ;
  • Recadrage de l'image autour le visage de la personne ;
  • Convertir l'image en niveaux de gris, ou ajouter une teinte ;
  • Affiner l'image.

En définissant une liste de transformations, la tâche d'appliquer le style souhaité à nos images peut être automatisé. En conséquence, l'effort pour produire un style cohérent sur l'ensemble du site Web et le modifier à tout moment est considérablement réduit.

L'application de styles sur l'ensemble du site Web devient désormais :

  • Nous présélectionnons les styles à appliquer aux images, pour l'ensemble du site ou une section personnalisée, via la configuration sur le back-end du site ;
  • Nous téléchargeons les images originales.

Ensuite, les images seront automatiquement transformées pour produire les styles souhaités, et facilement disponible pour être inséré dans la page via le gestionnaire de médias du site Web.

C'est exactement ce que nous pouvons faire via Cloudinaryun service qui aide à produire et à offrir des expériences numériques optimales. Basé sur le cloud, Cloudinary peut être intégré à n'importe quel site, basé sur n'importe quelle pile ou technologie. Pour cet article, j'utiliserai son intégration avec WordPress et son plugin pour WordPress v3.0 pour démontrer ses capacités de transformation.

Commençons !

Ajout de transformations. To The Images

Cloudinary propose une longue liste de transformationsy compris toutes celles que j'ai mentionnées précédemment et bien d'autres, pour manipuler non seulement des images mais aussi des vidéos. En ajoutant les transformations souhaitées à l'URL d'une image, l'image peut être modifiée de multiples façons. Je vais le démontrer en créant une vignette pour une image.

Sur cette photo, je suis avec un couple d'amis sous le soleil de Barcelone :

Une photo de moi et de deux amis sous le soleil de Barcelone
Une photo de moi et de deux amis sous le soleil de Barcelone ( Grand aperçu)

Cette photo en taille réelle sera l'image vedette de mon article. Pour la page d'accueil, je souhaite créer un lien vers le post en utilisant une vignette de 300 pixels de large. Pour réduire l'image, j'attache la transformation w_300 à l'URL de l'image :

Le résultat est celui-ci :

Image redimensionnée à 300px de large
Image redimensionnée à 300px de large ( Grand aperçu)

Étant une version réduite de l'image originale, les personnes à l'intérieur de cette vignette semblent petites. Agrandissons-les en recadrant l'image. Pour cela, nous attachons la transformation c_crop après la transformation précédente :

Le résultat est celui-ci :

Image redimensionnée et recadrée
Image redimensionnée et recadrée (Large preview )

Aïe ! Que s'est-il passé? Un de mes amis a été coupé de l'image ! Remettons-le en appliquant le recadrage autour de la section sud-ouest de l'image via la transformation de gravité g_south_west :

Le résultat est celui-ci :

Grand aperçu)

Ok, mon ami est de retour, mais maintenant les têtes de mes deux amis ont été coupées ! Pour résoudre ce problème, Cloudinary propose une meilleure option : en utilisant la transformation g_facesune IA identifiera les visages dans l'image et effectuera le recadrage autour de ceux-ci :

Le résultat est celui-ci :

Image redimensionnée, recadrée et mise au point autour des visages
Image redimensionnée, recadrée et mise au point autour des visages ( Grand aperçu)

C'est beaucoup mieux ! Maintenant, que se passerait-il s'il n'y avait personne sur la photo, donc nous ne pouvons pas utiliser g_faces ? Cloudinary offre une option encore meilleure : en utilisant g_autoune IA décidera automatiquement quelle est la section la plus intéressante de l'image et effectuera le recadrage autour d'elle :

Le résultat est celui-ci :

 Image redimensionnée, recadrée et mise au point autour du contenu le plus intéressant
Image redimensionnée, recadrée et mise au point autour du contenu le plus intéressant ( Grand aperçu)

Maintenant, la vignette est parfaite.

Enfin, je voulez appliquer un style distinctif qui rend mon site unique. J'ai décidé d'appliquer le niveau de teinte à 40via la transformation e_hue:40 :

Le résultat est celui-ci :

Image redimensionnée, recadrée, focalisée et avec niveau de teinte distinctif
Image redimensionnée, recadrée, mise au point et avec un niveau de teinte distinctif ( Grand aperçu)

J'ai enfin compris : la transformation que je souhaite appliquer à mes images, pour obtenir les vignettes pour la page d'accueil est w_300,c_crop,g_auto,e_hue:40.

Servir les images les plus optimales

En plus d'utiliser des transformations d'image pour le style, nous pouvons les utiliser pour compresser des images afin de chargez-les plus rapidement. En effet, la réduction de la taille des images est exceptionnellement importante afin d'améliorer les performances du site.

Cloudinary est idéal pour optimiser les performances, pour deux raisons principales :[19659066]Les images sont servies via un CDN, situé à proximité de l'utilisateur naviguant sur le site, réduisant considérablement la latence de la requête ;

  • Le service compresse automatiquement les images vers la version la plus optimale, épargnant cet effort à l'équipe.
  • Afin de fournir la version la plus optimale de l'image, Cloudinary propose quelques transformations pratiques :

    • f_auto : utilise automatiquement le format d'image le plus approprié, notamment AVIF, WebP, PNG et JPG.[19659017]q_auto : calcule automatiquement et sert le meilleur compromis entre la qualité visuelle et la taille du fichier.

    Par exemple, si le navigateur prend en charge le nouveau format AVIFalors l'image servie sera de type image/avif[1 9459018]produisant des économies significatives de taille de fichier sans diminuer la qualité visuelle. Sinon, il servira image/webp s'il est pris en charge, ou reviendra à image/png ou image/jpg (ou à un autre format).

    Dans la capture d'écran ci-dessous, j'ai ajouté la transformation f_auto,q_auto à l'image précédente et je l'ai chargée dans Firefox et Safari. Alors que dans Safari, l'image est récupérée en tant que image/jp2dans Firefox, elle est servie en tant que image/webptransférant ainsi moins d'octets :

    Contraste une image chargée dans Firefox et Safari

    Contraste une image chargée dans Firefox et Safari ( Grand aperçu)

    Transformer les images dans WordPress

    Cloudinary a récemment publié la v3.0 de son plugin WordPress, avec plusieurs nouvelles fonctionnalités pratiques. Utilisons ce plugin pour appliquer automatiquement des transformations aux images sur un site WordPress.

    Si nous ne sommes pas encore des utilisateurs de Cloudinary, nous pouvons créer un compte gratuitement. Lors de l'installation du plugin, nous devrons fournir les informations de connexion de notre compte Cloudinary :

    Installation du plugin

    Installation du plugin (Large preview)

    Une fois installé, le tableau de bord du plugin fournira des statistiques sur les transformations, la bande passante et le stockage utilisés par le site Web :

    Tableau de bord du plugin

    Tableau de bord du plugin (Large preview)

    Dans la page « Paramètres généraux », nous pouvons configurer s'il faut synchroniser les images téléchargées sur Cloudinary automatiquement ou manuellement, dans quel dossier enregistrer les images pour le site (ce qui est particulièrement utile si nous utilisons Cloudinary pour plus d'un site) et où héberger les images.

    Par défaut, les images sont hébergées à la fois dans le cloud Cloudinary et le serveur WordPress, ce qui nous donne la possibilité de désactiver le plugin Cloudinary à tout moment sans aucune perte de données :

    Paramètres généraux du plug-in

    Paramètres généraux du plug-in ( Grand aperçu)

    Dans la page « Paramètres de l'image », nous pouvons définir des transformations globales à appliquer à toutes les images. Par défaut, toutes les images ont des propriétés "Format d'image" et "Qualité d'image" définies sur "Auto", ce qui (comme expliqué précédemment) produira la version la plus optimale de l'image en fonction de l'appareil et du navigateur spécifiques :

     paramètres d'image

    Paramètres d'image du plug-in ( Grand aperçu)

    Sur cette page, nous pouvons également définir des « Transformations d'images supplémentaires », à appliquer à toutes les images. Par exemple, je peux définir ici la transformation e_hue:40 pour appliquer un niveau de teinte de 40 à toutes les images de mon site.

    On peut aussi être plus sélectif lors de l'application du style ]. Nous pouvons définir des transformations pour une balise ou une catégorie spécifique, qui seront appliquées aux éléments multimédias ajoutés à la publication avec cette balise ou cette catégorie :

    Transformations d'image pour une catégorie spécifique

    Transformations d'image pour une catégorie spécifique (Grand aperçu)

    Les autres pages du menu « Cloudinary » nous permettent de configurer les options générales du pluginafin que nous puissions faire tout ce qui suit :

    • Définir les transformations pour les vidéos (en plus de images);
    • Utilisez le chargement différé, qui améliore les performances en chargeant une image uniquement lorsqu'elle apparaît dans la fenêtre ;
    • Définissez des points d'arrêt pour les images réactives, ce qui améliore les performances en permettant au navigateur de charger la plus petite image l'écran de l'appareil ;
    • Configurez le bloc Galerie de Cloudinary pour l'éditeur WordPress.

    Appliquer des transformations à des images individuelles

    En plus de définir les transformations à appliquer sur le site, ou pour une balise ou une catégorie spécifique, nous pouvons également appliquer transformations individuellement en une certaine image, juste lors de l'insertion de l'image dans le message.

    Lors de l'ouverture du gestionnaire de médias, il y aura un nouvel onglet « Cloudinary ». En cliquant ici, nous pouvons parcourir toutes les images hébergées sur notre compte et leur appliquer des transformations personnalisées. En conséquence, une nouvelle image sera créée sur le site WordPress, pour être ajoutée à la publication comme d'habitude :

    Applying an individual transformation
    Applying an individual transformation (Large preview)[19659006]Je souhaite également ajouter une légende en superposition « Moi et mes amis sous le soleil de Barcelone » sur l'image. Pour y parvenir, la transformation l_text:Arial_25:Moi et mes amis sous le soleil de Barcelone,g_north_west,y_70,x_25 ajoutera un texte superposé et le positionnera à un endroit précis au-dessus de l'image :

     Placer un texte superposé sur l'image
    Placer un texte superposé sur l'image ( Grand aperçu)

    Maintenant, puisque l'image transformée est encore une autre image sur le site WordPress, nous pouvons également utiliser le Éditeur WordPress pour ajouter le texte de superposition. Pour cela, nous pouvons transformer l'image en bloc Cover et ajouter une légende :

    Convertir l'image en bloc Cover

    Convertir l'image en bloc Cover (Large preview)

    En plus de l'éditeur WordPress, le plugin de Cloudinary est également entièrement compatible avec tous les constructeurs de pages populaires, y compris Elementor et Divi.

    Conclusion

    Si nous voulons réussir nos sites Web, nous devons porter une attention particulière à deux préoccupations :

    1. Design
      Vous devez faire en sorte que le site Web se démarque de tous les autres sites Web en lui donnant une personnalité unique.
    2. Vitesse
      Assurez-vous que le site Web est aussi vite que possible pour une expérience utilisateur optimale, et pour obtenir le score Web Vital le plus élevé afin qu'il puisse indexer plus haut dans Google.

    Dans les deux comptes, Cloudinary peut nous aider. Tout ce qu'il faut pour ajouter un design personnalisé pour nos images est de sélectionner les transformations souhaitées, et l'image (optimisée pour le navigateur et l'appareil spécifiques) sera servie à partir d'un CDN avec des centres de données partout dans le monde - offrant une expérience ultra-rapide .

    Si vous avez un site WordPress, la dernière version du plugin offre une expérience améliorée, notamment une intégration transparente avec l'éditeur WordPress, une compatibilité totale avec les principaux constructeurs de pages, un nouveau tableau de bord fournissant des statistiques sur l'utilisation du service et des fonctionnalités améliorées pour optimiser votre site. Découvrez-le !

    Éditorial fracassant" width="35" height="46" loading="lazy" decoding="async(vf, il)




    Source link

    0 Partages