Programmation Web

Articles du blogue techno portant sur la programmation dans le monde du Web

Web Designer : Artiste ou technicien ???

Web Designer : Artiste ou technicien ??? 0


Écrit et publié par : Éric St-Gelais.

Sources : Éric St -Gelais Web Design & Intégration Multimédia,

https://www.reussirmavie.net , CÉFRIO

Image à la Une : courtoisie de https://www.reussirmavie.net


Web Designer : C’est un professionnel du Web qui voltige entre les talents artistiques, notamment esthétiques et visuels, et la subtilité et la technicité du monde numérique. Avec la révolution du Web, le Web Designer a supposément un bel avenir… À une seule condition! De demeurer à la fine pointe des nouveautés et tendances du jours et autant qu’en formation technique constante.


Beaucoup d’étudiants (et d’étudiantes) rayent encore facilement les métiers du Web de leurs projets d’avenir. Fort probablement par pure ignorance. « Je déteste l’informatique ! » « Je ne veux pas passer ma vie devant un écran… », « je suis nul en maths… » Se disent-ils .

C’est ignorer en particulier toute la branche créative et graphique qui permet d’exercer des talents artistiques sur les outils et canaux digitaux. Le Web Designer est l’une des quelques professions qui n’existaient même pas il y a 30 ans et qui offrent aujourd’hui de beaux débouchés.  

Le rôle du Web Designer ? C’est de créer et de concevoir l’ensemble des éléments d’un site Web. Dont le graphisme, le contenu, l’ergonomie et la bonne fonctionnalité du site ou d’un produit sur une page Web. Pour vous présenter la profession, donnons la parole aux jeunes Web Designers comme Solène.


Les qualités variées décrites par Solène : talents visuels, aisance technique, bonne communication et rédaction

Ce que souligne Solène, en premier lieu, il faut détenir une bonne sensibilité visuelle, s’intéresser aux nouvelles tendances graphiques du jour, ce qui demande une ouverture culturelle multiple. Si vous aimez faire de la photo, visitez des expos, peignezou dessinez dans vos temps perdus. Vous détenez sans aucun doute ce talent en vous.

Par la suite, vous devez aussi maîtriser les outils actuels de création en ligne. Ce qui suppose de bien être à l’aise avec les logiciels professionnels et savoir les utiliser, sans jamais oublier, qu’une fois sorti de la formation, que vous travaillerez toute votre vie de la même façon ! 
« Il faut se tenir à jour et ne pas devenir obsolète et ne pas avoir peur de se former sans cesse », soulignent tous les Web Designers.

Enfin bref, le webdesigner doit tenir compte des demandes de ses clients. Il se doit absolument être à l’écoute, s’imprégner de leurs marque de commerce, intégrer leurs contraintes et leurs demandes si possible (ce qu’on appelle un « cahier des charges »). Il faut donc avoir des qualités relationnelles. Ses qualités sont : être curieux, patient, et savoir faire des propositions adaptées. Pas question de s’enfermer dans sa bulle ou dans une tour d’ivoire tel un grand artiste génial et incompris !



Lire aussi : 

Quelles écoles pour les métiers du web ? (France seulement)


Employé ou travailleur autonome ?

Très souvent, les jeunes Web Designers débutent comme simple salariés dans une boîte spécialisée dans la création de sites Internet ou de communication. Ce sont en effet les structures qui offrent le plus d’offres d’emploi de Web Designers.

Lire Aussi…

https://www.ericstgelais.net/agence-ou-pigiste-comment-bien-choisir/


Après quelques années dans une boîte, plusieurs Web Designers décident de s’installer à leur compte comme travailleur autonome (freelance).

Maintenant avec le télé-travail, la profession offre beaucoup plus de souplesse sur les heures de travail et aussi du lieu. Si vous envisagez par exemple, de vivre un jour à la campagne, Le Web Design est une sérieuse option à envisager. Toutefois, vous devez entretenir un réseau de clients . Ce qui implique : savoir se faire connaître, savoir obtenir et négocier des contrats. Se spécialiser ou porter plusieurs casquettes pour certains…

Enfin bref, plusieurs Web Designers désirèrent demeurer salariés afin de travailler dans une équipe. Certains peuvent même être recrutés par une grande firme : un média majeur, un grande banque, le gouvernement, une fédération professionnelle etc… Mais touts ces types d’emplois sont d’une raretés incontournables, d’où l’intérêt de porter plusieurs casquettes c’est à dire, détenir plusieurs compétences numériques complémentaires.

De nombreuses évolutions possibles

Puisque le Web Design est une réelle profession spécialisée. Le Web Design évolue avec d’autres métiers assez proches de lui qui peuvent ainsi constituer des pistes d’évolution. Le Web Designer est proche de l’ergonome. Il tente aussi de se spécialiser dans l’expérience utilisateur (UX/UI Design), qui cherche à offrir une navigation simple et fluide sur un site ou une application mobile.

Dans les grosses boîtes ou agences, ces deux facettes de la conception sont des métiers distincts. Mais dans les plus petites agences, on demande souvent au Web Designer d’avoir aussi l’oeil sur l’ergonomie du site.

Le Web Designer travaille aussi de près avec l’intégrateur Web, s’il ne l’est pas lui-même, qui va « coder », c’est-à-dire réaliser techniquement le site Web avec le langage informatique aproprié pour ses fonctionnalités et pour ainsi le mettre en ligne avec tout le visuel créé par le Web Designer. Le graphiste Web qui, lui aussi maîtrise ces langages, aura donc une casquette de plus sur sa tête afin de devenir freelance ou démarrer sa propre agence.

Enfin bref, une panoplie de spécialités s’ouvre devant lui. Il pourra évoluer vers le marketing digital et les métiers de la communication, mais aussi la création d’image 3D, de jeux vidéos ou d’applications mobiles. A moins qu’il soit à l’aise dans la coordination, le management, et évolue vers des postes de chef de projet multimédia.


Quelles formations pour ce métier ?

L’avantage, comme pour tous les « nouveaux » métiers, est que les parcours de formation possibles sont très variée. 

Etudes courtes ou longues ?
On peut devenir Web Designer en faisant des études secondaire, collégiales ou universitaires

Mais on peut aussi se diriger vers ce métier à partir d’un autre domaine en faisant une spécialisation plus courte, par exemple une licence professionnelle d’un an ou même une formation de quelques semaines à quelques mois. Enfin, il existe de plus en plus de formations en ligne…


Y a-t’il des débouchés au rendez-vous ?

La profession offre de nombreuses opportunités, car elle est au carrefour de nombreuses compétences. C’est toutefois une profession « mouvante » qui sera toujours en constante évolution en parrallèle avec tous les supports numériques sur lesquels elle s’applique.Vaut mieux être « attentif, rapide, ouvert et agile » et prêt à évoluer ou constamment se remettre en question.

En revanche pour les jeunes qui se lancent dans le Web Design, les salaires demeurent modestes, du fait de la concurrence entre agences et entre indépendants. Si vous désirez « embellir » votre profil et accéder à des postes mieux payés, on attendra de vous des compétences complémentaires en gestion de projet, direction artistique ou… en développement informatique.


Vous avez des questions ou des commentaires sur ce sujet ?

Laissez-nous vos commentaires ci-dessous.

Web Designer : 7 vérifications avant de livrer un site

Web Designer : 7 vérifications avant de livrer un site 0

Écrit et publié par : Éric St-Gelais.
Sources : Éric St -Gelais Web Design & Intégration Multimédia, https://www.aurone.com, https://www.codeur.com
Image à la Une : courtoisie de fotolia

En tant que Web Designer, la compétence repose entièrementment sur la qualité des sites que vous êtes apte à concevoir.

L’analyse et les tests font partie intégrante d’un projet car ce sont eux qui vous permettent de valider que le travail a été bien réalisé.

Voici une liste simple des éléments que vous devez absolument valider avant de livrer.


1. Le design du site Web pour un Web Designer

Afin de vérifier l’excellente qualité du design du site Web, prenez la place du client pour mieux assimiler la façon dont il souhaite que son entreprise soit perçue par les internautes.

Le Design doit être original et adapté pour tous les plateformes, tout en respectant les attentes du propriétaire.

Et même si vous proposez un design original, il est essentiel de respecter certains standards afin de ne pas perturber et faire fuir les futurs utilisateurs :

philosophie design web philosophie de Web Design |

  1. Bien utiliser l’espace disponnible
  2. Laisser des espaces blancs
  3. Éviter les images non pertinentes et le nombres et leur taille
  4. Prohiber tous les couleurs trop contrastées et des types et grosseurs de police frivoles

Lire aussi : Web design : comment garantir l’accessibilité d’un site web ?


2. La qualité de son contenu

De façon général, le contenu proposé doit être :

site Internet - Web-design et contenu

  1. Interactif (pas trop non plus )
  2. Bien lisible et bien écrit
  3. Court, net et précis, compréhensible rapidement

Souvenez-vous aussi que ce site Web sera proposé à différent internautes. Le texte et le contenu doit donc être approprié et pertinent.

Enfin bref, un contenu de bonne qualité passe par un bon français et par le respect des bonnes pratiques d’écriture. Vérifiez les fautes d’orthographe et de grammaire et respectez les règles de ponctuation.

Mon conseil

Afin d’obtenir du contenu de bonne qualité, faites appel aux services d’un rédacteur professionnel .


3. Les fonctionnalités

Alors que vous avez créé un beau site web esthétique, il ne sert à rien si ses fonctionnalités fonctionnent mal ou pas du tout.

Afin de valider la qualité du site Web, garder votre attention sur ses éléments :

  1. Les fichiers CSS et Javascript : assurez-vous qu’ils fonctionnent tous et bien. Corrigz les bugs.
  2. Les formulaires : effectuez plusieurs tests afin d’être certain que ces formulaires fonctionnent bien
  3. Les liens : validez que tous les liens fonctionnent bien (liens internes, externes, les menus, lien, like,vers les médias sociaux, etc.)
  4. La zone de connexion :  les abonnés, les utilisateurs, les clients et vos employés doivent pouvoir se connecter ou s’inscrire facilement sans aucun problème

Pour un site de commerce électronique, plusieurs autres éléments doivent être revisés, principalement :

  1. La possibilité d’ajouter ou supprimer un élément au panier
  2. La possibilité de s’inscrire ou de se connecter à son compte
  3. Le calcul des transactions

4. Le temps de chargement

Le temps de chargement du site est l’ultime but à atteindre pour l’expérience utilisateur et le référencement.

Afin que votre site Internet soit plus performant :

  1. Minimisez le poids des images
  2. Compressez vos fichiers statiques (html, css, javascript, etc.)
  3. Mettez en cache des ressources si nécessaire
  4. Validez la configuration du serveur (hébergeur) et la version PHP de la base de données

Vous pouvez utiliser cet outil gratuit Google PageSpeed Insights afin de tester la vitesse et le temps de chargement de votre site Web et connaître ses problèmes majeurs.


5. L’optimisation SEO (Search Engine Optimisation)

Même si le client ne vous l’a pas officiellement demandé, le site Web que je développe se doit d’être minutieusement optimisé pour le référencement naturel.

seo-search-engine-optimisation

J’ai déjà publié plusieurs textes sur le sujet  SEO dans lesquels vous trouverez de nombreux astuces afin de vous assurer que votre site Web est bien optimisé pour les moteurs de recherche.

Les incontournables :

  1. Les textes doivent être hiérarchisés avec des balises Hn (HTML)
  2. Chaque page doit contenir des balises Title et méta description uniques (HTML)
  3. Le maillage interne doit être soigné (Rédaction)
  4. Des mots-clés doivent être utilisés (moteurs de recherche)

** N’oubliez pas de produire un sitemap afin de le soumettre à Google. **


6. La sécurité de vos données

C’est la préoccupation principale, le site doit être sécurisé et protégé contre les éventuels piratages et autres types d’attaque.

La première chose à faire est de placer un système de sauvegarde des données (Base de données PHP). N’oubliez pas de tester la restauration !

Par la suite, protégez les dossiers les plus sensibles avec un .htaccess et mettez en place une connexion cryptée afin d’éviter que les données soient interceptées.

Il est aussi conseillé de réduire l’accès à l’interface d’administration seulement aux personnes habilitées pour cela.


7. La compatibilité entre les différents navigateurs

navigateurs populaire

Ce ne sont pas tous les internautes qui utilisent Google Chrome pour naviguer sur  le Web.

Alors, il est important de valider que votre site Internet s’affiche bien sur les autres navigateurs populaires, et ce, dans plusieurs versions.

Vérifiez par la même occasion que votre site est bien responsive et que l’affichage est correcte selon différentes résolutions d’écrans.


Enfin bref

Cette petite liste simple n’est bien entendu pas exhaustive. Alors, j’ai passé en revue, les principaux éléments qui se doivent d’être validés, mais il y a aussi de nombreux autres paramètres qui doivent regarder afin de vous assurer de la bonne qualité du site Web.


N’hésitez donc pas à compléter notre article avec vos propres conseils en commentaires 🙂

Vous avez des questions ou des commentaires sur ce sujet ?

Laissez-nous vos commentaires ci-dessous.


Les tests automatisés :  vos avantages de les utiliser

Les tests automatisés : vos avantages de les utiliser 0

Écrit et publié par : Éric St-Gelais.
Sources : Éric St -Gelais Web Design & Intégration Multimédia, www.aurone.com
Image à la Une : courtoisie de www.aurone.com

Depuis l’invention des boutons à 4 trous, la planète Web a compris la valeur des tests automatisés. Vous pouvez maintenant vous asseoir et regarder le travail se faire, sans arrêt et efficacement. Les test automatisés n’ont pas de coût, ils peuvent sauver votre réputation, vous faire gagner beaucoup de temps et d’argent et vous permettre de faire ce que vous ne pouviez faire autrefois. C’est le cas avec les tests automatisés dans le développement de site Internet. Lisez la suite pour découvrir comment l’automatisation des tests peut améliorer considérablement l’efficacité de vos tests sur des projets Web.


Les tests automatisés dans le développement Web

Même dans le code des développeurs du monde les plus en vue, des bugs, imperfections peuvent s’y retrouver. C’est pour cela que l’assurance qualité est depuis toujours une obligation pour votre projet. Afin d’épurer le processus à la bonne performance , l’intelligence humaine a créé des tests automatisés. Regardons de plus près  quelques-uns de leurs grands avantages.


Obtenir une vitesse incroyable

test-débit

Ces tests automatisés font des merveilles en vérifiant chaque octet de votre projet avec la rapidité de l’éclair. Dans plusieurs cas, il faudrait un moine et toute une éternité afin de valider les mêmes aspects du site manuellement (si ce n’est carrément impossible de le faire).


Réutilisable

Une fois écrit par un ingénieur QA, les tests peuvent être utilisés encore et encore, à l’infini. Les mêmes modules peuvent être réutilisés pour d’autres tests sur le projet.


C’est une excellente couverture

Par l’automatisation, vous pouvez rapidement couvrir un grand nombre de variantes de cas de test. Cela inclut l’interaction avec plusieurs systèmes d’exploitation, navigateurs, appareils mobiles, résolutions d’écran, vitesses de connexions, etc., ainsi que divers scénarios de comportement d’utilisateur, et bien plus encore.


Autosuffisance

Les tests automatisés peuvent être exécutés en tout temps soit 24 heures sur 24 et 7 jours par semaine, sans aucun contrôle et surveillance, puis obtenir facilement tous les résultats des tests automatisés.


ob_435ac7_bugs2

Détectez les bugs en temps opportun

La possibilité de pouvoir détecter rapidement les bugs pendant le développement n’a pas de prix. Les concepteurs  peuvent agir rapidement et immédiatement, ce qui rend les retouches plus efficaces, plus rapides et beaucoup moins onéreuses.


C’est de la haute précision moins l’erreur humaine

L’automatisation fait un travail rigoureux et précis. Elle n’a pas les yeux fatigués, pas de manque de concentration (24h / 24, vous vous souvenez ?). Donc, ils ne peuvent pas négliger le moindre détail. Aucun travail manuel à répétition grâce aux tests automatisés. Il n’y a aucune de monotonie.


Validation de la capacité de votre site Internet

Avec les tests automatisés, vous regardez la résilience de votre site Web vis-à- vis une armée virtuelle d’innombrable internautes actifs simultanément sur votre site Web. Le test manuel ne peut faire cela.


Obtenez facilement des rapports pratiques

Vous obtiendrez des résultats de tests prêts qui montrent précisément tous les tests effectués et les bugs trouvés. Parmi les autres avantages, il est facile pour les ingénieurs en automatisation de poursuivre le travail de leurs collègues.


Quand les tests automatisés se montrent particulièrement utiles ?

Il est facile maintenant de couvrir presque toutes les facettes du fonctionnement de votre site Internet avec ces tests automatisés. Néanmoins, les plus importants sont généralement sélectionnés. Ainsi, plus le projet est gros, plus les tests automatisés sont un véritable bijou et une aide précieuse. L’automatisation est très utile pour les tests de régression (pour voir si tout va bien après quelques modifications et que d’anciens bugs ne sont pas apparus), pour tester différents types de plateformes et différentes configurations, les tests fonctionnels, les tests de charge, les tests sur mobiles, etc.


Les tests automatisés et les tests manuels : Des amis et non des rivaux

Les tests automatisés ne remplaceront jamais les tests manuels, ils ne sont qu’une aide précieuse. Dans plusieurs aspects de l’interaction de les usagers avec votre site Internet ou votre application mobile (position des boutons, actions simples de l’utilisateur comme la connexion,contact etc.). Les yeux et les mains demeurent un «outil» inégalé selon des proportions qui conviennent le mieux à votre projet.


Quelques outils de test automatisés

Mes outils de tests automatisés sont Jenkins + Selenium, ainsi que d’autres tests de compatibilité entre les navigateurs et les multis-plateformes avec BrowserStack . Il prend en charge aussi les tests automatisés. D’autres  test d’automatisation incluent Behat, Behave, PyTest, Locust, Apache JMeter, Appium, et bien d’autres. Le choix d’outil dépend du test désiré et de ses propres particularités. Chaque projet est unique, il convient donc de choisir le ou les bon(s) outil(s).


Enfin bref…

Avec les tests automatisés bien mis en place sur une plateforme, votre avenir s’annonce prometteur pour votre site Web. Votre équipe de gestion du site consacrera son temps à des tâches plus « intelligentes » ou à améliorer le système que à exécuter des tests longs et fastidieux. Automatiser vos tests de qualité, permettra aussi de passer plus de temps à faire un meilleur développement de vos affaires qu’à le maintenir le site Web bien en vie et fonctionnel.


Vous avez des questions ou des commentaires sur ce sujet ?

Laissez-nous vos commentaires ci-dessous.

Images site Web : comment les optimiser

Images site Web : comment les optimiser 0

Écrit et publié par : Éric St-Gelais

Source: https://www.aurone.com , Google Analytics,

Image  à la Une: https://www.aurone.com


Vous ne désirez pas que Google boude votre site à cause de la taille de vos images ? Heureusement, vous pouvez réduire la taille de vos images afin d’améliorer la vitesse de votre site , mais le hic avec le formatage est que les changements réduisent souvent leur qualité. Il existe donc des astuces qui vous permettent de diminuer le poids du fichier tout en gardant leur qualité pour les afficher avec fierté. Regardons donc comment travailler vos images sans les rendre mauvaises ​​, ainsi que la méthode et les outils disponibles afin d’optimiser les images pour le Web.


Les grands avantages du formatage des images

moyenne-poids-images-sure-site-web

Moyenne de poids par image sur un site Web

En premier lieu, pourquoi devez-vous diminuer la taille de vos images? Quels  en sont les bénéfices? Il existe des avantages à optimiser vos images. Selon HTTP Archive, en avril 2017, les images représentent en moyenne 66% du poids total en pixel d’une page Web. Alors, quand il s’agit d’optimiser votre site WordPress, les images sont de loin la première étape où  vous devriez commencer! C’est plus important que les scripts et les polices. Et, un bon travail d’optimisation d’image est la chose la plus faciles à vérifier, mais beaucoup de propriétaires de sites ignorent tout cela.

Voici les principaux avantages.

  • Améliorera la vitesse de chargement de votre page. Si votre page prend trop de temps pour charger, les internautes risquent d’attendre et de passer à autre site.
  • Améliore votre référencement et positionnement. Votre site aura un meilleur classement dans les moteurs de recherche. Les gros fichiers ralentissent votre site Web et les moteurs de recherche boudent les sites  trop lents. Google sera susceptible d’explorer et d’indexer vos images plus vite pour la recherche d’images sur Google. Vous feriez le saut de savoir quel est le pourcentage du trafic provenant de la recherche d’images Google? Vous pouvez utiliser Google Analytics afin de valider votre trafic en provenance de recherche Google.
  • Une création de sauvegardes sera plus efficace et rapide
  • Les images plus petites utilisent moins de bande passante. Les réseaux et les navigateurs aimeront cela.
  • Nécessite moins d’espace de stockage sur votre serveur .

Vos images représentent en moyenne 66% du poids total d’une page ! Optimisez les !


Comment faire pour optimiser vos images

Votre principal objectif est de trouver l’équilibre entre la grosseur de vos fichiers et une qualité acceptable. Il y a plusieurs  d’une façons d’effectuer ces optimisations. Les outils les plus populaires permettent de les compresser avant de les placer sur WordPress. Normalement, vous pouvez faire cela dans un outil comme Adobe Photoshop ou Affinity Photo. Vous pouvez aussi utiliser certains plugins.

Les 2 éléments essentiels à considérer sont le format de fichier et le type de compression que vous choisirez. En sélectionnant la bonne combinaison, vous pouvez réduire la taille de vos images jusqu’à 5 X. Vous devrez tester chacune de vos images afin de voir ce qui fonctionne le mieux.


Choisissez le bon format de fichier

Pour commencer à modifier vos images, assurez-vous d’avoir choisi le meilleur type de fichier. Il y a plusieurs types de fichiers disponnibles pour le Web que vous pouvez utiliser:

  • PNG – produit des images de très bonnes qualités, mais ont une taille de fichier plus grande. Il utilise une compression sans perte.
  • JPEG – Le format le plus populaire, utilise une optimisation sans perte. Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille de fichier.
  • GIF – utilise uniquement 256 couleurs. C’est le meilleur choix pour des illustrations ou des images animées. Il utilise uniquement une compression sans perte.

Il y a plusieurs autres formats, tels que JPEG XR et WebP, mais ils ne sont pas toujours pris en charge par les navigateurs. Idéalement, vous devez utiliser JPEG (ou JPG) pour des images avec beaucoup de couleurs et PNG pour des images simples.


Qualité de compression vs taille

Voici ce qui peut survenir dès vous compressez beaucoup trop une image. L’ image #1 utilise un taux de compression beaucoup plus bas, ce qui donne une plus grande qualité visuelle (mais une taille de fichier beaucoup plus grande). La 2 ème image utilise un taux de compression très haute, ce qui donne une image de très mauvaise qualité (mais une plus petite taille de fichier). Remarque: L’image originale intacte pèse 2,06 Mo.


# 1 Basse compression > Haute qualité – 590 kb


# 2 Haute compression > Basse qualité – 68 kb

Commentaire:

Comme vous pouvez le voir, l’image ci-dessus est de 590 Ko. C’est assez grand pour une simple photo! Il est préférable de garder le poids total d’une page Web en dessous de 1 ou 2 Mo de taille. 590 Ko serait 1/4 du poids de la page. La deuxième image semble plus laide, mais ce n’est que 68 Ko. Ce qu’il faut faire c’est trouver un bon équilibre entre la qualité visuelle et la grosseur du fichier.

Voici maintenant l’image à un taux de compression moyen et, la qualité semble assez bien maintenant et la taille du fichier est de seulement 151 Ko, ce qui est très acceptable pour une photo haute résolution. C’est presque 4X plus petit que l’originale avec une faible compression. Les images plus simples comme PNG devraient être inférieures à 100 Ko ou moins pour garantir une meilleure vitesse et performance.


Moyenne compression > Bonne qualité – 151 kb


Optimisation irréversible vs Optimisation réversible (Lossy vs Lossless)

Il est aussi important de savoir qu’il y a 2 types de compression, à perte et sans perte.

  • Compression irréversible (Lossy) – c’est un filtre qui enlève certaines données. Cela va diminuer la qualité de l’image, donc vous devrez faire attention à combien réduire sa taille. La taille du fichier peut être réduite beaucoup. Utilisez des outils tels que Adobe Photoshop, Affinity Photo ou d’autres éditeurs afin d’ajuster les paramètres de qualité. L’exemple utilisé ci-dessus utilise la compression à perte.
  • Compression réversible (lossless) – c’est un filtre qui comprime les données. Cela ne réduit pas la qualité, mais il faudra que les images soient décompressées avant qu’elles ne puissent être rendues. Vous pouvez effectuer une compression sans perte sur votre bureau à l’aide d’outils tels que Photoshop, FileOptimizer ou ImageOptim. Certaines extensions appliqueront la compression Gzip (pour les minimiser).

Expérimentez vos techniques de compression afin de mieux voir ce qui fonctionne pour chaque image ou format. Si vos outils ont l’option, assurez-vous de sauvegarder l’image pour le Web( ADOBE Photoshop, le possède). Ceci est une option et elle vous permettra des ajustements de  bonne qualité pour que vous puissiez effectuer une compression optimale. Vous allez perdre un peu de qualité, alors trouver le meilleur équilibre possible sans rendre les images affreuses.


Les outils et programmes d’optimisation

Il  en existe beaucoup. à la fois des premiums et des gratuits, que vous pouvez utiliser afin d’optimiser vos images. Certains vous donnent les outils pour effectuer vos propres optimisations et d’autres font carrément le travail pour vous. Nous sommes personnellement de grands fans de Photoshop, car il vous offre des fonctionnalités presque complètes

 

Voici des outils et logiciels à considérer:

Redimensionner vos images à l’échelle

Un problème très important en ce qui concerne l’optimisation de l’image est que vous devriez les télécharger directement aux dimensions CSS. Ce n’est pas aussi important que la compression, mais c’est un autre conseil qui garantira que vos images se chargent le plus rapidement possible sur tous les périphériques. Si vous utilisez WordPress comme CMS, il redimensionne vos images dès leurs téléchargement vers la bibliothèque multimédia. Ces commandes peuvent être trouvés sous « Paramètres> Médias« . Vous devrez aussi vous assurer que la largeur maximale est proche de la largeur admise par votre CMS. Ainsi, CSS n’essaiera pas de redimensionner votre image pour l’adapter.

La bibliothèque multimédia WordPress crée avec des scripts des miniatures en fonction de vos ajustements de paramètre. Mais, la version originale est conservée et demeure intacte. Si vous souhaitez redimensionner vos images et économiser de l’espace disque en évitant d’enregistrer l’originale, vous pouvez utiliser un plugin gratuit comme Imsanity.

Imsanity permet de définir une limite logique afin que toutes les images téléchargées soient contraintes à une taille raisonnable qui est quand même plus expansive que les besoins d’un site Web typique. Imsanity s’accroche à WordPress immédiatement après le téléchargement de l’image, mais avant que le traitement WordPress ne se produise. Donc, WordPress se comporte exactement de la même manière, sauf qu’on aura l’impression que l’utilisateur avait redimensionné l’image à une taille raisonnable avant de la télécharger.


Extensions(Plugins) d’optimisation d’image que vous pouvez utiliser avec WordPress

Heureusement, avec WordPress, vous n’avez pas à faire tout le formatage ou la compression manuellement. Vous pouvez utiliser des extensions(plugins) pour effectuer une partie du travail pour vous. Il existe plusieurs extensions(plugins) qui optimiseront automatiquement les fichiers images lorsque vous les téléchargez. Ils optimiseront même les images que vous avez déjà téléchargées. C’est une bonne fonctionnalité pratique – surtout si vous avez déjà un site Web bien imagé. Voici quelques-uns des meilleures extensions(plugins) afin de travailler vos images pour plus de performances.

Il est très important de ne pas compter seulement sur les extensions(plugins) eux-mêmes. Exemple, vous ne devez pas importer des images de 2 Mo dans votre bibliothèque multimédia WordPress. Cela peut réduire rapidement votre espace disque sur les serveurs Web. La meilleure technique est de redimensionner rapidement l’image dans un éditeur de photos au préalable,ensuite la télécharger et l’utiliser  avec l’une des  extensions(plugins) suivantes afin de la réduire encore plus.


Imagify Image Optimizer

Imagify est créé par la même équipe qui a développé WP Rocket, avec laquelle la plupart d’entre vous sont probablement déjà familiers. C’est compatible avec WooCommerce, NextGen Gallery et WP Retina. L’extension(plugin) dispose également d’une fonctionnalité d’optimisation en bloc et vous pouvez choisir entre trois niveaux de compression différents, normaux, agressifs et ultras. Elle a également une fonction de restauration, donc, si vous êtes mécontent de la qualité, vous pouvez faire un clic sur restaurer puis compresser à un niveau qui répond mieux à vos besoins. Il existe une version gratuite et une version premium. Vous êtes limités à un quota de 25 Mo d’images par mois avec un compte gratuit.

Se débarrasser de l’image originale et redimensionner vos images plus grandes peut également être fait avec cette extension(plugin).



ShortPixel Image Optimizer

L’optimiseur d’image ShortPixel est une extension(plugin) gratuite qui compressera 100 images / mois et compressera différents types de fichiers, y compris les fichiers PNG, JPG, GIF, WebP et même PDF. Cette extension vous produira à la fois une compression d’image à perte et sans perte. Elle convertira CMYK en RVB. Il prend vos images et miniatures dans les nuages pour le traitement, puis les ramène à votre site pour remplacer les originaux. Il crée une sauvegarde des fichiers d’origine afin que vous puissiez les restaurer manuellement si vous le souhaitez. Cela convertira les fichiers de la galerie en vrac. Il n’y a pas de limite à la taille du fichier.


Optimus Image Optimizer

Optimus WordPress Image Optimizer utilise une compression sans perte afin d’optimiser vos images. La compression irréversible signifie que vous ne verrez aucune perte de qualité. Elle prend en charge WooCoomerce et multi-site et dispose d’une bonne fonctionnalité d’optimisation en bloc pour ceux qui possèdent déjà de grandes bibliothèques de médias existantes. Il est également compatible avec le plugin WP Retina WordPress. Ce plugin existe en une version gratuite et une premium. Pour la version premium, vous payez une fois par an et vous pouvez compresser une quantité illimitée d’images. Si vous le combinez avec leur plugin Cache Enabler, vous pouvez également plonger dans des images WebP, un nouveau format d’image léger de Google.


WP Smush

WP Smush possède une version gratuite et une version premium. Cette extension(plugin) réduira les informations cachées des images pour réduire la taille sans réduire la qualité. Elle analysera les images et les réduira à mesure que vous les téléchargez sur votre site Web. Il analysera également les images que vous avez déjà téléchargées et réduira celles-ci aussi. Il est apte à compresser jusqu’à 50 fichiers à la fois. Vous pouvez également compresser manuellement si vous le souhaitez. Il supprimera les types d’image JPEG, GIF et PNG. La taille des fichiers est limitée à 1 Mo.


TinyPNG (compression de JPG également)

TinyPNG utilise les services TinyJPG et TinyPNG (le compte gratuit vous permet de comprimer environ 100 images par mois) afin d’optimiser vos images JPG et PNGTinyPNG compressera automatiquement de nouvelles images et compressera en bloc vos images déjà existantes. Il convertira CMYK en RBG pour économiser de l’espace. Alors, il compressera les images JPEG jusqu’à 60% et les images PNG jusqu’à 80% sans perte visible de qualité d’image. Il n’a pas de limite de taille de fichier.


ImageRecycle

L’extension(plugin) ImageRecyle est un optimiseur automatique de fichiers PDF et images. Cette extension(plugin) se concentre non seulement sur la compression d’image mais aussi sur les fichiers PDF. Une de ses fonctionnalités vraiment pratiques est la possibilité de définir la taille de fichier minimale pour la compression. Exemple, si vous avez des images d’une taille de 80 Ko, vous pouvez les exclure automatiquement de la compression. Cela garantit que les images et les fichiers ne sont jamais trop compressés. Il comprend également l’optimisation en bloc et le redimensionnement automatique de l’image.
Remarque: ils ont un essai gratuit de 15 jours, mais c’est un service premium, et les images sont téléchargées et compressées à l’aide de leurs serveurs. Ils ne facturent pas par mois, mais plutôt par le nombre total d’images comprimées, à partir de 10 $ pour 10 000.


Optimisez vos images avec une étude de cas Web

Nous avons décidé de faire notre propre petite étude de cas et quelques tests pour vous démontrer combien l’optimisation de vos images pour le Web peut affecter la vitesse globale de votre site WordPress.

JPG non compressés

Nous avons d’abord téléchargé 6 JPG non compressés, tous ayant un poids de plus de 1 Mo de taille, sur notre site de test. (Voir les JPG non compressés d’origine). Nous avons alors exécuté 5 tests via Pingdom et avons pris la moyenne. Comme vous pouvez le constater à partir du test de vitesse ci-dessous, notre temps de chargement total était de 1,55 secondes et la taille totale de la page était de 14,7 Mo.


JPG compressés

Nous avons ensuite compressé les JPG en utilisant le plugin Imagify WordPress « réglage agressif ». (Voir les nouveaux JPG compressés, qui semblent toujours aussi beau). Nous avons alors exécuté 5 tests via Pingdom et avons pris la moyenne. Comme vous pouvez le voir à partir du test de vitesse ci-dessous, notre temps de chargement total a été réduit à 476 ms et la taille totale de la page a été réduite à 2,9 Mo. Notre temps de chargement total a diminué de 54,88% et la taille de la page a diminué de 80,27%.

Il n’y a pratiquement pas d’autre optimisation que vous puissiez faire sur votre site qui vous permettra de réduire de plus de 50% le temps de chargement. C’est pourquoi l’optimisation de l’image est très importante, le processus ci-dessus a été automatisé par le plugin. C’est une approche pratique pour un site WordPress plus rapide. La seule autre optimisation dramatique que vous pourriez effectuer serait de changer vos hôtes WordPress. Beaucoup de clients qui se déplacent vers Kinsta voient plus de 45% de vitesse augmenter. Imaginez vous déplacer vers Kinsta et optimiser vos images!

En optimisant vos images, qu’il s’agisse d’un outil d’édition de photos ou d’une extension(plugin WordPress), vous pouvez également réparer l’avertissement «Optimiser les images» que vous obtenez dans Google PageSpeed Insights (comme indiqué ci-dessous).


Utilisation du format SVG (graphiques vectoriels adaptables)

Une autre recommandation consiste à utiliser le format SVG à côté de vos autres images. SVG est un format vectoriel évolutif qui fonctionne très bien pour les logos, les icônes, le texte et les images simples. Voici quelques uns des avantages des SVG:

  • Les SVG sont automatiquement évolutifs dans les deux navigateurs et les outils d’édition de photos. Cela fait rêver un web designer graphique!
  • Google indexe les SVG, de la même façon que les PNG et les JPG, de sorte que vous ne devez pas vous soucier du référencement.
  • Les SVG sont traditionnellement (pas toujours) plus petits dans la taille du fichier que les PNG ou les JPG. Cela peut entraîner des temps de chargement plus rapides.

Le blogeur Genki a écrit un excellent article (en anglais) où il compare la taille du SVG vs PNG vs JPEG. Voici quelques exemples de ses tests dans lesquels il a comparé les trois types d’image

JPG (taille optimisée: 81,4 Ko)

PNG (taille optimisée: 85,1 Ko)

SVG (taille optimisée: 6,1 Ko)

Comme vous pouvez le voir ci-dessus, le SVG est une diminution de la taille du fichier de -92,51% par rapport au JPG et de -92,83% par rapport au PNG. 


Les meilleures pratiques

Voici quelques bonnes pratiques en ce qui concerne l’optimisation et l’affichage des images pour le Web:

  • Utilisez des images vectorielles autant que possible avec vos PNG et vos JPG
  • Utilisez un CDN pour diffuser vos images rapidement aux visiteurs à travers le monde
  • Minimisez vos images (JPG, PNG, SVG) avec compression Gzip
  • Supprimez les données d’image inutiles
  • Recadrer l’espace blanc et le recréer en utilisant CSS pour fournir le rembourrage
  • Utilisez les effets CSS3 autant que possible
  • Enregistrez vos images dans les dimensions appropriées au lieu de laisser HTML ou CSS les redimensionner
  • Utilisez les polices Web au lieu de placer du texte dans les images – elles se ressemblent mieux lorsqu’elles sont mises à l’échelle et prennent moins d’espace
  • Utilisez des images tramées uniquement pour des scènes avec beaucoup de formes et de détails
  • Réduisez la profondeur de bit à une palette de couleurs plus petite
  • Utilisez une compression à perte dans la mesure du possible
  • Expérimentez pour trouver les meilleurs paramètres pour chaque format
  • Utilisez GIF si vous avez besoin d’animation (mais compressez vos GIF animés)
  • Utilisez PNG si vous avez besoin de détails élevés et de haute résolution
  • Utiliser JPG pour des photos et des captures d’écran en général
  • Dimensionnez vos images à leur taille d’affichage pour réduire le nombre de pixels
  • Supprimez les métadonnées d’images inutiles
  • Automatisez le processus autant que possible
  • Dans certains cas, vous voudrez peut-être opter pour mettre du lazy load des images pour un rendu de première page plus rapide
  • Enregistrez les images comme « optimisé pour le Web » dans des outils tels que Photoshop

Une fois que vous avez formaté vos images et avez suivi les meilleures pratiques, votre site sera plus apprécié par les moteurs de recherche, les navigateurs et les réseaux, et sera chargé plus rapidement pour les internautes.

Avez-vous formaté vos images pour une meilleure performance?

Les formatez-vous à la main, utilisez-vous un plugin ou les deux?

Existe-t-il un autre outil ou une extension(plugin) que vous recommanderiez?


Avez-vous quelque chose à ajouter? Faites-nous savoir vos techniques et vos meilleures pratiques dans les commentaires ci-dessous!

Les microdonnées HTML5 : comment augmenter son référencement?

Les microdonnées HTML5 : comment augmenter son référencement? 0

Article présenté par : Éric St-Gelais
Source et auteur: http://www.nmediasolutions.com/
Par David Malo, le 8 août 2011.
Image à la Une : Courtoisie de:  http://41mag.fr/



Premièrement, qu’est-ce qu’une microdonnée HTML5?

Vous vous dites peut-être qu’une microdonnée est une très petite donnée… Eh bien, vous avez raison (+1 à vous!) Les microdonnées servent à séparer le contenu des pages Web en plusieurs petits morceaux. Comme vous le savez peut-être déjà aussi, la nouvelle spécification HTML5 introduira plusieurs nouveaux éléments qui serviront à mieux définir la nature du contenu des pages Web. Par exemple, la balise <header> englobera les éléments d’en-tête de la page, la balise <footer>, elle, englobera les éléments de pied de page. Les balises, et bien d’autres, telles <section>, <article> et <aside> ne sont, ni plus, ni moins, que les <div> du futur portant une valeur sémantique.

Le but des métadonnées est de spécifier explicitement aux moteurs de recherche la nature du contenu pour qu’ils puissent utiliser et colliger l’information plus efficacement. Si l’on prend une page de contact avec des métadonnées, un moteur de recherche pourrait l’analyser et en déduire que : cette page concerne une compagnie, que le nom de cette compagnie est Nmédia Solutions et que l’adresse de cette compagnie est le 1047, boulevard Mercure, Drummondville. Ainsi, il sera beaucoup plus facile pour le moteur de recherche de référencer la page et d’en sortir des résultats pertinents en fonction de certains critères de recherche.

Mais… c’est génial David! Alors, comment s’y prend-on pour utiliser les métadonnées?

Eh bien, prenons l’exemple d’une page de profil personnel. En temps normal, toute l’information d’un profil personnel (nom, photo, adresse courriel, position, numéro de téléphone, etc.) est disposée dans un <div> et sous-divisée en titres et en paragraphes. Google n’y voit alors que du texte sans pouvoir distinguer la nature de chacun des contenus. Si en plus il n’y a pas de meta descriptions, Google choisira plus ou moins aléatoirement un titre et un bout de texte pour représenter votre page de profil personnel dans ses résultats. En conséquence, cela donnera un rendu de vos données plus ou moins intéressant et pertinent.

 

Résultat de recherche avant microdonnées

 

La vie serait tellement belle si nous pouvions obtenir, dès le premier coup d’œil, toutes les informations pertinentes de cette merveilleuse personne qu’est Louis-Philippe (notre super président)! Par exemple, prenons une structure de base que pourrait contenir cette page :

<article>

<h1>Louis-Philippe Baril</h1>

<h2>Président, Nmédia Solutions</h2>

<img src=’images/photoProfil.jpg’ />

<a href=’mailto:test@nmediasolutions.com’>Courriel</a>

<h3>

Adresse :

</h3>

<p>

Drummondville, Québec

</p>

<h3>

Site web :

</h3>

<p>

<a href=’http://www.nmediasolutions.com/’>Nmédia Solutions</a>

</p>

<h3>

Anecdotes :

</h3>

<p>

A joué son hockey mineur de 4 à 8 ans environ avec Steve P – on se connait donc depuis plus de 30 ans, ce qui est plus que l’âge moyen des troupes – ayoye. Meilleur boursier dans les pools de hockey de l’histoire de Nmédia (bien en avant de Ced)

</p>

</article>

Voir la page

 

Avant tout, il faut déclarer le type d’item que contiendra la zone qui nous intéresse et lui fournir une URL qui lui indiquera la définition dudit item et toutes les propriétés s’y rattachant (comme un DTD). En théorie, nous pouvons créer n’importe quel type d’item, mais il faut créer et héberger sa propre page Web de spécifications; ce qui n’est pas la meilleure solution à adopter. Pour traiter les métadonnées, Google utilise un site entièrement dédié aux items des métadonnées. Donc, vaut mieux utiliser des items déjà présents sur data-vocabulary.com.

Dans le présent exemple, la première étape est de dire à notre balise <article>, qui englobe tout notre contenu, ce qu’il y a dans l’article qui traite de cette personne.

<article itemscope itemtype=’http://data-vocabulary.org/Person’>

Ensuite, il s’agit simplement d’associer le contenu de notre article aux propriétés de cet item. Chaque propriété a un nom et une valeur. Ainsi, si le contenu d’une propriété est dans une balise standard tel un <span>, un <h1>, un <div> ou un <p>, on déclare la propriété dans la balise ouvrante et la valeur devient ce qui se retrouvera entre la balise ouvrante et la balise fermante. Dans ce cas-ci, la propriété « name » utilise la valeur « Louis-Philippe Baril ».

<h1 itemprop=’name’>Louis-Philippe Baril</h1>

Cependant, certaines balises, dont les balises autofermantes, fonctionnent différemment et cherchent leur valeur dans un des attributs de la balise. C’est le cas de plusieurs éléments tels que <meta>, <audio>, <img>, <a> et <object>. Alors, si l’on doit déclarer une propriété sur une image, on y va comme suit :

<img src=’images/photoProfil.jpg’ itemprop=’photo’/>

Il est également possible d’avoir un item dans un autre item. Dans le présent cas, nous avons un item « address » à l’intérieur de notre item « person ». Il faut donc penser à déclarer un autre « itemscope » et un autre « itemtype » à notre conteneur qui englobe nos informations d’adresse.

Petit à petit, on divise et subdivise notre contenu jusqu’à ce qu’on ait un bel article plein de métadonnées. Vous vous rappelez notre code de page observé un peu plus tôt? Et bien, le voici maintenant :

<article itemscope itemtype=’http://data-vocabulary.org/Person’>

<h1 itemprop=’name’>Louis-Philippe Baril</h1>

<h2><span itemprop=’title’>Président</span>, <span itemprop=’affiliation’>Nmédia Solutions</span></h2>

<img src=’images/photoProfil.jpg’ itemprop=’photo’ />

<a href=’mailto:test@nmediasolutions.com’ itemprop=’url’>Courriel</a>

<h3>

Adresse :

</h3>

<p itemprop=’address’ itemscope itemtype=’http://data-

– See more at: http://www.nmediasolutions.com/blogue/site-internet/microdonnees-html5/#sthash.uW1gIETL.dpuf

vocabulary.org/Address’>

<span itemprop=’locality’>Drummondville</span>, <span itemprop=’region’>Québec</span>

</p>

<h3>

Site web :

</h3>

<p>

<a href=’http://www.nmediasolutions.com/’ itemprop=’url’>Nmédia Solutions</a>

</p>

<h3>

Anecdotes :

</h3>

<p>

A joué son hockey mineur de 4 à 8 ans environ avec Steve P – on se connait donc depuis plus de 30 ans, ce qui est plus que l’âge moyen des troupes – ayoye. Meilleur boursier dans les pools de hockey de l’histoire de Nmédia (bien en avant de Ced)

</p>

</article>

Voir la page

 

Vous vous rappelez notre résultat de recherche qui ne montrait rien de vraiment intéressant par rapport à notre sujet de recherche? Et bien, voici ce qu’aurait l’air une recherche de page divisée avec des métadonnées.

 

Résultat de recherche avec microdonnées

 

On remarque l’item identifié comme « image » qui apparaît au premier plan ainsi que les informations de l’adresse et le titre du poste occupé. Si vous voulez mon avis, ce résultat est bien plus professionnel et attrayant!

Pour de plus amples informations sur les métadonnées, je vous suggère fortement de consulter ce site : diveintohtml5.org.