AccueilPhotoCropScore : découpez et recadrez vos images pour en finir avec les problèmes...

CropScore : découpez et recadrez vos images pour en finir avec les problèmes d’affichage en ligne

Vous arrive-t-il de passer du temps à sélectionner vos images pour vos contenus en ligne ou ceux de vos clients ? Vous les triez soigneusement et finalement, elles n’apparaissent pas comme vous l’auriez souhaité ? Elles sont étirées ou rétrécies, décentrées ou encore pixelisées ? Un développeur a réfléchi au problème et vous propose un petit logiciel permettant de solutionner les problèmes d’affichage de vos contenus. L’outil s’appelle CropScore : il est gratuit, open source, 100 % en ligne, adapté aux smartphones et vous allez le découvrir dans cet article !

Les mésaventures qui ont impulsé la création de CropScore

Voici deux définitions qui vont être importantes pour la suite de notre lecture : 

  • La résolution d’une image correspond à la quantité de pixels sur sa hauteur et sur sa largeur. (ex. 1920×1080)
  • Le format d’une image, ou aspect ratio en anglais est défini par le rapport hauteur/largeur de notre image. (ex. 16:9)

Ces deux éléments sont interdépendants et cela peut parfois être compliqué de calculer l’un en fonction de l’autre. Bien souvent, les résolutions recommandées ne sont pas communiquées et peuvent être différentes d’une plateforme à l’autre. Certains sites proposent une solution de recadrage lors de l’upload, mais malgré cette précaution, l’image peut finir pixelisée ou mal cadrée. 🤯

Les utilisateurs d’Instagram le savent bien, la partie visuelle est ce qui attire l’œil en premier lorsque nous arrivons sur une page. Et c’est assez énervant lorsque nos plus beaux textes sont gâchés par une image inesthétique. Ainsi, pour nous épargner du temps de tourmente sur Gimp ou Photoshop, CropScore a été créé.

CropScore solutionne les problèmes d’affichage de vos contenus

Après avoir sélectionné vos images, vous pouvez importer vos fichiers .JPEG et .PNG ou les glisser-déposer sur le petit encart à droite de la page d’accueil (cf. image de présentation de l’article). Vous arrivez ensuite sur la fenêtre d’édition où le score de cadrage (Crop Score en anglais🙂) vous attend dans la partie droite de la fenêtre. Pas d’inquiétude, nous y reviendrons un peu plus bas.

fenêtre d’édition de l’outil CropScore

Sur la partie gauche, vous pouvez sélectionner la plateforme à laquelle vous destinez votre image. Chaque onglet contient plusieurs préréglages (ou presets en anglais) en fonction de la destination de votre image. Les paramètres seront différents pour un bandeau sur Facebook ou pour une photo de profil sur Twitter. Petit bonus : ces presets sont établis avec des résolutions plus hautes que celles recommandées sur les réseaux sociaux, car le développeur a anticipé les futures mises à jour de ces sites internet. 

Vous pouvez également régler le format et sa résolution manuellement dans l’onglet custom size tout en bas : 

CropScore - l’onglet custom size

Une fois le bon preset sélectionné, le format est bloqué (Locked In) — il faut le faire manuellement en mode custom size — et il devient ensuite possible de modifier la résolution en jouant avec l’image. 

Ici par exemple, le format sélectionné correspond à l’image de couverture sur LinkedIn :

sélection du format d’image de couverture sur LinkedIn

En zoomant dans la photographie, la résolution diminue, et de fait le CropScore également. Vous pourrez également observer un visuel du rendu de l’image :

la partie score de la fenêtre d’édition

On peut interpréter le score obtenu comme un pourcentage d’adaptabilité aux standards de la plateforme concernée. L’idéal est bien entendu de se rapprocher au maximum des 100 %. 

En mode custom, le score se réfère aux standards d’images classiques vu que la résolution n’est plus choisie en fonction d’un média social :

la partie score en mode custom size

Ici l’image correspond à de la Haute Définition (HD), mais le score est susceptible de renseigner la SD, le Full HD ou encore l’Ultra HD.

Avec les boutons bleus du bas de la fenêtre, l’édition de votre document se fait de manière très intuitive :

les boutons d’édition de CropScore

Toutes les fonctions principales sont présentes et utilisables en mode preset ou en mode custom : zoom, découpage, déplacements dans toutes les directions, rotation. 

Cadrer vos sélections sera également un jeu d’enfant avec la grille présente en arrière-plan de la fenêtre d’édition :

CropScore - la grille en fond d’image

Une fois votre image préparée aux petits oignons, le téléchargement de vos fichiers se fait au format .JPEG ou .PNG. Ces derniers seront automatiquement concaténés à l’aide du suffixe –cropped afin de les retrouver facilement dans vos dossiers. Si les .JPEG et les .PNG ne vous suffisent pas, faites un tour sur TinyWow.

CropScore constitue un peu plus qu’un simple outil d’édition d’image. Il solutionne les problèmes d’affichage de vos contenus et constitue un véritable allié : 

  • Il vous recommande le bon format en fonction de la plateforme cible.
  • Il vous fournit un score d’adaptabilité en réponse à vos modifications.
  • Il vous accompagne dans vos idées spéciales en mode custom. Les manipulations les plus fantaisistes se feront, elles, sur Magic Eraser.

Il ne tient plus qu’à vous d’essayer CropScore, il se trouve ici !

Aurélien ESCALES
Aurélien ESCALEShttps://byothe.fr
D’une carrière d’ingénieur du son à une reconversion dans les métiers du conseil en agriculture, je m’épanouis aujourd’hui dans la rédaction web. J’ai toujours été fasciné par la technologie, l’informatique et les sciences en général. Je suis curieux de tout, j’aime comprendre « comment ça marche » et j’ai un goût pour la synthèse et la vulgarisation. C’est pourquoi je me ferai un plaisir de partager des infos sur byothe.fr !

Articles similaires

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Discord

Envie d'échanger en direct ? Venez nous retrouver sur le serveur Discord de Byothe.fr

Newsletter

Abonnez-vous, et recevez chaque lundi un résumé de l’actu du web

Dernières news

Au hasard