1. Les thèmes en images sont souvent riches d’images PNG .
   Un thème à éviter : le thème Expédition par ex. est l’un des plus lourds à charger grâce à sa superposition inutile de lourdes images en PNG, c’est malheureusement l’un des fréquemment utilisés
   

1. Le thème Freestyle est très prisé aussi, pas aussi lourd que le précédent certes mais on a le temps d’apprécier l’ouverture de chacune de ces pages.
   
   

2. préférez un thème avec des arrières-plans en couleurs,
   par ex. : blanc, noirs, modernes.
   D’ailleurs ces thèmes sont les plus personnalisables.
   

1. Par exemple, ce site est réalisé à partir du thème noir.
   

inspecteur > Page > Disposition > Arrière-plan de la page ou arrière-plan du navigateur

1. les pages affichant des arrières-plans en images sont plus lentes à charger leurs homologues ayant une couleur unie ( c’est normal, le remplissage couleur ne pèse rien).
   

1. 1. Les arrières-plan du navigateur :
   

1. •l’image choisie et disposée en «dimension d’origine» ou  en «mosaïque» n’est pas retouchée. Vous pouvez donc connaitre le poids en ligne de ce fichier, avant même son importation  dans iWeb, en jetant un coup d’oeil à ses informations dans le Finder.
   

2. importez une image en JPG de qualité moyenne (50 % au grand max même moins)
   

1. 2. Les arrières-plan de la page :
   

1. •Si vous avez choisi un arrière-plan de navigateur en image ne poussez pas le bouchon à avoir aussi un arrière-plan de page en image, mais bon... comme dirait Régis Laspalès « c’est vous qui voyez !»
   

Pour ceux qui va suivre j’ai testé sur des images pleines sans transparences PNG ou JPG de grandes (wallpaper) et de petites tailles :

1. Si votre image originale est plus large que votre page (par ex. Wallpaper) ou si elle est en PNG sans transparence, préférez l’option «remplir». vous obtiendrez une image en JPG rognée sans doute beaucoup moins lourde que l’originale. Par contre si la page est plus haute ou plus large que l‘image vous perdrez en netteté.
   
   

2. •L’option «étirer» déforme les images mais comme précédemment elle va rogner votre image et les convertir en JPG.
   
   

3. •Comme précédemment, l’image choisie et disposée en «dimension d’origine» ou  en «mosaïque» n’est pas retouchée. C’est une copie de votre image originale, même nom même poids même type PNG ou JPG  (sauf dans le cas de l’exception ci-dessous*). Vous pouvez donc connaitre le poids en ligne de ce fichier, avant même son importation  dans iWeb, en jetant un coup d’oeil à ses informations dans le Finder. Je vous conseille si nécessaire de rogner l’image, pas la peine d’afficher une image de 1680 px de large sur une page de 700 seulement (attention à l’exception* décrite ci-dessous quand même).
   
   

4. * Une exception : une image moins large que votre page, disposée en arrière-plan de page , aux dimensions d’origine, est convertie en une image en PNG de la taille de votre page.
   
   

5. De même l’option «ajuster» est à éviter, elle produit de lourds PNG.
   

1. Autres précisions :
   
   

2. •Les dégradés sont des images :
   Choisissez deux couleur opaques, l’image en background sera en JPG.
   Choisissez au moins une couleur semi-transparente, l’image sera en PNG et plombera votre page.
   

3. •Les remplissages par image teintée sont souvent moins lourds que celui avec utilisant l’image sans teinte parce qu’il y a de moins nuance de couleur sur l’image.
   
   

1. 3. Les arrières-plan de zone de texte :
   
   

2. •Les règles d’arrière-plan de la page sont applicables pour les zones de textes.
   

1. 
   

1. 1. iWeb : des images en JPG et en PNG
   

1. •iWeb convertit toutes les images que vous y glisserez en  JPG ou en PNG
   (sauf les gifs animés qui resteront des...  gifs animés bien sûr).
   
   

2. Les images en PNG sont souvent beaucoup plus lourdes que les images en JPEG de dimensions équivalentes.
   
   

1. •Mais le PNG permet aux images d’avoir des zones  de transparences laissant apparaitre l’arrière-plan de votre page.
   

2. •le JPG pas du tout : tous les pixels sont visibles.
   
   

3. •Sur un  joli fond en image, voici sur une capture d’écran que cela peut donner :
   

1. Posé sur un fond multicolore, l’image en JPEG choque.
   

2. 
   

3. Voici mes deux images, l’une a été convertie par iWeb en JPG, l’autre en PNG .
   
   

JPG                                          PNG

1. 
   

2. Elles sont :
   

3. •de  mêmes dimensions (204 px x 204 px)
   

4. •et aussi de même forme : une image est toujours rectangulaire chaque coté est horizontale ou verticale.
   

5. Si comme moi, depuis votre navigateur, vous essayez de saisir l’image en PNG ci-dessus pour la glisser sur votre bureau la sélection vous montrera sa vraie forme rectangulaire.
   

6. 
   

7. 

   
   

8. 
   

9. Certes c’est pratique un PNG (par ex. ici, on n’a pas à se soucier de la couleur de fond de page) mais l’utiliser a un prix : son poids après publication.
   

JPG                                          PNG

21,1 Ko                         66,4 Ko

1. 

   
   

2. 
   

3. •Quand vous glissez une image dans iWeb, la question que vous devez vous poser est :
   

Et autant que possible, préférez une solution qui génère une image en  JPG (ou JPEG) .

1. 2. Comment éviter qu’une image soit publiée en PNG :
   
   

1. 3. Doit-on optimiser le poids des images avant de les importer dans iWeb ?
   

1. Non, ce n’est pas la peine.  Il est inutile de glisser sur l’interface  d’iWeb
   

2. ‣des JPEG 60%   ou moins  ( par ex. avec Smallimage )
   

3. ‣des PNG optimisés ( par ex. avec  PNGCrusher )
   

4. Vous n’allez rien gagner de significatif en Ko sur votre fichier, iWeb reconvertit toutes les images à sa sauce (sauf si vous affichez aux dimension d’origine des images que vous avez importés en JPEG tout en ayant décoché l’option «optimiser les images à l’importation». Par contre vous risquez de dégrader sérieusement votre image (JPEG).
   

5. Personnellement, je n’importe pratiquement plus que des images en PNG (ma plupart de mes images sont des captures d’écran).
   

6. 
   

7. Faisons un essai : voici la même image exportée sous 3 format différents  (je précise pour chacun leur poids dans le Finder). Je glisse chacune des 3 images dans iWeb qui les convertira en JPG et compare les poids  des fichiers après publication.
   

1. Type et poids
   

2. 

   

   

   
   

3. Aperçu :
   

4. 

   

   

   
   

5. Poids après publication :
   

6. 

   

   

   
   

7. 
   

8. A la publication, la différence de poids des images publiées n’est pas saisissante, on reste quand même dans les mêmes fourchettes.
   

9. 
   

10. Certes l’image en JPG 30% est un peu plus légère mais c’est au prix d’une dégradation de l’image, elle est plus floue et de gros carrés apparaissent, c’est particulièrement visible   dans le coin supérieur droit. Sur des photos de plus grandes tailles, cela aurait été plus criant.
    

11. Par contre ce qui est remarquable, c’est la différence de poids des deux premières images (PNG et JPG 100%) avant et après publication. iWeb fait du bon boulot, un boulot qui m’est suffisant.
    

12. 
    

13. Source du Wallpaper : Ladybug by ~Feni-x
    

1. 

   
   

1. Ne pas optimiser le poids des images avant importation ne veut pas dire ne rien faire pour autant. Votre principale obsession est d’éviter qu’iWeb ne génère un PNG. Par ex. si vous utilisez pour votre page un arrière-plan  de couleur unie (et non en image) comme moi, si vous souhaitez ajouter une image détourée, vous avez tout a gagner à lui ajouter un calque profond de la même couleur. Tenez, mon logo en PNG cité plus haut, ne pourrait-on pas lui ajouter une couleur de fond pour qu’aucun de ses pixels ne soient transparents, l’importer dans iWeb et qu’il soit converti en un léger JPG. Aussitôt dit aussitôt fait. Sur un Fond blanc, pour mieux la distinguer,  voici à quoi ressemble ma nouvelle image. Dans mon Finder c’est un PNG mais une fois publié j’obtiens bien un JPG :
   

2. 
   

3. 
   

4. 

   
   

5. 
   

6. 
   

7. Mais sur mon fond de page, l’illusion est présente :
   

8. 
   

9. 

   
   

10. Là encore cette image en JPG ne pèse que 21, 1 Ko, à comparer avec les 64,4 Ko que pèserait le PNG généré si on avait gardé une image avec des pixels transparents.
    

11. 
    

12. Oui, mais comment ajouter une couleur de fond à mon image?
    

13. 
    

14. Certes on pourrait utiliser Gimp ou Photoshop pour faire cela, mais je procède autrement :
    

15. 
    

16. Méthode ~100% iWeb :
    

17. ‣Poser le logo en PNG sur une page iWeb,
    

18. ‣Publier,
    

19. ‣Aller avec Safari sur la page publiée
    

20. ‣Faire une capture d’écran sélective du logo (cmd + maj + 4) sur le navigateur
    

21. ‣Eventuellement rogner la capture dans Aperçu si elle est trop grande
    

22. ‣Retourner sur iWeb,
    

23. ‣Remplacer le logo par cette capture d’écran
    

24. ‣Republier
    

1. Autre méthode, en utilisant Skitch :
   

2. ‣Glisser le logo dans Skitch
   

3. ‣sélectionner la couleur de fond dans le navigateur en la copiant grâce à l’outil loupe de la palette des couleurs.
   

4. ‣Appuyer sur majuscule et la couleur en question. La couleur sera apposé en arrière-plan d’image
   

5. ‣Exporter dans le Finder
   

6. ‣Glisser l’image dans iWeb
   

7. ‣Publier
   

8. 
   

9. Liens utiles : 
   

10. Skitch (tutoriel)
    

11. palette des couleurs (tutoriels)
    

12. Capture d’écran (tutoriel)
    

13. 
    

14. Précisions : 
    

15. Les captures d’écran se font toujours dans le navigateur Safari , jamais dans iWeb (le rendu des couleurs n’est pas le même).
    

1. 

   
   

1. inspecteur > inspecteur des graphismes > Trait
   
   

2. Les cadres d’images sont des images en PNG (eux aussi) , chaque cadre est constitué de huit images différentes 4 pour les 4 coins, 4 autres pour les bords (uniques ou disposés en mosaïque). Ils sont donc à éviter en trop grand nombre.
   

1. Les lignes de cadre sont aussi faites d’images mais compte tenu du faible nombre de couleur contenu, elles sont plutôt légères. Certains préférerons ajouter un cadre sur l’image avant de l’importer dans iWeb.
   

2. 
   

1. 
   

2. Les ombres , les effets de miroir ralentissent un peu l’affichage de vos pages.
   

3. 
   

4. En passant : Les ombres des images détourées (PNG) s’affichent à la périphérie de l’image  sur Firefox et non à la périphérie de la seule partie visible de l’image comme c’est le cas sur iWeb, Safari ou Google Chrome. (certes ça n’a rien à voir avec le sujet de cette page...)
   

1. 
   

2. Précision : l’effet Opacité (inspecteur > inspecteur des graphismes > Opacité> Echelle de 0 à 100 %) qui permet d’afficher un degré de transparence à travers une image ou une zone de texte n’a aucune incidence sur la conversion des images en PNG ou JPG.
   

3. 
   

4. 

   

   
   
5. 

   

   
   

6. Mes deux images restent en JPEG. Les différences d’opacité ne se voient pas sur certains navigateurs (par ex. IE sur PC)
   

7. 
   

8. 
   

9. 

   
   

10. 
    

1. Une fois importées dans iWeb, Les vidéos restent à leurs dimensions d’origine sur le serveur. Seules les dimensions de leur affichage changent : n’importez pas de vidéos trop larges ou trop hautes (et donc trop lourdes inutilement) pour les réduire artificiellement dans iWeb, convertissez aux bonnes dimensions avant importation.
   

Les zones de textes peuvent être transformées en «dessin de textes». Ces dessins de textes sont des images PNG. c’est le cas quand

1. ‣on leur fait subir un effet de rotation
   

2. ‣on leur ajoute une ombre dans la fenêtre des polices
   

3. ‣on associe un lien à la zone de texte au lieu de l’associer à un mot ou à une image contenue dans celle-ci ou
   

4. ‣on choisit une police non «web»
   

Pour choisir une police Web

Format > Polices > Afficher les polices > choisir Web parmi les collections ( colonne de gauche) de la fenêtre «Polices».

les zones de textes transformées en images ne sont pas forcément très lourdes (beaucoup de pixels transparents peu de nuance de couleurs) mais ils faut veiller toutefois à ne pas en abuser. Il est utile de savoir quand un texte  a été transformé , pour cela  cocher l’option «afficher un indicateur du dessin d’un texte» dans les préférences de l’application.

Ci-dessous une zone de texte utilisant une police non compatible web et le l’indicateur de dessin de texte (icône jaune en haut à droite)

Précision : l’indicateur n’apparait pas sur la page publiée. c’est une capture d’écran dans iWeb que je vous montre ci-dessus.

Les textes d’une zone transformée en dessins de texte ne seront pris en compte par Google (ce n’est plus du texte, c’est une image).

Plus une page affiche de choses, plus elle est lourde, c’est vrai aussi pour les widgets.
Méfiez vous des widgets qui sollicitent des fichiers situés sur un autre serveur que le votre : ex.  widget RSS, compteur de recherche trouvé sur le net, Services de commentaires sur FTP  (Js-kit Echo, IntenseDebate).

En passant : le widget Galerie MobileMe rencontre de fréquent problème. Il est parfois tres difficile voire impossible de pouvoir entrer une nouvelle galerie. Ça bugue dans iWeb

(là encore, ça n’a aucun rapport avec le sujet de cette page...)

Inspecteur > Page > Onglet Page > Cocher ou décocher «Afficher le menu de navigation»

Le menu par défaut d’iWeb serait source de ralentissement chez les utilisateurs PC. Pour en être franc, je n’en sais rien. Néanmoins, j’ai eu beaucoup de témoignages comme quoi il ne s’affichaient pas chez certains utilisateurs  d’IE  (Javascript, Java désactivés?). J’ai choisi de  ne pas l’afficher mais je ne sais pas si c’est plus par goût ou par soucis de compatibilité.

1. •Les Shapeimages
   

2. •Le poids des images masquées
   

3. •Des textes en images
   

4. •iWeb ’09 et les images
   

5. •Inspecteur : l’onglet Pages