Le guide ultime de la gestion d’images WordPress

  1. 1. En train de lire: Le guide ultime de la gestion d’images WordPress
  2. 2. 3 conseils de gestion d’images moins connus dans WordPress
  3. 3. Erreurs de référencement d’image WordPress et comment les corriger

L’impact visuel est l’une des fonctionnalités les plus importantes lorsqu’il s’agit d’un plan de marketing de contenu percutant. Bienvenue dans une toute nouvelle série de publications – Le guide ultime de la gestion d’images dans WordPress.


Il est conçu pour vous donner les outils nécessaires pour gérer vos actifs d’image dans WordPress – directement depuis les optimisations techniques, le référencement, l’intégration CDN et la gestion de bibliothèque. Dans ce guide en plusieurs parties, nous ne recommanderons que les méthodes, didacticiels, plugins et thèmes que nous avons essayés ou qui sont recommandés par des experts de l’industrie.

Nous éviterons également de suggérer aveuglément des plugins à forte utilisation dans le référentiel WordPress. Au lieu de cela, nous recommandons ceux qui font le parfait accord entre proposition de valeur et optimisation des performances.

Vous vous demandez peut-être comment nous procéderions. Plus de 24 000 téléchargements de notre thème WordPress polyvalent et réactif dans ThemeForest pourraient ne pas être un excellent indicateur.

Eh bien, nous avons parcouru les meilleurs blogs des principales sociétés d’hébergement WordPress (telles que WPEngine et Pagely) et a appris ils appris en diffusant des milliards de pages vues sur des milliers de clients prestigieux. Nous avons compressé toutes ces informations pour vous en minuscules paragraphes et puces pour votre succès en ligne. Commençons maintenant, allons-nous?

Conseils techniques et d’optimisation des performances pour les images WordPress

Il existe un certain nombre d’options d’optimisation d’image disponibles dans WordPress qui ne pas mettre une charge inutile sur le serveur Web. Nous allons examiner certains des conseils d’optimisation d’image les plus courants que tout le monde devrait suivre, ainsi que quelques autres qui viennent utiles dans des occasions spéciales.

JPG ou PNG? Utilisation du format d’image correct

La toute première étape de l’optimisation d’image est un bon début. Ils disent qu’un travail bien commencé est à moitié fait. C’est exactement le cas en matière d’optimisation d’image dans WordPress. Tout commence par le choix du bon format d’image. JPG et PNG sont les deux formats d’image les plus couramment utilisés en ligne dans le marketing de contenu.

L’astuce consiste à comprendre le format à choisir pour chaque type d’image. Choisir le mauvais entraîne une augmentation monumentale de la taille de l’image. Voici les règles.

Quand utiliser le format PNG?

Pour les images plates – comme les vecteurs, les illustrations, les polices, les logos, les bannières, les formes, les bannières, etc. – tout ce qui est créé dans un format vectoriel tel que EPS ou Adobe Illustrator (.AI), utilisez un PNG. Vous finirez par obtenir une image optimisée avec une perte de qualité presque nulle. Si vous utilisez un JPG dans ce cas, vous ne ferez aucun compromis sur la taille, mais vous risquez de manquer de qualité. En fait, à des résolutions plus élevées, le PNG serait plus léger sans perte de qualité. Le JPG en souffrirait.

Prenez son exemple. Nous allons créer une image plate à 5000 pixels et l’enregistrer en JPG et PNG.

Exemple d’image utilisée pour le test

Image plate
JPG233KB
PNG42 Ko

En un mot, l’image JPG était 455% plus élevée que le PNG pour la même résolution.

Quand utiliser le format JPG?

Pour tout le reste, utilisez un JPG. Tout autre chose qu’une image plate ou vectorielle, utilisez JPG. Photos de personnes, de lieux, de choses, etc. – utilisez JPG. Presque toutes les photos de cette catégorie utilisent JPG. Si vous utilisez PNG au lieu d’un JPG, vous rencontrerez certains graves problèmes de performances.

Vous devez être extrêmement prudent dans ce cas. Si vous utilisez un JPG à la place d’un PNG, il y aurait peu ou pas de dommages. Cependant, si vous utilisez un PNG sanglant dans le cas d’un JPG, vous créez beaucoup de place pour les dommages. Jetez un oeil à cet exemple.

Installer: J’ai téléchargé cette image depuis Shutterstock, qui pèse environ 10,3 Mo à une résolution de 6149 × 4562 – essentiellement une photo de 28MP. À moins que nous ne préparions quelque chose comme une brochure prête à imprimer, nous n’utiliserons pas la pleine résolution de la photo dans nos blogs. Disons que nous avons une taille d’image maximale fixe de notre blog de 1600px.

Expérience: Nous allons redimensionner l’image source à 1600 pixels et créer quatre versions – deux pour le format PNG et deux pour JPG. Pour chaque format (JPG / PNG), nous utiliserons (a) les paramètres de compression recommandés et (b) les paramètres de compression maximum.

Exemple d’image pour l’expérience JEPG

Résultats: Voici les résultats dans un joli tableau à suivre:

Image originale (KB)

10870
Résolution cible1600px
FormatRéglagesTaille (Ko)% Réduction
JPGProgressif, qualité = 8523198%
Non progressif, qualité = 8523998%
PNGCompression = 0557549%
Compression = 6185283%
Compression = 9175084%

À première vue, on pourrait penser que 84% de compression de PNG est assez bien contre les 98% atteints en JPG. Ce n’est pas tout à fait vrai. Si vous regardez de plus près les tailles d’image, vous verrez que le PNG pèse un peu plus de 1,7 Mo alors que le JPG est de 0,22 Mo. Ce qui signifie que le Le PNG est 8 fois plus lourd que le JPG version de la même image à la même résolution. En d’autres termes, pour la même image et la même résolution, la version JPG est 700% plus légère que la PNG!

Pour la même image et la même résolution, la version JPG est 700% plus légère que la PNG!

En règle générale, utilisez PNG pour les images à plat et JPG pour tout le reste.

Liste de contrôle pour le téléchargement de photos dans les blogs

Il y a des tonnes de blogs où les éditeurs téléchargent directement la version pleine résolution de l’image dans leurs articles de blog. Voici quelques conseils pour télécharger des photos de stock sur des blogs. J’utilise un logiciel gratuit appelé IrfanView qui a beaucoup de fonctionnalités impressionnantes. Je vais illustrer chacun pour vous.

1. Redimensionnez votre image

Tout d’abord, vous devez décider d’une résolution maximale pour toutes vos images dans votre site WordPress. Toute image au-dessus de cette dimension serait redimensionnée, à moins bien sûr qu’elle soit plus petite.

IrfanView a un Conversion par lots (appuyez sur B après le lancement de l’application) qui peut appliquer une liste de fonctions à un tas d’images en une seule fois. Pour nos besoins, les fonctions incluent le redimensionnement, le recadrage, l’ajout d’un filigrane, etc..

2. Supprimer les données EXIF

Les photos cliquées sur un appareil photo ordinaire ont beaucoup de métadonnées – qui n’est rien d’autre que de minuscules (mais utiles) informations sur l’image. Des exemples de telles informations incluent les coordonnées GPS de l’endroit où la photo a été cliquée, les paramètres ISO, le modèle de l’appareil photo, etc..

Informations EXIF ​​d’une photo aléatoire cliquée sur mon iPhone

À moins que nous ne fassions du blog photo, nous ne voulons généralement pas de telles informations dans l’image d’un article de blog. Lorsque vous enregistrez ou convertissez des images par lots dans IrfanView, les données EXIF ​​sont généralement supprimées. Cela aide à préserver votre vie privée – en particulier votre emplacement physique. La différence de taille pour la plupart des photos est d’environ 200 à 300 Ko par image.

3. Enregistrer en JPG progressif

IrfanView a enregistré les JEPG comme progressifs par défaut

Une image JPG progressive charge l’image couche par couche, accélérant ainsi le temps de chargement. Les réseaux de diffusion de contenu tels que KeyCDN ont commencé conversion automatique JPG à JPG progressifs pour accélérer la livraison d’images et optimiser le stockage.

4. Réglez le DPI sur 72

DPI ou points par pouce est une mesure de la qualité de l’image. Une valeur DPI élevée est utilisée pour le matériel d’impression. Pour le web, une valeur de 72 est parfaite.

D’accord, donc résumant ce qui précède, voici mes paramètres. J’exécute cette fonctionnalité une fois que j’ai compilé toutes les images pour mon article de blog – avant de télécharger les images sur WordPress.

Paramètres de conversion par lots dans IrfanView pour un blog WordPress typique

5. Optimisez vos images

Que vous ayez utilisé JPG ou PNG, vous devez optimiser votre image. Il existe de nombreux outils en ligne vraiment géniaux qui vous aident à optimiser vos images et à lot de l’espace.

Je parle de services tels que TinyPNG ou TinyJPG qui optimise simplement vos images PNG / JPG avec des algorithmes avancés.

Images optimisées dans TinyPNG

Pour être honnête, je ne sais pas comment fonctionnent les algorithmes, mais ils le font et j’ai toujours pu obtenir une réduction de 50 à 70%, quelle que soit la meilleure façon de les enregistrer..

Vous pouvez également acheter le version pro du service en tant que plugin Photoshop pour 50 $ USD. Les versions Windows et Mac sont disponibles. Pour mes besoins, la version en ligne (couplée à la Enregistrer dans Dropbox fonction) fonctionne mieux.

Plugins d’optimisation d’image dans WordPress

Jusqu’à présent, nous avons appris les étapes commencé droite. Que se passe-t-il si vous êtes tombé sur ce post maintenant et que vous avez déjà téléchargé des centaines d’images? Eh bien, voici quelques plugins pour vous aider:

EWWW Cloud Image Optimizer

Ce plugin est un fork de l’original et très populaire Optimiseur d’image EWWW brancher. Amassant plus de 500 000 téléchargements, ce plugin d’optimisation d’image vous permet d’optimiser les images lors de leur téléchargement sur WordPress.

Ce qui le distingue de la concurrence, c’est sa capacité à optimiser les images existantes dans votre base de données, ce qui se traduit par une énorme augmentation des performances. Il permet également d’économiser des coûts de bande passante importants car la plupart de votre trafic provient d’anciens articles. Vous pouvez également choisir d’activer la compression d’image avec perte (qui est à peine visible à l’œil nu), mais vous pouvez économiser beaucoup d’espace et de bande passante. En termes de technologie d’optimisation, il peut utiliser TinyPNG ou l’API de TinyJPG pour optimiser les images nouvelles et existantes.

Mais voici le problème. De nombreux hôtes (y compris WPEngine) n’autorisent pas le plugin EWWW Image Optimization car il met beaucoup de charge supplémentaire sur le serveur. Si vous parvenez d’une manière ou d’une autre à contourner les restrictions du serveur, vous risquez de suspendre votre compte en raison de violations de règles.

C’est là que EWWW Cloud Optimizer le plugin vient de jouer. Il décharge tous les calculs nécessaires pour optimiser les images dans le cloud et remplace simplement les images non optimisées par celles optimisées. Étant donné que la puissance du processeur pratiquement nulle est utilisée pour la compression, il n’y a pas de charge supplémentaire sur le serveur. Ceci est valable pour toutes les conversions d’images nouvelles et existantes dans votre site WordPress.

Plans et prix: Comme on pouvait s’y attendre, le plugin n’est pas gratuit car le développeur doit payer les factures de cloud computing. Cependant, le prix est extrêmement raisonnable et coûte 9 $ USD pour 3000 optimisations d’image pour un abonnement prépayé.

Le plugin EWWW Cloud Optimizer est magnifiquement conçu. Le scanner multimédia vous indique le nombre d’images que vous devez optimiser avant d’effectuer un achat. Sur la base des images de votre serveur, vous pouvez acheter un forfait prépayé pertinent.

Plugin WordPress TinyPNG

C’est un autre excellent plugin d’optimisation d’image qui s’intègre directement au service TinyPNG / JPG. Il automatiquement des images nouvelles et existantes téléchargées dans la bibliothèque multimédia WordPress. Ce plugin offre un plan gratuit de 100 optimisations d’image par mois.

Freddy avait compilé une liste de plugins d’optimisation d’image il y a quelque temps – lisez-la si vous souhaitez en savoir plus sur le sujet.

Conclusion

Cela nous amène à la fin du premier post de cette série. Dans le prochain article, découvrez comment certains conseils et astuces d’optimisation d’image moins connus, tels que la prévention des hotlinks, la récupération d’images à partir de serveurs distants, etc. Avez-vous quelques conseils sous le bien commencer Catégorie? Faites-le nous savoir dans les commentaires ci-dessous.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map