Transformer et optimiser automatiquement les images et les vidéos sur votre site Web WordPress —

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 :

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 :

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 :

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 :

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 :

É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 :

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 :

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 :

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 :

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 ;

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 :

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 :

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 :

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 :

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 :

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 :

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 :