Comment déterminez-vous un bon ensemble de points d'arrêt pour les tailles d'image SRCset

Question

Mon site Web en ce moment est marginal pour la vitesse de chargement de la page sur mobile. Écrit à l'origine pour le bureau, j'utilise beaucoup d'images relativement élevées et qui ne sont que légèrement comprimées.

J'aimerais fournir des images SRCset à diverses résolutions, mais avant de commencer, quelles sont les tailles optimales et comment sont-elles déterminées?

Première approximation qui se produit est (image en% de l'écran) * (Viewport en pixels), puis calculez ceci pour typique (et qu'est-ce que c'est cette semaine?) Résolutions d'écran du bureau, tablette et téléphone.

À la réflexion, cette approximation est naïve.

Réduire la résolution d'une image trop grande donnera de meilleurs résultats que d'augmenter une trop petite.
Il n'y a pas vraiment trois situations à prendre en compte, mais cinq, comme les deux mobiles et la tablette peuvent être utilisées dans l'une ou l'autre des orientations. Je ne veux pas que l'utilisateur mobile ait à supprimer de nouvelles images lorsqu'ils font pivoter leur téléphone. Ce n'est pas aussi grosse une préoccupation pour les comprimés la plupart du temps, car la majeure partie de l'utilisation de la tablette est sur le WiFi.
L'utilisation de bureau a un autre facteur: tandis que les écrans ont été plus larges, de nombreux utilisateurs auront un navigateur à moins que la pleine largeur. Celui-ci peut avoir une importance majeure, car les ordinateurs de bureau ont à la fois la bande passante et la vitesse de traitement pour redimensionner des images.
Les téléphones viennent maintenant dans une gamme de tailles et de résolutions gênantes.

À l'heure actuelle, je cherche à produire des images à des largeurs de 1300, 800, 500, 300 et de découpes à 900 600 et 350, mais c'est un peu plus qu'un wag.

Stephen Ostermiller · Accepted Answer

La taille d'une image est proportionnelle au carré de la largeur. Vous obtenez beaucoup plus d'économies en réduisant de la plus grande taille à la deuxième taille plus grande que par la réduction des autres.

1300² = 1 690 000 (100%)
800² = 640 000 (37%)
500² = 250 000 (14%)
350² = 122 500 (7%)
300² = 90 000 (5%)

Les utilisateurs des appareils mobiles peuvent être capables de tourner leur appareil sans avoir à recharger des images. Il serait logique de ne fournir que la taille de l'orientation du paysage pour améliorer la convivialité.

J'ai tiré des statistiques de largeur d'écran de mon plus grand site web. Il reçoit des millions de visiteurs par mois sur une grande variété d'appareils. Le site est un site financier. Ces données sont collectées par Google Analytics. Mes tireages:

Il n'a aucun sens de servir des images plus larges que 2048 pixels.
Une largeur de 424 pixels servirait presque tous les utilisateurs mobiles
Si j'allais servir deux largeurs d'image, je choisirais 2048px et 424px
La troisième largeur serait 1680px
La quatrième largeur serait 1366PX
La cinquième largeur serait 375px

Gardez également à l'esprit que vos images seront probablement un peu moins que la largeur de l'écran complet:

La plupart des navigateurs prennent des pixels sur les bords pour la bordure de la fenêtre du navigateur et la barre de défilement.
Les utilisateurs des plus grands moniteurs peuvent ne pas maximiser la fenêtre de leur navigateur.
La mise en page de votre page Web peut ajouter de l'espace blanc autour des images.
La mise en page de votre page Web peut (et devrait probablement) limiter la largeur de votre contenu. Vous n'avez peut-être pas besoin d'images plus de 1300px de largeur.

Zoomé sur la section mobile raide

Méthodologie utilisée pour créer des graphiques:

Sélectionné une plage de dates des 3 derniers mois de Google Analytics
Créé un rapport sur les 5 000 top 5 000 résolutions d'écran (largeur par hauteur) à cette époque
Téléchargé les données sur CSV et l'a ouvert à LibreOffice
Suppression de la hauteur de la colonne de résolution (regex x.* remplacer par rien)
Tri des données par largeur d'écran (ascendante)
Les colonnes étrangères supprimées, juste laissées avec des "largeurs" (colonne A) et "utilisateurs" (colonne B)
Créé une nouvelle colonne (C) pour le total des utilisateurs avec des écrans inférieurs à la taille donnée. Ajoute les utilisateurs à cette largeur à la ligne précédente (formule C3=C2+B3)
Créé une nouvelle colonne (D) pour afficher la colonne précédente en pourcentage (formule D3=C3/!C5000)
Création d'un tableau XY Scatter des colonnes A et D

Voici les 30 principales largeurs de périphériques de ces données dans une table. Toute autre largeur représente moins de 0,1% des utilisateurs.

Width (px) % Users 320 3.82% 360 26.49% 375 13.41% 377 0.08% 384 0.20% 390 0.11% 393 3.35% 400 0.07% 412 11.24% 414 14.84% 424 0.88% 600 0.11% 601 0.11% 768 0.84% 800 0.29% 810 0.13% 834 0.20% 1024 1.09% 1093 0.08% 1280 2.84% 1360 0.28% 1366 5.09% 1440 1.40% 1536 2.49% 1600 1.09% 1680 0.46% 1920 6.15% 2048 0.10% 2560 0.38%

Google Analytics fournit également une dimension "Taille du navigateur". Malheureusement, ils apparaissent autour de la largeur du navigateur jusqu'au 10 le plus proche, ce qui rend les données moins utiles. Par exemple, la taille d'écran 424 commune semble être regroupée avec la largeur du navigateur 420. Il en va de même pour 1024 qui semble être arrondi à 1020. Dans tous les cas, les données montrent une variété beaucoup plus large pour la taille de l'écran plus grande en raison de fenêtres non maximisées.

Rob · Answer

Ceci est une décision de conception, pas une mathématique. Il est impossible de déterminer comment un utilisateur affichera l'image. Il n'y a pas d'équation mathématique pour quel homme aime le design. L'utilisation de la largeur de périphérique fonctionne jusqu'à demain lorsqu'un nouvel appareil introduit de nouvelles tailles. Et il y a maintenant trop de dispositifs pour garder une trace de.

Par conséquent, le meilleur conseil est de rendre votre page Web plus large et plus grande jusqu'à ce que l'image ne soit plus bonne. Ce sera votre point de pause.