La vitesse de chargement d'un site est étroitement liée au poids des images qui s'y trouvent. Il est important d'y apporter une attention particulière.
Voici les paramètres conseillés pour les images publiées sur Porto Vecchio Marine :
Dimensions minimum : 1200 pixels de large
Dimensions maximum : 2400 pixels de large
Poids maximum : 1 MO
Formats : jpg, jpeg ou png
Couleurs : RVB
Chaque image que vous chargez sur le site est ensuite recadrée dans les différents formats d'affichage.
Ouvrez votre image dans Photoshop. Rendez-vous dans le menu Édition > Convertir en profil
Dans la boite de dialogue Convertir en profil, choisissez le profil sRGB IEC61966-2.1 dans le menu déroulant situé sous l'intitulé «Espace de destination».
Validez en cliquant sur OK.
Ouvrez votre image dans Photoshop. Rendez-vous dans le menu Image > Taille de l'image
Dans la boite de dialogue Taille de l'image, Cochez la case Rééchantillonnage, passez les unités en Pixels puis indiquez la largeur souhaitée.
💡Note : Il est préférable de réduire la dimension d'une image plutôt que de l'agrandir. Indiquer une largeur plus grande que la largeur initiale n'améliore pas la qualité d'une image.
Ouvrez votre image dans Photoshop.
Option 1 :
Suivant votre version de Photoshop, rendez-vous dans le menu Fichier > Enregistrer pour le Web
ou Fichier > Exportation > Enregistrer pour le Web (hérité)
Choisissez d'afficher l'onglet Optimisé pour voir un aperçu de l'image une fois exportée.
Dans la colonne de droite, choisissez le format JPEG, qualité Supérieure (80), et l'option Optimisé.
Décochez l'option Incorporer le profil de couleur si elle est cochée.
Cochez l'option Convertir sRVB si elle n'est pas cochée (permet de passer l'image en RVB si l'étape décrite plus haut n'a pas pu être faite)
Si vous n'avez pas redimensionner l'image, vous pouvez encore le faire à cette étape en personnalisant la taille de l'image.
Cliquez sur le bouton Enregistrer
Option 2 :
Rendez-vous dans le menu Fichier > Exportation > Exporter sous…
Indiquez les différents paramètres dans la colonne de droite. Ils sont identiques à ceux de l'option 1, mais présentés différemment.
Cliquez sur Exporter
Le nom des images participe au référencement global du site.Il est donc préférable d'éviter au maximum les nommages standard tels que img2076.jpg
Choisissez une nomenclature de nommage adaptée à votre site et descriptive.
Ex: Porto-Vecchio-Marine-Itama48-exterieur.jpg
Vous pouvez utiliser des numéros en fin de noms dans le cas de plusieurs images.
🚨Les caractères spéciaux (lettres accentuées, cédille, symbôles monétaires, ponctuation et espaces) sont à proscrire dans les noms de fichiers. Veillez également à ce que le fichier n'ai pas deux extensions (ex: fichier.jpg.png causera un problème d'affichage)
Une fois les images exportées depuis Photoshop, il est encore possible de réduire considérablement leur poids sans perdre de qualité visuelle grâce à des compresseurs d'images.
Le site compressor.io permet de compresser jusqu'à 10 images à la fois, dans la limite de 10 MO par compression.
Les gains sont spectaculaires : entre 50% et 70% du poids initial de l'image sont économisés.
Procéder systématiquement à la compression des visuels avant de les uploader sur le site vous assure une rapidité de chargement et un référencement optimisé.