Préparer ses images pour internet

Créé le 20/10/2012
Dernière mise à jour : 28/01/2018

 

Préparer ses images AVANT DE LE TÉLÉCHARGER SUR LE SITE, c'est très important

  • pour économiser l’espace utilisé sur votre serveur et donc pour améliorer les performances de votre site;
  • pour éviter les bugs

Donc dans ce tuto, tout est Attention !

 

Les conseils qui suivent sont également valables pour vos images à insérer dans des documents Word, PDF, etc. Ceux-ci n'en seront que plus légers.

 

Sommaire

 

 .

 

1. Noms de fichiers

Il est important de respecter certaines règles, pour éviter des bugs d'affichage sur les sites.

Info :
Les informaticiens déplorent d'ailleurs que les systèmes d'exploitation et de nombreuses applications acceptent tous les caractères pour les noms de fichiers car cette absence de contrainte génère des problèmes fréquents.

 

Caractères acceptés et/ou tolérés :

a à z
A à Z
0 à 9
- _ ( )
espace

C'est tout ! Pas de lettres accentuées, cédilles, etc, ni points, apostrophes ou autres signes de ponctuation.

 

Exemples :

Fleur-d-ete-12 : OUI 🙂
Fleur_d_ete-12 : OUI 🙂
Fleur d ete (12) : OUI 🙂
Fleur d'été, 12 : NON :angry:
Fleur d'été (12) : NON :angry:

 

N.B.
Pour renommer et numéroter tout un groupe de fichiers, voir mon tutoriel Petits trucs basiques

 

Conseil :
Qu'il s'agisse d'images, de fichiers Word ou autres, prenez l'habitude d'appliquer ces règles de noms à tous les fichiers que vous placez ou créez sur votre disque dur. C'est une bonne pratique !

 


 

2. Extension et poids de vos images

Le poids d'une image dépend de sa taille, de son extension et de son taux de compression.

Des images trop lourdes ralentiraient la navigation sur votre site. J'ai équipé votre site d'un outil qui optimisera automatiquement vos images dès leur téléchargement sur le site. Ainsi la taille et le poids de chaque image sera optimum en fonction de son affichage à l'écran.

Néanmoins, il faut qu'au départ leur extension et leur poids d'origine respectent certaines règles.

 


 

2.0. Question préalable : faut-il conserver les originaux ?

Si votre disque dur (interne ou externe) est d'un capacité suffisante, il est préférable de conserver les originaux de vos images. Vous pourriez en avoir besoin pour des impressions sur papier, telles photos encadrées, affiches, folders, etc.

Autre raison : un accident est vite arrivé. Si vous faites une erreur et, par exemple, réduisez trop certaines images, il vaut mieux avoir les originaux sous la main pour pouvoir recommencer.

 


 

2.1. Vérifier l'extension et le poids d'une image

Dans l'explorateur (Windows ou Mac) de votre disque dur,
survolez le fichier avec la souris et lisez la bulle qui s'affiche
OU
cliquez droit sur le fichier et sélectionnez "Propriétés", puis "Détails".

 

SI

1) l'extension de vos images est .JPG (ou .JPEG)

ET

2) le poids de chacune ne dépasse pas 1500 Ko (1,5 Mo),

 

ALORS VOUS N'AVEZ PAS BESOIN DE LIRE LA SUITE  wp-monalisa icon

 



 

2.2. Convertir en .JPG une/des image(s) .TIFF, .BMP, .PNG, etc

Principe :

.JPG (.JPEG) est le format pour internet par excellence. Il est le plus léger.

Infos sur les autres extensions (si ça vous intéresse) :

  • .TIFF et .BMP : À ÉVITER ABSOLUMENT ! Ce sont des formats très lourds réservés aux impressions de haute qualité sur papier. (Sur écran, cette différence de qualité ne se voit pas).
  • .PDF : à évitez également car, techniquement, ce ne sont pas de réelles images
  • .PNG : assez léger mais moins que .JPG. N'est utile que quand le fond de l'image est transparent (comme certains logos, par exemple)
  • .GIF : n'est utile que pour les petites images animées (comme certaines icônes, par exemple)

 

 

Méthode :

- Paint ou tout autre logiciel de dessin
OU
- Outil gratuit, très simple et en ligne (pas besoin d'installer un logiciel). Si besoin d'aide, contactez-moi.
https://www.zamzar.com/

AVANTAGE de ZamZar.com : facile et permet de convertir plusieurs images à la fois
(si vous ne savez pas comment sélectionner plusieurs fichiers, voir mon tutoriel “Petits trucs basiques”)

 


 

2.3. Réduire le poids des images dépassant 1500 Ko

Principe :

Votre site n'acceptera pas de télécharger une image dépassant 1500 Ko (1,5 Mo).

En réduisant la taille d'une image, on réduit forcément son poids. C'est ce que nous allons faire.

Conseil : choisir 2000 pixels comme taille maximum du côté le plus long. Ainsi
1) L'image sera assez grande même si elle devait occuper toute la largeur d'un grand écran de PC
2) Vous serez à peu près sûr.e que son poids sera inférieur à 1500 Ko (1,5 Mo).

Méthode :

- Paint ou tout autre logiciel de dessin
OU
- Outil gratuit, très simple et en ligne (pas besoin d'installer un logiciel)
https://bulkresizephotos.com/
(Si vous voulez explorer d'autres outils similaires, tapez dans DuckDuckGo ou Google : "best bulk image size online")

AVANTAGES de ces outils en ligne : faciles et permettent de redimensionner plusieurs images à la fois

 

  • Allez sur https://bulkresizephotos.com/
  • Cliquez sur le bouton "Choose images" et choisissez une ou plusieurs images à partir de votre disque dur
    (si vous ne savez pas comment sélectionner plusieurs fichiers, voir mon tutoriel "Petits trucs basiques")
  • A gauche, cliquez sur "Longest side" et au centre, entrez "2000"
  • En bas, cliquez sur "Start Resizing"
  • Soit s'affiche une boîte de dialogue pour que vous choisissiez votre dossier de destination,
    soit les images redimensionnées iront automatiquement dans votre dossier "Téléchargements"
  • Pour le redimensionnement d'une seule image, le nouveau fichier portera le même nom
    Pour le redimensionnement d'un groupe d'images, celles-ci seront rassemblées dans un fichier compressé appelé "ResizedPhotos.0.zip"
  • Groupe d'images : il faudra décompresser le fichier .ZIP avant d'utiliser ces nouvelles images.
    (sur Windows, si vous ne savez pas comment décompresser un fichier .ZIP, voir ici --> https://support.microsoft.com/fr-fr/help/14200/windows-compress-uncompress-zip-files )
  • Si, après cette opération le poids de votre image ou de certaines d'entre elles dépasse 1500 Ko (1,5 Mo), recommencez l'opération en assignant 1500 ou 1000 au côté le plus long ("longest side").

 



 

Joyeuse mise en images ! 🙂