J'ai testé les performances de chargement de mon site web à l'aide d'outils tels que 100pulse.com qui montrent que mon site web a pris un temps de chargement inhabituel en raison d'une mauvaise optimisation des images. Quelqu'un peut-il me suggérer une bonne technique d'optimisation des images pour améliorer le temps de réponse de mon site web ?
Réponses
Trop de publicités?
Ryan
Points
811
Optimisation de l'image
La compression d'images est soit avec perte, soit sans perte : La compression avec perte consiste à supprimer des informations du fichier original, tandis que la compression sans perte conserve toutes les données originales (bien que la taille du fichier tende à être plus importante).
En diminuant sélectivement le nombre de couleurs dans l'image, moins d'octets sont nécessaires pour stocker les données. L'effet est presque invisible, mais il fait une très grande différence en termes de taille de fichier ! Le temps de téléchargement des pages s'en trouve donc accéléré
Il existe toute une série d'algorithmes de compression d'images qui adoptent différentes approches pour réduire la taille des fichiers, et les outils énumérés ci-dessous en utilisent un certain nombre pour minimiser la taille de vos images.
TinyPNG ( https://tinypng.com/ )
TinyPNG utilise des techniques intelligentes de compression avec perte pour réduire la taille de vos fichiers PNG.
O
TinyJPG ( https://tinyjpg.com/ ) Pour les fichiers JPG
Référence : http://websitespeedoptimizations.com/ImageOptzPost.aspx
Deeksha
Points
31
L'optimisation des images peut se faire de plusieurs manières.
- Compression d'images - Il existe deux types de compressions que vous pouvez appliquer aux images : avec ou sans perte. La compression sans perte est un ensemble de techniques permettant de compresser le fichier sans altérer la qualité de l'image. En revanche, avec la compression avec perte, la qualité de l'image est réduite pour produire une image plus petite.
- Formats d'image - Le format PNG convient mieux aux logos ou aux images transparentes, tandis que les photographies doivent être présentées sous forme de fichiers JPG. WebP est un format d'image qui réunit toutes les vertus des formats JPG et PNG, tout en offrant de meilleurs taux de compression, mais il n'a pas encore été adopté à 100 % par les navigateurs.
- Taille des images - En général, une image de taille maximale est fournie au site web avec des modifications apportées à la hauteur et à la largeur du CSS pour le navigateur (en fait, les sites web utilisent le redimensionnement côté client). Le chargement d'une grande image alors qu'une plus petite est en fait nécessaire entraînera un chargement lent du site web. Le simple fait de dimensionner correctement les vignettes peut réduire considérablement la taille de la page et accélérer son chargement.
- Optimiser la diffusion - Utiliser un CDN. Oui, la manière dont vous diffusez vos images fait également une grande différence. Un CDN vous aidera à réduire la latence et à charger votre site web plus rapidement.
Il ne s'agit là que de quelques principes de base, mais ils nécessitent un peu de temps et d'efforts, c'est pourquoi je suggère d'utiliser un outil d'optimisation d'images pour le faire à votre place. Consultez ImageKit Il fait le travail, en temps réel, et est accompagné d'un CDN d'images global.
AKFourSeven
Points
210
Vous pouvez utiliser ceci Smushit pour optimiser vos images, ils réduisent leur taille sans nuire à la qualité.
http://developer.yahoo.com/yslow/smushit/
Ils vous expliquent plus longuement pourquoi c'est cool. Cela m'a vraiment aidé lorsque je travaillais sur des jeux mobiles et des applications flash.
Justin
Points
113
Donnez à l'image un peu d'amour.
"sips -s formatOptions 60 image/path" pour image/path, vous pouvez aussi simplement faire glisser l'image.
vous pouvez également essayer de redimensionner l'image pour gagner en rapidité
"sips -Z 800 image/path"
ce code conservera le rapport d'aspect
pour une solution non technique TinyPNG ( https://tinypng.com/ )
Les utilisateurs avancés peuvent essayer (guetzli). Cela peut prendre plusieurs minutes pour optimiser une image, mais c'est vraiment bien.
