Design graphique

Réduire la taille des fichiers GIF pour améliorer les performances des sites web

Le GIF fait un retour en force car, avec l’utilisation croissante des smartphones et la bande passante limitée, les gens s’attendent à des temps de chargement presque instantanés. Plus vos images web sont petites, plus elles se chargeront rapidement et plus vos visiteurs seront heureux.

Les images GIF et le Web

Les images GIF ne sont pas une solution unique. Les images GIF ont un maximum de 256 couleurs, ce qui signifie que vous pouvez vous attendre à une grave dégradation de l’image et des couleurs si vous ne faites pas attention.

Le format de fichier GIF est, à bien des égards, un format ancien qui remonte aux premiers jours du web. Avant l’introduction du format GIF, les images du web étaient en noir et blanc et compressées en utilisant le format RLE. Les GIF sont apparus pour la première fois en 1987, lorsque Compuserve a lancé le format comme solution d’imagerie web. À cette époque, la couleur émergeait tout juste sur le bureau, et le web était accessible par des modems connectés à la ligne téléphonique. Cette nouvelle infrastructure a créé le besoin d’un format d’image qui permettait de conserver des images suffisamment petites pour être livrées, via une ligne téléphonique, à un navigateur web en peu de temps.

Les images GIF sont idéales pour les graphiques à bords nets avec une palette de couleurs limitée, tels qu’un logo ou un dessin au trait. Bien que le format GIF puisse être utilisé pour les photographies, la palette de couleurs réduite introduit des artefacts dans l’image. Néanmoins, le mouvement Glitch Art et l’essor du cinématographe ont suscité un regain d’intérêt pour le format GIF.

Comment réduire la taille des fichiers GIF pour améliorer les performances du site web

Pour rendre votre GIF aussi efficace que possible :

  1. Recadrez tout espace supplémentaire autour de l’image. La réduction des dimensions en pixels d’une image est le moyen le plus efficace de réduire la taille du fichier. Si vous utilisez Photoshop, le Trim Le commandement fonctionne bien pour cela.
  2. Lorsque vous préparez une image GIF, réduisez les dimensions de la sortie. Chaque programme d’édition graphique propose différentes commandes pour le redimensionnement.
  3. Réduire le nombre de couleurs dans l’image. Les GIF n’affichent que 256 couleurs, mais si votre image n’en comporte que quelques-unes, réduisez quand même le nombre de couleurs. Lorsque vous réduisez les couleurs dans les GIF, vous obtenez la meilleure compression lorsque le nombre de couleurs est réglé sur le plus petit nombre possible de ces options : 2, 4, 8, 16, 32, 64, 128 ou 256.
  4. Réduire le nombre d’images dans l’image pour les GIF animés. Éviter les animations inutiles, en général. Une animation excessive augmente le temps de téléchargement des pages web, et beaucoup de gens la trouvent distrayante.
  5. Si vous utilisez Photoshop, créez un fichier GIF en utilisant le Exporter en tant que du menu. Sélectionnez Dossier > Exporter en tant que. Lorsque le menu s’ouvre, sélectionnez GIF comme format de fichier et réduire les dimensions physiques (largeur et hauteur) de l’image.
  6. Si vous utilisez Adobe Photoshop Elements, sélectionnez Dossier > Save For Web. Ce processus ouvre la Save For Web qui se trouve également dans Adobe Photoshop à l’adresse Dossier > Exporter > Save for Web (Legacy). Lorsqu’elle s’ouvre, appliquez des tergiversations, réduisez la couleur et modifiez les dimensions physiques de l’image.
  7. Évitez les tergiversations. Le tremblement peut améliorer l’apparence de certaines images, mais il augmente la taille du fichier. Si votre logiciel le permet, utilisez un niveau de dithering plus faible pour économiser des octets supplémentaires.
  8. Certains logiciels offrent une option de sauvegarde des GIF avec perte. Cette option peut réduire considérablement la taille du fichier, mais elle réduit également la qualité de l’image.
  9. N’utilisez pas d’entrelacement. L’entrelacement augmente généralement la taille du fichier.
  10. Photoshop et Photoshop Elements indiquent tous deux le temps de téléchargement. N’y prêtez pas attention. Il est basé sur l’utilisation d’un modem 56k. Un numéro plus valide apparaît si vous sélectionnez un modem câble dans le menu déroulant.

Afficher plus
Bouton retour en haut de la page

Adblock détecté

Veuillez désactiver votre bloqueur de publicités pour pouvoir visualiser le contenu de la page. Merci