Optimisation des images pour les sites Web
En ce qui concerne l’affichage des images sur le Web, le bon chemin est plutôt étroit. Si les images sont trop volumineuses ou de trop haute résolution, votre site internet ralentira. Si les images sont trop petites ou de trop basse résolution, vous allez mécontenter vos utilisateurs. Une bonne expérience utilisateur signifie avant toute chose un chargement rapide du site avec des images clairement perceptibles et ayant un sens.
Pourquoi optimiser les images?
L’optimisation des images est un sujet que tout détenteur et concepteur de site internet se doit d’aborder. Bien des images que l’on trouve sur le net sont énormes. Or, de grandes images occupent beaucoup d’espace sur une page Web (en termes d’octets, non seulement d’espace). En faisant en sorte de minimiser la taille des images, le concepteur du site internet garantit que les temps de chargement soient aussi rapides qu’ils peuvent l’être. Un temps de chargement plus rapide signifie une meilleure expérience utilisateur.
Optimisation des images d’un site web : relation entre taux abandon et temps de chargement
La taille de l’image n’est qu’une partie du problème. En effet, qu’entend-on exactement par «optimiser» ? Posez-vous quelques questions et auditez l’utilisation des images sur votre site :
- Cette image est-elle vraiment nécessaire? L’idée ici est de ne pas inclure d’images si elles ne renforcent pas vraiment les objectifs de communication ou d’interaction du site.
- Est-ce que j’utilise le bon format pour mes images? Parfois, un élément typographique bien placé ou un effet CSS peut faire l’affaire et éviter l’utilisation d’une image plus lourde.
- Mes images seront-elles toujours affichées correctement sur différentes résolutions d’écran? Ce n’est pas toujours aussi simple que de sauvegarder un fichier plus petit. Assurez-vous de considérer tous les écrans, de puis les moniteurs vieillots jusqu’aux écrans 4K plus récents.
Optimisation des images d’un site web exemple de résolutions différentes
N’ajoutez pas d’images uniquement pour le plaisir d’afficher de belles images. Les images, tout comme les mots, doivent rester intentionnelles et doivent jouer un rôle dans l’expérience globale et le message de tout site Web ou produit numérique.
Ressources pour l’optimisation des images
Voici quelques excellentes ressources pour ceux qui souhaitent réfléchir à l’expérience utilisateur en considérant l’optimisation des images.
- Google propose un excellent guide dans son recueil Web Fundamentals
- Shopify propose une liste sur l’optimisation de l’image, comprenant des conseils en accessibilité
- La base de connaissance Wix vous fournira de plus les données techniques nécessaires
- Optimizilla est un outil en ligne pour l’optimisation des images
Si vous souhaitez optimiser vos images ou plus généralement votre site web, vous pouvez :
Et enfin, si vous aussi vous avez des trucs, des astuces ou des ressources pertinentes pour l’optimisation des images, vous pouvez les partager en commentaires !
Illustration inspirée par Freepik
Un site web responsive pour votre entreprise
Quand les normes de conception web changent, nos sites font de même. Il n’y a pas de secret. Pour créer des sites internet réussis, nous devons rester à la page. Nous devons tout mettre en oeuvre non seulement pour se conformer aux dernières normes de conception de sites web, mais aussi pour nous assurer que nos sites web sont taillés pour le public qui va les visiter. Voilà pourquoi aujourd’hui nous parlons de site web responsive.
Qu’est-ce qu’un site web responsive ?
Le Responsive Web Design, c’est la conception de site web responsive, c’est à dire adaptatif. C’est un terme qui a récemment touché un vaste public grâce aux récents changements annoncés par Google, et connus sous le nom de #mobilegeddon, à travers les médias sociaux. Essentiellement, le Responsive Web Design signifie qu’un site réagit à son environnement. Par exemple à l’appareil sur lequel il est visualisé et à la taille de l’écran. Un site web responsive fournit aux utilisateurs mobiles la facilité d’utilisation d’une application au sein de leur navigateur internet, en affichant des menus de navigation alternatifs adaptés à leur appareil.
Un site web responsive s’adapte par la détection de la taille de votre navigateur/écran et par un changement de style. Ainsi, il s’assure que son design reste le meilleur possible. Le contenu s’adapte ensuite entièrement à l’intérieur de limites spécifiques, le style de certains éléments pouvant être complètement modifié.
Pourquoi votre site d’entreprise doit-il être un site web responsive ?
Si vous souhaitez cibler le plus grand public possible via votre site web, alors vous avez besoin d’un site web responsive. Les changements annoncés par Google signifie que maintenant les sites web non-responsives sont pénalisés si l’internaute effectue sa recherche depuis un appareil mobile. Des milliers d’entreprises ont constaté des chutes dans leur trafic en raison de la sortie de leur site web de la première page jusqu’à parfois la page 8… Comme plus de 95% de l’ensemble des clics se produisent sur la première page de résultats de Google, cela est forcément critique.
Il est devenu essentiel pour toute entreprise promouvant son site internet de l’optimiser afin qu’il fonctionne sur plusieurs types d’appareils. Si les clients naviguent à la volée en utilisant leurs téléphones ou leurs tablettes, ils attendent une expérience conviviale. S’ils ne l’obtiennent pas, ou si la mise en page du site est source de confusion, ils sont susceptibles de changer de crèmerie.
Êtes-vous actuellement en train de perdre des clients potentiels à cause d’un site trop ancien ?
Conception WebSite est spécialisé dans la production de site internet responsive. Nos clients peuvent dormir tranquilles en sachant que leurs sites seront facilement visibles sur tous les appareils, ordinateurs de bureau, portables, mobiles, tablettes, TVs, et maximisent ainsi les ventes.
Crédit image d’en-tête : Designed by Freepik
Créer simplement un SVG avec Illustrator
Dessiner un SVG avec Illustrator, troisième article de notre série sur le SVG… après avoir vu les bases du SVG, puis appréhender la manière de coder ce format, nous vous présentons aujourd’hui comment créer bien plus simplement un dessin SVG avec Illustrator.
Les formes de base en SVG
Comme nous l’avons vu dans l’article précédent de cette série consacrée au format vectoriel SVG (Scalable Vector Graphics), ce langage basé XML décrit des graphiques vectoriels à deux dimensions.
S’il est bien plus simple d’utiliser un logiciel de dessin plutôt que de coder soi-même, nous allons quand même nous intéresser aujourd’hui à quelques formes de base en SVG, histoire de mettre notre nez dans le moteur et de voir un peu à quoi ça ressemble !
HTML5 – Rich Media (1ere partie) : Canvas
Dans la courte mais déjà si riche histoire du web, certaines évolutions ont été des étapes marquantes. L’introduction de la balise <img> fut une innovation majeure dans la perception du rendu ; par la suite, celle du JavaScript, puis d’Ajax apportèrent le dynamisme qui lui manquait.
S’il est possible de faire énormément de choses en combinant HTML, CSS & JavaScript, il reste néanmoins des trous dans la raquette : la publication de contenus audio et vidéo requiert l’utilisation de plugins comme Flash ou SilverLight.
Il est donc possible de tout faire, finalement ? Magnifique ! Oui et non, car Flash et SilverLight sont des outils sous contrôles de sociétés mercantiles.
Aujourd’hui, HTML5 propose de combler l’espace vacant via des éléments dits ‘Rich Media’.
Dans cette première partie, consacrée à ces éléments, nous allons détailler l’élément canvas.
Lire la suite
