Médiaforma

All posts tagged images

Si vous prévoyez d’insérer des images dans une présentation, vous voudrez certainement réduire leur taille pour que votre feuille ne soit pas trop “lourde”. En particulier si les images proviennent d’un appareil photo numérique, qui produit aisément des fichiers de 5 à 15 mégapixels.

Pour compresser une image, commencez par la sélectionner en cliquant dessus. Basculez sur l’onglet Format dans le ruban, puis cliquez sur l’icône Compresser les images dans le groupe Ajuster.

Cette action déclenche l’affichage de la boîte de dialogue Compresser les images. Il vous suffit maintenant de sélectionner une des options proposées sous Sortie cible puis de valider en cliquant sur OK.

Si l’image a été rognée, les parties invisibles sont conservées dans la présentation, pour le cas où vous voudriez revenir à l’intégralité de l’image. Pour gagner quelques précieux Kilo-octets dans la taille de la présentation, pensez à cocher la case Supprimer les zones de rognage des images avant de cliquer sur OK.

D’autre part, pensez également à décocher la case Appliquer à l’image sélectionnée uniquement pour appliquer en une seule fois le même réglage à toutes les images insérées dans la présentation.

Il ne vous reste plus qu’à cliquer sur OK et à apprécier la réduction de taille opérée sur la présentation.


Lorsque vous insérez des images jointes dans un e-mail, il se peut que certains de ses destinataires ne le reçoivent pas en raison de sa taille. Rassurez-vous : Outlook 2016 vous permet de redimensionner automatiquement les images incluses dans le message en limitant leur taille à 1024×768 pixels. Dans la fenêtre de composition de massage, basculez sur l’onglet Fichier du ruban et sélectionnez l’option Redimensionner les images de grande taille lorsque j’envoie ce message.

Revenez à la fenêtre de composition en appuyant sur la touche Echap du clavier. Vous pouvez maintenant envoyer le message. Toutes les images jointes seront automatiquement redimensionnées.


Plusieurs techniques permettent d’insérer une illustration dans un message e-mail.

Première technique

L’illustration peut être transférée via le presse-papiers. Elle peut donc provenir de n’importe quelle application Windows capable de manipuler des images et de les copier dans le presse-papiers. Ici par exemple, une image est ouverte dans Paint. Une partie de l’image est sélectionnée, puis copiée dans le presse-papiers.

Une fois l’image placée dans le presse-papiers, basculez sur la fenêtre de composition de messages, sélectionnez l’onglet Message dans le ruban et cliquez sur l’icône Coller, dans le groupe Presse-papiers.

Deuxième technique

Sélectionnez l’onglet Insertion dans le ruban, puis cliquez sur l’icône Images dans le groupe Illustrations. Désignez l’image que vous voulez insérer, puis cliquez sur Insérer.

Troisième technique

Sélectionnez l’onglet Insertion dans le ruban, puis cliquez sur l’icône Images en ligne dans le groupe Illustrations. Cette action fait apparaître la boîte de dialogue Insérer des images.

Comme vous pouvez le voir, les images peuvent provenir de différentes sources : Bing, OneDrive, Facebook et Flickr. Pour accéder aux trois derniers emplacements, vous devez connecter Outlook à votre espace OneDrive, à Facebook et à Flickr. Si nécessaire, cliquez sur les icônes correspondantes sous Insérer également à partir de. Dans cet exemple, les comptes OneDrive et Facebook ont déjà été connectés à Outlook. Les images et photos qui y sont stockées sont donc directement accessibles.

Supposons que vous souhaitiez insérer une image à partir de Bing. Cliquez dans la zone de texte Rechercher, en face de Recherche d’images Bing. Indiquez ce que vous recherchez, puis appuyez sur la touche Entrée du clavier. Un bandeau de couleur jaune indique que certaines images sont sous licence Creative Commons et que vous devez prendre connaissance de la licence relative à chaque image. Cliquez sur Afficher tous les résultats web, puis fermez le bandeau jaune en cliquant sur sa case de fermeture. Sélectionnez l’une des vignettes puis cliquez sur Insérer pour insérer l’image correspondante dans la feuille de calcul.

Supposons maintenant que vous vouliez insérer une image de votre espace OneDrive. Basculez sur l’onglet Insertion du ruban puis cliquez sur l’icône Images en ligne dans le groupe Illustrations. Cliquez sur OneDrive. Double-cliquez sur un dossier de votre espace OneDrive pour l’ouvrir. Sélectionnez une vignette, puis cliquez sur Insérer. Après un court instant, l’image correspondante est insérée dans le message.

Quatrième technique

Les illustrations peuvent également être envoyées en tant que pièces jointes. Dans ce cas, il suffit de les glisser-déposer depuis l’Explorateur de fichiers sur le corps du message. Leur nom apparaît alors à la suite du libellé Joint.


Cette rubrique va vous montrer comment utiliser la fonction drawImage() pour insérer une image dans un canevas. Selon l’effet recherché, vous pouvez transmettre trois ou cinq paramètres à la fonction drawImage() :

  • drawImage(image, x, y); affiche l’image aux coordonnées x, y ;
  • drawImage(image, x, y, largeur, hauteur); affiche l’image aux coordonnées x, y en lui donnant la largeur et la hauteur spécifiées.

Voici le code utilisé :

Le premier bouton déclenche l’exécution de la fonction JavaScript afficheImage() et le deuxième l’exécution de la fonction JavaScript agranditAfficheImage().

Examinons la fonctin afficheImage().

Après avoir récupéré le contexte du canevas, une nouvelle image est définie et stockée dans la variable img :

var img = new Image();

L’instruction suivante indique le nom de l’image :

img.src = ‘chien.png’;

Il ne reste plus qu’à charger l’image en demandant l’exécution de la fonction drawImage() lorsque l’image est chargée :

img.onload = function(){

ctxt.drawImage(img, 10, 10);

}

Examinons la fonction agranditAfficheImage().

Cette fonction est en tout point similaire à la précédente, si ce n’est que cinq paramètres sont passés à la fonction drawImage() pour afficher une version agrandie de l’image. L’image sera affichée aux coordonnées 10, 100 et fera 150 pixels sur 150 :

ctxt.drawImage(img, 10, 100, 150, 150);

Voici le résultat dans Internet Explorer :


Pour afficher des images dans un document Web, vous pouvez utiliser trois formats de fichiers : gif, jpg et png.

Le format jpg est bien adapté aux photos. Il peut contenir jusqu’à 16 millions de couleurs. Les images sont compressées avec perte et il est possible de choisir le facteur de compression, et donc, la qualité de l’image.

Le format gif est limité à 256 couleurs. Les images sont compressées sans perte. Les fichiers de ce format sont donc de petite taille, à condition que le nombre de couleurs utilisées ne soit pas trop important. Si nécessaire, il est possible de définir une couleur de transparence.

Le format png peut contenir 16 millions de couleurs. Les images sont compressées sans perte. Tout comme pour le format gif, il est possible de définir une couleur de transparence.

Pour mettre en évidence les performances de chaque format, nous avons sauvegardé un dessin et une photo aux formats jpg, gif et png. A l’œil nu, il n’y a aucune différence entre les différents formats de fichiers. Par contre, le dessin est bien plus léger lorsqu’il est sauvegardé au format gif et la photo lorsqu’elle est sauvegardée au format jpg.

Il est très important que vos pages Web soient aussi légères que possible. Vous devrez donc choisir le format d’image le plus approprié au cas par cas.


Nous allons ouvrir une image pour illustrer les possibilités graphiques d’Aperçu.

La barre d’outils d’Aperçu ne contient que quelques icônes :

  • L’icône Présentation donne le choix entre plusieurs présentations de l’image. Pour bien comprendre l’utilité de cette icône, nous allons ouvrir simultanément plusieurs images dans Aperçu. Nous fermons la fenêtre actuelle d’Aperçu et nous lançons la commande Ouvrir dans le menu Fichier. Ici par exemple, nous sélectionnons trois images, puis nous appuyons sur la touche Entrée du clavier pour les ouvrir dans Aperçu. Le menu Présentation prend alors tout son sens. A vous de trouver la présentation qui vous convient le mieux lorsque vous travaillez avec plusieurs fichiers : Contenu seul, Vignettes, Table des matières ou Planche contact.
  • Les icônes Zoom arrière et Zoom avant permettent de régler la taille de l’image.
  • L’icône Partager permet de partager l’image en cours avec vos amis ou connaissances.
  • L’icône Pivoter applique une rotation antihoraire de 90 degrés à l’image.
  • La zone de recherche permet de filtrer les images affichées en mode Vignettes, Table des matières ou Planche contact.
  • Enfin, l’icône Barre d’outils Edition affiche ou dissimule une barre d’outils secondaire dédiée à l’édition des images.

Examinons les outils contenus dans la barre d’outils Edition :

  • La première icône donne accès à plusieurs outils de sélection très classiques. Remarquez cependant l’outil Lasso intelligent qui facilite la découpe d’images à contours francs.
  • La deuxième icône est également très intéressante : elle permet de sélectionner une partie de l’image en fonction des couleurs utilisées. Cliquez sur l’image et maintenez le bouton gauche enfoncé. Déplacez la souris pour obtenir la sélection souhaitée. Au relâchement du bouton, seule la zone qui avait changé de couleur est sélectionnée, indépendamment de la complexité de son contour.
  • D’une façon très classique, les quatre icônes suivantes permettent d’insérer des formes (rectangles, ovales et traits) et du texte sur l’image. Notez que lorsqu’une forme rectangulaire ou ovale a été tracée sur l’image, il est possible d’effectuer un recadrage en cliquant sur le bouton Recadrer. Vous utiliserez respectivement les icônes Couleur des lignes, Couleur de remplissage et Attributs de forme pour définir la couleur du contour de la forme, la couleur de remplissage de la forme et les caractéristiques de la forme. Si vous insérez du texte sur l’image, vous pouvez également choisir la police, la taille des caractères et l’alignement.
  • L’icône Ajuster la couleur permet d’améliorer le rendu de l’image en jouant sur de nombreux paramètres tels que l’exposition, le contraste ou la saturation :

  • Enfin, l’icône Ajuster la taille permet de modifier la taille de l’image.

La barre d’outils Edition fait un travail remarquable, mais nous allons la compléter avec quelques commandes de menu qu’il serait dommage d’ignorer.

  • La commande Exporter dans le menu Fichier permet de sauvegarder l’image dans un autre format. Les formats supportés sont JPEG, JPEG-2000, OpenEXR, PDF, PNG et TIFF.
  • La commande Afficher la loupe dans le menu Outils permet d’agrandir une partie de l’image afin de mieux percevoir les détails.
  • La commande Revenir à dans le menu Fichier permet d’accéder aux différentes versions de l’image et de revenir à l’image telle qu’elle était à son dernier enregistrement.

Si vous prévoyez d’insérer des images dans un document, vous voudrez certainement réduire leur taille pour que votre document ne soit pas trop “lourd”. En particulier si les images proviennent d’un appareil photo numérique, qui produit aisément des fichiers de 5 à 15 mégapixels.

Pour compresser une image, commencez par la sélectionner en cliquant dessus. Basculez sur l’onglet FORMAT dans le ruban, puis cliquez sur l’icône Compresser les images dans le groupe Ajuster.

Cette action déclenche l’affichage de la boîte de dialogue Compresser les images. Il vous suffit maintenant de sélectionner une des options proposées sous Sortie cible puis de valider en cliquant sur OK.

Si l’image a été rognée, les parties invisibles sont conservées dans le document, pour le cas où vous voudriez revenir à l’intégralité de l’image. Pour gagner quelques précieux Kilo-octets dans la taille du document, pensez à cocher la case Supprimer la zone de rognage des images avant de cliquer sur OK.

D’autre part, pensez également à décocher la case Appliquer à l’image sélectionnée uniquement pour appliquer en une seule fois le même réglage à toutes les images insérées dans le document.

Il ne vous reste plus qu’à cliquer sur OK et à apprécier la réduction de taille opérée sur le document.