Préparer les images d’une page SVG pour un site web, toutes à la fois

Le plus facile est de faire le design d’une page sans se soucier de la taille/poids des images.

On se sert des images d’origine, de bonne qualité et très lourdes pour faire une jolie page sans se prendre la tête.

Mais, quand la page est prête à être publiée, comment faire pour redimensionner toutes les images ?

La règle de base (pour moi) est qu’une image qui remplit l’écran devrait faire 3000px de large.

Ceci est vrai si l’image est de bonne qualité. Si l’image est de moindre qualité, je la mets à 4000px.

Cela fait un joli effet, même zoomé, sur l’écran retina d’un iMac sans pour autant être très lourd.

Par défaut, je crée des pages à 1000px de large, et cette explication y dépend.

Pour convertir toutes les images d’une page à la fois à la bonne résolution :

1. Sauvegarder le document comme PDF sans rien cocher dans les options.

image

2. Dans les options de compression, choisir les options suivantes :

Color bitmap images: Bicubic downsampling à 288 ppi pour images au dessus de 288ppi

Compression : Automatic (JPEG)

Qualité d’image : Maximum

image

Si vous avez des images grayscale, mettre les mêmes options etc.

3. Fermer le PDF

4. Ouvrir le PDF

5. Sauvegarder le PDF en tant que SVG avec l’option “Emplacement de l’image : Lier

image

Il vaut mieux le faire dans un nouveau dossier.

6. Donner les noms corrects aux images créées.

On trouvera dans le dossier avec le SVG (qu’on peut supprimer), toutes les images de la page converties à l’échelle voulue.

Seulement, les noms ne seront pas corrects, et il faudra les renommer.

NOTE : Comme la qualité de l’image est dégradé en créant le SVG, j’ai choisi de sauvegarder le PDF à 288 ppp. Cela fait qu’une image de 1000px de large dans le fichier Illustrator fera 4000px de large à la fin du processus.

Leave a Reply

Your email address will not be published. Required fields are marked *