4 Conseils d'optimisation des images essentielles

Feb 2, 2026

Comment

[dix] [dix] [dix]

[dix]

Quelques développeurs chanceux et cet auteur a eu l'occasion de tech Modifier le nouvel eBook d'optimisation de l'image de Addy Osmani, Optimisation de l'image essentielle , que vous devriez absolument lire.

[dix]

10 façons d'optimiser les images pour une meilleure performance

Que vous construisiez la pleine taille Sites Web de commerce électronique ou simplement faire une maison en ligne pour votre Portefeuille de design , Dans cet article, vous apprendrez quelques conseils du livre de Addy qui aidera à rendre vos images plus maigres et plus rapides.

Soyez sélectif et préchargé des images critiques

Jetez un coup d'œil à votre site et identifiez un atout d'image critique. Pour la plupart, ce serait un logo ou une image héros que vous souhaitez avoir rendu dès que possible.

C'est là que le précharger Le conseil de ressources est entré dans. précharger est un moyen d'allusion au client qu'un atout doit être récupéré avant que l'analyseur navigateur ne le découvre autrement. Vous pouvez l'utiliser à peu près tout, mais cela fonctionne splendidement pour précharger des images critiques. Voici un exemple d'utilisation dans le HTML & lt; tête & gt; élément sur ordre de précharger une image de bannière héros:

<link rel="preload" href="/img/logo.svg" as="image">

Vous pouvez également utiliser précharge dans un en-tête HTTP:

[dix]

Link: </img/logo.svg>; rel=preload; as=image

Vous trouverez ci-dessous deux rouleaux de capture d'écran de la même page en cours de chargement en chrome. Un scénario utilise précharger charger une image de bannière de héros, tandis que l'autre ne le fait pas.

The effect of using preload on a hero banner — L'effet de l'utilisation de la précharge sur une bannière héros

Dans l'exemple avec précharger , l'image de bannière apparaît dans la fenêtre du navigateur une demi-seconde plus rapide. Tout en raison d'une doublure rapide qui a donné au navigateur une tête de tête.

Simplifier automatiquement votre oeuvre SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — L'outil simplificateur d'illustrateur, montrant le nombre de points d'ancrage avant et après la précision de la courbe étant abaissée

L'optimisation des SVGS est différente de celle des autres types d'images, car les SVG sont composés de JPEG ou de PNGS, des SVG sont composés de texte spécifiquement XML. Cela signifie que les optimisations typiques que vous appliqueriez à des actifs basés sur un texte (par exemple, la compression de GZIP / Brotli) peut également être appliquée à SVGS. Au-delà de cela, vous pouvez utiliser un optimisateur tel que SVGO pour traquer la taille des SVGS.

Mais que se passe-t-il si vous ne consommez pas simplement des œuvres d'art vectorielles, mais la créant? Si vous êtes un utilisateur illustrateur, vous pouvez simplifier automatiquement votre oeuvre afin de réduire la quantité de points d'ancrage dans les chemins via la fenêtre Simplifier la boîte de dialogue.

Cette boîte de dialogue peut être trouvée dans Illustrator cc Menu de s) en allant à l'objet et au gt; chemin et gt; simplifier. En réduisant la précision de la courbe (et en ajustant éventuellement le seuil d'angle), il est possible de supprimer des points de chemin supplémentaires dans vos œuvres d'art. Dans ce cas, vous remarquerez qu'une réduction de la précision de la courbe d'aussi peu que 6% supprime 54 points de chemin. Utilisé judicieusement, cela pourrait même améliorer l'apparition de vos œuvres d'art.

[dix]

The savings that path simplification can afford — Les économies que la simplification du chemin peut se permettre

Mot à la sage - Faites attention à ce que vous obtenez agressif avec cet outil. La précision de la courbe inférieure trop, et votre oeuvre d'art à une fois soigneusement fabriquée va devenir une blob. Frappez le bon équilibre, cependant, et vous allez récolter les récompenses.

Convertir des gifs animés en vidéo

With FFmpeg you can turn flabby GIFs into svelte video — Avec FFMPEG, vous pouvez transformer des gifs flasques en vidéo svelte

Nous aimons tous un bon gif d'animation. Ils transmettent effectivement presque n'importe quel sentiment, mais ils peuvent être vraiment énormes. Les optimisateurs d'image tels que la gifxicle peuvent vous aider à raser les excès de kilo-octets, mais le billet consiste à convertir ces gifs en vidéos et à les intégrer dans le HTML5. & lt; video & gt; étiqueter. Le ffmpeg L'utilitaire de ligne de commande est bien adapté à cette tâche:

ffmpeg -i animated.gif -b: v 512k animé.webm
ffmpeg -i animated.gif -b: v 512k animated.ogv
ffmpeg -i animated.gif -b: v 512k animated.mp4

Les commandes ci-dessus prennent une source gif ( GIF animé ) En tant qu'entrée dans l'argument -i et les vidéos de sortie avec un débit variable maximum de 512Kbps. Dans un test de notre propre, nous avons pu prendre un GIF animé de 989kb et la réduire à un 155KB MP4, un OGV de 109 Ko et une webv de 85kb. Tous les fichiers vidéo étaient comparables de qualité au gif source. À cause de l'ubiquité de & lt; video & gt; Prise en charge des balises dans les navigateurs, ces trois formats vidéo peuvent être utilisés comme suit:

 & lt; Vidéo Preload = "Aucun" & gt;
  & lt; source src = "/ vidéos / animated.webm" type = "vidéo / webm" & gt;
  & lt; source src = "/ vidéos / animated.ogv" type = "vidéo / ogg" & gt;
  & lt; source src = "/ vidéos / animated.mp4" type = "vidéo / mp4" & gt;
& lt; / video & gt;

Si vous décidez d'y aller, assurez-vous de commander votre & lt; source & gt; Tags afin que le format le plus optimal soit spécifié en premier, et le moins optimal est spécifié en dernier. Dans la plupart des cas, cela signifie que vous commencerez d'abord avec des vidéos WebM, mais vérifiez la taille du fichier de sortie de chaque vidéo et passez avec tout ce qui est le plus petit en premier, puis terminez avec tout ce qui est le plus important.

Si vous n'avez pas FFMPEG ou ne savez pas ce que c'est, Vérifiez-le . Il est facile d'installer grâce à la plupart des gestionnaires de packages de système d'exploitation, tels que homebrew ou chocolaty.

Charge paresseuse avec intersectionbserver

Vous pouvez déjà faire des images de chargement paresseux, mais de nombreux scripts de chargement paresseux utilisent des gestionnaires d'événements de défilement intensive de la CPU. De telles méthodes contribuent à des interactions paresseuses sur une page. Le matériel plus ancien avec moins de puissance de traitement est encore plus sujette aux effets néfastes de ce type de code. L'exécution de l'exécution aide à un diplôme, mais elle est toujours une solution de contournement désordonnée et plutôt inefficace pour déterminer lorsque des éléments sont dans la fenêtre.

Heureusement, l'intersection API d'observateur nous donne un moyen plus simple et beaucoup plus efficace de déterminer lorsque des éléments sont dans la fenêtre. Voici un exemple de balancement de base de chargement paresseux de base:

 & lt; img classe = "paresseux" data-src = "/ images / paresseux-chargé-image.jpg" src = "/ images / placardholder.jpg" alt = "je suis paresseux." largeur = "320" hauteur = "240" & gt;

Ici, nous chargons une image de placement dans le src attribut, puis stockez l'URL pour l'image que nous voulons charger paresseusement dans le Data-src attribut. To top tout off, nous donnons le & lt; img & gt; élément une classe de paresseux pour un accès facile avec queryselectorallall . De là, nous utilisons simplement ce code:

 Document.addeventListener ("DomcontentOached", fonction () {
  Si ("intersectioncobserver" dans la fenêtre & amp; & amp; "intersectionbverentrytryry" dans la fenêtre & amp; & amp; "intersectionRatio" dans la fenêtre.InterSectionCObSerentryRY.Prototype) {
    éléments = document.Quiseryselectorall ("img.lazy");

    var ImageObServer = Nouveau intersectionBserver (fonction (entrées, observateur) {
      entrées.foreach (fonction (entrée) {
        Si (entrée.Intersecting) {
          entrée.target.settattribute ("src", entrée.target.getattribute ("Data-src"));
          entrée.target.classlist.remove ("paresseux");
          imageobserver.unobserveerve (entrée.Target);
        }
      });
    });

    éléments.foreach (fonction (image) {
      imageobserver.observe (image);
    });
  }
});

Ici, nous lions du code à la document objets DomcontentOaré un événement. Ce code vérifie si l'observateur d'intersection est pris en charge par le navigateur actuel. S'il s'avère que c'est, nous attrapons tous img éléments avec une classe de fainéant avec queryselectorallall puis attachez-leur des observateurs.

L'observateur contient des références aux éléments que nous observons ( entrées ) et l'observateur lui-même ( observateur ). Ce code charnière sur chaque entrée d'observateur isintersecting évaluer. Tandis que l'élément observé est hors de la fenêtre, isintersecting Retour 0 . Comme l'élément pénètre dans la fenêtre, cependant, il retournera une valeur supérieure à celle 0 . C'est à ce stade que nous échangeons le contenu de l'image Data-src attribuer dans la src attribut, et supprimer sa fainéant classer. Après une image donnée des charges paresseuses, l'observateur est retiré de celui-ci avec l'observateur désobéir méthode.

Ce processus est beaucoup plus facile que de mordre avec des manipulateurs de défilement, mais comme l'observateur d'intersection n'affiche pas le soutien universel, vous devrez peut-être les revenir. Si vous êtes le genre pour attraper un script et aller, nous avons écrit une chargeuse paresseuse qui utilise un observateur d'intersection, mais redevient également les méthodes d'antan. Vous pouvez l'attraper ici .

Cet article a été publié à l'origine dans le numéro 301 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Achetez le numéro 301 ici ou S'abonner ici .

Articles Liés:

Le guide complet de svg
Utilisation de vecteurs d'outils: une approche d'une concepteur Web
Animate svg avec javascript

[dix] [dix]

[dix]

4 Conseils d'optimisation des images essentielles

Soyez sélectif et préchargé des images critiques

Simplifier automatiquement votre oeuvre SVG

Convertir des gifs animés en vidéo

Charge paresseuse avec intersectionbserver

Comment - Most Popular Articles

Comment utiliser le stockage en nuage comme créatif

Portrait Photographie: Comment prendre des portraits parfaits

Comment faire une mandelbulb

Créer un matériau de tuiles en concepteur de substance

Comment concevoir la typographie isométrique

Comprendre la propriété d'affichage CSS

Comment utiliser des outils numériques pour créer une apparence dessinée à la main

Dessine un portrait de crayon d'un chien

Catégories