Optimisation des performances - compression, chargement et formatage des images

Cet article a été publié pour la première fois sur le blog de l'équipe frontale de Zhengcai Cloud：Optimisation des performances——Compression d'image、Chargement et sélection du format

https://www.zoo.team/article/images-compress

Préface

Je crois que tout le monde a entendu parler de "258 Principes(https://blog.csdn.net/weixin_42139375/article/details/83001248)" ,Le rendement d'un site Web influe grandement sur l'expérience de l'utilisateur..

Après plusieurs projets de commerce électronique et d'optimisation des performances des grands projets d'écran,J'ai découvertRessources photographiquesLe traitement des données joue un rôle important dans l'optimisation des performances du site Web.

Demande générale de données du site Web du commerce électronique

Chargé sur le premier écran 145 Demandes de ressources d'image sur les demandes 75% Ci - dessus, Les images représentent également une part importante de toutes les ressources statiques demandées . Importance de l'optimisation des images visibles .

Mais avant de comprendre l'optimisation de l'image, Bits binairesAvecPrésentation des couleursLa relation entre.

Chiffres binaires et couleurs

Dans l'ordinateur, Les pixels sont généralement représentés par des nombres binaires . Dans différents formats d'images , La relation correspondante entre les pixels et les bits binaires est différente . Plus un pixel correspond à un nombre binaire de bits , Il peut représenter une variété de couleurs , Plus l'image est fine , Plus l'espace de stockage nécessaire pour les images est grand en conséquence .

Il existe actuellement de nombreuses façons d'optimiser les ressources d'images sur le marché , Comme une image compressée 、 Choisissez le bon format 、 CDN Accélération、Chargement paresseux, etc..

Image compressée

Image compressée Je crois que c'est la première fois que tout le monde y pense. .Comme nous le savons tous tinpng (https://tinypng.com/), Son principe est basé sur "Sélectivité" Réduit le nombre de couleurs à stocker pour les images , Pour réduire la mémoire que les images doivent stocker .

“

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images.

Prenons l'exemple suivant ：

Présentation détaillée：

Format de l'image

Image compressée Bien qu'il soit possible de réduire dans une certaine mesure les ressources demandées Largeur de bande, Mais si ça marche bien Format Il y a souvent des changements qualitatifs dans les performances .

JPEG / JPG

JPEG Est le format de fichier image le plus couramment utilisé.

Avantages

• Supporte des taux de compression extrêmement élevés , Transfert de fichiers possible 、Télécharger、 L'aperçu est beaucoup plus rapide .

• Contrôle de la taille du fichier avec un taux de compression variable .

• Capable de gérer facilement 1600 10 000 couleurs,Les images en pleine couleur peuvent être bien reproduites.

Défauts

JPG Les pertes sont comprimées à La carte de la rotationEtImage de fond Il est vraiment difficile de voir les défauts dans l'affichage de , Mais quand il s'agit de graphiques vectoriels et Logo Le sens de la ligne égale est fort 、 Les couleurs contrastent fortement avec les images , Par compression artificielle Image floue Ça va être assez évident . Ce format n'est donc pas approprié pour l'affichage Haute définitionEt Le sens de la ligne est fort Images de.

En plus de ça,, JPG L'affichage d'images avec des exigences de transparence n'est pas pris en charge ,Si vous devez afficherImage transparente Il faut trouver un autre moyen .

Scénario d'affaires

JPG Idéal pour la présentation d'images colorées ,Dans notre développement quotidien,JPG Les images sont souvent plus grandes Image de fond、La carte de la rotationOu Vue d'ensemble- Oui.. Ouvrez la page d'accueil d'un site de commerce électronique , Vous pouvez voir que le traitement des grandes images est presque toujours utilisé  JPG.

PNG - 8 Avec PNG - 24

png .Est un format bitmap utilisant un algorithme de compression sans perte.

Avantages

• Compression sans perte

• Tout à fait. alpha Transparence.

• Peut être sauvegardé à plusieurs reprises sans dégradation de la qualité de l'image .

Inconvénients

Trop volumineux

Scénario d'affaires

En théorie,, Quand vous recherchez les meilleurs résultats d'affichage ( Présentation détaillée 、 L'image a besoin d'être agrandie 、 Photos, etc ), Et ne se soucie pas de la taille du stockage ou de la largeur de bande requise ,Peut être utilisé PNG-24 (https://baike.baidu.com/item/PNG/174154?fr=aladdin). Mais en pratique , Pour éviter les problèmes de taille excessive des fichiers ,On n'en a pas besoin. PNG Pour traiter des images plus complexes . Quand on rencontre le bon PNG Dans la scène, .La préférence sera également donnée aux plus petits PNG-8 .

Ou lorsqu'il est nécessaire de traiter des images avec transparence ou des lignes évidentes ,Il sera également adopté PNG . Comme le propriétaire du site logo：

SVG

Il devrait être un langage graphique vectoriel standard ouvert .

Avantages

• Scalable, Peut supporter un grossissement infini

• Programmable

Inconvénients

• Tous les navigateurs ne supportent pas SVG,IE8 Et les versions précédentes ont besoin d'un plug - in .

• Les images complexes peuvent ralentir le rendu ( Seuls les petits graphiques sont pris en charge ).

Scénario d'affaires

SVG Est un fichier texte, On peut définir ça comme un code. SVG , Écris - le sur HTML  - Oui.、Devenir DOM Une partie de.Ce qui est plus utile, c'est iconfont (https://www.iconfont.cn/). On peut régler le module fill Attribut facile à adapter à la fonction de peau de l'icône ,Et à travers font-size Redimensionner .

Base64

Un modèle basé sur 64 La méthode des caractères imprimables pour représenter les données binaires.

Avantages

• Réduire les demandes de réseau

• Pour les images générées dynamiquement en temps réel, il n'est pas nécessaire de stocker les images sur le serveur pour occuper les ressources du serveur

Inconvénients

• Pour les petits dessins seulement .

• Si l'image qui nécessite un remplacement fréquent nécessite un remplacement complet du Code ,Faible maintenabilité.

Scénario d'affaires

Base64 EtSprite tuC'est pareil, Existe comme solution pour les petites icônes .

“

Base64 C'est une sorte de transmission 8Bit Codage du code byte , En faisant des photos Base64 Codage, Nous pouvons écrire les résultats directement HTML Ou écrire CSS ,Et donc moins HTTP Nombre de demandes.

In Elements Recherche moyenne “base64” Mots clés,Vous verrez Base64 Il y a aussi beaucoup d'endroits à utiliser . Et l'image correspondante prend moins de mémoire .

Puisque Base64 C'est génial., Nous utilisons toutes les images Base64  C'est bon .

Base64 Après codage, La taille de l'image s'agrandit en fichier original  4/3（ Base64 Principe de codage (https://blog.csdn.net/wo541075754/article/details/81734770)）. Si on encodait aussi les gros plans HTML Ou CSS Dans le document, Le volume de ce dernier augmente considérablement , Même si nous réduisons HTTP Demande, Et ne peut pas compenser les frais généraux de performance de ce volume . Ce qui veut dire que nous avons sacrifié Performance de renduPlus grand que Performance de la demande de ressources , Ça ne vaut pas la peine .

Nous pouvons voir,La plupart utilisent Base64 Les images codées sont toutes de petites images .

WebP

Une compression sans perte et une compression sans perte sont fournies simultanément （Compression réversible）Format de fichier image pour.

Avantages

• Le support est endommagé

• Petite empreinte

• Peut supporter la transparence

Inconvénients

• Mauvaise compatibilité

Scénario d'affaires

Même chose. JPEG/JPG . Parce que la compatibilité n'est pas bonne pour le moment ,Assortiment général JPEG/JPG À utiliser ensemble.

Résumé du format de l'image

C'est réglé pour tout le monde.Carte mentale:

OSS Collocation CDN

Notre approche originale consistait à emballer des ressources comme des images dans un projet et à les mettre en ligne .

L'inconvénient, c'est que les paquets sont trop gros pour dire , La vitesse à laquelle les utilisateurs demandent des ressources est également limitée . Comme notre serveur en Chine du Sud , Les demandes des utilisateurs en Chine du Nord seront un peu plus lentes . En cas de forte concurrence , Demander des interfaces et des ressources à partir d'un serveur de déploiement n'est rien d'autre qu'une pression supplémentaire sur nos serveurs . Quand nous voulons temporairement remplacer une image , Vous devez également reconditionner et publier en ligne ,C'est très gênant..

Quand nous avons fait l'image OSS Placer et CDN Après accélération, Ce problème est bien résolu. . Les utilisateurs de différentes régions peuvent accéder au serveur le plus proche , Les demandes répétées peuvent également générer un cache ,Éviter OSS Déchets de trafic .

《OSS Et CDN La différence entre》(https://www.cnblogs.com/jsfh/p/14076992.html) Vous pouvez également consulter cet article pour plus de détails. .

Chargement paresseux des images

Je crois que tout le monde va rencontrer le premier écran trop de données chargées lentement . Dans ce cas, nous devons considérer le chargement paresseux . Lorsque l'utilisateur défile vers la position d'aperçu , Demande de données d'image en cours . Au lieu de .

window.onload = function () {
    // Obtenir une liste d'images,C'est - à - dire: img Liste des étiquettes
    var imgs = document.querySelectorAll('img');
    // Obtient la distance du haut du Navigateur
    function getTop(e) {
        return e.offsetTop;
    }
    // Mise en œuvre paresseuse
    function lazyload(imgs) {
        // Hauteur de la zone visible
        var h = window.innerHeight;
        // Hauteur de la zone de défilement
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
            //La distance entre l'image et le haut est supérieure à la somme de la zone visible et de la zone de défilement.
            if ((h + s) > getTop(imgs[i])) {
                // La vérité est que la page commence à avoir2Secondes vides,Alors utilisez setTimeout Timing 2s
                (function (i) {
                    setTimeout(function () {
                        // Exécuter la fonction sans délaiiSera égal à9
                        // Chargement furtif d'images ou d'autres ressources,
                        // Créer une image temporaire,Cette image n'apparaîtra pas sur la page en mémoire.Réaliser un chargement furtif
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute('data-src');//On ne demande qu'une seule fois
                        // onload Juger que l'image est chargée,C'est vraiment l'image chargée,Réattribuer à dom Noeud
                        temp.onload = function () {
                            // Obtenir des Propriétés personnalisées data-src,Remplacer une fausse image par une vraie
                            imgs[i].src = imgs[i].getAttribute('data-src')
                        }
                    }, 2000)
                })(i)
            }
        }
    }
    lazyload(imgs);
    // Fonction de défilement
    window.onscroll = function () {
        lazyload(imgs);
    }
}

Fin

Optimisation des performances C'est une compétence dure que nos ingénieurs de développement de première ligne doivent maîtriser . Contrairement à d'autres nouvelles technologies, , Quand vous voulez apprendre un nouveau cadre , La lecture de la documentation et du code source vous permet presque d'utiliser facilement . Mais l'optimisation des performances est différente , Il ne nous permet que de tâter, de comprendre et de percer. , C'est une expérience, c'est une habitude, c'est un sens de l'odorat .

Références

Meilleures pratiques：Utiliser alicloud CDN Accélération OSS Accès à (https://developer.aliyun.com/article/770616?utm_content=g_1000173381)

Petit livre de Nuggets:  Principe et pratique de l'optimisation des performances frontales (https://juejin.cn/book/6844733750048210957)

Site Web des fonds d'écran: wellhaven (https://wallhaven.cc/)