{"id":17252,"date":"2019-01-18T07:12:51","date_gmt":"2019-01-18T06:12:51","guid":{"rendered":"https:\/\/academy.visiplus.com\/blog\/?p=17252"},"modified":"2019-01-14T14:22:28","modified_gmt":"2019-01-14T13:22:28","slug":"comment-optimiser-ses-images-pour-le-web-en-3-clics","status":"publish","type":"post","link":"https:\/\/academy.visiplus.com\/blog\/articles-invites\/comment-optimiser-ses-images-pour-le-web-en-3-clics-2019-01-18","title":{"rendered":"Comment optimiser ses images pour le web en 3 clics"},"content":{"rendered":"<p dir=\"ltr\">Optimiser les images de son blog, de son site ou de son e-commerce est aujourd&rsquo;hui une obligation. Les images doivent \u00eatre qualifi\u00e9, mais surtout se charger toujours plus rapidement.<br \/>\nAlors, comment trouver la bonne image, la mettre \u00e0 la bonne taille et surtout au bon poids ?<\/p>\n<blockquote><p>53% des internautes abandonnent quand le temps de chargement d\u00e9passe 3 secondes !<\/p><\/blockquote>\n<p dir=\"ltr\">C\u2019est cruel, mais c\u2019est comme \u00e7a, l\u2019internaute n\u2019est pas patient, 20 secondes d\u2019attente et l&rsquo;on a tous l\u2019impression que cela dure une heure !<br \/>\nCependant, il existe de nombreuses m\u00e9thodes pour acc\u00e9l\u00e9rer l\u2019affichage de son site. Ce sont souvent des techniques assez complexes demandant une expertise externe et pas mal de temps.<br \/>\nToutefois, en appliquant quelques bonnes pratiques simples, facilement accessibles et ne n\u00e9cessitant aucune comp\u00e9tence technique, on peut optimiser les images de son site et acc\u00e9l\u00e9rer son affichage.<\/p>\n<h2 dir=\"ltr\">1 &#8211; Choisir une bonne image<\/h2>\n<p dir=\"ltr\">En effet, choisir une image d\u2019illustration ne devrait jamais \u00eatre un probl\u00e8me.\u00a0Il existe de nombreuses fa\u00e7ons de r\u00e9cup\u00e9rer des images libres de droits de qualit\u00e9s.<br \/>\nATTENTION, v\u00e9rifier toujours que c\u2019est le cas. V\u00e9rifiez aussi que celle-ci est utilisable \u00e0 des fins commerciales.<\/p>\n<p dir=\"ltr\">\u00c0 titre d&rsquo;exemples, on peut citer :<\/p>\n<ul>\n<li><a href=\"https:\/\/pixabay.com\/fr\/\" target=\"_blank\">Pixabay<\/a><\/li>\n<li><a href=\"https:\/\/burst.shopify.com\/\" target=\"_blank\">Burst<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\">Unsplash<\/a><\/li>\n<\/ul>\n<p dir=\"ltr\">Unsplash a clairement ma pr\u00e9f\u00e9rence. En effet, il ne demande pas d\u2019enregistrement, sa base de photos est gigantesque, elle est enrichie tous les 10 jours et les photos sont super canon !<br \/>\nUne fois l\u2019image de votre choix t\u00e9l\u00e9charg\u00e9 sur votre poste il est temps de passer \u00e0 l\u2019\u00e9tape 2.<\/p>\n<h2 dir=\"ltr\">2 &#8211; Mettre l\u2019image \u00e0 la bonne taille et compression<\/h2>\n<p dir=\"ltr\">Avec l\u2019av\u00e8nement du mobile, il n\u2019est plus indispensable de publier des images gigantesques.<br \/>\nLimitez-vous \u00e0 la taille max de votre blog entre 600 \u00e0 800 px max, cependant, ne d\u00e9passez pas 1200 px, cela ne sert \u00e0 rien sur mobile et la majorit\u00e9 de vos lecteurs est sur mobile.<br \/>\nUne fois que vous avez d\u00e9termin\u00e9 qu\u2019elle est votre taille id\u00e9ale, direction <a href=\"https:\/\/squoosh.app\/\" target=\"_blank\">Squoosh<\/a>, le meilleur outil de compression du moment.<br \/>\nImportez votre image.<\/p>\n<h6 dir=\"ltr\"><img loading=\"lazy\" decoding=\"async\" alt=\"Comment utiliser Squoosh\" src=\"https:\/\/cafebd.fr\/images\/squoosh.jpg\" width=\"800\" height=\"454\" \/><br \/>\nPhoto by <a href=\"https:\/\/unsplash.com\/photos\/DHdFmjYBDeg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Dmitry Mashkin<\/a> on <a href=\"https:\/\/unsplash.com\/collections\/353844\/work?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/h6>\n<p dir=\"ltr\">Dans le panneau de gauche, cliquez sur resize et choisissez la nouvelle taille.<br \/>\nEn dessous dans Compress, choisissez le format de compression.<br \/>\nAttention, certains formats ne sont pas compatibles avec tous les navigateurs. Dans le doute prenez browser jpeg ou Browser png, en fonction de votre image de d\u00e9part.<br \/>\nEnregistrez votre nouvelle image.<\/p>\n<h2 dir=\"ltr\">3 &#8211; Postez votre image sur votre site<\/h2>\n<p dir=\"ltr\">Et c\u2019est tout !<br \/>\nCependant si vous avez des besoins plus importants, vous pouvez utiliser <a href=\"https:\/\/saerasoft.com\/caesium\/\" target=\"_blank\">caesium<\/a> (uniquement PC) pour faire par exemple de la retouche par lots.<\/p>\n<p>Enfin, si vous connaissez ou utilisez d\u2019autres outils, n&rsquo;h\u00e9sitez pas : partagez-les en commentaires.<\/p>\n<h2>\u00c0 propos : Fr\u00e9d\u00e9ric D\u00e9camp<\/h2>\n<p>Depuis 20 ans, j\u2019exp\u00e9rimente tout ce que l&rsquo;on peut faire avec Internet. J&rsquo;ai cr\u00e9\u00e9e des sites, fait du web marketing, du community management, de l&rsquo;UX et de l&rsquo;UI&#8230; Beaucoup de tout, toujours avec passion. Trouver des r\u00e9ponses simples \u00e0 des probl\u00e9matiques complexes, c&rsquo;est mon job.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Optimiser les images de son blog, de son site ou de son e-commerce est aujourd&rsquo;hui une obligation. Les images doivent \u00eatre qualifi\u00e9, mais surtout se charger toujours plus rapidement. Alors, comment trouver la bonne image,&#8230;<\/p>\n","protected":false},"author":10,"featured_media":17255,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[853],"tags":[],"class_list":["post-17252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-invites"],"_links":{"self":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/17252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/comments?post=17252"}],"version-history":[{"count":3,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/17252\/revisions"}],"predecessor-version":[{"id":17254,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/17252\/revisions\/17254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media\/17255"}],"wp:attachment":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media?parent=17252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/categories?post=17252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/tags?post=17252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}