L’impact visuel est l’une des caractéristiques 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 des images dans WordPress.
Il est conçu pour vous donner les outils nécessaires pour gérer vos ressources d’images 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 recommandés par des experts du secteur.
Nous éviterons également de suggérer aveuglément des plugins très utilisés dans le référentiel WordPress. Nous recommanderons plutôt ceux qui trouvent l’accord parfait 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 Total – WordPress polyvalent réactif thème dans ThemeForest pourrait ne pas être un bon indicateur.
Eh bien, nous avons parcouru les meilleurs blogs des principales sociétés d’hébergement WordPress (telles que WPEngine et Pagely) et j’ai appris ce elles ou ils appris en servant des milliards de pages vues sur des milliers de clients de premier plan. Nous avons compressé toutes ces informations pour vous dans de minuscules paragraphes et puces pour votre succès en ligne. Maintenant, commençons, voulez-vous ?
Conseils d’optimisation technique et des performances pour les images WordPress
Il existe de nombreuses options d’optimisation d’image disponibles dans WordPress qui ne pas mettre une charge inutile sur le serveur Web. Nous examinerons certains des conseils d’optimisation d’image les plus courants que tout le monde devrait suivre, ainsi que quelques autres qui sont utiles lors d’occasions spéciales.
JPG ou PNG ? Utiliser le bon format d’image
La toute première étape de l’optimisation d’image est un bon début. On dit qu’un travail bien commencé est à moitié fait. C’est exactement le cas lorsqu’il s’agit 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 est de comprendre quel format choisir pour chaque type d’image. Choisir le mauvais provoque une augmentation monumentale de la taille de l’image. Voici les règles.
Quand utiliser le format PNG ?
Pour les images plates – telles que 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 le format EPS ou Adobe Illustrator (.AI), utilisez un PNG. Vous obtiendrez une image optimisée avec une perte de qualité presque nulle. Si vous utilisez un JPG dans ce cas, vous ne ferez pas de compromis sur la taille, mais vous pourriez 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 à 5000px et l’enregistrer au format JPG et PNG.
Image plate | |
JPG | 233 Ko |
PNG | 42 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 d’archives de cette catégorie utilisent JPG. Si vous utilisez PNG à la place d’un JPG, vous rencontrerez des sérieux problèmes de performances.
Vous devez redoubler de prudence dans ce cas. Si vous utilisez un JPG à la place d’un PNG, il y aurait peu ou pas de dégâts. Cependant, si vous utilisez un PNG sanglant dans le cas d’un JPG, vous créez beaucoup de place pour les dommages. Jetez un œil à cet exemple.
Installer: J’ai téléchargé cette image de Shutterstock, qui pèse environ 10,3 Mo à une résolution de 6149×4562 – essentiellement une photo de stock 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 à 1600px et créer quatre versions – deux pour le format PNG et deux pour le JPG. Pour chaque format (JPG/PNG), nous utiliserons les (a) paramètres de compression recommandés et (b) les paramètres de compression maximale.
Résultats: Voici les résultats dans un joli tableau à suivre :
Image originale (Ko) |
10870 | ||
Résolution cible | 1600px | ||
Format | Paramètres | Taille (Ko) | % Réduction |
JPG | Progressif, Qualité = 85 | 231 | 98% |
Non-Progressif, Qualité = 85 | 239 | 98% | |
PNG | Compression = 0 | 5575 | 49% |
Compression = 6 | 1852 | 83% | |
Compression = 9 | 1750 | 84% |
À première vue, on pourrait penser que 84 % de compression de PNG est assez bien par rapport aux 98 % atteints en JPG. Ce n’est pas tout à fait vrai. Si vous regardez de plus près la taille des images, vous verrez que le PNG pèse un peu plus de 1,7 Mo alors que le JPG fait 0,22 Mo. Ce qui signifie, le PNG est 8 fois plus lourd que le JPG version de la même image à la même résolution. Autrement dit, à image et résolution égales, 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 plates et JPG pour tout le reste.
Liste de contrôle pour le téléchargement de photos d’archives dans les blogs
Il existe 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 sur votre site WordPress. Toute image au-dessus de cette dimension serait redimensionnée, à moins bien sûr qu’elle soit plus petite.
IrfanVoir a un Conversion par lots fonction (appuyez sur B après avoir lancé 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 du lieu où la photo a été cliquée, les paramètres ISO, le modèle de l’appareil photo, etc.
À moins que nous ne soyons en train de bloguer sur des photos, nous ne voulons généralement pas de telles informations dans l’image d’un article de blog. Lorsque vous enregistrez ou convertissez par lots des images 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 au format JPG progressif
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é à convertir automatiquement les JPG en JPG progressifs pour accélérer la diffusion des 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.
Bon, pour résumer 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.
5. Optimisez vos images
Que vous ayez utilisé JPG ou PNG, vous devez optimiser votre image. Il existe de nombreux outils en ligne vraiment impressionnants qui vous aident à optimiser vos images et à enregistrer un parcelle de l’espace.
Je parle de services tels que TinyPNG ou TinyJPG qui optimise simplement vos images PNG/JPG avec des algorithmes avancés.
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 sauvegarder.
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 au Enregistrer dans Dropbox fonctionnalité) fonctionne le mieux.
Plugins d’optimisation d’image dans WordPress
Jusqu’à présent, nous avons appris les étapes pour obtenir commencé droit. Que se passe-t-il si vous êtes tombé sur cet article 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. Avec plus de 500 000 téléchargements, ces plugins d’optimisation d’images vous permettent d’optimiser les images au fur et à mesure qu’elles sont téléchargées 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 entraîne une énorme augmentation des performances. Cela 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 peut économiser beaucoup d’espace et de bande passante. En termes de technologie d’optimisation, il peut utiliser l’API TinyPNG ou TinyJPG pour optimiser les images nouvelles et existantes.
Mais voici le problème. De nombreux hébergeurs (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 pourriez risquer que votre compte soit suspendu en raison de violations de la politique.
C’est là que le Optimiseur de cloud EWWW le plugin vient jouer. Il décharge tous les calculs nécessaires pour optimiser les images vers le cloud et remplace simplement les images non optimisées par celles optimisées. Étant donné que pratiquement aucune puissance CPU n’est utilisée pour la compression, il n’y a aucune charge supplémentaire sur le serveur. Ceci est valable pour toutes les conversions d’images nouvelles et existantes dans votre site WordPress.
Forfaits et prix : Comme on pouvait s’y attendre, le plugin n’est pas gratuit puisque 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’images pour un abonnement prépayé.
Le plugin EWWW Cloud Optimizer est magnifiquement conçu. Le scanner multimédia vous indique combien d’images vous devez optimiser avant de faire 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 s’agit automatiquement d’images nouvelles et existantes téléchargées dans la médiathèque WordPress. Ce plugin propose un forfait gratuit de 100 optimisations d’images 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 article de cette série. Dans le prochain article, découvrez comment certains trucs 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 des conseils sous le bien démarrer Catégorie? Faites-nous savoir dans les commentaires ci-dessous.