Réduire Le Poids D'un Gif

Téléchargez des photographs compressées séparément ou toutes d'un seul coup, groupées dans une archive ZIP. Useful Online Tools. GIF SVG PDF PNG JPEG. Sélectionner. Effacer. TOUT TELECHARGER. Si vous avez besoin de plus de contrôle sur la qualité de compression JPEG, veuillez utiliser les miniatures pour activer le mode manuel. Convert iPhone photos: HEIC to JPG. Toutes les donnéesRedimensionne, réduit, ou retouche une symbol gif animé. Utilisation conceivable d'effets spéciaux comme le découpage, le morphing, l'accélération, le ralentissement, los angeles rotation, le retournement, le mode négatif, les niveaux de gris.Les photographs trop lourdes augmentent le temps de chargement d'un web site internet. De plus, si vous voulez plaire à Google vous devrez prendre en compte le layout et le poids des fichiers. Heureusement, des tactics existent pour les modifier sans en altérer la qualité. Voici 10 ways pour réduire le poids de vos images.Diminuer los angeles taille/le poids d'un gif [Fermé] Signaler. bloudinette02 - 22 mars 2008 à 15:51 chacha - 2 mars 2012 à 01:43. Bonjour, Je voudrais mettre un gif en symbol de skyblog mais los angeles taille est trop importante. Ils me disent qu'il faut une largeur & longueur inférieure ou égale a 130*130 Mais je ne sais pas comment réduire. Merci d'avance. Afficher l. a. suite . Posez votre question . APour réduire le poids d'un gif animé, il faut en réduire ses dimensions. Réalisation : Clic droit sur le gif ci-dessus puis Enregistrer l'symbol sous Dans PhotoFiltre Studio: Menu Fichier / Ouvrir... ou cliquez sur . Menu Fichier / Propriétés de l'image pour vérifier son poids et sa taille. Pour diminuer le poids, vous allez diminuer la Taille. Menu Image / Taille de l'symbol ou

Retouche Gif-Animé - Reduction image

Réduire le poid d'un gif. Ajouter un message à l. a. discussion. Page : [1] Page 1 sur 1. Anonyme. Anonyme Posté le 30/10/2014 @ 11:05 . Nouvel astucien. Bonjour, Est il conceivable de réduire l. a. taille d'un gif pour qu'il fasse moins de 2 Mo et qu'il passe sur PCA. Merci. Modifié par Anonyme le 30/10/2014 11:24. Publicité. ZenJP. ZenJP. Posté le 30/10/2014 à 11:24 Maître astucien. A lezGIF : un outil pour créer, convertir, couper, modifier ou réduire los angeles taille d'un GIF animé Thomas Coëffé / Publié le 14 décembre 2015 à 12h04, mis à jour le 3 octobre 2016 à 15h01Réduire les dimensions d'une image permet d'en réduire le poids. De manière très significative. Réduire le poids d'une image peut se faire avec l. a. plupart des outils de lecture d'image. L'outil « Aperçu » sur Mac convient tout à fait. Vous pouvez aussi, bien entendu, utiliser des logiciels de photograph, comme Photoshop (voir illustration ci-dessous). Photoshop permet de voir lIl peut être utile de réduire le poids des pictures, afin de les utiliser sur un website Web par exemple. La page Web se fee plus rapidement, et celà économise de los angeles bande passante.Ou par exemple, juste avant l'envoi d'un courrier électronique, vous pouvez compresser l'image, ou juste avant de l. a. partager sur un réseau social.Cet outil ne preserve pas l. a. transparence png & gif lors de los angeles

Retouche Gif-Animé - Reduction image

10 techniques pour réduire le poids de vos images

Réduire le poids d'une image sans altérer la qualité ? C'est conceivable ! Nous avons sélectionné 6 outils pour compresser vos photos, quel que soit leur structure : JPEG, PNG, GIF…La taille du fichier de votre symbol est trop grande ? Utilisez ce service de compression d'symbol pour en réduire la taille. Compressez vos pictures à l'aide d'Img2Go, un outil en ligne, gratuit et facile à utiliser.Si vous avez des photographs qui prennent beaucoup de position sur le disque, vous pouvez réduire cette profession, sans changer los angeles taille des images, en les compressant. Le structure JPG fournit le meilleur taux de compression. Ce layout offre plusieurs taux de compression et, si votre symbol est déjà en JPG, vous pouvez peut-être encore utiliser un taux de compression plus necessary. Mais méfiez-voRéduire taille et poids d'un Gif Animé avec Gimp. Publié le 21/08/2015 à 11:forty four par lemontageenimage Tags : tuto gimp reduire poid. Petit tuto remark faire. J'aime 7. En soumettant ce formulaire, j'autorise le website centerblog.web à diffuser mon commentaire sur ce weblog sans limitation de durée. Commentaires (7)VideoSmaller est un service gratuit qui vous permet de réduire los angeles taille d'un fichier vidéo en ligne, de compresser la taille du fichier vidéo sans perte de qualité. Réduisez los angeles taille d'un fichier vidéo et rendez ce fichier vidéo moins volumineux. Compressez des vidéos MP4 capturées avec votre appareil Android ou iPhone. Il suffit de sélectionner le fichier vidéo, puis de cliquer

choix du format, compression et bonnes pratiques

Les images sont les éléments qui alourdissent le plus le poids des pages internet. Pourtant, les images sont indispensables, pour mettre en valeur vos articles ou vos produits (si vous êtes e-commerçant). Si vous souhaitez améliorer l. a. efficiency et la vitesse de chargement de votre site web, vous devez avoir une priorité : réduire le poids de vos pictures et le nombre de requêtes HTTP qui leur sont associées. Ceci inclut aussi bien les images intégrées dans vos contenus que les pictures qui font partie du design de votre site web (logo, icônes, etc.).

Cet article est consacré à l’optimisation des pictures pour le web. Nous l’avons divisé en plusieurs events. Dans un premier temps, nous reviendrons sur les trois principaux codecs d’pictures sur le web : le JPEG, le GIF et le PNG. Quelles sont les caractéristiques de chacun de ces formats ? Quand privilégier l’un plutôt que l’autre ? Quelles sont les contraintes associées à chaque format ? Nous répondons à toutes ces questions.

Nous donnons ensuite trois conseils pour enregistrer vos photographs pour le internet et réduire leur poids et optimiser les performances de votre website web (du point de vue de l. a. vitesse de chargement). Enfin, nous abordons brièvement quelques tactics permettant de réduire le nombre de requêtes HTTP liées aux photographs lors du chargement de vos pages web (sprites, CSS3, Data URIs).

Prêt à optimiser vos photographs pour le internet ?

Vous êtes à los angeles recherche de nouvelles banques d’images pour améliorer les visuels de votre web site internet ? Nous vous invitons à découvrir notre Top 10 des banques d’photos et de websites de photos.

Choisir le bon structure pour vos photos : JPEG ou GIF ou PNG ?

Il existe trois principaux formats d’images sur web : le layout JPEG, le structure GIF et le format PNG. Ce sont les trois seuls formats qui s’affichent correctement sur tous les navigateurs. Nous allons vous présenter les principales forces et faiblesses de chacun de ces codecs, leur contexte d’utilisation, des conseils pour bien les utiliser et la manière d’optimiser vos pictures sur ces différents formats.

Format JPEG (haute qualité, peu compressible)

Le format JPEG a été créé en 1986, ce qui en fait le layout le plus ancien. Ce layout est idéal pour les photographies (c’est le layout utilisé par los angeles plupart des appareils pictures numériques) et plus généralement pour les pictures utilisant un spectre de couleurs et de contrastes très massive (plus de 16 millions de couleurs gérées). Par contre, la compression d’un JPEG entraîne une déperdition d’informations (contrairement au format PNG). Quand une image JPEG est de faible qualité, automotive trop compressée, ça se voit (image pixelisée et floue). Le format JPEG perd sa qualité assez rapidement dans los angeles compression. D’ailleurs, l’algorithme utilisé pour définir les informations à supprimer en cas de compression n’est pas très performant. Les informations supprimées sont souvent sélectionnées dans les zones de faible contraste de l’picture. Si votre image contient des différences de contrastes importantes d’un pixel à l’autre, le rendu sera médiocre : certaines zones seront conservées intactes dans los angeles compression, et d’autres auront subi une perte d’informations très visual dans ses conséquences. Ce qui, pour le coup, créer un contraste et des effets non voulus. Plus vos photographs contiennent des couleurs et des couleurs distinctes, moins le poids du JPEG est compressible.

Malgré ces défauts, le JPEG reste le structure phare du web. Notamment parce qu’il permet un rendu très satisfaisant des images de haute qualité et qu’il offre une densité d’informations supérieure aux autres formats. Concrètement, vous aurez plus d’informations dans un JPEG de 500ko que dans un PNG de 500 ko. Cette densité d’information permet d’obtenir des photographs riches visuellement et très qualitatives pour un poids optimisés.

L’optimisation des images de votre website internet est l’une des principales ways pour réduire le temps de chargement des pages de votre web page. Pour aller plus loin et si votre site est sous WordPress, découvrez 9 tactics pour améliorer la vitesse de chargement de votre site PhrasePress.

Nous vous conseillons d’utiliser l. a. fonction « Enregistrer pour le web » de Photoshop pour tester la différence de qualité entre vos photographs JPEG en fonction de l. a. taille et du niveau de compression choisis. En effet, lorsque vous enregistrez une image sur Photoshop, vous avez le choix entre « Enregistrer sous » et « Enregistrer pour le internet ». Si vous cliquez sur « Enregistrer pour le web », Photoshop vous suggest des fonctionnalités pour optimiser votre image et ajuster la qualité. Une fonction de prévisualisation vous permet de voir tout de suite le résultat de vos optimisations. Le but de los angeles fonction « Enregistrer pour le web » est de réussir à allier bonne qualité et poids réduit.

Il faut savoir aussi que l. a. plupart des JPEG sur internet sont des JPEG progressif. Cela signifie que l’picture start à s’afficher en mauvaise qualité sur la page avant d’apparaître dans son état standard. Cela permet à los angeles page de se charger plus vite. Tous les navigateurs supportent les JPEG progressifs, mais sur certains le délai d’affichage des pictures est assez lengthy. Le rendu ou non du JPEG progressif dépend aussi des appareils de lecture (et de leur processeur). Par exemple, les JPEG progressif ne fonctionnent pas (jusqu’à présent) sur Mobile Safari, le navigateur par défaut utilisé pour les iPhones et les iPads. Malgré ces quelques problèmes de prise en fee, le JPEG progressif  reste une bonne manière d’optimiser l’expérience utilisateur et de compresser le JPEG sans perte d’informations.

Vous pouvez convertir vos JPEG classiques en JPEG progressifs directement grâce à l. a. fonction « Enregistrer pour le internet » de Photoshop. Vous pouvez aussi utiliser l’outil Imgopt (à installer) ou l’outil internet Imgonline.

 GIF (photos animées, faible qualité)

Le format GIF permet de réunir plusieurs pictures dans un seul fichier. Le layout GIF a été créé en 1987, un an après le layout JPEG, pour accélérer le transfert d’images dans un contexte de connexions très lentes. Après être tombé en désuétude, le structure GIF est revenu au goût du jour dans les années 2000, grâce à l. a. possibilité de créer des pictures animées. Le format GIF supporte l. a. transparence mais ne gère par contre que 256 couleurs, ce qui limite considérablement l. a. qualité des pictures. Par contre, contrairement aux layout JPEG, le GIF ne perd pas d’informations lors de la compression. Dans quelles circonstances opter pour le layout GIF ? Lorsque, pour une même image, los angeles taille du fichier est moins importante en GIF qu’en PNG-8. Ou bien lorsqu’une animation ne peut par être remplacée par du CSS3.

Lorsque vous créez un GIF, vous avez quelques choices à votre disposition pour mixer los angeles qualité des photos et le poids dufichier. Vous pouvez d’abord utiliser un algorithme de tramage (dither), qui permet d’ajouter plus de couleurs et de contrastes au GIF. L’algorithme analyse les pixels adjacents de différentes couleurs et sélectionne une couleur nouvelle qu’il intègre entre ces pixels adjacents. Vous pouvez ajuster le niveau de tramage sur Photoshop (Enregistrer pour le internet). Le tramage impacte le poids des GIF. En moyenne un GIF qui fait 5 ko avec un tramage de Zero en fera le double avec tramage de 100. Là encore, il faut mixer entre qualité (de l’picture) et légèreté (du fichier). Idem si vous réduisez le nombre de couleurs du GIF, votre fichier s’allégera.

Il faut savoir aussi que les GIF utilisent un algorithme de compression qui supprime les redondances horizontales, et non les redondances verticales. Pour la easy et bonne raison qu’il lit les pixels de manière horizontale, ligne par ligne. Les GIF qui utilisent un dégradé vertical sont pour cette raison beaucoup moins lourds que ceux qui utilisent un dégradé horizontal (de l’ordre de Four fois moins lourds). Nous vous conseillons de faire pivoter votre GIF si vous pouvez pour améliorer la compression et réduire le poids du fichier.

Si une image contient très peu de couleurs et des bordures bien délimitées, le format PNG-Eight est à privilégier au layout GIF. En effet, les PNG utilisent une méthode différente de compression. Faites des exams pour arbitrer entre les deux codecs.

Pour finir sur les GIF : si l’animation est extrêmement rudimentaire, remplacez le GIF par du CSS3 (voir plus bas). Les animations CSS3 sont moins lourdes que les animations GIF et donc meilleures en termes de performance. Là encore, testez les deux codecs pour faire le meilleur choix.

Pour conclure, les GIF, même s’ils sont moins populaires qu’au début des années 2000, restent une possibility intéressante pour les pictures de petite taille n’ayant besoin que d’un spectre de couleurs très limité. Dans le cas contraire, le rendu esthétique sera mauvais et surtout le poids du fichier sera très élevé. Si les GIFs sont en général légers, c’est qu’ils contiennent très peu d’informations. Mais en réalité, le rapport poids / quantité d’informations est beaucoup moins intéressant que celui du JPEG.

Evidemment, le format GIF n’est clairement pas pertinent sur certains sorts d’pictures, comme les photos de vos produits par exemple (si vous êtes e-commerçant). En revanche, pour les trademarks le layout GIF convient tout à fait.

Vous souhaitez proposer votre web site web en plusieurs langues mais vous vous posez des tas de questions sur le comment ? Nous vous invitons à lire notre article « los angeles traduction du website web : coût, choix prestataires et organisation du projet« .

PNG (bonne qualité, compression sans perte)

Le format PNG est le plus récent. Il a émergé au milieu des années 1990, avec pour objectif de remédier aux défauts du format GIF et d’allier les avantages du GIF et du JPEG. Le layout PNG, contrairement au JPEG, permet de compresser une picture sans aucune perte de qualité / d’informations. Sur Photoshop, vous pouvez créer deux sorts d’images PNG : le PNG-Eight et le PNG-24. Chacun de ces deux formats a des avantages et des inconvénients qu’il faut prendre en compte.

Le layout PNG est idéal si vous souhaitez apporter de la transparence dans vos pictures. La transparence correspond à l’opacité de l’picture et permet notamment de bien distinguer les éléments d’arrière-plan de vos pictures. La transparence est importante lorsque par exemple vous intégrer du texte sur vos photos. Le format GIF supporte aussi la transparence, mais au prix d’un alourdissement du fichier. A l. a. différence du GIF, l’algorithme du structure PNG reconnaît les patterns horizontaux en plus des patterns verticaux – ce qui offre une qualité de compression plus élevée.

Quelle est la différence entre le PNG-8 et le PNG-24 ? Le PNG-Eight est celui qui se rapproche le plus du format GIF. Comme lui, il propose une palette de 256 couleurs. Il est donc à utiliser pour les images intégrant peu de couleurs. Pour une même image, la model PNG-Eight sera plus légère que l. a. model GIF. Si vous n’avez pas besoin d’animations, il faut clairement privilégier le PNG-8 au GIF. Le structure PNG-8 est idéal pour les images de kind brand. Les fichiers PNG-Eight sont toujours très légers. Le PNG-24 quant à lui se rapproche sur bien des sides du structure JPEG. Comme lui, il peut supporter plus de Sixteen hundreds of thousands de nuances de couleurs. D’un point de vue strictement esthétique, le rendu sera le même que vous choisissiez du JPEG ou du PNG (avant los angeles compression). Cependant, comme nous l’avons dit précédemment, le PNG ne perd aucunes informations lors de l. a. compression. Ce qui signifie deux choses : la qualité de l’image après compression sera meilleure avec le layout PNG. En revanche, le poids du fichier sera plus lourd (5 à 10 fois plus lourd). Pour réduire le poids du PNG-24, vous devez réduire le nombre couleurs et réduire le bruit. Si vous n’avez pas besoin de transparence pour vos pictures, il est plus judicieux de choisir le JPEG plutôt que le PNG-24.

Vous connaissez maintenant l’essentiel de ce qu’il faut savoir sur les différences entre les trois formats d’photographs stars du internet : JEPG, GIF et PNG.

Vous souhaitez créer ou améliorer le emblem de votre société sans vous ruiner ? Découvrez notre article « Coût de création d’un brand – Zoom sur Four options« .

Enregistrer et compresser vos photos avec soin

Comme vous pouvez vous en douter, plus le fichier d’une picture est lourd, plus le temps de chargement de l’picture est necessary. Quand on connaît les attentes des utilisateurs en matière de vitesse de chargement des pages web, l’enjeu est de poids (c’est le cas de le dire). Pour optimiser vos images pour le web, vous devez en optimiser le poids. Ce qui passe par trois choses :

Réduire les dimensions de l’picture. Enregistrer l’picture « proprement » pour en réduire le poids. Compresser l’picture en utilisant des outils.

Si vous souhaitez moderniser l’apparence et l’ergonomie de votre website e-commerce, lire notre article sur les 8 tendances ergonomie / design sur les websites ecommerce en 2016.

#1 Réduire les dimensions de l’picture

Réduire les dimensions d’une image permet d’en réduire le poids. De manière très significative. Réduire le poids d’une image peut se faire avec los angeles plupart des outils de lecture d’picture. L’outil « Aperçu » sur Mac convient tout à fait. Vous pouvez aussi, bien entendu, utiliser des logiciels de photograph, comme Photoshop (voir representation ci-dessous). Photoshop permet de voir l’image à sa taille réelle et donc d’ajuster les dimensions en vous mettant à los angeles place des internautes qui verront l’picture sur la page internet. Enregistrez l’picture à l. a. taille que vous souhaitez avant de l’importer sur votre CSM. Bien entendu, vous pourrez réduire les dimensions de l’picture directement sur le CMS, mais cela ne réduira pas le poids de l’picture sur votre serveur.

#2 Utiliser los angeles fonction « Enregistrer pour le web » de Photoshop

Nous avons déjà parlé de cette fonction, mais son grand intérêt vaut qu’on y revienne. En choisissant l’possibility « Enregistrer pour le web » au second d’enregistrer votre picture sur votre ordinateur (ou sur votre serveur), vous accédez à une fenêtre d’choices qui vous permet de réduire le poids de l’picture. Cet outil de Photoshop est l’un des seuls à permettre facilement à l. a. fois une réduction de la taille du fichier et l. a. conservation presque intacte de la qualité de l’image. La fonction « Enregistrer sur le web » est out there dans Fichier > Exporter > Enregistrer pour le web. Vous trouverez dans cette fenêtre tout un tas d’choices pour optimiser le poids de vos images, avec possibilité de comparer par juxtaposition la version non optimisée avec une, deux ou trois variations optimisées (onglet « 2 vignettes » ou « Four vignettes ») du point de vue du rendu.

#Three Réduire le poids des photographs (compression)

Il existe quelques outils très pratiques disponibles sur le internet et gratuits pour compresser vos pictures. Ces outils suppriment les données cachées contenues dans vos fichiers d’pictures (les métadonnées, les profils de couleurs…) et qui n’ont aucun affect sur le rendu visuel de l’picture. Nous vous conseillons notamment l’outil Tiny PNG (ou Tiny JPG : c’est los angeles même chose, les deux outils supportent autant le format PNG que le format JPEG). Le fonctionnement de cet outil est très simple : vous uploadez vos photographs sur l’interface, l’outil les compressent en quelques secondes sans motion de votre section. Une fois la compression terminée, vous n’avez plus qu’à télécharger les fichiers. La seule petite limite de cet outil : vous ne pouvez pas uploader plus de 20 photos à los angeles fois. Si vous avez l’intention de compresser 5000 pictures, cela vous prendra plusieurs heures. Par ailleurs, les photos à compresser doivent avoir un poids inférieur à Five MB – ce qui est le cas de l. a. plupart des pictures.

Le petit conseil de La Fabrique du internetSi vous avez un Mac, nous vous recommandons aussi l’outil ImageOptim. Cet outil nécessite un téléchargement sur votre ordinateur, mais n’est pas payant.

Réduire le nombre de requêtes liées à des images

Nous avons insisté dans la partie précédente sur l’importance de réduire la taille des fichiers pictures. Mais ce n’est pas la seule selected que vous devez faire. Il est essential aussi de réduire le nombre de requêtes liées aux photographs pour optimiser la vitesse de chargement des pages de votre web site web. Pour réduire le nombre de requêtes, il y a essentiellement deux tactics. La première consiste à combiner vos photographs dans des « sprites ». La deuxième consiste à remplacer les fichiers photos par du CSS3 ou des données URIs.

Réduire les requêtes grâce aux sprites

Le sprite est une method qui consiste à combiner plusieurs pictures positionnées les unes à côté des autres. Cette technique peut contribuer à augmenter légèrement le poids de vos pages dans los angeles mesure où vous créez du CSS additionnel. Mais les sprites CSS permettent d’augmenter los angeles vitesse de chargement dans la mesure où le nombre de requête est considérablement réduit. Cette methodology est à privilégier pour les petites pictures (gif ou png) et les pictures qui sont reprises plusieurs fois sur votre website. Exemples : les icônes, le emblem du website, les photos de fond…Il est très pertinent de créer un sprite pour regrouper en une seule image toutes vos icônes lorsqu’elles apparaissent les unes à côté des autres.

La création des sprites s’effectue avec du code CSS et think donc une connaissance de ce langage informatique (différent du HTML). Tout l’intérêt des CSS sprites est de ne charger qu’une seule picture au lieu de plusieurs et donc de diminuer le nombre de requêtes HTTP envoyées au serveur lors du chargement de la web page internet sur laquelle les sprites sont intégrés.

Voici un exemple de sprite :

Et un autre :

D’un point de vue technique, la création d’un sprite implique de commencer par choisir une image principale, et de définir ensuite des sous-images by the use of los angeles propriété CSS background-position. Il existe plusieurs outils – comme Css-Sprit, qui permettent de créer assez facilement vos sprites en vital les photos à combiner.

Découvrez notre guide complet sur l’art de coder un e-mail en HTML / CSS.

Réduire les requêtes grâce au CSS3

Une autre manière de réduire le nombre de requêtes liées aux photographs consiste à remplacer vos pictures par du CSS. A noter que cela n’est possible que pour les petites photos : pour vos boutons CTA par exemple. Le langage de programmation CSS permet de créer des effets graphiques (formes, dégradés, animations…). Les possibilités en los angeles matière ont été élargies par l’arrivée du nouveau standard CSS, le CSS3. Bien sûr, cette method contribue à générer plus de fichiers CSS, mais améliore globalement les performances en termes de vitesse de chargement en réduisant le nombre de requêtes.

Le CSS est très pratique notamment pour créer des dégradés simples sur les photos basiques. Exemples d’icônes dont le dégradé a été produit par un codage CSS3 :

Voici à quoi ressemble le code HTML :

<a href="#">Click Me</a> <a href="#" >Buy This</a> <a href="#" >More Info</a>

Dans votre CSS, vous devez définir le dégradé :

a background-image: linear-gradient(to backside, #FFF, transparent); background-color: #DDD; border: 1px #DDD solid;

Pour que chaque icône ait sa propre couleur, vous devez définir les propriétés « background-color » et « border-color » de chacune d’entre elles :

.purchase background-color: #C2E1A9; border-color: #D8E5CE; .information background-color: #AFCCD3; border-color: #DAE9EC;

Vous pouvez aussi créer des effets d’ombre avec les propriétés text-shadow et box-shadow. Vous trouverez assez facilement sur web d’autres exemples d’utilisation du code CSS pour réduire les requêtes liées aux photos. Pour créer vos boutons en CSS3, nous vous recommandons cet article très didactique en français.

Réduire les requêtes grâce au Data URIs

Vous pouvez enfin remplacer votre très petites images par des knowledge URIs afin de réduire le nombre de requêtes HTTP. La technique consiste à convertir l’image en texte en utilisant une méthode appelée l’encodage Base64. Prenons l’exemple d’un petit triangle qui se retrouve sur quasiment toutes les pages de votre website.

Il est possible de transformer cette picture par son équivalent texte (son URI data) en utilisant un encodeur Base64. La démarche à réaliser est assez simple : vous importer votre icône dans l’encodeur. Celui-ci vous donne son knowledge URI. A vous ensuite d’intégrer ce Data URI dans l. a. propriété backround-image de votre CSS :

background-image: url(knowledge:image/png;base64,iVBORw0KGgoAAAANSUh EUgAAAAoAAAAQCAAAAAAKFLGcAAAAVUlEQVR4AWM4/B8GGOyfw5m6UQimx3 Y4c6PKTxjzUn4FnPmB7QaM+X+CDZz5P2E+nHlS6C2M+b86Ac78b3MYzlyq8 hPG/J/fAmSegQC22wzhxlBQAQBbjnsWelX9QwAAAABJRU5ErkJggg==);

Cet encodage permet d’économiser une requête HTTP dans l. a. mesure où l’picture est directement intégrée dans le code en inline et n’a pas besoin d’être chargée lors de l’ouverture de l. a. page pour s’afficher. Cette technique a cependant quelques inconvénients : premièrement, vous n’avez plus l. a. possibilité de cacher le fichier. Deuxièmement, cela alourdit votre CSS, parfois de manière assez conséquente (suivant l. a. longueur de l’URI information). Vous devez donc tester les vitesses de vos pages avec et sans URI data pour choisir l. a. version la plus rapide. Pour un tutoriel complet sur la création de Data URI, lire cet article très complet (en français).

Pour aller plus loinSi vous souhaitez améliorer votre web page vitrine, je vous invite fortement à parcourir ces articles :

Réduire La Taille Et Le Poids D'un Gif Animé

Réduire Le Poids D'un Gif : réduire, poids, Réduire, Taille, Poids, Animé

Réduire Taille Et Poids D'un Gif Animé Avec Gimp

Réduire Le Poids D'un Gif : réduire, poids, Réduire, Taille, Poids, Animé

10 Techniques Pour Réduire Le Poids De Vos Images – LITT DEV

Réduire Le Poids D'un Gif : réduire, poids, Techniques, Réduire, Poids, Images

Gif Animé Dans Email : Le Mauvais Exemple De Jeep - Sendethic

Réduire Le Poids D'un Gif : réduire, poids, Animé, Email, Mauvais, Exemple, Sendethic

GIF Animé : Comment Faire Pour Le Créer Et L'insérer Dans Vos Emails ?

Réduire Le Poids D'un Gif : réduire, poids, Animé, Comment, Faire, Créer, L'insérer, Emails

File:Éolienne-tripale-st-caradec-22.gif - Wikimedia Commons

Réduire Le Poids D'un Gif : réduire, poids, File:Éolienne-tripale-st-caradec-22.gif, Wikimedia, Commons

Cartographie Numérique: Décomposer Les Cartes D'un Gif Animé

Réduire Le Poids D'un Gif : réduire, poids, Cartographie, Numérique:, Décomposer, Cartes, Animé

Découvrez Comment Créer Des GIF Sur Android Avec Notre Tuto

Réduire Le Poids D'un Gif : réduire, poids, Découvrez, Comment, Créer, Android, Notre

2018-06-10-0549-01Trim GIF By Joseadrian | Gfycat

Réduire Le Poids D'un Gif : réduire, poids, 2018-06-10-0549-01Trim, Joseadrian, Gfycat

Réduire Le Poids D'un JPG

Réduire Le Poids D'un Gif : réduire, poids, Réduire, Poids

Redimensionner,reduire, Retoucher En Ligne Des Images Ou Des Gifs Animes

Réduire Le Poids D'un Gif : réduire, poids, Redimensionner,reduire,, Retoucher, Ligne, Images, Animes