Comment assurer la meilleure taille d'image pour la vitesse du site Web de téléphone mobile

Vous êtes sur votre téléphone, prêt à acheter le produit que vous avez regardé, et le site Web juste…. Télécharges. Soudain, vous tapez avec impatience, vous vous demandant si votre Internet est cassé ou si le site est maudit. Et soyons honnêtes, vous rebondissez probablement. Tu n'es pas seul.

Saviez-vous que 53% des utilisateurs mobiles abandonneront une page s'il faut plus de 3 secondes pour se charger? Pensez maintenant à cela concernant votre site Web. C'est une énorme partie de clients potentiels qui disparaissent, pour ne jamais revenir. Les temps de chargement lents ne sont pas seulement frustrants pour les visiteurs; Ils vous blessent. Ils ont un impact sur le classement de votre moteur de recherche (SERP) et rendent plus difficile pour les gens de vous trouver en premier lieu. Dans cet article, nous vous montrerons comment contrôler ces pages lourdes d'image et assurer la meilleure taille d'image pour la vitesse du site Web de téléphone mobile. Nous vous présenterons également de bons outils, comme Divi, qui vous aident à présenter vos images de manière réactive.

Pourquoi la vitesse mobile est-elle importante?

L'impact d'un site Web lent est plus que d'être ennuyeux. Il peut affecter l'expérience utilisateur (UX), l'optimisation du moteur de recherche (SEO) et votre résultat net.

Imaginez que vous parcourez une nouvelle robe d'été ou les nouveaux écouteurs les plus chauds. Vous appuyez sur un site Web, et j'ai l'impression que vous regardez la peinture sèche. La frustration s'installe et vous renoncerez probablement à trouver un autre détaillant avec un site plus rapide. C'est ce qu'on appelle un rebond, et c'est une mauvaise nouvelle pour les entreprises en ligne. Selon Databox, le taux de rebond moyen est d'environ 44%. Tout ce qui est plus élevé que cela peut conduire à la perte de revenus et à un manque d'engagement, tuant une entreprise en ligne.

N'oublions pas le référencement mobile. Google consiste à fournir la meilleure expérience utilisateur possible, notamment en hiérarchiser les sites mobiles à chargement rapide. Ils utilisent l'indexation d'abord mobile, ce qui signifie qu'ils regardent principalement la version mobile de votre site lors de la détermination de votre classement de recherche.

Cependant, l'impact de la mauvaise vitesse mobile va au-delà des utilisateurs frustrés et des classements inférieurs. Il peut et frappera vos résultats. Imaginez un site Web de commerce électronique à chargement lent construit avec WordPress. Ces secondes supplémentaires (plus de 1-2 sont trop longues) peuvent vous coûter des ventes. Il est impératif de garder votre site en cours d'exécution sur les appareils mobiles, donc vous assurer de ne pas perdre de clients car votre site Web prend trop de temps à charger est crucial.

Il existe de nombreuses façons d'accélérer votre site, mais les fruits à faible coincement déterminent la meilleure taille d'image pour la vitesse du site Web du téléphone mobile.

Bases d'optimisation d'image pour WordPress

Les images sont cruciales pour rendre votre site Web bien et garder les utilisateurs engagés. Les images trop grandes peuvent vraiment ralentir votre site Web. Comme nous l'avons appris, les études montrent que la plupart des gens n'attendront pas éternellement. Alors, comment pouvez-vous garder les images superbes sans sacrifier la vitesse? Explorons quelques bases pour garder votre site en marche rapidement et en douceur.

1. Choisissez le bon format d'image

Vous pouvez utiliser plusieurs types d'images sur votre site Web WordPress, y compris JPG, PNG et WebP. Lequel est le meilleur à utiliser? Approfondissons chaque type d'image et quelles situations sont les meilleures pour les utiliser.

• JPG: Ce sont comme vos photos de tous les jours. Ils sont parfaits pour les images avec une grande variation des couleurs et des transitions lisses, comme les paysages ou les portraits. Ils sont bons pour la plupart des situations, comme les arrière-plans des héros, les photos d'équipe, les images en vedette de blog, etc. Cela dit, les JPG peuvent être dimensionnés de manière inappropriée, ce qui les rend plus grandes dans la taille des fichiers.
• PNG: les PNG sont parfaits pour les images avec des arêtes vives, comme des logos ou des graphiques avec du texte. Ils sont également parfaits pour les images avec de grandes images de couleur unie car elles gardent les couleurs nettes et propres. Cependant, les PNG ont tendance à avoir une taille de fichier plus grande, alors utilisez des fichiers PNG pour des zones plus petites de votre conception pour réduire leur taille.
• WebP: Brainchild de Google, WebP, propose souvent les meilleures compressions, ce qui entraîne une taille de fichier beaucoup plus petite, même lors de l'utilisation de grandes images (exemple: 1920px x 1080px). La qualité d'image n'est pas aussi bonne que JPG, mais la différence de taille entre les deux est significative.

2. Redimensionner les images

La taille de l'image est importante. Pour maintenir la taille, téléchargez des images qui ne sont aussi grandes que nécessaire sur votre site Web. Il n'est pas nécessaire de télécharger une image géante, puis de le rétrécir. Cela crée un travail supplémentaire pour vous et ralentira votre site Web.

Il est important de se rappeler qu'une taille unique ne correspond pas à des images. Un visiteur sur un smartphone a-t-il besoin d'une image énorme conçue pour un écran de bureau plus grand? Ils ne le font pas. Utilisez des images réactives lorsque cela est possible pour fournir une image de taille parfaitement pour chaque taille d'écran. Nous passerons en revue cela plus tard, mais l'un des meilleurs moyens de s'assurer que vos images sont sensibles à WordPress est d'utiliser un thème WordPress, comme Divi, qui vous permet de télécharger des images pour chaque point d'arrêt du navigateur, en gardant la taille des fichiers.

3. Propre-toi inutile

En ce qui concerne la taille de l'image, plus petit est meilleur. Lorsque vous utilisez des images dans WordPress, nous voulons rendre les images aussi petites que possible sans sacrifier la qualité. Vous pouvez utiliser des outils de compression comme les plugins d'optimisation d'image pour faire le travail lourd pour vous. Des outils comme Ewww Image Optimizer sont bons, mais nous plongerons plus profondément dans les outils plus tard dans ce post.

De nombreux plugins WordPress et outils de redimensionnement des images en ligne utilisent une compression avec perte ou sans perte pour réduire la taille des images. La compression sans perte est comme plier soigneusement un morceau de papier - vous pouvez le déplier parfaitement et récupérer l'original si nécessaire. Il est idéal pour les images avec des arêtes vives, mais peut ne pas toujours entraîner la plus grande réduction de la taille du fichier.

D'un autre côté, la compression sans perte est un peu plus agressive. C'est comme froissant ce même morceau de papier. Vous pourriez perdre un peu de détail, mais vous obtiendrez une taille de fichier beaucoup plus petite.

4. Chargez des images lorsqu'elles sont prêtes à être vues

Une autre étape que vous pouvez prendre est de charger des images paresseuses sur WordPress. Imaginez faire défiler une longue page. Avez-vous vraiment besoin de charger toutes les photos à la fois? Probablement pas. Le chargement paresseux ne charge que des images dont vous avez besoin pour afficher la page, en mettant celles plus loin sur la page en attendant de charger une fois que vous y êtes arrivé. Les plugins, comme WP Rocket, peuvent facilement ajouter un chargement paresseux à votre site Web WordPress. Il accélérera les temps de chargement de page initiaux, ce qui est impératif pour garder vos visiteurs heureux et en baisse de votre page.

Meilleures pratiques de dimension de l'image

En ce qui concerne les dimensions de l'image, il existe quelques pratiques clés à garder à l'esprit pour vous assurer que votre site Web se charge rapidement et a fière allure sur tous les appareils:

Utilisez des tailles d'image réactives

Différents appareils ont différentes tailles d'écran et résolutions, donc une approche unique ne fonctionnera pas. Par exemple, un bureau peut avoir besoin d'une image de large à 1920px de large, tandis qu'un appareil mobile ne nécessite que 600px de large. Vous pouvez servir la bonne taille pour chaque appareil en utilisant des images réactives. Des outils comme l'attribut secret dans HTML ou un thème WordPress réactif peuvent garder les images contenues dans le div pour fournir la taille d'image appropriée en fonction de l'appareil de l'utilisateur.

Rapport d'aspect Matters

Le maintien d'un aspect cohérent traître à travers vos images peut aider à éviter la distorsion ou la culture étrange. Par exemple, si votre image de bureau a un rapport d'aspect 16: 9, la version mobile doit maintenir le même rapport, même s'il s'agit d'une image plus petite. Cela garantit que vos images semblent proportionnées et professionnelles sur toutes les tailles d'écran.

Évitez de surdimensionner

Le téléchargement des images plus grandes que les images nécessaires est une erreur courante qui peut ralentir votre site Web. Par exemple, si la zone de contenu de votre site Web n'est que de 1080px de large, le téléchargement d'une image large de 2000px n'est pas nécessaire. Les images surdimensionnées consomment la bande passante et le stockage, conduisant à des temps de chargement de page plus lents. Redimensionnez toujours les images pour correspondre aux dimensions maximales affichées sur votre site.

Tester à travers les appareils

Même avec les bonnes dimensions, les images peuvent se comporter différemment sur divers appareils et navigateurs. Testez toujours vos images sur plusieurs appareils - desktops, tablettes et smartphones - pour vous assurer qu'ils ont l'air nets et se charger rapidement. Des outils comme le test adapté aux mobiles de Google ou les outils de développeur de votre navigateur peuvent vous aider à trouver et à résoudre les problèmes d'image pour toutes les tailles d'écran.

Considérez la compression de l'image

Même avec les dimensions correctes, les images peuvent toujours être trop grandes. Les outils de compression peuvent réduire la taille des fichiers sans sacrifier la qualité. Par exemple, une image JPG ou WebP de haute qualité peut être compressée pour se charger plus rapidement tout en étant superbe. La combinaison de dimensions appropriées avec la compression garantit que vos images sont belles et gardent la taille de votre page minimale.

Quels sont les meilleurs outils pour dimensionner des images dans WordPress?

Il existe plusieurs façons de redimensionner facilement les images pour WordPress: avec un plugin, des fonctionnalités intégrées d'un thème premium comme Divi, ou avec Divi AI. Explorons-les davantage pour mieux comprendre ce qu'ils font.

1. Plugins WordPress

L'utilisation d'un plugin d'optimisation d'image est l'une des meilleures façons de redimensionner les images. Ils vous permettent généralement d'effectuer des actions telles que l'optimisation des images ou la redimensionnement des images lorsqu'ils sont téléchargés dans la galerie de médias WordPress. Beaucoup offrent également des fonctionnalités avancées comme la conversion WebP, le chargement paresseux et divers niveaux de compression d'images.

• EWWW Image Optimizer: une option robuste avec des fonctionnalités telles que l'optimisation en vrac, l'optimisation d'arrière-plan et la conversion au format WebP. Ewww Image Optimizer propose un plan gratuit avec une utilisation limitée et des plans payants à partir de 8 $ par mois.
• Shortpixel: connu pour ses excellents algorithmes de compression et sa capacité à réduire considérablement les tailles de fichiers image tout en maintenant la qualité. Shortpixel propose un plan gratuit avec une utilisation limitée et des plans mensuels à partir de 9,99 $ par mois.
• Optimole: met l'accent sur la vitesse et les performances. Utilise un système basé sur le cloud pour l'optimisation et la livraison d'images. Optimole propose un plan gratuit avec une utilisation limitée et des plans payants à partir de 22,99 $ par mois.
• WP SMUSH : une option populaire et très appréciée. SMUSH propose des plans gratuits et payants (à partir de 3 $ par mois) avec des fonctionnalités telles que l'optimisation automatique, la compression avec perte / sans perte, le chargement paresseux et la conversion WebP.
• Imagify: un plugin alimenté par AI qui se concentre sur une compression de haute qualité avec une perte minimale. Imagify fournit un plan gratuit avec une utilisation limitée et des plans payants à partir de 11,99 $ par mois.

2. Divi (thème WordPress et générateur de pages)

Divi est plus qu'un simple thème WordPress - c'est un cadre complet pour créer des sites Web réactifs. Il fournit un constructeur visuel frontal robuste avec des commandes réactives qui vous permettent d'utiliser la meilleure taille d'image pour la vitesse du site Web du téléphone mobile.

Divi gère les tailles d'images mobiles via son système d'édition réactif et ses paramètres de conception. Lorsque vous ajoutez des images en Divi, vous pouvez définir différentes images pour les vues de bureau, de tablette et mobiles. Cela fait partie des fonctionnalités de conception réactives de Divi, vous permettant d'optimiser les images pour chaque type d'appareil. Vous pouvez ajuster les paramètres tels que la taille, la position, le décalage horizontal, et plus encore, en particulier pour les appareils mobiles, en veillant à ce que vos images soient parfaites sur toutes les tailles d'écran.

Changer d'images pour les écrans plus petits

Dans tout module de conception qui contient une image, les contrôles réactifs de Divi vous permettent d'afficher une image d'arrière-plan pour un bureau tandis qu'un autre est affiché pour les tablettes et les appareils mobiles. Par exemple, lors de la modification d'une section de héros sur un site Web Divi, vous pouvez ajouter une image d'arrière-plan mesurant 1920px x 1080px , qui est la taille parfaite pour les grands écrans. La visualisation de la même image sur un appareil mobile peut ne pas être aussi belle, selon l'image utilisée. Par conséquent, Divi comprend des paramètres vous permettant d'ajouter une image d'arrière-plan plus petite (ou une image entièrement différente) pour les écrans plus petits.

Positionnement de fond

Divi vous permet également de contrôler comment les images d'arrière-plan sont positionnées sur différentes tailles d'écran. Chaque module, colonne, ligne et section a ces commandes, ce qui facilite la garantie d'une image, quel que soit le périphérique que les visiteurs utilisent.

Par exemple, vous pouvez définir une image d'arrière-plan centrée sur un bureau mais la repositionner en haut ou en bas sur les appareils mobiles. Cela garantit que la partie la plus importante de l'image est toujours visible, quelle que soit la taille de l'écran. C'est un excellent moyen d'utiliser une image et de conserver la taille de la page au minimum.

Divi a un chargement paresseux intégré

Lorsque vous ajoutez des images ou des arrière-plans à l'aide de divi, le thème s'occupe du levage lourd en appliquant automatiquement le chargement paresseux. Les images ne se chargeront pas tant que l'utilisateur fait défiler vers cette section, en gardant votre page accrocheuse et réactive. Divi exploite les attributs HTML pris en charge par les navigateurs modernes, garantissant que les images sont différées avec des frais généraux de traitement minimaux. Le résultat est des vitesses de page plus rapides et une expérience utilisateur plus fluide. En réduisant le nombre d'images chargées à l'avance, Divi aide à améliorer les mesures clés comme la plus grande peinture contente (LCP) et augmente vos performances de base Web Vitals.

Pour en savoir plus sur l'utilisation d'images dans Divi, consultez notre guide ultime de l'utilisation d'images dans Divi.

Se faire divi

3. Divi Ai

Une autre façon d'utiliser Divi pour vous assurer que la meilleure taille d'image pour la vitesse du site Web du téléphone mobile consiste à utiliser Divi AI pour générer des images parfaitement tailles. Divi AI est comme un assistant de design personnel pour vos sites Web. Une invite de texte peut générer du texte, du code, des pages Web, des sites Web complets et des photos parfaites de pixel.

Par exemple, vous avez besoin d'une image pour une gamme de montagnes enneigée majestueuse pour une entreprise de location de snowboard. Vous avez parcouru des sites d'image libres de droits, mais vous ne trouvez pas ce que vous voulez. Divi AI peut générer cette image pour vous avec la taille que vous spécifiez.

Et grâce aux contrôles réactifs de Divi, vous pouvez également utiliser Divi AI pour générer des images pour des écrans plus petits.

Divi Ai ne crée pas seulement de belles images. Il crée des images intelligentes . Vous pouvez dire exactement sur divi Ai de quelle taille vous avez besoin, et elle offre.

Obtenez Divi Ai

Divi fait du redimensionnement des images pour les sites Web mobiles un jeu d'enfant

Trouver la meilleure taille d'image pour la vitesse du site Web du téléphone mobile ne doit pas être un défi. Si vous choisissez de créer des sites Web avec Divi, vous serez bien équipé pour lutter contre les images à chargement lent. Les fonctionnalités d'optimisation d'image intégrées de Divi, y compris le redimensionnement réactif et le chargement paresseux, fonctionnent dans les coulisses pour s'assurer que les images s'affichent parfaitement pour toute taille d'écran. Mais les avantages de Divi ne s'arrêtent pas là. Avec Divi AI, vous pouvez générer des images de haute qualité dans les dimensions exactes dont vous avez besoin, éliminant les pages Web volumineuses à charge lente.

Pour encore plus de contrôle, tirez parti de la puissance des plugins comme Ewww Image Optimizer pour compresser les images et affiner la vitesse de votre site Web. La combinaison des forces de Divi avec des outils puissants vous permet de créer un site Web qui a l'air incroyable et se charge rapidement, en gardant vos visiteurs heureux et en prospérant votre entreprise.

Voulez-vous en savoir plus sur l'accélération de votre site Web? Consultez ces articles de notre blog:

• Comment augmenter Google PagesPeed Insights Score pour WordPress
• 12 meilleurs plugins d'optimisation de la vitesse WordPress (classés)
• Optimisation de la vitesse Divi: le guide ultime
• 5 sociétés d'hébergement WordPress les plus rapides (testées)