Comment optimiser les images web dans des formats PNG

category Internet & médias sociaux / Web design & développement / Conception iPhone & iPad web

Lorsque vous concevez pour l'iPhone, iPad ou iPod touch, vous devez choisir les meilleurs formats image et la résolution, ainsi que d'optimiser vos photos et autres graphiques.

Sommaire

Si vous travaillez avec un graphique, comme un logo, personnage de dessin animé, ou un dessin qui peut être affiché en 256 couleurs ou moins, votre meilleur pari est d'utiliser le format PNG 8 et de réduire le nombre total de couleurs utilisées dans l'image autant que possible afin de réduire la taille du fichier.

Si vous souhaitez effectuer une couleur dans l'image transparente, et que vous travaillez avec une photo ou un autre type d'image avec des millions de couleurs, vos meilleures options est PNG 24.

Pour aider à compenser la dégradation de la qualité d'image qui peut arriver quand les couleurs sont supprimés, PNG utilise une astuce de tramage. Le tramage implique pixels en alternance dans un motif en damier comme pour créer des variations de couleurs subtiles, même avec une palette de couleurs limitée. L'effet peut lisser les bords de l'image et la rendre semblent avoir plus de couleurs que qu'il fait réellement.

Pour convertir une image pour la PNG 8 ou 24 dans Photoshop, suivez ces étapes (dans Photoshop Elements ou Fireworks, le processus est similaire, bien que les étapes spécifiques peuvent varier):

Comment optimiser les images web dans des formats PNG
Comment optimiser les images web dans des formats PNG Agrandir
1

Avec l'image ouverte dans Photoshop, choisissez Fichier-Enregistrer pour le Web Devices (ou Fichier-Enregistrer pour le Web).




La Enregistrer pour le Web Boîte de dialogue Périphériques apparaît. Dans cet exemple, vous voyez le logo noir et blanc pour le site inplainsight art. Le format PNG 8 est le meilleur pour les images avec des couleurs limitées, comme les dessins animés et de l'art en ligne.

2

Dans le coin supérieur gauche de la boîte de dialogue, cliquez sur 2 ou 4-Up pour afficher plusieurs versions de la même image pour faciliter la comparaison côte-à-côte.

Cet exemple montre 2-Up, qui permet d'afficher l'image originale du logo en haut, ainsi qu'un aperçu de la version optimisée au fond.

3

Sélectionnez une image d'aperçu pour commencer à changer ses paramètres.

Cliquez sur l'image pour la rendre active dans la fenêtre de dialogue.

4

Sur le côté droit de la fenêtre de dialogue, un peu moins de présélection, cliquez sur la petite flèche pour ouvrir la liste déroulante Format de fichier optimisé et choisissez PNG 8 ou 24.

Si vous choisissez PNG 8, vous obtiendrez les tailles de fichier plus petites. Choisissez PNG 24 seulement si vous souhaitez optimiser une image avec beaucoup de couleurs et de toujours être en mesure de définir une couleur à transparent.

5

Dans la zone Couleurs, sélectionnez le nombre de couleurs, comme le montre la Figure 8-5.

Les moins de couleurs que vous utilisez, plus la taille du fichier et le plus rapide de l'image seront téléchargées. Mais être tentivement si vous réduisez les couleurs trop, vous perdez de détails. Le nombre idéal de couleurs dépend de votre image- si vous allez trop loin, votre image sera horrible.

6

Si vous voulez maintenir une zone transparente dans votre image, sélectionnez la case à cocher de la transparence.

Toute zone de l'image qui était transparent lorsque vous avez créé l'image dans l'éditeur apparaît transparente dans la fenêtre de prévisualisation. Si vous ne disposez pas d'une zone transparente dans votre image, ce paramètre n'a aucun effet.

La transparence est une bonne affaire pour rendre le texte ou une image semblent flotter sur une page web. En effet, un fond transparent ne figure pas sur la page Web. Vous pouvez sélectionner la transparence comme une option de fond dans la boîte de dialogue Nouveau fichier lorsque vous créez une nouvelle image dans Photoshop ou Photoshop Elements.

7

Si vous choisissez la transparence, spécifiez aussi une couleur mat.

Vous voulez que la couleur mate pour correspondre au fond de votre page Web de sorte que les tergiversations sur le bord transparent va se fondre dans l'arrière-plan. Si vous ne spécifiez pas une couleur de cache, la transparence est réglé pour un fond blanc, ce qui peut provoquer une halo effet lorsque l'image est affichée sur un fond coloré.

8

Spécifiez les autres paramètres comme vous le souhaitez.

Le reste des paramètres dans cette boîte de dialogue peuvent être laissés à leurs valeurs par défaut dans Photoshop.

9

Cliquez sur Enregistrer.

Le Sauvegarder optimisé boîte de dialogue apparaît.

10

Entrez un nom pour l'image et l'enregistrer dans le dossier d'images (ou tout autre dossier) dans le dossier de votre site local.

Répétez ces étapes pour chaque image que vous souhaitez optimiser un GIF ou PNG pour votre site.

Essais et erreurs est une grande technique dans le Enregistrer pour le Web Boîte de dialogue Périphériques. La fenêtre d'aperçu montre clairement l'effet de plus en plus dégradant que le choix des couleurs moins en moins de produit.

Articles Similaires

A propos Auteur
Sauvegarder photoshop CS5 images pour les appareils mobiles et web Sauvegarder photoshop CS5 images pour les appareils mobiles et web

Enregistrement de fichiers pour les dispositifs web ou mobiles dans Photoshop Creative Suite 5 crée une version plus petite de votre image afin qu'elle se charge rapidement. Il est important de connaître les différences entre GIF, JPEG, PNG et…

Comment optimiser gif et png pour votre site de médias sociaux Comment optimiser gif et png pour votre site de médias sociaux

Si vous travaillez avec un graphique qui peut être visualisée en 256 couleurs ou moins sur votre site de médias sociaux - comme un logo, personnage de dessin animé, ou un dessin - le mieux est d'utiliser le format PNG et de réduire le nombre…

Comment optimiser les images jpeg pour votre site de médias sociaux Comment optimiser les images jpeg pour votre site de médias sociaux

JPEG est un bon choix de format pour votre site de média social. Le format JPEG est le meilleur choix pour l'optimisation des images en tons continus, comme les photographies et images avec beaucoup de couleurs ou des dégradés. Lorsque vous…

Comment optimiser votre image de couverture de facebook avec Photoshop de boîte de dialogue Enregistrer pour le Web Comment optimiser votre image de couverture de facebook avec Photoshop de boîte de dialogue Enregistrer pour le Web

Après que vous obteniez votre couverture et profil Facebook des photos placés là où vous le souhaitez, d'optimiser l'image de couverture avant de la télécharger à Facebook dans les étapes qui suivent. Rappelez-vous que votre image de…

Comment enregistrer des images à utiliser sur votre site de médias sociaux Comment enregistrer des images à utiliser sur votre site de médias sociaux

Vous aurez besoin de savoir comment sauvegarder les images pour être utilisé sur vos médias sociaux site.If vous êtes nouveau à l'enregistrement des images pour le web, les bases suivantes peuvent vous aider à obtenir les meilleurs résultats…

Optimiser gif œuvres d'art dans des feux d'artifice Optimiser gif œuvres d'art dans des feux d'artifice

Quand tu optimiser œuvre dans Fireworks, vous choisissez le format de fichier pour l'exportation et puis spécifiez d'autres paramètres. Si votre conception a de grandes zones de couleur et d'autres éléments solides, comme un logo de client, le…

Meilleures formats d'image pour iPhone et iPad Meilleures formats d'image pour iPhone et iPad

Lorsque vous concevez des sites Web pour l'iPhone et l'iPad, vous devez choisir les meilleurs formats d'image pour toutes les photos, art de la ligne, logos, dessins animés, et d'autres images que vous souhaitez afficher.Si vous travaillez avec des…

Changer l'opacité des couleurs dans la conception web Changer l'opacité des couleurs dans la conception web

Pendant des années, les concepteurs Web ont eu recours à la transparence dans les sites Web en enregistrant des images soit dans le format PNG ou GIF et de faire une couleur transparente. Bien que cette méthode est pas idéal, il a travaillé…

Comment optimiser les images jpeg pour le web Comment optimiser les images jpeg pour le web

Ayant images accrocheur sur votre site Web est l'une des meilleures façons d'attirer iPhone et iPad amateurs soucieux de leur image. Le format JPEG est le meilleur choix pour l'optimisation des images en tons continus, comme les photographies et…

Optimiser images dans Photoshop pour iPhone et iPad Optimiser images dans Photoshop pour iPhone et iPad

Vous devez utiliser un programme d'édition de graphiques, tels que Adobe Photoshop ou Fireworks, de créer des graphiques pour le web lors de la conception de l'iPhone et l'iPad. Vous pouvez utiliser la boîte de dialogue Enregistrer pour le Web…

Convertir des éléments de photoshop 10 images en mode de couleurs indexées Convertir des éléments de photoshop 10 images en mode de couleurs indexées

Couleurs indexées est un mode que vous utilisez occasionnellement avec des graphismes Web, telles que l'enregistrement au format GIF ou PNG-8. Lors de l'enregistrement des images en couleurs indexées, vous pouvez créer des fichiers plus petits…

Format du projet de Photo et photoshop fichier EPS formats dans photoshop elements 10 Format du projet de Photo et photoshop fichier EPS formats dans photoshop elements 10

De nombreux formats de fichiers différents sont disponibles dans Photoshop Element, mais vous aurez probablement envie d'utiliser seulement quelques-uns. Parmi les formats les plus communs sont Format Photo Project (* .pse) et Photoshop EPS (*…

Enregistrer les fichiers pour le web dans photoshop elements 12 Enregistrer les fichiers pour le web dans photoshop elements 12

Lorsque vous voulez préparer photos dans Photoshop Elements pour les navigateurs Web et pour la visualisation à l'écran tels que les fichiers PDF interactifs, vous pouvez optimiser les images pour le web en choisissant Fichier-Enregistrer pour le…

Enregistrer des éléments de photoshop 10 images pour le web Enregistrer des éléments de photoshop 10 images pour le web

Lorsque vous voulez préparer les photos pour les navigateurs Web et de visualisation à l'écran tels que les fichiers PDF interactifs, vous pouvez optimiser les images en choisissant le fichier-commande Enregistrer pour le Web. Après l'ouverture…

» » » » Comment optimiser les images web dans des formats PNG