Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.



Documents pareils
SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10

Guide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de

Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7

GESTION DU LOGO. 1. Comment gérer votre logo? Format de l image Dimensions de l image Taille de l image 9

Utilisation de l éditeur.

Clé USB. Quel type de données peut contenir une clé USB?

L espace de travail de Photoshop

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

L ORDINATEUR FACILE D ACCÈS!

PAGE 1. L écran du logiciel d Open Office Draw. Barre de menu: Les commandes du logiciel

Silhouette Studio Leçon N 2

Publication Assistée par Ordinateur

Guide de correction et d optimisation des images en vue de leur publication sous Marcomedia Contribute. Logiciel utilisé : Adobe PhotoShop 7

Initiation à linfographie

GUIDE DE DÉMARRAGE. SitagriPro Infinite FINANCEAGRI. Un service. c o r p o r a t e

Tutoriel. Votre site web en 30 minutes

LECON 2 : PROPRIETES DE L'AFFICHAGE Version aout 2011

Indiquer l'espace libre sur le disque dur

Comment insérer une image de fond?

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Comment réaliser une capture d écran dans Word. Alors comment ouvrir une page Word?

TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»

Introduction à Windows 8

À la découverte de l ordinateur

Découverte du logiciel ordinateur TI-n spire / TI-n spire CAS

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

Mon aide mémoire traitement de texte (Microsoft Word)

Mes premiers diaporamas avec Open Office Impress?

Réalisation d un diaporama en haute définition avec. Adobe Premiere Elements 3.0 ou Adobe Premiere Pro 2.0. Encodage pour Internet

GUIDE D UTILISATION DU TABLEAU NUMERIQUE INTERACTIF

Qu est-ce qu un Ordinateur

Utilisation du logiciel GALAAD

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

AVEC LIVE TRADER, VISEZ PLUS HAUT POUR VOS INVESTISSEMENTS

Correction des Travaux Pratiques Organiser son espace de travail

Utiliser le logiciel Photofiltre Sommaire

TBI-DIRECT. Bridgit. Pour le partage de votre bureau. Écrit par : TBI Direct.

BUREAU VIRTUEL. Utilisation de l application sur ipad. Guide utilisateur. Sciences Po Utilisation du bureau virtuel sur ipad 1 / 6

Fiche Mémo : Options d accessibilité sous Windows et Internet Explorer 5

Guide de démarrage rapide. (pour la version 5.0.)

AIDE à l utilisation du cédérom «L athlétisme à l école» Niveau Primaire SOMMAIRE

Initiation au dessin Bitmap

Manuel d utilisation de la messagerie.

Atelier «personnaliser l environnement de l ordinateur mai 2015

PR OC E D U RE S D E B A S E

AGASC / BUREAU INFORMATION JEUNESSE Saint Laurent du Var Tel : bij@agasc.fr Word: Les tableaux.

Initiation à Windows 8

Réalisez votre propre carte de vœux Éléctronique

Espace Client Aide au démarrage

Création d articles sur le site web du GSP

Le cas «BOURSE» annexe

Mini_guide_Isis.pdf le 23/09/2001 Page 1/14

Introduction à Expression Web 2

Création WEB avec DreamweaverMX

INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

AGASC / BUREAU INFORMATION JEUNESSE Saint Laurent du Var Tel : E mail : bij@agasc.fr CONSEILS ET ASTUCES

Organiser ses photos sur l ordinateur

EXCEL TUTORIEL 2012/2013

GUIDE D UTILISATION DU BROWSER DE BEYOND 20/20

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Guide d utilisation du ipad

FORMATION EXCEL 2010 Groupe LUCAS LOGICIA

Manuel utilisateur Netviewer one2one

Le cas «BOURSE» annexe

MANUEL GANTT PROJECT

Support de formation Notebook

Les bases de données. Se familiariser avec Base. Figure 1.1A Ouvre le fichier dont tu as besoin. Lance OpenOffice Base.

Mini_guide_Isis_v6.doc le 10/02/2005 Page 1/15

Guide d utilisation de la clé mémoire USB

Pop-Art façon Roy Liechtenstein

Utiliser une clé USB

GUIDE D UTILISATION DU TABLEAU BLANC INTERACTIF EBEAM EDGE

INITIATION A L INFORMATIQUE. MODULE : Initiation à l'environnement Windows XP. Table des matières :

Réalisation de cartes vectorielles avec Word

Comment sélectionner des sommets, des arêtes et des faces avec Blender?

Centre de formation: Collège IBN BASSAM - TEMARA. Ce cours est proposé par le professeur d informatique:

Prise en main du module Open office Impress / Présentation

L environnement de travail de Windows 8

1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information

Dessiner dans Galaad FRANÇOIS PALLUT

Un exemple avec WORKSPACE d'interwrite

C.F.A.O. : Conception et Fabrication Assistées par Ordinateur.

Modes Opératoires WinTrans Mai 13 ~ 1 ~

Créer un diaporama avec Open Office. Sommaire

1.1 L EXPLORATEUR WINDOWS

Initiation Internet Module 0 : Découverte de L ordinateur

Séminaire d information MIGRATION WINDOWS 7 ET OFFICE 2010

Création d un document PublishView

Sommaire. 2. L accès aux modules. 1. Aspects techniques. 1.1 Le matériel requis 2

Volet de visualisation

Certificats Electroniques sur Clé USB

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Transférer des fichiers à l aide de WinSCP et 2 contextes d utilisation dans des sites SPIP avec FCK editor

pas à pas prise en main du service sur le web Le Cloud

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Cahier n o 6. Mon ordinateur. Fichiers et dossiers Sauvegarde et classement

Le Sphinx Millenium Modes opératoires Préparer, administrer, Dépouiller les enquêtes

Transcription:

1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur, validateur) ont accès à cette application dans leurs interfaces d administration respectives. Il en va de la rapidité d affichage de votre site internet. Celui-ci contient des images, ne serait-ce que pour le diaporama de votre page d accueil. Pour optimiser une image contenue sur votre ordinateur, cliquez sur ce bouton large : Une fenêtre s ouvre vous permettant de désigner l image que vous souhaitez optimiser. Dans cette exemple nous utilisons l image «Desert» contenue dans le dossier «Bibliothèques / Images / Echantillons d images» de Windows 7.

Cliquez sur «Fichier» dans le menu puis sur «Enregistrer» La fenêtre suivante s affiche : Déplacez le curseur «qualité» vers la gauche afin de réduire la taille (ou poids) de l image ou tapez directement une valeur dans le champ associé (ici la valeur saisie est «35»). Vous voyez directement l incidence sur la taille de votre fichier image en bas à droite.

Ici la taille (ou poids) du nouveau fichier sera de 84ko. Cliquez sur «OK» pour enregistrer ce nouveau fichier, plus léger. Nous modifions le nom du fichier en «Desert_web» afin de ne pas écraser le fichier original «Désert». Notez la taille du fichier «Désert» qui à l origine pèse 827ko. Nous avons réduit par 10 la taille de ce fichier tout en conservons une qualité tout à fait acceptable pour l affichage d une image sur un écran d ordinateur. L image est optimisée. Rappel de la procédure : «Ouvrir une image à partir de l ordinateur» «Fichier => Enregistrer» «Déplacer le curseur de réglage de la qualité» «Cliquer sur OK et choisir un nouveau nom pour le fichier optimisé». Afin de vous familiariser avec cet outil, répétez cette procédure avec différents niveau de qualité. Constatez si la perte de qualité est acceptable ou non en affichant les différentes images générées depuis l explorateur de fichier de votre système d exploitation.

2- Redimensionner une image : La largeur du contenu de votre site internet ne dépasse pas les 1000 pixels. Ainsi il n est pas judicieux de publier une image dont la largeur serait supérieure à cette valeur. Il est donc recommandé de redimensionner vos images selon ce critère. Cependant il est inévitable qu un des rédacteurs du site publie tôt ou tard un article contenant une image aux proportions trop importantes. Sachez qu un script (un petit programme) se charge de redimensionner à la volée les images sur votre site internet si celles-ci dépassent la taille recommandée. Cependant le poids de l image restera inchangé. Par exemple une image de 4200x3600 pixels pesant 2,5 Mo sera redimensionnée à 1000x900 pixels mais «pèsera» toujours 2,5 Mo (Méga Octets). Il s agit là encore d optimiser l affichage et le poids de vos images dans un souci de qualité de service rendu à vos visiteurs. Tout d abord, vérifiez la taille (proportions) actuelle de votre image. Cette information se situe en bas de cette fenêtre, ici entourée en rouge : «1024x768 px» signifie 1024 pixels de largeur sur 768 pixels de hauteur.

Pour modifier ces valeurs et donc redimensionner l image, cliquez sur «image» dans le menu puis sur «Taille de l image» : Vous obtenez ceci : Saisissez directement de nouvelles valeurs ou cliquez sur une des flèches pour utiliser un curseur. Décocher «Conserver les proportions» si nécessaire. Cliquez sur «OK». Cliquez sur «Fichier «puis «Enregister» comme vu précédemment pour enregistrer le nouveau fichier redimensionné. Notez qu une fois de plus vous pouvez optimiser le poids de cette image à l aide du curseur «Qualité».

3- Recadrer une image : Utilisons directement cet exemple : Vous souhaitez recadrer l image «Desert» afin de l utiliser comme image de diaporama pour la page d accueil de votre site internet. La dimension recommandée pour une diapositive de page d accueil est de 970x360 pixels. Sélectionnez l outil de recadrage dans la barre «Outils» verticale en cliquant sur cet élément : Puis dessinez un premier rectangle de recadrage sur votre image en laissant le clic maintenu pendant que vous déplacerez la souris sur votre image. Vous obtiendrez ceci : Ce rectangle vous représente la partie de l image qui sera conservée après recadrage.

Portez votre attention sur cette petite fenêtre. «W : 634» signifie «Largeur : 634 pixels» «H : 261» signifie «Hauteur : 261 pixels» Il s agit des dimensions de la future image recadrée. Il faut donc modifier ces valeurs pour obtenir 970 en largeur et 360 en hauteur. Pour ce faire, modifiez les dimensions du rectangle de recadrage en cliquant sur un de ses coins (carrés bleus) puis en le faisant glisser verticalement et horizontalement. Observez les variations des valeurs «W» et «H» vues ci-dessus en essayant de vous rapprocher au plus de 970 en largeur et 360 en hauteur. Si vous n arrivez pas à obtenir exactement ces valeurs, à plus ou moins 5 pixels cela n a aucune incidence pour notre exemple. Ensuite il vous faut mettre en bonne position ce rectangle de recadrage, il doit délimiter la zone que vous conservez après recadrage. Cliquez à l intérieur de celui-ci, maintenez le clic enfoncé tout en déplaçant la souris pour le positionner.

Appuyez sur la touche «Entrée» de votre clavier pour valider le recadrage. Voyez en bas à gauche de cette image que les proportions obtenues ne sont parfaitement de 970x360 pixels. Il nous suffit de redimensionner l image comme vu dans la partie précédente «2- Redimensionner une image». Cliquez sur «Fichier «puis «Enregister» comme vu précédemment pour enregistrer le nouveau fichier redimensionné. Notez qu une fois de plus vous pouvez optimiser le poids de cette image à l aide du curseur «Qualité». L image est prête à être utilisée comme une image de diaporama de la page d accueil. Il existe bien d autres fonctionnalités, n hésitez pas à les découvrir, notamment les filtres qui offrent des effets surprenants. L historique est un allié précieux si vous décidez d aller plus loin. En cas d erreur ou de mauvaise manipulation, cliquez sur l avantdernier élément de la liste pour annuler votre dernière action. Vous pouvez ainsi revenir plus encore en arrière en cliquant sur les premiers éléments de cette liste historique.