Comment COMPRESSER une IMAGE dans PHOTOSHOP

Avoir un site Web n'est pas uniquement basé sur le téléchargement incontrôlé de contenu, vous devez prendre soin de la structure du Web, y compris de chaque élément que nous y hébergeons. Il faut tenir compte du fait qu'il est accessible via des connexions Internet et que, bien que dans de nombreux endroits, il existe des vitesses élevées, dans d'autres, elles sont encore quelque peu décalées. Tout cela sans tenir compte de l'importance du thème mobile et de la dépense en mégaoctets. C'est pourquoi compresser des images sans perdre en qualité Photoshop est une tâche très recherchée par les créateurs qui pensent dans l'intérêt des utilisateurs.

Ce que nous ne devons pas faire, c'est transformer notre site Web en un espace lent dans lequel les gens ne veulent plus entrer, ce que nous pouvons éviter si nous prenons en compte différents éléments et apprenons à compresser les images dans Photoshop. L'un d'eux et très important est le téléchargement d'images. Si vous avez un site avec beaucoup de contenu visuel, vous devez en prendre soin à la fois à l'intérieur et à l'extérieur en compressant les images Photoshop et en accélérant la page.

La vitesse de notre site Web est essentielle pour l'expérience utilisateur puisqu'il n'en est pas de même d'entrer dans une page rapide qui n'affecte pas notre connexion à un site Web où tous les objets que nous voyons se chargent très lentement. De plus, pour voir les images, elles doivent être téléchargées sur le serveur, donc plus le volume est élevé, plus la charge prendra du temps et l'utilisateur va probablement désespérer et partir. D'où l'importance de retoucher des images dans Photoshop et d'améliorer notre site internet ou simplement notre espace en sachant compresser des images dans Photoshop.

Si vous téléchargez des images très lourdes, votre page sera lente et les utilisateurs se fatigueront et partiront. Si vous voulez éviter de perdre des visites, prenez soin de tout ce que vous téléchargez et apprenez à compresser une image dans Photosho en réduisant sa taille.

1. Types de formats d'image dans Photoshop


Pour parler d'optimisation d'image, nous devons distinguer quel type de format d'image nous avons et lequel nous convient le mieux.

Format JPEG.webpPour une utilisation photographique générale, c'est le format standard utilisé avec des résultats de bonne qualité. Prend en charge la couleur 24 bits.

Format PNG-8C'est l'alternative au GIF.webp mais sans animations et peut afficher jusqu'à 256 couleurs. Sa compression pour le web est l'une des plus adaptées, permettant une bonne qualité avec des tailles réduites.

Format PNG-24C'est une bonne option pour exporter des images de qualité comme JPEG.webp. Ce type d'extension est pratique lorsque nous avons une image qui contient de la transparence. Il affiche également jusqu'à 16 millions de couleurs car il prend en charge les couleurs 24 bits.

format GIF.webpC'est le format d'animation par excellence. Représente jusqu'à 256 couleurs dans des formes de grandes quantités de couleurs unies, de lignes ou de texte.

Pour ce didacticiel, nous choisirons deux des formats les plus utiles et les plus utilisés pour télécharger des images sur le Web : JPEG.webp et PNG-8.

2. Comment compresser une image dans Photoshop


Lorsque nous travaillons dans un espace de travail dans Photoshop, nous le faisons selon certains paramètres selon l'image ou d'ordre général. L'un d'eux est la taille, les proportions de l'image avec laquelle nous travaillons. La taille d'une image correspond au nombre de pixels qu'elle contient verticalement et horizontalement, donnant lieu à la taille de l'image.

Ce que nous appelons résolution signifie le nombre d'informations dans un espace spécifique, appelé pixels par pouce ou dpi. Cela signifie que plus le nombre de pixels par pouce est élevé, plus notre résolution sera élevée.

Une fois les deux aspects différenciés, il convient de noter que deux images peuvent avoir la même taille, mais une résolution et des proportions différentes. S'il s'agit d'images pour le web, il est recommandé de traiter les tailles en pixels. Pour y accéder, allez dans Image / Taille de l'image ou appuyez sur la combinaison suivante.

Ctrl + Alt + I

NoterL'option Rééchantillonner l'image nous permet de changer la taille sans modifier la résolution. Sélectionnez l'option la plus appropriée pour ce dont vous avez besoin.

3. Changer le profil de couleur de Photoshop


L'espace colorimétrique dans lequel nous travaillons influencera également le fichier final. Il faut mentionner la différence entre l'espace sRGB et RVB. Le système Adobe RGB a été introduit par la société en 1998 et compose un spectre de couleurs beaucoup plus large que l'espace sRGB. Cela ne veut pas dire que c'est pire, mais qu'ils sont dédiés à des objectifs différents.

Le système RVB est plus proche avec son spectre de celui du CMJN, qui est orienté vers le monde de l'impression. Bien qu'il ait plus de couleurs, la norme distribuée numériquement dans les appareils, qu'il s'agisse de téléphones portables, de moniteurs ou de tout autre appareil numérique, est celle du sRGB. Lorsque l'un de ces appareils rencontre RVB, il essaie de compresser les couleurs en excès et crée un faux sRVB avec de moins bons résultats.

Étape 1
Par conséquent, il est recommandé de prendre les photos, de les travailler dans Photoshop ou de les optimiser avec ce système pour améliorer la compatibilité des couleurs. Pour modifier le profil de couleur de travail, accédez à votre menu Édition et sélectionnez Convertir en profil.

Étape 2
Dans la fenêtre suivante, vous n'aurez qu'à choisir le profil dont vous avez besoin, dans ce cas sRGB.

4. Compresser l'image sans perdre la qualité Photoshop


Le format JPG.webp est le standard le plus utilisé et bien qu'il permette la compression, il n'offre pas autant de paramètres éditables que PNG. Nous pouvons faire varier le poids final de notre image en redimensionnant notre photo ou lors de l'export.

Étape 1
Lors de l'enregistrement au format JPEG.webp, nous voyons que nous avons deux options, d'une part, configurer les options d'image (qualité) et, d'autre part, les options de format. Pour cela, allez dans le menu Fichier / Enregistrer sous ou la combinaison suivante et sélectionnez le format JPEG.webp.

Maj + Ctrl + S

Étape 2
Ces paramètres de configuration apparaissent dans la fenêtre suivante. Voyons ce que chacun signifie.

Options d'imageIci, nous devons choisir la qualité finale de l'image, il est évident que plus la qualité est élevée, plus la taille du fichier est grande, pouvant voir ce qu'elle occupera finalement si nous cliquons sur Aperçu. Déplacez la barre pour pouvoir modifier ces valeurs.

Si nous voulons qu'une photo soit imprimée au format poster, nous devons sélectionner une qualité beaucoup plus élevée que si nous voulons une image pour le Web, rappelez-vous que plus la taille de l'image est grande, plus il faudra de ressources pour la charger via le Web.

Options de formatageÀ l'intérieur, nous trouvons ici différentes alternatives pour donner le format final à notre image. La plus recommandée est la ligne de base standard car elle est généralement la plus compatible.

  • Référence ("Standard"). Il utilise un format reconnaissable par la grande majorité des navigateurs et programmes Web. Actuellement, les derniers programmes ne donnent généralement pas d'incompatibilités.
  • Base de référence optimisée. Ce format va créer un fichier image qui contient des couleurs optimisées, vous donnant ainsi une taille plus petite.
  • Progressive. Avec cette option, différentes versions seront affichées qui seront de plus en plus détaillées au fur et à mesure du téléchargement. C'est l'utilisateur qui décide combien seront créés. C'est un format qui a été utilisé et qui est beaucoup utilisé lorsque l'on passe à des connexions lentes qui nécessitent de charger des sweeps sweeps.

NoterIl convient de mentionner que tous les navigateurs ne reconnaissent ou ne prennent pas en charge les images JPEG.webp progressives ou optimisées.

5. Compresser des images PNG dans Photoshop

Étape 1
Pour exporter en PNG, nous devons faire la même première étape qu'avec les autres formats, allez dans Menu Fichier / Enregistrer sous et sélectionnez dans ce cas PNG.

Étape 2
Maintenant, vous verrez dans la fenêtre de sauvegarde que différentes options apparaissent.

CompressionNous pouvons sélectionner le type de compression que nous voulons ou dire aucune si nous ne voulons pas qu'elle soit appliquée. Selon le choix, la vitesse de chargement sera augmentée ou diminuée.

TisserCette option est importante, surtout si nous parlons de plateformes Web. Voyons la différence :

  • Ni. Cette option permet d'afficher une image uniquement lorsqu'elle a été complètement chargée, c'est-à-dire que si nous avons une connexion lente ou problématique, l'image n'apparaîtra pas tant qu'elle n'est pas chargée dans le transfert Internet.
  • Entrelacés. Cette option est plus recommandée pour les services Web car elle affiche des versions réduites de l'image lors de son chargement. Cela aide le processus de téléchargement à être plus petit et l'utilisateur saura également que l'image est en cours de téléchargement.

6. Enregistrer des images JPG.webp pour le Web Photoshop

Étape 1
L'une des options les plus avantageuses que nous avons dans Photoshop pour l'optimisation de l'image est Enregistré en tant que Web, ce qui nous permet d'ajuster manuellement divers paramètres. Cette sauvegarde est très utile pour les images dédiées au téléchargement web, permettant des images de qualité, mais de taille réduite. Pour cela, nous allons Fichier / Enregistrer pour le Web ou faisons la combinaison suivante.

Alt + Maj + Ctrl + S

Étape 2
Si nous voulons sélectionner JPEG.webp, nous aurons ces paramètres.

Qualité d'imageSélectionnez votre qualité d'image préférée de Faible à Maximum ou avec les valeurs sur la droite. Vous pouvez voir la variation de taille sous l'image à gauche.

ProgressiveL'image se chargera petit à petit, c'est-à-dire que nous passerons de la vue en basse résolution à la vraie.

EntrelacéAffiche l'image uniquement lorsqu'elle est complètement chargée.

HaloSi l'image est transparente, sélectionnez une couleur de halo équivalente à l'arrière-plan de la page où elle sera intégrée.

Profil de couleur intégréSélectionnez cette option pour conserver le profil ICC de l'image, certains navigateurs Web l'utilisent pour corriger la couleur.

Convertir en sRGBUtilisez ce profil pour améliorer la compatibilité des couleurs sur les appareils et les moniteurs.

Vous disposez d'autres options telles que le mode aperçu, les métadonnées ou le redimensionnement avec ou sans restriction.

7. Enregistrer des images PNG pour le Web Photoshop

Étape 1
Comme nous le savons déjà pour pouvoir accéder à Enregistré pour le Web en PNG, nous devons aller dans Fichier / Enregistrer pour le Web. N'oubliez pas que ce format est très bon pour les images avec une destination Web car son résultat donne un très bon rapport entre la qualité et le poids du fichier.

Étape 2
Pour exporter au format PNG, sélectionnez-le dans le menu déroulant. N'oubliez pas que PNG 24 offre plus de couleurs, donc les tailles sont beaucoup plus élevées que celles de PNG-8. Nous recommandons ce dernier pour les images Web standard. La fenêtre qui apparaît est similaire à celle de JPEG.webp et en plus des options déjà vues dans la section précédente, on peut aussi choisir :

TransparenceIci, vous pouvez sélectionner le type de transparence qui convient le mieux à votre image ou la supprimer et sélectionner une couleur spécifique avec Halo.

Adapter au WebCe paramètre permet de compresser davantage l'image, plus le pourcentage de réglage est élevé, plus la compression est élevée, plus la qualité est faible et plus la taille est petite.

8. Enregistrer des images pour le Web Photoshop

Étape 1
Pour pouvoir effectuer une compression automatique à la fois pour PNG et JPEG.webp, nous ouvrons la sauvegarde pour le Web dans Fichier / Enregistrer pour le Web ou la combinaison de touches suivante.

Alt + Maj + Ctrl + S

Étape 2
À droite de l'option Préréglages, cliquez sur l'onglet de menu qui apparaît et sélectionnez Optimiser à la taille du fichier.

Étape 3
Maintenant, il vous suffit de sélectionner la taille de l'image que vous souhaitez avoir et le programme effectuera automatiquement la compression pour vous. Vous pouvez varier les valeurs pour obtenir des résultats différents.

Étape 4
Vous pouvez également accéder à la fenêtre appelée 4 exemplaires et sélectionner l'une des versions qui vous sont fournies à partir de là et l'enregistrer.

Étape 5
Si vous souhaitez modifier la taille et la vitesse de transfert, cliquez sur les valeurs sous l'image et sélectionnez-les automatiquement.

Comme vous pouvez le voir, il existe différentes manières de réduire la taille de vos images en fonction de leur objectif. Il existe de nombreux paramètres que vous devez prendre en compte, mais selon le niveau dont vous avez besoin, l'un ou l'autre sera plus utile pour savoir comment compresser une image Photoshop. Dans la vidéo suivante, nous allons vous montrer graphiquement comment optimiser et compresser des images de manière basique et complète. Si vous voulez une compression rapide, la première méthode vous conviendra et si vous cherchez quelque chose de plus complexe où vous pouvez éditer tous les paramètres, votre méthode est la seconde.

wave wave wave wave wave