MISE EN FORME D IMAGES POUR LE WEB

Transcription

1 CCI de Rouen Service Web 30/09/10 Aide_images_web.pdf MISE EN FORME D IMAGES POUR LE WEB A- La taille des images B- Le poids des images C- Les noms de fichiers D- Logiciel de retouche de photos E- Contenu d un bandeau de promotion La mise en ligne d images sur le Web soulève des problèmes récurrents importants : la taille (largeur par hauteur, en pixels), le poids (en octets), le nom du fichier. La mise au bon format d une image ne peut se faire qu avec un logiciel adapté à cet effet. A- La taille (longueur x hauteur en pixels) Les images ou photos (GIF, JPG, PNG) déposées sur les sites Web, doivent impérativement être à la taille de leur affichage sur le site afin d éviter toute déformation et favoriser un affichage rapide. Une même image devant s afficher à plusieurs endroits à des tailles différentes doit exister en plusieurs versions (largeur x hauteur) répondant aux besoins. Exemples : 1- Photo d un produit, d une entreprise, d un paysage Exemple : pour les annuaires d entreprises ou les articles des newsletters Format paysage : 300x200 Format portrait : 200x300 Format carré : 240x240

2 2- Pour un logo d entreprise Au format GIF de préférence si le logo est simple (peu de couleurs) Format court : 200 x70 Format long : 400x70 3- Pour un portrait Format classique : 100 x Pour une imagette Exemple : pour les pages d accueil des newsletters Format classique : 150x100 Cas particulier : imagette au format paysage depuis une image au format portrait. L imagette de la page d accueil d une newsletter doit être du même format pour tous les articles (150x100 en mode paysage) pour obtenir une page d accueil agréable visuellement. Dans le cas d une image dont la source est en mode portrait (dans l article), la solution consiste à la mettre à 150 pixels de large, puis de la découper pour en extraire un morceau de 100 pixels de haut. Exemple : Original (pour l article) Etape 1 : réduction à 150 pixels de large Etape 2 : découpe de 150x100 pour une imagette de la page d accueil

3 5- Pour une bannière de promotion Format ancien : 400x60 Format classique : 468x60 Voir aussi la rubrique Contenu d un bandeau de promotion. 6- Pour une vignette Exemple : sur la page d accueil du site de la CCI Format : 60x80 B- Le poids (en octets) Pour un affichage rapide de la page Web, les images doivent avoir un volume le plus petit possible. Lorsque votre logiciel de gestion d image le propose, sélectionnez l option favorisant un volume de fichier minimal pour un chargement rapide (les images obtenues ne conviennent pas pour l envoi à un imprimeur). Exemples de choix possibles : - Enregistrer pour le Web - Compresser pour : Pages Web C- Les noms de fichier d images Le nom choisi doit être à la fois le plus court possible (pour une simplicité de recherche), mais aussi suffisamment complet pour ne pas le confondre avec d autres (actuels, anciens ou à venir), et permettre le classement dans vos dossiers. Les différents mots composant ces noms de fichiers seront séparés par des soulignés (exemple aaaa_bbb.gif) pour éviter les caractères %20 qui remplacent les espaces dans les adresses Web. Afin de faciliter l affichage sur tous types de machines, logiciels et pays, les caractères accentués seront évités. Dans les annuaires d entreprises Il est souhaitable que toutes les images attribuées à une même entreprise débutent par un mot identique rappelant le nom ou le sigle de l entreprise. Ainsi regroupés dans les listes, les images sont plus faciles à repérer. Un deuxième mot qualifiant la nature de l image, et éventuellement un troisième si c est vraiment nécessaire. L ensemble doit être explicite et pas trop long. Exemples : ferrorp_logo.gif (logo de l entreprise ferrero_entreprise.jpg (photo de l entreprise) ferrero_produit.jpg (photo d un produit) ferrero_contact.jpg (portrait du responsable) Dans les newsletters

4 Le souhait le plus important est de retrouver les photos attribuées à chaque numéro de la newsletter. Chaque image débutera donc par le numéro de la newsletter (sur au moins 2 caractères pour faciliter le classement alphabétique), suivi par un ou deux mots expliquant le contenu de l image (nom de l entreprise, et/ou de la personne, et/ou du lieu ). Une même photo pouvant être affichée à 2 tailles différentes, dans la page d accueil (qui est aussi celle du mail envoyé) et dans la page de l article complet, la taille sera précisée (largeur x hauteur en pixels) dans le nom du fichier pour les repérer. Exemple : - 04_dieppe_chateau_300x200.jpg (grande taille pour l article) - 04_dieppe_chateau_150x100.jpg (petite taille pour l imagette de l accueil) - 04_dieppe_port_300x200.jpg (grande) - 04_dieppe_port_150x100.jpg (petite) - 04_president_ccirouen_son-nom_100x140.jpg Pour les bannières de promotion Pour les reconnaitre, elles débutent toutes par le mot bandeau : - bandeau_taxe_2010_468x60.jpg - bandeau_emploisenseine_2010_400x60.gif Pour les vignettes Pour les reconnaitre, elles débutent toutes par le mot vignette : - vignette_emploisensseine_2010_60x80.gif - vignette_nuit_orientetion_2010_60x80.jpg D- Logiciel de retouche de photos La mise au bon format des images nécessite un logiciel spécialisé. Les versions récentes de Microsoft Office proposent le logiciel Microsoft Office Picture Manager. Simple d emploi, il permet de mettre facilement ses images au format recherché. Un peu d entrainement peut être nécessaire. Pour charger l image dans le logiciel MS Office Picture Manager : - Dans Windows Explorer, cliquer droit sur l image à modifier, - Puis choisir : Ouvrir avec / MS Office Picture Manager. Pour réduire la taille d une image : - Dans le menu Image, choisir : Redimensionner - Le menu demandé s ouvre à droite : voir les différentes possibilités de mise au format souhaitées Pour découper une image : - Menu Image, choisir : Rogner Pour enregistrer avec un nouveau nom - Menu = Images / Compresser les images / Compresser pour : Pages Web - Puis : Menu = Fichier / Enregistrer sous (avec le nom attendu dans la page Web). E- Contenu d un bandeau de promotion Rappels : un bandeau de promotion a pour objet d être placé sur un site tiers, ou une rubrique quelconque, et d inciter l internaute à cliquer dessus pour le conduire vers un site ou une page dédié au thème présenté dans le bandeau. En principe, un bandeau n apparait jamais sur le site, ou les pages, dont il assure la promotion. Pour être performant et atteindre sa cible le bandeau (on dit aussi bannière) Doit être compréhensible en un clin d œil : pas plus de 3 lignes de texte (une ligne pour le thème, une ligne pour la date et éventuellement le lien (la ville suffit), une ligne de motivation).

5 Tous les éléments doivent être lisibles : retirer systématiquement tout ce qui n y est pas (logo trop petit, adresse du site web, slogan trop long ). Exemple : le logo de la CCI de Rouen avec son sous titre n est pas du tout adapté au bandeau (seul le galet du logo peut convenir s il n est pas trop petit). L ensemble doit être agréable et se distinguer du reste du contenu de la page (ou des différentes pages où il est implanté parfois de manière aléatoire) : en entête, au milieu, en pied. Un contour de couleur peut être nécessaire pour percevoir ses limites. L idéal est de commander le(s) bandeau(x) au prestataire, ou à la personne, qui réalise les autres supports de communication (affiche, plaquette, flyer, pdf de présentation, etc.) en lui précisant les contraintes souhaitées (voir le paragraphe ci-dessus et la taille des images ). Pour tout autre problème, nous consulter webservice@rouen.cci.fr