Protéger ses photos de blog

Soyons lucide! Rien n'empêche un esprit mal intentionné de s'emparer d'une photo par une simple capture d'écran.

Ne devenons pas parano! Parmi les solutions ici testées, vous en trouverez une suffisamment dissuasive.

 

Insérer une image transparente, animée, voire les deux.

Insertion depuis un fichier, ou depuis une URL, il faut savoir bien choisir la méthode d'insertion d'une image pour en préserver l'intégrité.

Vous en avez peut-être déjà fait l'expérience. Vous aviez trouvé une image animée ou une image partiellement transparente, et après l'avoir inséré, cette dernière était figée, et sur fond noir. Sous ces lignes, deux images dont l'une était à l'origine un GIF animé, et l'autre avait un fond transparent. Vous voyez bien qu'elles ont toutes deux perdu une qualité essentielle, et peut-être même la seule qu'elles possédaient.

Quand on insère une image avec l'onglet "Depuis un fichier", on active un process de conversion qui va permettre la génération d'une image dans une dimension déterminée, avec la possibilité d'accéder à une copie de l'image d'origine. Nous avons vu ce processus dans la note qui ne veut pas que ça l'affiche mal.
C'est pendant cette conversion que l'on perd la transparence et ou l'animation. Plutôt que de leur faire traverser la vitrine, il faut donc livrer ces images par l'arrière-cour puis les faire venir en magasin.

Insérer des images, pour que le moins souvent, ça l'affiche mal

Vous n'avez besoin de personne pour insérer une image dans une note, mais il peut tout de même être utile de faire le point sur les différentes méthodes disponibles. Dans de prochaines notes, nous aborderons l'affichage de galeries et autres collections d'images, sans qu'il s'agisse d'album ou de photoblog.

Vous n'avez pas mis longtemps à savoir insérer une image. Dans l'éditeur de notes, vous cliquez sur l'icône représentant un arbre dans un cadre, et la fenêtre suivante s'ouvre alors à vos yeux éblouis.

La plupart du temps vous "Choisissez un fichier" en cliquant sur le bouton "Parcourir..." pour explorer votre machine, vos supports mémoire, afin de récupérer la belle image.

Éventuellement, vous ajoutez des "Tags" pour faciliter la recherche. C'est ce qui permettra de faire remonter votre image, et donc votre note quand quelqu'un fait une recherche sur le portail Hautetfort.

Viennent ensuite les "Propriétés d'affichage" qui vous permettront d'aligner l'image et le texte alentour.

Mon blog hautETfort a grossi !

Pas de panique! Il suffit de supprimer les images inutiles pour que votre blog retrouve sa taille habituelle.

L'onglet ACCUEIL de l'éditeur hautETfort affiche l'Espace disque utilisé mesuré en Mo (méga-octets). Cliquez sur chaque image ci-dessous pour l'afficher en taille réelle.

Que faire quand vous constatez que cet espace augmente de façon incontrôlée?

Cliquez-ici pour lire la suite de cette note de Kielut dans la rubrique Hotline de son blog Upset Diary.

Redimensionner une image avec Gimp

La chose peut paraître évidente à nombre d'entre-vous, mais nul n'est censé le savoir aussi parfaitement que la terre est ronde. Elle est d'ailleurs patatoïde.

Si nous aborderons ici la manipulation d'image sous Gimp, c'est parce que cet excellent logiciel est disponible dans la Framakey évoquée à l'ouverture de ce blog. Comme d'habitude, les notes qui vont se succéder ici ne sauraient vous dispenser de régulièrement consulter l'aide du logiciel et les nombreux didacticiels disponibles, dont ceux ci.


Image = canevas + calques
Vous aimez le mille-feuilles, le kouing-aman et autres baklava ? Vous allez adorer le monde du multi-couches. Avec Gimp, une image peut être un canevas sur lequel s'empilent plusieurs claques, tout comme un décor d'opéra est constitué de plans successifs.

Mais nous sommes dans le numérique, et vous pouvez changer la taille de la scène (du canevas) indépendamment de la taille des plans (des calques). Alors comment s'y prendre pour redimensionner ?


Modifier la taille du canevas.
Quand on souhaite agrandir l'espace sur lequel on travaille pour ajouter d'autres éléments, disposer d'une surface plus grande sans agrandir l'image d'origine, c'est bien le canevas qu'il faut modifier. La commande est donc Image / Définir la taille du canevas.
On vous demandera alors d'indiquer la largeur et la hauteur. Ces deux valeurs sont liées par défaut, pour conserver les proportions de l'image. Vous pouvez régler ces dimensions indépendamment en cliquant sur le maillon pour « briser » le lien entre ces valeurs. Vous verrez un aperçu de votre image évoluer dans un cadre gris sous la mention Décalage.

Le décalage est nul par défaut, les valeurs x et y restant à 0 (rappelez-vous les repères orthonormés...).
Vous pouvez ne pas décaler, décaler précisément avec vos propres réglages, ou centrer tous les calques avec le bouton disponible.
Avant de cliquer sur [Redimensionner], vous devez vous demander s'il est nécessaire de redimensionner tous les calques ou aucun. Ce choix n'est pas irréversible, voyez plus bas. S'ils restent de taille inférieure au canevas, ils seront peut-être plus facile à manipuler séparément, c'est à vous de vous faire une opinion.
Plus d'info sur le site de la documentation officielle.


Modifier la taille de l'image
Quand on souhaite agrandir ou diminuer la taille de tous les éléments simultanément, modifier le contenu visible de l'image, la commande appropriée est Image / Échelle et taille de l'image.
De la même façon que pour le canevas, vous indiquerez largeur et hauteur.
On vous propose aussi d'intervenir sur la résolution. Pour l'instant laissons cela.
La « qualité » est celle du mode de calcul des interpolations. Quand vous agrandissez votre image, le logiciel « calcule » pour remplir les vides avec plus ou moins de soin.
Plus d'info sur le site de la documentation officielle.


Modifier la taille d'un calque
Vous disposez de la même commande Calque / Échelle et taille du calque, que pour l'image, mais vous disposez aussi d'une mise à la taille de l'image du calque, et d'un ajustement des bords du calque.

Ces commandes peuvent vous paraître encore un peu abstraites, mais nous les illustrerons bientôt dans un exemple de montage d'images. En attendant, relisez donc les manuels...

Les liens de Gee Mee : Webmestres, logiciels, références, musique, image, etc...

Webmestres

Blogs et sites animés par des webmestres et pour des webmestres. Au moins pour celles et ceux qui veulent comprendre, et éventuellement "mettre les mains dedans".

• Le blog Haut&Fort : Cela pourrait être plus dynamique, mais c'est déjà ça.
• Aide HautetFort : Un point de départ, qui demanderait à être mis à jour.

• Blog Tuto : Une vraie mine d'informations utiles et pertinentes. Et je ne dis pas cela parce que Lavande m'a parfois fait l'honneur de s'inspirer de mes notes, avec efficacité et humour.

• Blogocité : À l'origine un blog support pour un atelier de la cité des sciences de la Villette. Toujours un point de départ intéressant, et pas seulement pour les grands débutants.

Logiciels

• Framakey : Une suite de logiciels gratuits sur une clé USB. Extrêmement utile et puissant. Un moyen de devenir un réel nomade de l'informatique ?

• Open Office : LA suite de logiciels bureautiques libre et gratuite. Ce n'est pas sans défaut, mais c'est vraiment plein de qualité pour être efficace au bureau sans tricher avec des licences de logiciels par ailleurs perfectibles...

Références

• Cours de HTML de Cyberzoïde
  
• Cours de HTML de M. Contensin

• Pourpre : Outils indispensables, conseils, dictionnaires de couleurs

Musique & sons

• Plateformes commerciales de musique en ligne
  • Deezer
  • Jiwa
• Plateforme de musique libre
  • Dogmazic
  • Jamendo
• Le son d'une nuit : Une expérience sonore très personnelle

• Sound-Fishing : Pêche au son

Téléchargements

• Caractères & code ASCII
• Template "home"