Les images

Opale accepte "en entrée" les formats d'image suivants : JPG (et JPEG), PNG et GIF. Cette page décrit les traitements appliqués à ces images en publication et n'est valable que pour en version.

ConseilChoisir un format d'image

Si vous produisez vous même les images et que vous avez a choisir un format, il est traditionnellement conseillé d'utiliser, quel que soit les logiciels impliqués :

  • JPG pour les photographies, car il permet de les compresser efficacement au prix d'une perte de qualité souvent imperceptible ;
  • PNG pour les logos, dessins avec aplats de couleurs... car il permet de conserver une qualité maximale avec une taille de stockage raisonnable dans ces contextes ;
  • GIF est un ancien format généralement moins performant en qualité et en espace occupé. Si vous insérez une image GIF elle convertie au format PNG dans les pages web générées. Attention : les images GIF animées ne sont pas supportées !

L'espace disque occupé est de moins en moins un obstacle a l'intégration de contenus riches en images, mais choisir le bon format permet par exemple d'accélérer les chargements des pages web en formation à distance.

Informations générales

Taille maximum et redimensionnement

3 types de traitements automatiques sont appliqués aux images :

  • Redimensionnement en fonction d'une taille limite : pour s'intégrer dans des proportions raisonnables par rapport à la surface disponible sur les pages du support de publication.
  • Redimensionnement en fonction de la résolution : pour respecter la qualité et la dimension "naturelle" de l'image (ajustable)
  • Rotation de 90° pour mieux occuper la surface de la page sur le papier (optionnelle)

Ces traitement ne sont pas applicable dans certains contextes très précis : l'image de page de garde dans les items de type "support de publication" par exemple, on part du principe que cet image est déjà dédié à un support et que ces traitements ne sont donc pas nécessaires.

ConceptRésolution d'image

Pour que la version papier d'un document soit de bonne qualité, les images qu'il contient doivent posséder une résolution de 300 dpi, tandis que pour la version écran, 96 dpi suffisent (dpi = nombre de points ou pixels par cm).

Pour limiter la perte de qualité, il est préférable de transformer une image d'une haute résolution vers une basse résolution, plutôt que l'inverse. C'est pourquoi ScenariChain attend en "entrée" une image de haute résolution, qu'il réduit automatiquement pour le format web.

Complément

La lecture de l'article "Résolution numérique" sur Wikipedia est recommandée pour plus d'information.

La résolution des images dans Opale

Les images ne contiennent pas toujours d'informations sur leurs résolutions, dans beaucoup d'autres cas elles existent dans le fichier mais sont incorrectes. ScenariChain ne peut donc pas déterminer intelligemment la résolution des images. Il a donc été décidé par défaut que :

  • Les images PNG et JPG sont considérées comme des images haute résolution, 300 dpi ;
  • Les images GIF rarement utilisées en dehors d'un affichage écran sont considéré comme des images basses résolution en 96 dpi.

ExempleUne capture d'écran

Lorsque vous effectuez une "copie d'écran" (touche clavier impr écran), elle a la même résolution que celle de votre écran : 96dpi. Si vous l'enregistrez en tant que fichier PNG, elle sera importé en tant qu'image en 300dpi, et donc apparaîtra environ 3 fois trop petite dans les publications. La partie suivante vous expliquera comment ajuster la dimension de l'image à partir de ScenariChain.

Ajustements sur l'image

Mise à l'échelle

Depuis Opale 3.1, vous pouvez ajuster les dimensions d'une image, ce qui prendra effet lors des publications (mais elle reste toujours soumise à une taille maximum lié au support).

Redimensionnement d'une image
Redimensionnement d'une image

Dans la zone de gauche, vous pouvez forcer une remise à l'échelle de l'image, soit en complétant une des deux zones "%" ou "em", soit en faisant glisser le curseur d'échelle sur la barre verticale.

Dans la zone de droite, vous avez un aperçu de l'image a coté d'un texte de référence précisant la méthode la plus intuitive pour obtenir la bonne taille :

"Ce texte est un texte de référence qui vous permet d'adapter la taille de l'image. Si votre image comporte des caractères (schéma, tableau, copie d'écran...), réglez le curseur d'échelle ci-contre pour que les caractères de l'image de taille "normale" correspondent à la taille des caractères de ce texte. Si votre image ne contient pas de caractères (photo, illustration), réglez le curseur d'échelle pour donner l'importance qui convient à l'image en rapport avec ce paragraphe et particulièrement avec sa largeur."

Ce mécanisme de remise à l'échelle dans Scenari est en général recommandé par rapport au redimensionnement de l'image dans un logiciel de dessin, car il ne dégrade pas la qualité de votre image originale, vous pouvez facilement changer d'avis.

Option "Rotation autorisée"

Si vous choisissez cette option et que les dimensions de l'image sont plus adaptées pour occuper l'espace d'une page A4 horizontalement, l'image est publiée avec une rotation de 90° sur la publication papier.

Remarques d'usage

Truc & astucePNG et transparence

La transparence n'étant pas gérée correctement par certains navigateurs obsolètes (IE6 par exemple), si vous souhaitez vous assurer que votre image sera affichée correctement même dans ce contexte, vous pouvez ajouter un calque blanc à vos ressources PNG (fond blanc plutôt que transparent).

Spécifications techniques

Cette partie décrit les comportement de ScenariChain, qui peuvent être utile a connaître lors du développement de nouvelle ressources :

  • Publication papier : l'objectif est que les dimensions d'une image permettent son affichage dans une page A4 en mode portrait. Aussi :

    • De manière générale, l'image est insérée dans une zone de taille maximale 15x22cm (soit 1772x2598px lors de l'insertion d'un JPG/PNG sans redimensionnement ou 567x831px pour les GIF).

    • Si cette image possède une taille inférieure à cette limite maximale, elle est affichée telle quelle dans la page.

    • Pour les ressources "inline" (c'est-à-dire les imagettes dans le flux du texte), cette zone est réduite à 10x2cm, soit 1181x236px en JPG/PNG, 378x76px en GIF, sans rotation possible.

  • Publication web : l'objectif est que les dimensions d'une image permettent son affichage correct dans une page web, quelle que soit la résolution de votre écran. Aussi :

    • De manière générale, l'image est insérée dans une zone de 550x550px.

    • Quelle que soit sa résolution d'entrée, l'image subit une réduction homothétique en nombre de pixels de 35% (passage en 96dpi, qualité maximale des écrans actuels).

    • Si la taille de l'image après réduction est inférieure à 600x600px, alors elle est redimensionnée pour tenir dans le cadre de 550x550px.

    • Si la taille de l'image après réduction est tout de même supérieure à 600x600px, alors elle est redimensionnée pour tenir dans le cadre de 550x550px mais un bouton de zoom (symbolisé par une loupe) apparaît.

      Lorsque l'on clique sur cette loupe, l'image est alors affichée dans un pop-up non redimensionnable, de taille maximale de 900x700px. De la même façon, si l'image est toujours supérieure à ce cadre, un redimensionnement homothétique s'opère. Dans ce cas, vous devez envisager de redimensionner au préalable votre image car son format est peut-être inadapté pour une utilisation sur le web ?

    • Pour les ressources "inline" (imagettes), cette zone est réduite à 400x100px.

Truc & astuce

Pour simplifier, plutôt que de vous baser sur le concept de dpi qui peut s'avérer complexe, dimensionnez plutôt vos ressources en gardant à l'esprit les tailles maximales suivantes de 1772x2598px pour les JPG et PNG, et de 567x831px pour les GIF.

Le fait de dépasser la dimension maximum n'a pas de conséquence grave à part déclencher des redimensionnements, par contre si vous créez des ressources avec des dimensions trop petites, prévues uniquement pour les résolutions écran, il est difficile de s'en sortir sans perte de qualité ou travail supplémentaire.

ComplémentTexte illustré

Opale permet d'afficher côte à côte du texte et une image ; il s'agit du "texte illustré".

Si les règles précédentes s'appliquent, les restrictions suivantes sont à prendre en compte puisque la zone dédiée à l'affichage de l'image est réduite :

  1. Publication papier :

    • L'image est insérée dans une zone de taille maximale 5,2x9,7cm.

  2. Publication web :

    • De manière générale, le cadre est de 300x300px.

    • Si la taille de l'image est inférieure à 350x350px, alors est elle affichée dans une zone de 300x300px (redimensionnement homothétique).

    • Si la taille de l'image après réduction est supérieure à 350x350px, alors elle est redimensionnée pour tenir dans le cadre de 300x300px mais un bouton de zoom (symbolisé par une loupe) apparaît.

      L'image est alors affichée dans un pop-up non redimensionnable, de taille maximale de 900x700px. De la même façon, si l'image est toujours supérieure à ce cadre, un redimensionnement homothétique s'opère.