Updated

FR Tutoriel 1.6 · Images

Mis à jour le 14 avril, 2020

< 1.5 · Svija Admin — retour — 1.7 · pages >

Tutoriel 1.6 · Images

Le dossier « links »

Quand Adobe Illustrator ne trouve pas une image importée dans un document, il cherchera automatiquement un sous-dossier « links ».

Svija imite ce comportement : toute image utilisée dans une page doit se trouver dans le sous-dossier « links » :

links-folder

Les images stockées ailleurs que dans « links » ne seront pas visibles en ligne.

Vous avez le choix

Les informations disponibles sur cette page sont basées sur des années d’expérience.

Mais à part le fait de garder les images dans le dossier « links », aucune proposition que vous trouverez ici n’est obligatoire.

Plus de résolution, moins de qualité

Pour maximiser la clarté des images, le plus efficace est d’utiliser des images JPG de très haute résolution mais de très basse qualité (0-30) :

  • l’image contient beaucoup de détails
  • l’image charge rapidement
  • les défauts liés au format JPG deviennent imperceptibles

Rétina/4K ou non ?

Actuellement, tous les ordinateurs Apple sont vendus avec écran « rétina » (appelé « 4K» pour les PC).

Par contre, relativement peu d’ordinateurs Windows sont capable d’afficher des contenus en haute résolution.


Résolutions optimales d’images

Pour un écran rétina :

La résolution optimale d’une image importée dans Adobe Illustrator :

  • la taille dans Illustrator multipliée par 2,4

Par exemple, la même image serait :

  • 300px par 200px dans Illustrator
  • 720px par 480px dans Photoshop

Pour un écran normal le facteur de multiplication est 1,2.


Images vectorielles

Il est possible et utile d’importer des images vectorielles dans vos pages Svija :

La page finale intégrera les images vectorielles. Garder les images dans le dossier « links » est donc pratique mais pas essentiel.

Les images du format SVG seront intégrées immédiatement (on ne peut pas les mettre à jour en mettant à jour le fichier source).

Les formats .AI ou .PDF sont les plus pratiques, car on peut mettre à jour un fichier source et les modifications seront prises en compte automatiquement dès que la page est ouverte dans Illustrator.

On ne peut pas importer des images vectorielles qui contiennent des éléments bitmap. La partie vectorielle s’affiche correctement mais la partie bitmap ne s’affiche pas.

Un fichier au format .AI fonctionne uniquement si l’option « Créer un fichier compatible PDF » a été cochée en le sauvegardant (cochée par défaut).

S’il n’y a pas d’éléments bitmap, les fichiers .ai liés font un bon moyen de partager des éléments communs entre les pages.


Attention au déplacement d’images

Comme décrit, Illustrator cherche automatiquement les images manquantes dans un dossier « links ».

Mais, si l’image n’est pas manquante, Illustrator ne cherche pas.

Si vous copiez un document et ses images liées sur votre ordinateur et l’ouvrez, ses images liées seront celles de l’ancien dossier.

Par exemple :

  • Vous copiez une affiche faite pour un client vers le dossier « sync/desktop » de votre site
  • Vous copiez les images liées vers le sous-dossier « links »
  • Vous ouvrez l’affiche et tout paraît correct
  • Vous le publiez en ligne et il manque toutes les images

Bien que vous ayez copié les images au bon endroit, Illustrator les a trouvées dans l’ancien dossier.

Pour mettre à jour les liens d’images, il suffit de :

  1. renommer temporairement l’ancien dossier
  2. ouvrir le fichier Illustrator du site et le sauvegarder

L’étape 1 pousse Illustrator à mettre à jour les liens lors de l’étape 2.


Profils couleur

Seul Safari affiche les images en accord avec leurs profils de couleur.

Pour cette raison, en préparant les images pour un site web, il est conseillé de ne pas inclure le profil de couleur avec les images.

Si les images sont sauvegardées sans profils de couleur, tous les navigateurs les afficheront de la même manière.


Poursuivre le tutoriel : pages.

Leave a Reply

Your email address will not be published.