[Divers] Hébergement d'image sur le web

Que ce soit pour modifier le look du forum, les insérer dans un message ou simplement ajouter un avatar à votre profil d'utilisateur, l'utilisation des images sur votre forum est indispensable. Pour afficher ces images sur les différentes pages de votre forum, elles doivent d'abord être stockées sur un serveur Internet. Ensuite, vous devez placer un lien sur le forum qui affichera ces images aux endroits voulus.

Il est important de savoir que chaque fois que vous voulez afficher une image sur le forum, l'adresse (url) de cette image doit être inscrite au complet, incluant le fameux http:// qu'on oublie souvent d'utiliser puisque nos navigateurs tel Internet Explorer ajoutent automatiquement pour nous cette extension de l'adresse lorsque nous naviguons sur le Net. Si vous négligez ce détail, l'image ne s'affichera pas sur le forum.



ImageShack™ est un site hébergeant gratuitement et instantanément vos images.


Néanmoins, cet hébergement se fait sous certaines conditions, consultables ICI en langue anglaise. Ces conditions regroupent (liste non exhaustive) :

images de moins de 1024 Ko, soit 1 Mo au maximum ;

pas d'images à caractère pédophile, pornographique, ou érotique ;

pas d'images enfreignant les lois sur le droit à la copie ;

pas de fichiers de type non autorisé ;

pas d'images montrant le piratage d'un ordinateur auquel vous n'avez pas accès en temps normal ;

pas d'images permettant le harcèlement d'une personne ;

pas d'images faisant volontairement de la publicité.

Toute infraction à ces règles entraîne un bannissement d'ImageShack™ (impossibilité d'accéder au site, d'ouvrir des images hébergées par ImageShack™ même sur d'autres sites, effacement des images dont vous avez demandé l'hébergement). Les sites utilisant Image Shack sans respect pour ces règles seront purement et simplement bannis de l'utilisation d'ImageShack™. Les liens partant de ces sites et renvoyant à ImageShack™ renverront à un message indiquant le bannissement. Les sites contenant dans leur adresse certaines chaînes de caractères ("hentai" ; "porn" ; etc) seront bannis d'office, même s'ils respectent toutes les autres conditions.


Types d'images autorisés


.jpeg, .jpg
Les images au format Joint Photographic Experts Group sont les plus courantes.
exemple : mon avatar ^^

.png
Les images en Portable Network Graphic sont encore assez rares.
Le PNG est considéré comme l'évolution du GIF (voir ci-dessous) pour ce qui est de la compression de petites images (qui prendront moins de place dans un disque dur), et de la transparence.


.gif
Les images au format Graphics Interchange Format sont plus fréquentes. Elles peuvent être animées.


.bmp
Le format Bitmap est particulièrement gourmand en place, les images sont considérées comme des ensemble de points et non des lignes. Elles sont de ce fait particulièrement difficiles à retoucher de manière globale.

vectoriel (pas bitmap) : un cercle, que l'on peut agrandir ou rétrécir / bitmap : plusieurs pixels, qui ne sont pas considérés comme une ligne

.tif, .tiff
Beaucoup de captures d'écran sont en Tagged Image File Format.


.swf
Ce sont les animations au format Flash (ou plutôt certaines d'entre elles), qui nécessitent des améliorations aux navigateurs (90% des navigateurs sont dotés de lecteurs flash integrés, ne vous inquiétez pas ; on peut de plus les obtenir facilement, ces améliorations sont proposées dès tentative de visionnement si vous ne disposez pas de lecteur flash, ou si voue vous servez d'une version trop ancienne). Ces animations sont souvent utilisées dans les banières de sites, mais très peu sur les forums, car souvent trop lourdes.

Vous disposez sur votre disque dur d'une image correspondant à l'un des types présentés ci-dessus (et respectant les conditions d'utilisation).

Vous vous rendez alors sur ImageShack™.


Voici ce sur quoi vous tombez :



Intéressons-nous à la zone la plus utile, celle du choix de fichier image.
Vous êtes invités à choisir votre fichier (selon les modalités les plus courantes : taille d'image < 1 Mo ; format de fichier)



Une fois que vous avez choisi un fichier et validé votre choix (en cliquant sur OK), vous pouvez demander l'hébergement, en cliquant sur le bouton host it!
Pour les images de grande taille, vous pouvez demander à ImageShack™ de diminuer la taille de l'image en cochant la case Resize Image et en imposant une taille ne dépassant pas 640x480 (for message boards) (une image redimensionnée en 320x240 sera tout de même un peu petite), si vous souhaitez par la suite insérer votre image non réduite dans un message sur le forum OGame : une taille plus grande risque fortement de déformer le forum en l'élargissant "de force", ce qui imposerait de se servir de la barre de défilement horizontal, rendant le texte et l'image moins agréables à lire ou à regarder. Si vous ne souhaitez pas changer la taille de l'image, décochez cette case d'option si besoin.

Puis, après un court temps de patience, votre image est hébergée, et vous avez alors accès à de nombreux liens, qui mènent tous d'une manière ou d'une autre à votre image :



Il vous suffira de cliquer sur la case du lien qui vous intéresse puis de le copier (je pense que vous savez tous comment faire), avant de le coller dans votre message, votre signature, de le choisir comme avatar (selon le forum, certains forums parvenant à prendre votre image directement sur votre disque dur), etc...

Attention à ne surtout pas réactualiser la page, ou vous devriez tout reprendre du début !


Les différents types d'images et de liens


Le premier type de liens est le Thumbnail. Il en existe trois différents.
Ces trois liens génèrent la même chose, mais sur des environnements différents. Celui qui nous intéresse ici est Thumbnail for forums (1), qui fonctionne avec la majorité des forums ; Thumbnail for forums (2)) qui malheureusement... Ne fonctionne pas ici !

Thumbnail for forums (1)

Les Thumbnails sont des images réduites qui constituent un lien hypertexte vers l'image agrandie correspondante. Vous pouvez le tester avec l'image ci-dessus. Une des options de la page de choix d'image est "remove size/resolution bar from thumbnail?". Si elle est activée, comme ici, rien n'apparaît en plus de l'image réduite. Si elle est désactivée, vous aurez sous votre image réduite une petite barre d'information sur la taille (en Mo et en nombres de pixels) de l'image liée :




Les Hotlinks n'ont pas vraiment d'intérêt pratique : ce sont des images dont le lien renvoie à la page d'accueil d'ImageShack™. En voici un exemple :



Seul le Hotlink for forum (1) fonctionne sur le forum, mais selon le forum où vous serez, il se peut que seul le Hotlink for forum (2) vous soit utile. Bien évidemment, si vous créez un site internet, vous pouvez utiliser le Hotlink for Websites.


Le lien Show image to friend renvoie à une belle page très joliment présentée, comportant votre image en son centre. Il est parfois nécessaire d'en attendre le téléchargement avant de voir l'image (notamment pour les images lourdes en octets, ou aux heures de pointe d'ImageShack™, ou bien sûr si votre connexion ne peut assurer qu'un bas débit).

Enfin, le lien Direct link to image est celui qui permet d'intégrer l'image entière, sans fioritures, dans votre message, en l'encadrant de "[IMG ]" et "[/IMG ]".




Application : créer une image liant à une page internet


Il suffit d'utiliser vos nouvelles connaissances sur l'utilisation d'ImageShack™, et les différentes particularités de ce forum : de manière générale, un tel lien se compose de cette manière :
[ URL= votre adresse cible][IMG ]l'adresse de l'image "Direct link to image"[/IMG ][/URL ] (en retirant les espaces dans les crochets, bien sûr).

Exemple : [ URL= Application : créer une image liant à une page internet


Il suffit d'utiliser vos nouvelles connaissances sur l'utilisation d'ImageShack™, et les différentes particularités de ce forum : de manière générale, un tel lien se compose de cette manière :
[ URL= votre adresse cible][IMG ]l'adresse de l'image "Direct link to image"[/IMG ][/URL ] (en retirant les espaces dans les crochets, bien sûr).

Code:

Exemple : [URL=http://mementomori.exprimetoi.net][IMG]http://img70.imageshack.us/img70/6062/image2ld5.jpg[/IMG][/URL]

donne...



L'image devient un lien ! (passez votre souris sur l'image)



Cependant le Thumbnail (1) est vivement recommandé car il évite de surcharger le forum et le temps de chargement est considérablement réduit.

Le principe reste le même pour d'autres sites tels que :

Rock Hosting

Casimage

HibOOx

Voiloo

Et bien d'autres... )