Logo EditionCollector.fr

Retour aux topics

Ajouter des images / Ajuster leur taille sur le forum

Écrit par Avatar de G3NG3N

Ajouté le


6 commentaires

Bonjour à tous !

Ce tuto va vous permettre :
- Ajouter des images via le système d'upload du forum.
- Ajouter des images via des sites externes.
- Redimensionner vos images trop grosses pour être mises en ligne.

Chauds ? Allez c'est parti.

1- Ajouter des images via le système d'upload du forum

ATTENTION :
Avantages :
+ Disponibilité de presque 100%, en effet les images sur le forum (hors bug exceptionnel) n'ont aucune raison de disparaître alors que les sites d'hébergement d'images peuvent les supprimer pour un tas de raisons (pas de vues depuis longtemps, réclamation des ayant droit, image hors normes...).
+ Rapidité de chargement (en effet le forum dispose d'une bonne bande passante contrairement à certains sites d'hébergement d'image).
Désavantages :
- Taille limité (mais les raisons sont justifiables, CF partie 3).
- Nombre d'image par post limitée.

(ATTENTION POST-CEPTION, A POST WITHIN A POST :p) <- Ceci est une blague en référence au film Inception.

C'est très simple, lorsque vous créez un nouveau post ou en éditez un ancien, allez sur l'onglet ajouter des fichiers joints :


Ensuite choisissez le fichier à envoyer en cliquant sur "Parcourir...", le nom du fichier apparait s'il a bien été sélectionné, ensuite vous pouvez ajouter une description d'image, c'est plus cool et propre pour les visiteurs de vos posts mais aussi pour vous y retrouver, le commentaire apparait sur le Post alors ne mettez pas de commentaire personnels mais plus généraux.


Ensuite l'image apparaît dans les fichiers joints :


Il va maintenant falloir l'ajouter à votre post. Dans votre post placez le curseur (comme si vous alliez taper du texte) là où vous voulez ajouter l'image et cliquez ensuite sur "Insérer dans le message".


Une fois l'image ajoutée vous voyez le nom de l'image entre deux balises [ attachement = NOMBRE ] NOM_IMAGE [ /attachement ]. Ne changez pas le nombre ou le nom de l'image sans quoi ça va déconner et votre image ne sera pas affichée. En revanche vous pouvez déplacer ces balises n'importe où dans LE POST ACTUEL (pas un autre !). Mais assurez vous de bien tout déplacer le " [ attachement = 0 ] Image.jpg [ /attachement ]" pas juste une partie.

Et une fois que vous faites un aperçu ou postez le message, votre image apparaitra comme ceci :


ATTENTION : Le nombre d'image pas post est limité (je ne sais plus combien mais c'est de l'ordre de 8+ images par post. Si vous atteignez le maximum d'image, postez votre message et répondez y cela créé un nouveau post et donc à nouveau plusieurs images disponibles 😀.

Publié le

2- Ajouter des images depuis un site extérieur

ATTENTION :
Avantages :
+ Souvent la taille d'image est assez grande.
+ Facilement affichage sur d'autres sites / forums.
Désavantages :
- Peut être supprimé sans aucune raison ou pour plein de raisons laissant donc le post vide de toute images.
- Vos images ne sont pas "privées" et souvent même apparaissent dans des listes d'images (référencement etc...), cela est donc gênant pour des images assez personnelles à partager uniquement avec la communauté du forum.


Pour pouvoir afficher des images depuis un site extérieur ou les héberger sur un site externe au forum, un tuto a déjà été réalisé : ICI

Je ne prends absolument aucun crédits pour la réalisation de ce tuto, les remerciement vont aux auteurs des messages, merci de les remercier eux s'ils vous ont aidés.
G3N
G3N

Publié le

3- Redimensionner vos images

Préambule : L'image comment ça marche ? taille, format, poids...

Cette partie peut sembler longue mais il y a beaucoup d'images et d'explication, une fois que vous l'aurez lue, vous saurez tout refaire en quelques cliques (moins de 2 minutes). 😀

Comment ça marche ? Et bien c'est simple, comme vous pourriez mesurer une image avec une règle, en informatique une image a une unité de longueur pour chacun de ses bords appelé le pixel (px). Il s'agit d'un point. Et lorsque vous zoomez trop sur une image les pixels deviennent d'énormes points.



Le fichier image stocke dont pour chaque point, la couleur qui lui est associée. Donc plus vous avez de points (plus l'image est grande) plus la place prise par le fichier sera importante.

Une image en 50x50px (1:1) sera de très faible taille alors qu'une image de 1920x1080 (16:9) sera beaucoup plus lourde.

Le format (1:1) etc... indique la proportion d'une image (souvent utilisé pour les écrans) c'est le ratio du plus grand coté sur le plus petit : 1920/1080 = 16/9. Ainsi une image (souvent les avatars de forum) ont un format de (1:1) ce qui signifie que leur cotés ont la même taille.
ATTENTION : Le format est un ratio, il ne joue en rien sur la taille de l'image, en effet une image de taille 16x9px a le même format (ratio coté large / coté court) qu'une image 1920x1080px.
ATTENTION : Il s'agit là du format d'affichage, le format visuel, le terme format en informatique est utilisé pour de nombreuses choses radicalement différents, ne vous emmêlez pas les pinceaux 😀

Ensuite nous avons le format du point de vue fichier informatique. C'est ce que l'on associe souvent à l'extension du fichier (.exe, .jpg, .png, .doc, .pdf...). Ces extensions permettent à l'ordinateur lorsqu'on lui dit d'ouvrir ce fichier de savoir comment l'ouvrir et avec quel logiciel. Les images ont donc pleins de formats selon leur utilisation (.raw, .nef, .tiff, .jpg, .png, .ico et j'en passe un paquet). Le format le plus adapté pour internet est le .jpg ou le .png. Quelle est la différence ? Je format JPEG (.jpg) est un format compressé, il sera donc très léger mais aussi universel (tout les systèmes peuvent le lire, du smartphone aux mac et windows... sans avoir besoin de logiciels spéciaux). Le PNG (.png) quant à lui n'est pas compressé, il sera donc, pour la même image, beaucoup beaucoup plus gros. Cela est dû au fait qu'il n'est pas compressé mais aussi au fait qu'il gère la transparence. Ainsi certains pixels peuvent être définit comme n’existant pas et affichant ce qu'il y a sous l'image et cela prend beaucoup de place et donc une image plus lourde. Après il y a aussi les claques, les différentes couches, le sotckage de l'info, le format couleur et plein d'autres choses techniques mais sauf si cela vous intéresse, vous n'avez pas besoin de vous prendre la tête avec plus d'éléments. Comprenez déjà ces deux formats et les grosses différences que j'ai mis en avant 😀

Vous l'aurez donc compris, si on veut alléger une image on va avant tout essayer de : L'avoir dans un format léger (jpg plutôt que png), réduire sa taille en pixel, diminuer sa qualité etc... La suite en détail :

Transformer votre image pour l'alléger

Nous allons voir comment alléger votre image en utilisant un logiciel entièrement gratuit et open-source : XnView.
Pourquoi ce logiciel ? Très complet, très simple d'utilisation après avoir suivit ce tuto, très puissant, gratuit.
Et les autres ? Il en existe une tonne, celui là est mon préféré, rien ne vous empêche d'avoir votre préféré et je respecte votre choix, en revanche je ne vous formerai que pour celui là 😀

Lien de téléchargement : 😀 (il s'agit d'un logiciel gratuit développé par des passionnés, si le logiciel vous plait n'hésitez pas à faire une petite donation pour les soutenir, mais ne vous sentez pas non plus obligés 😀 ).
Prenez la version adapté à votre système d'exploitation (windows, mac etc...). Si vous ne savez pas si votre Windows a une architecture 32 ou 64 bits prenez la version 32. Elle marche sur les deux, la 64 en revanche ne marche que sur 64. Préférez la version Exe plutôt que la version Zip.

Téléchargez et installez comme suit :

Ensuite exécutez le et autorisez si votre système vous demande si vous êtes sûr. N'oubliez pas de le lancer en mode administrateur (pour Windows).
Choisissez la langue.
Suivez ensuite l'installation en cliquant sur suivant.
Accepter les conditions et cliquez sur suivant.
BLABLABLA... Suivant, suivant, suivant... Terminé.

Il se peut que pendant l'installation (à la fin) il vous demande d'installer Microsoft Visual C++ 2008, acceptez, ce sont des fonctions supplémentaires qui permettent le bon fonctionnement de nombreux programmes.

Lancez maintenant le logiciel :
Réglez la fenêtre de premier lancement comme suit :


Le programme s'ouvre et afficher votre dossier image :


Seules sont utiles les parties gauche et centrale.
La partie gauche est appelé arborescence des dossiers. Il s'agit de vos dossier et sous dossiers sous forme de liste. Vous allez devoir vous déplacer dedans et sélectionner le dossier où se trouvent vos images.

Une fois trouvé, vous allez sélectionner les images que vous voulez alléger en les sélectionnant dans la partie centrale.
Pour sélectionner plusieurs images qui se suivent : Sélectionnez la première de la suite en cliquant dessus, et cliquez sur la dernier de la suite en maintenant la touche MAJ appuyée.
Pour sélectionner plusieurs images qui ne se suivent pas : Sélectionnez la première image en cliquant dessus, et cliquez sur chaque image à ajouter à la sélection en maintenant la touche CTRL appuyée.
Attention, vous pouvez sélectionner une suite puis en ajouter qui se suivent pas avec CTRL mais pas l'inverse.



Ensuite faites un clique droit sur une des images sélectionnez et faites "convertir par lot".



Une fenêtre s'ouvre :



Première partie : Sortie, il s'agit de régler où vos images vont sortir, cliquez sur les "..." pour régler le dossier où iront les images converties.
Seconde partie : Nom de fichier, ne pas toucher sauf si vous savez comment ça marche.
Troisième partie : Format : Choisissez dans le menu déroulant JPG - JPEG / TIFF et ensuite cliquez sur "paramètres..." juste en dessous et réglez comme l'image qui suit : (vous pouvez ajuster la qualité, 70 est le minimum pour que l'image reste belle, 100 = image d'origine donc de même taille... Donc choisissez généralement entre 70 et 80 c'est suffisant). Puis validez.

Les autres parties sont pas intéressantes pour ce que l'on veut faire ne les touchez donc pas 😀

Ensuite en haut de la fenêtre cliquez sur l'onglet Action [0/0] : Puis cliquez sur Ajouter action -> Image -> Redimensionner


Et réglez le comme suit :

Vous avez ensuite à ajuster les % (garder tout le temps la même valeur pour la largeur et la hauteur !)
Sachant qu'une image à 50% fera la moitié en hauteur et la moité en largeur donc (dû au passage de la 1D à la 2D) on aura une image qui fera 1/4 de l'originale.

Ensuite cliquez sur convertir en bas et attendez la fin de l'opération de conversion.

Vous avez maintenant des images un peu plus petite en taille et en qualité avec un format universel et compressé, elle doit donc être beaucoup plus légère que l'originale et marcher sur le forum et bien d'autres sites limitant la taille.

ATTENTION : Certaines images même converties peuvent être encore trop grandes. Vous avez deux solutions :
1- Recommencer en sélectionnant les images d'origine trop grandes et dans les réglages au cours de la conversion baisser la qualité et la taille en %.
2- Recommencer en sélectionnant les images converties trop grandes et refaire avec les mêmes réglages.



Voilà ! J'espère que ça vous aura été utile, si vous avez des questions n'hésitez pas ! Souvent les questions m'aident à compléter mes tutos pour les rendre meilleurs encore ! 😀
shady77
shady77
ADMIN

Publié le

Vraiment un SUPERBE tutoriel G3N !
C'est vraiment très complet et comme ça plus d'excuse pour ne pas poster des photos sur le fofo !

sinon pour le détail, la limite est fixé a 10 photos par message et 1Mo max par image 😉
Florent
Florent

Publié le

Très bien fait ce tutoriel. Par contre j'ai une petite question sur la partie redimensionner. Quand j'allège mes images je préfère leur donner un largeur max, 640 pxl par exemple, en conservant les proportions. C'est faisable avec ce logiciel?
Et est ce que tu trouves la méthode fiable, ou pas tellement?
G3N
G3N

Publié le

Oui il suffit qu'au lieu de prendre un % dans le redimensionnement tu mettes Pixel et tu mets juste le coté que tu veux en pixel et tu laisses l'autre vide, ça va automatiquement calculer les dimensions de l'autre coté en gardant le même ratio 😀
shady77
shady77
ADMIN

Publié le

Florent a dit:

Très bien fait ce tutoriel. Par contre j'ai une petite question sur la partie redimensionner. Quand j'allège mes images je préfère leur donner un largeur max, 640 pxl par exemple, en conservant les proportions. C'est faisable avec ce logiciel?
Et est ce que tu trouves la méthode fiable, ou pas tellement?


Je connais pas ce logiciel, mais d’après ce que je vois sur les screens oui on peu redimensionner en donnant une largeur avec une hauteur proportionnel. Sinon plutôt que 640px tu peux mettre un peu plus grand sur le fofo, car ça passe jusqu’à 800px 😉

ha mince grillé 🤣

6 affichés sur 6 trouvés

Logo EditionCollector.fr

EditionCollector.fr est un site d'actualité sur les éditions collector, limitées, spéciales, numérotées, steelbook de jeux vidéo/ films avec des news et bons plans quotidien pour compléter vos collections !

11283

collectors

18613

membres

510388

commentaires

9175

connectés

© 2024 Edition Collector (version 4.1)