Redimensionneur d'images

Le module Image Resizer est conçu pour redimensionner facilement les images après leur téléchargement sur le site. Il est particulièrement utile dans les situations où la même image est utilisée dans différentes parties du site, mais doit être affichée dans des tailles différentes.

Par exemple, selon la conception du site, la même image peut être affichée dans plusieurs blocs : dans l’accroche, dans la liste des contenus et dans la version complète de l’article. Si l’on se contente de réduire l’image à l’aide de HTML ou de CSS, l’image reste en réalité de grande taille (par exemple, 500×400 px), tout en occupant une zone plus petite (300×250 px). Cela a un impact négatif sur le SEO, car cela augmente le poids de la page et réduit sa vitesse de chargement — des paramètres que les moteurs de recherche prennent en compte lors du classement.

Fonctionnalités principales du module

Image Resizer est utile non seulement du point de vue du SEO, mais simplifie également considérablement le travail des développeurs et des administrateurs de sites. Dans les projets d’actualités et de contenu, il est souvent nécessaire d’afficher une image dans différentes proportions et tailles. Avec un redimensionnement standard via CSS, le rapport d’aspect peut être déformé, ce qui nuit à l’apparence visuelle.

Grâce à la fonction Crop (recadrage), le module découpe automatiquement la zone nécessaire de l’image et l’adapte aux dimensions définies sans perte de proportions. Vous pouvez indiquer quelle partie de l’image doit être utilisée — le centre, le haut, le bas ou les coins.

Travail avec des images externes

En tant que fonctionnalité supplémentaire, le module prend en charge le travail avec des images externes. Si un contenu utilise une image hébergée sur un service tiers (via un lien direct), Image Resizer peut automatiquement la télécharger sur votre serveur, puis effectuer :

• le redimensionnement ;

• le réglage de la qualité ;

• le recadrage de l’image.

Optimisation SEO des noms de fichiers

L’un des problèmes de DLE est l’ajout d’un timestamp Unix au nom de l’image. Ces noms de fichiers longs et illisibles n’apportent aucun bénéfice pour le SEO. Image Resizer résout ce problème en permettant d’utiliser la valeur de la balise alt comme nom de fichier.

Ainsi, les images peuvent automatiquement recevoir des noms pertinents et adaptés au SEO, sans préfixes inutiles.

Performance et mise en cache

Le redimensionnement des images n’est pas effectué à chaque ouverture de page. Le traitement a lieu uniquement lors du premier affichage de l’image, puis le résultat est enregistré dans le cache. Cela signifie que :

• la charge sur le serveur est minimale ;

• la vitesse de chargement des pages ne diminue pas ;

• aucun retraitement n’est nécessaire.

URLs courtes pour les images

Si, même après le renommage, l’URL des images reste trop longue, vous pouvez remplacer le chemin
/uploads/cache/
par un répertoire virtuel, par exemple /resimler/.

⚠️ Important : le chemin virtuel indiqué ne doit pas coïncider avec les répertoires réellement utilisés par le système ou avec les noms de catégories.

Ajout automatique de width et height

Après le redimensionnement de l’image, le module peut ajouter automatiquement les attributs width et height dans le code HTML. Cela a un effet positif sur le SEO et la stabilité de la mise en page, car le navigateur connaît à l’avance les dimensions de l’image.

Exemple d’utilisation

Code TPL :

HTML sans module
Taille de l’image : medium standard depuis le panneau d’administration

HTML avec module
Taille : 140×100 px, qualité : 90%

HTML avec module (sans nommage automatique) :

Téléchargement d’images via un lien externe

Vous pouvez télécharger automatiquement des images depuis des sites tiers en utilisant le paramètre d:1 :

Résultat :

La taille de l'image a été réduite de 94 KB à 12 KB, ce qui diminue considérablement le poids total de la page.

Flexibilité d'utilisation

Le module peut être utilisé dans n'importe quel fichier .tpl. Il est compatible avec :

• les balises image ;

• les champs supplémentaires ;

• les modèles standard de DLE.

Si nécessaire, le module peut être activé et désactivé à tout moment.

Optimisation de la vitesse de chargement

Si la vitesse de chargement de votre site ne vous satisfait pas et que vous utilisez des images de différentes tailles, Image Resizer vous permettra de voir clairement la différence dans Google PageSpeed.

Pour une optimisation encore plus poussée, vous pouvez :

• télécharger les images depuis /uploads/cache/ ;

• les compresser davantage à l'aide d'utilitaires (par exemple, optipng) ;

• les téléverser à nouveau sur le serveur.

Formats d'enregistrement des paramètres

Recadrage (Crop)

Avant le recadrage, l'image est automatiquement réduite à la taille minimale autorisée, puis le cadrage est effectué.

Description des paramètres

• w — largeur

• h — hauteur

• q — qualité (0–100)

• f — ajout de width et height dans le HTML

• d — téléchargement d'une image externe sur le serveur

• e — orientation du redimensionnement :

  • 1 ou w — selon la largeur

  • 2 ou h — selon la hauteur

  • 0 ou vide — selon le côté le plus long

Fonctionnalités supplémentaires

Dans le panneau d'administration, vous pouvez choisir la méthode de hachage prise en charge par le serveur. Elle est utilisée pour générer un suffixe unique du nom de fichier, par exemple :

Ceci est un fork du module, le code a été corrigé pour fonctionner sur les versions actuelles de DLE 19.0 (L'original se trouve ici : https://github.com/dlenettr/image-resizer).

Si vous copiez ce fichier sur votre site, veuillez indiquer un lien vers notre site comme auteurs de l'amélioration !