Webcom

Optimisation des visuels

cecile.bordes2@lecnam.net (Cecile BORDES) — Mon, 23 Sep 2024 22:00:00 GMT

Bonnes pratiques pour les images :

K-SUP :

Lorsqu'un média est intégré sur le CMS de K-sup, même s'il n'est pas utilisé sur une page, une fois uploadé il est stocké sur les serveurs du Cnam.
Cette information est importante car nombreux fichiers se retrouvent aujourd'hui 5 – 6 fois sur les serveurs.
Il est donc important d'avoir validé tous les éléments du média avant d'uploader sur K-sup.

Leur nom :

Il doit être clair, court, sans espaces et caractères spéciaux.

> Le but est son référencement dans Google image, un meilleur SEO, une meilleure accessibilité.

Exemple : imgp0161_1695913464718-jpg (ce nom d'image ne nous évoque rien) mettre plutôt cnam-heureux-groupe-amis-faisant-gestes-mains.jpg Le nom de fichier peut donner à Google des indices très légers sur l'objet de l'image. Lorsque cela est possible, utilisez des noms de fichiers courts, mais descriptifs. Par exemple, my-new-black-kitten.jpg est préférable à IMG00023.JPG. Dans la mesure du possible, évitez d'utiliser des noms de fichiers génériques comme image1.jpg, pic.gif et 1.jpg.

Titre ou texte alternatif :

il faut lui ajouter un titre ou un petit texte qui sera très utile pour l'accessibilité et pour le référencement. En effet, Google utilise le contenu de la page, y compris les légendes et le titre des éléments visuels, pour déterminer l'objet des images qui y figurent.

Conseillé :

Leur format / extension :

Usuellement, nous distinguons aujourd’hui trois principaux formats pour les visuels :

JPEG (ou JPG)
GIF
PNG
WEBP

Le format JPEG

Il s’agit du format que vous devez préférer pour vos photos, et plus généralement pour les images utilisant un spectre de couleurs et de contrastes très large (plus de 16 millions de couleurs gérées). Attention néanmoins, le format JPEG ne supporte pas la transparence, chaque pixel d’un fichier JPEG est « plein ». Par ailleurs, une compression excessive d’un fichier JPEG dégradera la qualité de celui-ci.

Le format GIF

Très populaire il y a des années, le format GIF était utilisé pour des petits éléments iconographiques qui pouvaient être animés. Avec une palette de 256 couleurs, le format GIF ne permet pas de valoriser des visuels trop « complexes ». À la différence du format JPEG, le format GIF supporte la transparence, mais sans couche Alpha : chaque pixel d’un fichier GIF peut être soit plein, soit vide. Aujourd’hui, nous lui préférons les format SVG ou PNG, plus performants.

Le format PNG

Le format PNG permet d’enregistrer vos visuels sans perte de qualité, à la différence du format JPEG. Néanmoins, cela se ressentira sur la balance, avec un poids supérieur. Le grand intérêt du format PNG est que celui-ci supporte la transparence, avec couche Alpha. Ce qui signifie qu’en plus d’une couleur (composée de rouge, de vert et de bleu – RGB), chaque pixel porte une notion d’opacité.

Le format WEBP

C'est le plus optimisé aujourd'hui pour le web (pas disponible sur la version actuelle de K-sup).

Optimiser le poids :

Pour tous vos visuels, choisissez une dimension comprise entre 1600px et 1900px (en largeur), et un poids n’excédant pas 1Mo. Cela représente le compromis parfait pour assurer un affichage optimal et un temps de chargement rapide.

Comment bien enregistrer et compresser vos images ?

Maintenant que nous avons vu quels étaient les formats, voyons comment en optimiser le poids. En trois étapes :

Réduire les dimensions de l’image.
Enregistrer l’image « proprement » pour en réduire le poids.
Compresser l’image en utilisant des outils.
Réduire les dimensions de l’image
La plupart des appareils photos et smartphones captent des visuels en Haute Résolution, ce qui donne des fichiers « volumineux » en taille. Cette taille est exprimée en pixels : 6000x4000px, en associant également une densité de pixels par pouces (72dpi, 150 dpi, 300dpi…).

> En réduisant la taille du fichier (en passant à 1920x1280px, par exemple) et en passant sa résolution à 72dpi, vous réduirez déjà de manière significative le poids du fichier.

Enregistrer l’image « proprement » pour en réduire le poids

Si vous faites le choix (certainement judicieux) d’enregistrer votre fichier au format JPEG, alors vous allez pouvoir préciser un ratio de compression, exprimé en pourcentage :

Ça va de 0% : hyper optimisé mais qualité médiocre

Jusqu’à 100% : peu optimisé mais qualité supérieure En fonction du type de visuel et de l’utilisation que vous souhaitez en faire, optez pour un ratio compris entre 51% et 75%.

Si vous utilisez Photoshop, il faut passer par « Fichier > Exporter > Enregistrer pour le web » et définir les paramètres d’exportation. En modifiant ces paramètres, Photoshop vous indique le poids final du fichier exporté.

Quel outil ?

si vous n’avez pas Photoshop pour réaliser ce travail d’optimisation en deux temps trois mouvements, pas de panique ! Il existe de nombreux outils gratuits à télécharger sur Internet qui vous aideront :

XnView https://www.xnview.com/fr/xnviewmp/

Gimp : https://www.gimp.org/downloads/ (logiciel gratuit, open source et pour tous les systèmes d'exploitation Windows, Linux et Mac).

Après avoir uploadé votre visuel, celui-ci est compressé et vous n’avez plus qu’à télécharger le fichier optimisé avant de l’intégrer à votre site.

Si vous êtes utilisateur de Mac, alors nous vous recommandons d’installer un petit logiciel (gratuit lui aussi) : ImageOptim https://imageoptim.com/fr . Une fois le logiciel lancé, vous faites glisser votre fichier sur la fenêtre du logiciel, et votre visuel est automatiquement optimisé.

Pour en savoir + : https://developers.google.com/search/docs/appearance/google-images?hl=fr

Nicolas Roux - Les salariés précaires à la lumière de la crise

cecile.coutu@lecnam.net (Cecile COUTU) — Mon, 03 May 2021 22:00:00 GMT

Enrichissement des fiches UE et Diplômes

web@cnam.fr (administrateur K-Sup) — Sun, 07 Mar 2021 23:00:00 GMT

Les résultats de l'enquête nationale apparaissent en lien PDF dans le premier onglet Présentation de la fiche nationale , sous le titre "L'avis des auditeurs".

Les fiches ne sont publiées que s'il y a eu au moins 15 répondants pour la formation. Au total, plus de 1000 fiches (sur les 1500 enseignements dispensés) sont disponibles.

Cette information est reprise automatiquement dans la fiche régionale, mais peut être éditée en région.

Un enrichissement analogue va bientôt être intégré aux fiches Diplômes nationales et régionales: un lien vers le résultat de l'enquête de suivi des diplômés de la formation y sera prochainement ajouté.

"Accessibilité: non conforme"

web@cnam.fr (administrateur K-Sup) — Tue, 27 Oct 2020 14:12:00 GMT

Une nouvelle mention a fait son apparition dans tous les pieds de page de nos sites:"Accessibilité: non conforme".

Elle renvoie à la déclaration d'accessibilité (éditée et publiée par Christian Cousquer de la direction du numérique) qui stipule:

"Le Conservatoire national des arts et métiers s’engage à rendre ses sites internet, intranet, extranet et ses applications mobiles, etc. accessibles conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.

A cette fin, il met en œuvre la stratégie et les actions suivantes : se référer au schéma pluriannuel d'accessibilité numérique en cour de publication.

Cette déclaration d’accessibilité s’applique à l'ensemble des sites en cnam.fr et lecnam.net."

A mesure que progressera l'accessibilité numérique de nos sites, cette mention et cette déclaration évolueront.

Comment améliorer l'accessibilité ?

Il ne s'agit pas seulement d'améliorer l'outil de publication, mais aussi nos techniques de rédaction et de composition.

Pour l'éditeur, il convient notamment de:

1. prévoir une légende explicite pour toutes les images;

2. renseigner un texte alternatif sur toutes les images (attribut « alt » sur les balises img)

3. proposer une alternative en format texte aux images et aux contenus audio ou vidéo

4. choisir des couleurs qui assurent un bon contraste

5. s’assurer de la compatibilité multiplateforme (matérielle et logicielle). Certains technologies comme Flash ne sont pas supportées sur tous les appareils, préférer les formats SVG ou HTML5

6. accompagner les champs de formulaire d’un libellé

7. éviter de justifier le texte (les espacements entre les mots engendrent des difficultés de lectures)

Pour en savoir plus

https://www.numerique.gouv.fr/publications/rgaa-accessibilite/obligations/#d%C3%A9claration-daccessibilit%C3%A9

Basculement des sites en HTTPS

web@cnam.fr (administrateur K-Sup) — Mon, 07 Sep 2020 22:00:00 GMT

Désormais, tous les sites Cnam propulsés sur Ksup portent une url sécurisée (commençant par httpS). Ce basculement est normalement sans conséquence sur la consultation des sites par les internautes et n'entraîne aucune action particulière de la part des éditeurs.

Intérêt du protocole https

L’utilisation du protocole sécurisé HTTPS est une pratique de plus en plus fréquente sur le Web, Il offre aux données qui transitent via nos sites une sécurité maximale (ce qui est important pour nos sites de communication, notamment pour les informations contenues dans les formulaires postées sur nos sites...).
En parallèle, Google a indiqué un boost de ranking potentiel avec le passage en HTTPS.
Les versions des navigateurs les plus récentes affichent de plus une icône « Not secure » à côté de l’URL des sites Web qui ne sont pas en HTTPS.
Enfin les inclusions d'éléments provenant de nos sites (flux RSS...) pourront être désormais réalisées sur des sites extérieurs en https.
Il y a donc un réel intérêt à passer en HTTPS, pour rester dans les rangs des sites conviviaux et sécurisés aux yeux des moteurs, des navigateurs, mais également pour la sécurité des utilisateurs afin de chiffrer la connexion client/serveur.

Concrètement, quels changements?

Toutes les url (page d'accueil et pages intérieures) de nos sites s'affichent désormais dans le navigateur avec une url commançant par htts.

Une redirection automatique a été mise en place par la DSI pour rediriger les anciennes adresses en http vers les nouvelles adresses.

Le back-office lui-même répond à l'adresse https://www.cnam.fr/administe

Effets de bord

Il est désormais impossible de faire appel dans nos pages à des ressources issues de site en http (images comprises).

Il est souhaitable que chaque fois qu'un lien a été écrit sous la forme http://mon lien; il soit réécrit sous sa forme en https (ceci ne concerne pas l'outil Lien interne, ni Lien externe de Ksup qui est automatiquement redirigé).

Sur les sites qui ont déjà basculé en https, quelques problèmes sont à signaler qui vont se résoudre plus ou moins rapidement:

en front-office, le menu horizontal de rubrique cesse de fonctionner et affiche des pages de tête "non trouvées" pendant les premières heures qui suivent la bascule;
la sélection des pages dans votre back-office peut poser problème. L'outil peut vous bloquer sur la page d'accueil ou même vous déconnecter.
Ces dysfonctionnements disparaissent d'eux-mêmes au bout de quelques jours: vider ses caches ou se connecter en navigation privée vous permet de contourner plus rapidement ce problème temporaire.
Les anciennes adresses qui correspondent à des rubriques ne sont pas encore redirigées (ex: http://presentation.cnam.fr). Elles le seront automatiquement dès que l'ensemble des sites aura basculé. Ce problème n'affecte toutefois pas le bon fonctionnement des menus.
Les pages mémorisées dans vos "favoris" avant la bascule restent au protocole http et s'affichent donc sans style. Il vous appartient d'actualiser vos favoris dans votre navigateur pour que leurs adresses commencent par https.

Nettoyage du site Bac à sable

web@cnam.fr (administrateur K-Sup) — Mon, 31 Aug 2020 22:00:00 GMT

Comme chaque année à la même date, le site Bac à sable, utilisé pour des mises en ligne rapides avant validation, est purgé de l'ensemble de ses contenus.

Si vous souhaitez conserver du contenu présent sur ce site, merci de le déplacer sur votre site de production.

voir https://bacasable.cnam.fr

A noter dans ce numéro - Réacteur - janvier 2020

web@cnam.fr (administrateur K-Sup) — Thu, 26 Mar 2020 09:40:00 GMT

Index Mobile-First : on en parle, mais les sites suivent-ils ?

Cela va bientôt faire deux ans que le projet IMF (Index Mobile First) a été mis en place par Google et que le moteur visite désormais les versions mobile des sites web plutôt que leur version desktop. Pourtant, de nombreux sites posent encore certains problèmes en ce qui concerne leur compatibilité SEO et ont alors perdu du trafic lors du passage à l'IMF. Dans cet article nous détaillons plusieurs points à prendre en compte au niveau des menus de navigation, des fils d'Ariane, du contenu, des performances, etc. pour faire en sorte que la "mobilisation" de votre site se passe sans encombres.

Comment rendre votre podcast SEO Friendly ? (1ère partie)

Le marché du Podcast en France se structure. Hébergeurs, régies publicitaires dédiées, studios de podcast, incubateurs, curateurs, tout un écosystème dédié à ce format de contenus audio est désormais en place et les audiences commencent à suivre. Voici comment s’y prendre pour y être visible et se démarquer par le SEO dans ce domaine, avant le boom attendu de ce format de contenu. Ce mois-ci, nous commençons avec l'état de l'art de ce format finalement pas si nouveau que cela sur le Web actuel...

4 applications de recherche et lecture de podcasts

Les podcasts sont un support d'information qui gagne du terrain chaque jour dans nos habitudes de consommation du contenu numérique. De nombreuses études montrent qu'ils sont de plus en plus utilisés au quotidien. Une source d'informations qu'il est donc nécessaire d'appréhender, aussi bien comme utilisateur que comme producteur. Le mois dernier, nous nous sommes penché sur 5 moteurs de recherche spécialisés permettant de mieux chercher des sources de podcasts. Ce mois-ci, place à quatre applicatifs mobiles très efficaces (ou pas) pour identifier les podcasts de vos rêves...

Les 6 impératifs pour une bonne stratégie éditoriale (2e partie)

Écrire c'est bien. Répondre à l'intention de recherche de l'internaute (répondant au profil recherché) en publiant un contenu riche et pertinent tout en mesurant la réussite des objectifs définis au préalable, c'est encore mieux. Cet article en deux parties a pour ambition de vous aider dans cette tâche. Dans la première partie, nous avons étudié la notion de persona, la compréhension de l'intention de recherche et la stratégie à mettre en place, grâce notamment aux bons outils; Ce mois-ci, la seconde partie aborde les notions de planning éditorial, de promotion des contenus et de mesure de l'efficacité des actions mises en place.

A noter dans ce numéro - Réacteur - février 2020

web@cnam.fr (administrateur K-Sup) — Thu, 26 Mar 2020 09:33:00 GMT

Comment rendre votre podcast SEO Friendly ? (2ème partie)

Le marché du Podcast en France se structure. Hébergeurs, régies publicitaires dédiées, studios de podcast, incubateurs, curateurs, tout un écosystème dédié à ce format de contenus audio est désormais en place et les audiences commencent à suivre. Voici comment s’y prendre pour y être visible et se démarquer par le SEO dans ce domaine, avant le boom attendu de ce format de contenu. Après l'état de l'art de ce format pas si nouveau que cela sur le Web actuel le mois dernier, nous entrons avec cet article "dans le dur" avec l'optimisation de vos fichiers et des pages qui les proposent...

A noter dans ce numéro - Réacteur - mars 2020

web@cnam.fr (administrateur K-Sup) — Thu, 26 Mar 2020 09:31:00 GMT

Le cocon sémantique existe-t-il vraiment ? (1ère partie)

Il est souvent difficile de trouver trace d'un « vrai » cocon sémantique sur le Web. Le cocon est parfois comme Nessie (le monstre du Loch Ness) : tout le monde en parle, mais personne ne le voit... Alors, est-ce un mythe ou existe-t-il vraiment ? Plusieurs sortes de cocon cohabitent-ils sur le Web ? Christian Méline explique ici sa vision du domaine et nous explique ce que sont devenus ces cocons depuis leur conception, avant d'analyser un exemple de "cocon moderne" disponible en ligne...

A noter dans ce numéro - Réacteur - décembre 2019

web@cnam.fr (administrateur K-Sup) — Tue, 17 Dec 2019 07:52:00 GMT

SEO et Développement durable

Le réseau Internet est un énorme consommateur d'énergie et pose donc des problèmes en termes de développement durable. En cela, le SEO est également partie prenante des soucis que pose le réseau au niveau écologique et il nous faudrait peut-être parfois mieux appréhender nos méthodologies au quotidien pour améliorer la situation et apporter notre brique à l'édifice pour que la Terre se porte mieux dans les années qui viennent. Voici donc un article sur l'impact écologique du SEO sur notre planète...

Mesurer l’écosystème des backlinks sur le Web : une problématique complexe

On ne peut bien sûr pas nier l'importance des liens (backlinks) dans une stratégie SEO. Aussi, de nombreux outils (Majestic, Ahrefs, Moz, Sistrix et bientôt Babbar) tentent de reproduire cet écosystème pour founir de la data et des indicateurs quantitatif et qualitatif aux webmasters et référenceurs qui veulent en savoir plus à ce sujet. Tous ces outils se heurtent au quotidien à de nombreux obstacles, tant le paysages des liens est complexe à analyser et à traiter. Voici pourquoi...

5 moteurs de recherche de podcasts

Les podscasts sont un support d'information qui gagne du terrain chaque jour dans nos habitudes de consommation du contenu numérique. De nombreuses études montrent qu'ils sont de plus en plus utilisés au quotidien. Une source d'informations qu'il est donc nécessaire d'appréhender, aussi bien comme utilisateur que comme producteur. L'article de ce mois se penche notamment sur 5 moteurs de recherche spécialisés permettant de mieux chercher des sources de podcasts. Parmi eux, 2 se détachent nettement des autres...

Les 6 impératifs pour une bonne stratégie éditoriale (1ère partie)

Écrire c'est bien. Répondre à l'intention de recherche de l'internaute (répondant au profil recherché) en publiant un contenu riche et pertinent tout en mesurant la réussite des objectifs définis au préalable, c'est encore mieux. Cet article en deux parties a pour ambition de vous aider dans cette tâche. Dans cette première partie, nous étudions la notion de persona, la compréhension de l'intention de recherche et la stratégie à mettre en place, grâce notamment aux bons outils...