- Pourquoi optimiser ses images ?<\/a><\/li>
- Quel format d’image utiliser ?<\/a><\/li>
- Comment optimiser une image pour le web ?<\/a><\/li>
- \u00c0 quelle r\u00e9solution dois-je enregistrer mes visuels ?<\/a><\/li>
- Avec quels outils optimiser une image ?<\/a><\/li><\/ol>\n<\/div><\/div>\n\n\n\n
Pourquoi optimiser ses images ?<\/h2>\n\n\n\n
Vous l\u2019avez s\u00fbrement d\u00e9j\u00e0 constat\u00e9 : certaines pages peuvent mettre longtemps \u00e0 s\u2019afficher. Cela peut \u00eatre d\u00fb \u00e0 la qualit\u00e9 de votre connexion \u00e0 internet (notamment sur r\u00e9seau mobile), \u00e0 la qualit\u00e9 de l\u2019h\u00e9bergement mais \u00e9galement aux poids des \u00e9l\u00e9ments \u00e0 charger.<\/p>\n\n\n\n
Par exemple, une galerie photo de 50 images (non optimis\u00e9es), peut peser plus d\u2019une centaine de Mo (m\u00e9ga-octets) !<\/p>\n\n\n\n
Cons\u00e9quences : <\/h4>\n\n\n\n
- L\u2019internaute va devoir attendre plus longtemps que la page se charge<\/li>
- Les moteurs de recherche vont p\u00e9naliser le r\u00e9f\u00e9rencement du site (la vitesse de chargement \u00e9tant l\u2019un des crit\u00e8res pour un bon r\u00e9f\u00e9rencement<\/a>)<\/li>
- Si l\u2019internaute consulte la page depuis son smartphone, il va utiliser plus rapidement son cr\u00e9dit de donn\u00e9es mobiles<\/li>
- Vous allez plus rapidement remplir l\u2019espace de stockage de votre h\u00e9bergement web<\/a><\/li><\/ul>\n\n\n\n
Quel format d\u2019image utiliser ?<\/h2>\n\n\n\n
Il existe une multitude de formats, mais peu sont \u00e0 la fois adapt\u00e9s au web ET compatibles avec l\u2019ensemble des navigateurs.<\/p>\n\n\n\n
\nIl vaut mieux utiliser le format\u2026<\/h3>\n\n\n\n
- JPG,<\/strong> si mon image est une photo<\/li>
- GIF anim\u00e9,<\/strong> si mon visuel est une animation<\/li>
- PNG-8,<\/strong> si mon visuel est compos\u00e9 d\u2019aplats simples (logo, graphique, pictogramme\u2026)<\/li>
- PNG-24,<\/strong> si mon visuel contient de la transparence<\/li>
- SVG,<\/strong> si mon visuel est vectoriel (logo, illustration\u2026)<\/li><\/ul>\n<\/div><\/div>\n\n\n\n
Le JPG<\/h3>\n\n\n\n
Avec le JPG, peu de chance de se tromper ! Ce grand classique du web est adapt\u00e9 \u00e0 la plupart des utilisations gr\u00e2ce \u00e0 sa bonne compression.<\/p>\n\n\n\n
Le GIF<\/h3>\n\n\n\n
Le GIF est connu principalement car il permet d\u2019afficher des images anim\u00e9es. Il n\u2019a aujourd\u2019hui d\u2019int\u00e9r\u00eat que cette particularit\u00e9, ce format \u00e9tant limit\u00e9 \u00e0 256 couleurs maximum.<\/p>\n\n\n\n
Le PNG<\/h3>\n\n\n\n
Ce format se d\u00e9cline en deux m\u00e9thodes de compression : le PNG-8 et le PNG-24. L\u2019extension \u00e9tant la m\u00eame (.png).<\/p>\n\n\n\n
Le PNG-8<\/strong> est, comme le GIF, limit\u00e9 \u00e0 256 couleurs. Il b\u00e9n\u00e9ficie en outre d\u2019une meilleure compression que son a\u00een\u00e9 (mais pas de sa capacit\u00e9 d\u2019animation).
Malgr\u00e9 cette limitation colorim\u00e9trique, ce format est bien plus l\u00e9ger qu\u2019un JPG pour certains types d\u2019images ayant peu de couleurs, comme les logos, les graphiques, les pictogrammes\u2026<\/p>\n\n\n\nLe PNG-24<\/strong> a la particularit\u00e9 de pouvoir g\u00e9rer la transparence (chaque pixel peut \u00eatre plus ou moins opaque, et donc r\u00e9v\u00e9ler ce qui sera affich\u00e9 sous l\u2019image).
Contrairement au JPG et au PNG-8, ce format est dit \u00ab\u00a0sans perte\u00a0\u00bb, c\u2019est-\u00e0-dire qu\u2019il ne d\u00e9grade pas la qualit\u00e9 de l\u2019image. Le revers de la m\u00e9daille \u00e9tant qu\u2019il est plus lourd. Il convient donc de ne l\u2019utiliser lorsque cela est n\u00e9cessaire.<\/p>\n\n\n\nLe SVG<\/h3>\n\n\n\n
Ce format est dit \u00ab\u00a0vectoriel\u00a0\u00bb. Comme son nom l\u2019indique, il est compos\u00e9 de vecteurs : le visuel est donc calcul\u00e9, contrairement aux images dites matricielles (comme le JPG ou le PNG par exemple) qui ont une taille en pixel d\u00e9finie.
L\u2019avantage du format vectoriel est qu\u2019il peut \u00eatre redimensionn\u00e9 \u00e0 l\u2019infini sans perte de qualit\u00e9, l\u00e0 o\u00f9 une image classique va \u00eatre \u00ab\u00a0pixelis\u00e9e\u00a0\u00bb si on l\u2019agrandie. Le SVG pr\u00e9sente aussi l\u2019avantage d\u2019\u00eatre l\u00e9ger.
Enfin, le SVG peut aussi \u00eatre anim\u00e9, m\u00eame si cela s\u2019av\u00e8re \u00eatre plus complexe \u00e0 r\u00e9aliser qu\u2019avec le format GIF, car il faut savoir coder.<\/p>\n\n\n\nLes \u00ab nouveaux formats \u00bb WebP, HEIF\/HEIC\u2026<\/h3>\n\n\n\n
De nouveaux formats d’images, plus performants, ont fait leur apparition ces derni\u00e8res ann\u00e9es. Int\u00e9ressants \u00ab sur le papier<\/em> \u00bb, ils ne sont malheureusement pas encore pleinement compatibles avec les diff\u00e9rents navigateurs.<\/a> <\/p>\n\n\n\n
<\/div>\n\n\n\n![\"Image](\"https:\/\/frsh.fr\/wp-content\/uploads\/2020\/10\/jpg-png-gif-svg.png\")
Source : modomodoagency.com\/2019\/01\/22\/jpg-vs-png-vs-gif-vs-svg-image-format-guide\/<\/figcaption><\/figure>\n\n\n\n <\/div>\n\n\n\nCaract\u00e9ristiques des formats d’images :<\/h3>\n\n\n\n
- GIF anim\u00e9,<\/strong> si mon visuel est une animation<\/li>
- Quel format d’image utiliser ?<\/a><\/li>