MENU Le Forum Vive les rondes Connexion

Les images

44 ans Au pied de la Sainte Victoire (13) 693
Images et stockage

Le blog nous permet de stocker 5Mo d’images sur le serveur de VLR. Il faut donc songer à utiliser au mieux cette  
place en optimisant leurs poids.

1) Quels sont les meilleurs formats d’images ?
Selon le format utilisé, la compression d’une image diffère.
.bmp : à éviter le plus possible. Le poids de l’image est lourd car le taux de compression est nul.
.jpg, jpeg : un des meilleurs formats pour les images. Le taux de compression permet d’alléger considérablement une image. Selon le taux de compression appliqué, une perte non négligeable de pixel à l’œil nu est décelée.
.gif : ce format permet de faire des images très légères mais est contrainte à un lourd taux de compression (une image GIF ne peut contenir que 256 couleurs, un JPG plus de 16.8 millions … sic).
.png : ce format est la version libre du GIF (qui lui est un format propriétaire). Son taux de compression est de 5 a 25% plus efficace que le GIF.

2) Quelle taille ?
Plus une image a une grande résolution, plus son poids sera conséquent. Pour diminuer le poids, il suffit donc simplement d’en diminuer la taille.
Généralement, un taille de 800 x 600 ou de 600 x 450 est largement suffisante pour que les visiteurs aient une bonne visualisation de l’image.
De plus, une taille en général supérieur, rend moins pratique sa visualisation (photo trop grande pour la page, obliger d’utiliser les ascenseurs de défilement)
Si vous voulez tout de même poster une image en grand format pour insister sur des détails par exemple, n’hésitez pas à modifier dans le code HTML de la note, la taille ‘visuelle’ de l’image, en rajoutant un lien hypertexte sur l’image en question.

Comment faire ?
Une fois votre image insérée, cochez la case ‘HTML’ à côté des menus pour régler la taille de la police.
Retrouvez la ligne correspondante à l’insertion de votre image et rajoutez à la balise <IMG> les paramètres width et height.
Exemple :
<IMG src='http://planetasocial.blig.ig.com.br/imagens/just_smile_prev.gif' width=”150” height=”125”>
Votre image sera visuellement diminuée.

Une bonne utilisation de ces consignes vous permettra de stocker environ 100 photos sur les 5Mo de disponible. Toutefois, si malgré toutes ces précautions vous n’avez plus assez d’espace, il suffira de demander à vos chers administrateurs une augmentation de votre espace de stockage.
Vous pouvez aussi penser à utiliser un espace perso sur le net (généralement fourni par votre fournisseur d’accès à distance) pour stocker vos propres images. (voir condition avec votre fournisseur ou autre hébergeur sur le net)
44 ans Au pied de la Sainte Victoire (13) 693
Comment changer l’image de fond d’une template ?

Il existe en HTML (language CSS plus exactement, plusieurs fonctions permettant de gérer les images de fond.

- background-image : permet de spécifier une image d’arrière plan.
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
}

- background-color: permet de définir la couleur du fond (pratique en cas d’indisponibilité de l’image par exemple)
Ex:
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
}

Pour obtenir le code hexadecimal d’une couleur, rapportez vous au topic suivant
http://www.vivelesrondes.com/forum/viewtopic_20500.htm


- background-position: permet de gérer le positionnement de l'image et peut prendre différent paramètres. 1er paramètre : right ou center ou left (droite, milieu, gauche). 2ème paramètre : top ou center ou bottom (haut, milieu, bas)
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
}

- background-attachment: permet de fixer l'image de fond sur la page, le texte défile au dessus sans que l'image ne bouge
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
}

- background-repeat: permet de gérer le nombre de répétition de l’image dans la page.
no-repeat: une seule occurrence de l'image
repeat: l'image sera répété sur toute la page
repeat-x : l'image sera répété uniquement sur une ligne
repeat-y: l'image sera répété uniquement sur une colonne

Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
}


Astuce : pour pouvoir rapidement rajouter une image de fond séparé du texte (comme une bannière par exemple)
padding-top : permet de laisser une marge avant l'affichage du texte
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
padding-top: 200px;
}


px = pixel.
L’idéal est de prévoir une hauteur légèrement supérieure à celle de l’image

Et voilà pour l'instant!
46 ans barcelona 5852
Génial, merci, postité ! ;)
51 ans suisse 625
ma Leez, tu es génial..... ;)
38 ans st etienne 89
toutes ces explications sont surement trés explicites pour une personne ayant un niveau normal en informatique...seulement je suis au niveau zéro moi!!! ](*,)

je n'arrive même pas a mettre une photo!

pitiéééé aidéé moi! lol
51 ans 76 10598
anaera a écrit:
toutes ces explications sont surement trés explicites pour une personne ayant un niveau normal en informatique...seulement je suis au niveau zéro moi!!! ](*,)

je n'arrive même pas a mettre une photo!

pitiéééé aidéé moi! lol


Tu veux mettre une de tes photos dans ton blog, c'est ça?
38 ans st etienne 89
exactement !!!

je vai dans parcourir, je choisit ma photo et quand je clique pour les ajouter il n'y a aucune réaction !
M
55 ans bayonne 24
au secours !!!!! help me !!!!! alors moi j ai bien une reaction :lol: :lol: mais ma photo est super super grande :shocked!: comment faire pour qu elle soit "normal" ? je precise que je suis harchi nul :oops: :oops: et c est aussi pour mettre autre chose que des mots sur mon blog et mettre un visage sur un nom
40 ans charente 1676
besoin d'aide pour mettre mon avatar ..qui peut m'aider ??
3845
salut moi aussi un soucis je peux plus mettre de photo cela me dit ce surclaser mon blog j'ai retaille beaucoup plus petit mes photos et je peux toujours pas en mettre que faire merci
45 ans Bas Rhin 2894
il te suffit d'envoyer un mail à contact at vivelesrondes.com en demandant qu'on t'augmente ton espace de stokage... c'est écrit tout en faut de ta page image ;)
L
75 ans 7509
Pour l'avatar il suffit de faire une recherche dans le moteur de VLR, il y a plusieurs posts qui en parlent :)

Sinon vous pouvez toujours faire héberger vos photos ailleurs comme picasa et les utiliser dans vos notes puisqu'on obtient une adresse de l'image.
B I U