Commentmodifier une photo dans Paint ? Comment ouvrir la photo au format JPG dans paint ? Ouvrez le dossier dans lequel est enregistré l’image. Cliquez dessus une fois pour la sélectionner, puis clic droit pour voir le menu. Aujourdhui, le projet Paint.NET a pris tellement d'importance qu'il ne peut plus être considéré comme une alternative à Paint mais comme un logiciel de retouche d'images à part entière. Le logiciel Paint.NET offre tellement de possibilité qu'il sera difficile de tout traiter dans un seul article. Nous publierons donc plusieurs articles LesEXIF sont un ensemble d’informations relatives à chaque photo et présentées dans un format normalisé. Ces données sont générées par l’appareil photo lors de la prise de vue, automatiquement. Elles sont stockées dans le fichier image pour les formats JPG, TIFF et RAW. Les données EXIF sont très nombreuses, vous pouvez obtenir Rubriquesconnexes. Cet article explique comment charger et enregistrer des fichiers image à l’aide de BitmapDecoder et de BitmapEncoder, et comment utiliser l’objet SoftwareBitmap pour représenter des images bitmap. La classe SoftwareBitmap est une API polyvalente qui peut être créée à partir de plusieurs sources, y compris les SurPhotoshop, il existe deux manières de remplacer une couleur par une autre : Utiliser un filtre teinte/saturation pour transformer une teinte précise en une autre teinte, en conservant les 2 autres couches : saturation et luminance. Cette première méthode est très utile pour remplacer la couleur partout sur l'image, c'est une méthode Ilest, dans la pratique, très compliqué de dessiner dans un formulaire Access. Access ne dispose pas de fonctions natives pour dessiner, hormis Pset() mais cette fonction n'est disponible que dans les états. Pset() est la fonction idéale pour tracer des lignes verticales dans les états, problème souvent abordé sur le forum. Sans fonctions natives, nous allons Ilarrive souvent qu’on sous-expose ou qu’on surexpose une photo lors de la prise de vue. La luminosité et le contraste sont un des moyens offerts par Paint.NET pour rectifier le tir. Ce tutoriel vidéo vous montre comment vous y prendre.. Points à retenir : Sélectionner les éléments; Lancer la commande Ajustement > Luminosité / Contraste 1o4cY. Comment ouvrir ou modifier un fichier .SVG ? C’est une questions que l’on m’a posé plusieurs fois. En effet le format SVG Scalable Vector Graphic n’est pas un fichier “image” classique que l’on peut ouvrir avec The Gimp, Photo Filtre, Photoshop… C’est un format de fichier vectoriel, qui permet de conserver le rendu de l’image quelque soit la taille. En effet avec le PNG, JPG… avec la compression les images est dégradée Le SVG permet donc d’avoir des images nettes, que cela soit en tout petit, ou en très grand. A noter ce sont des lignes, donc cela ne permet pas non plus d’obtenir une richesse et une précision des images matricielles. Donc pour ouvrir ce fichier, il faut posséder Adobe Illustrator… or utiliser un outil gratuit comme Inkscape téléchargement sur CE LIEN. Inkscape permet d’ouvrir les fichiers SVG, de les enregistrer éventuellement en PNG, mais surtout de les modifier. Voici par exemple comment modifier la couleur de fichiers SVG Ensuite vous sélectionnez la couleur à changer Faites un clic droit sur la palette de couleur afin de fixer la couleur du contour du trait Puis vous utilisez le seau pour remplir avec la couleur sélectionnée bordure et extérieur Et vous remplissez la forme avec la nouvelle couleur A noter vous pouvez à ce moment là aussi modifier la couleur si vous n’avez pas finalement sélectionné la bonne… Comment convertir un fichier SVG en PNG ?La vidéo explicative pour ouvrir et modifier un fichier SVGVous voulez plus de clients ? Comment convertir un fichier SVG en PNG ? Il suffit d’aller dans le menu “Fichier”, puis “Exporter une image PNG” Puis de choisir les options d’export La vidéo explicative pour ouvrir et modifier un fichier SVG Vous voulez plus de clients ? Téléchargez mon guide gratuit avec 52 optimisations simples à faire sur son site internet pour améliorer la conversion de son site internet Article précédent Comment faire face aux ralentissements d'activité durant les périodes de vacances ? Article suivant 4 stratégies gagnantes pour avoir plus de trafic sur son site internet ! Cette astuce va vous montrer comment il est possible de dessiner avec une certaine précision dans l'outil Paint intégré à Windows 7. Pour réaliser des dessins de façon assez précise, afin de respecter les proportions notamment, une règle ou une feuille quadrillée est souvent la bienvenue. L’outil de dessin intégré au système d’exploitation Windows 7 offre ces possibilités. Et pour en profiter, il suffit d’activer les bonnes options. Cliquer sur le bouton "Affichage " dans la partie supérieure, de façon à changer de ruban. Il ne reste alors plus qu’à cocher les cases devant " Règle " et / ou " Quadrillage " pour voir apparaître des règles verticale / horizontale et / ou un quadrillage au lieu d'un simple fond blanc. Grâce à ces conseils simples en matière d’édition d’images, vous pourrez mettre en valeur chacune de vos photos puis créer des produits photo à partir de vos clichés pour revivre vos plus beaux souvenirs à volonté ! Pour commencer, il convient de choisir l’outil d’édition que vous allez utiliser ; Photoshop propose de nombreuses fonctionnalités pointues, mais Paint ou Aperçu sous OS X peuvent également convenir. Vous avez choisi votre logiciel ? Parfait ! Commençons par apprendre les bases… Comment réduire la taille de vos photos Réduire la taille d’une photo peut avoir plusieurs significations il peut s’agir de rogner ou redimensionner l’image, ou encore de diminuer l’espace qu’elle occupe sur votre disque dur taille du fichier. Diminuer la taille d’un fichier photo et/ou redimensionner une photo Si vous prévoyez de rogner votre photo, faites-le dès le départ afin de réduire la taille de votre fichier. Ouvrez le fichier dans le logiciel d’édition d’images de votre choix puis recherchez une fonctionnalité de type Redimensionner, Taille de l’image ou Réduire, la plupart du temps accessible depuis le menu Édition. Choisissez le nombre de pixels de votre choix puis sauvegardez la photo en cliquant sur Enregistrer sous », sans oublier de donner un nouveau nom à ce fichier. Pensez à cliquer sur Conserver les proportions » pour conserver la forme initiale de l’image. Rogner une photo Utilisateurs de Microsoft Paint Ouvrez l’image sous Microsoft Paint Cliquez sur l’outil Sélectionner » puis déplacez le curseur de la souris tout en appuyant pour délimiter la zone que vous souhaitez conserver Une fois la zone sélectionnée, cliquez avec le bouton droit de la souris n’importe où dans cette zone et cliquez sur Rogner » Utilisateurs d’Adobe Photoshop Ouvrez l’image sous Adobe Photoshop À l’aide de l’outil de sélection, sélectionnez la zone de l’image que vous souhaitez conserver Cliquez sur Image Cliquez sur Recadrer Comment ajouter du texte à vos photos Si vous voulez ajouter du texte à une image rapidement et gratuitement sans recourir à des fonctionnalités supplémentaires, vous pouvez utiliser Paint Windows ou Aperçu OS X. Utilisateurs de Microsoft Paint ou Aperçu Ouvrez l’image sous Paint ou Aperçu. Si vous ne disposez d’aucun autre logiciel d’édition d’images, vous pouvez cliquer avec le bouton droit de la souris sur l’image puis cliquer sur Modifier ». Si vous utilisez OS X, effectuez un double-clic sur l’image pour l’ouvrir avec Aperçu Cliquez sur le bouton Texte » il prend la forme d’une lettre A » et se situe dans la barre d’outils en haut de votre écran. Si vous utilisez Aperçu, vous devrez d’abord cliquer sur le bouton Modifier », situé près de la barre de recherche Déplacez le curseur de la souris tout en appuyant pour délimiter la zone de texte. Cette zone contiendra tout le texte que vous saisirez, mais seul le texte adapté aux dimensions de la zone sera visible. Vous pourrez ajuster la taille de la zone de texte en cours de saisie. Saisissez votre texte. Avant de définir sa mise en forme, saisissez-le intégralement de manière à visualiser le rendu de l’ensemble lors de vos modifications. La police et la couleur du texte peuvent également être modifiées. Vérifiez votre texte puis sauvegardez. Ces logiciels sont relativement basiques ; si vous souhaitez revenir sur certaines modifications, vous devrez annuler l’ensemble des changements et tout recommencer. Enregistrez le texte saisi en cliquant à l’extérieur de la zone de texte Astuce utilisez un logiciel d’édition d’images comme Photoshop ou GIMP pour bénéficier de plus de fonctionnalités Utilisateurs d’Adobe Photoshop Ouvrez la photo sur laquelle vous souhaitez ajouter du texte dans votre éditeur d’images. Si vous désirez obtenir plus de fonctionnalités que celles proposées par Paint sans devoir acheter Photoshop, nous vous suggérons l’utilisation de GIMP, un logiciel d’édition d’images gratuit. Cliquez sur le bouton Texte » Il se situe dans la liste d’outils, généralement sur la partie gauche de l’écran. Cliquez et faites glisser pour créer une zone de texte. Cela génère automatiquement la création d’un nouveau calque ; en effet, les logiciels d’édition d’images présentent l’avantage de décomposer les images en différents calques, ce qui vous permet de modifier votre texte sans incidence sur l’image d’origine Saisissez votre texte. Avant de définir sa mise en forme, saisissez-le intégralement de manière à visualiser le rendu de l’ensemble lors de vos modifications. La police et la couleur du texte peuvent également être modifiées. Utilisez les autres outils d’édition disponibles pour modifier votre texte Utilisez l’outil Rotation pour faire pivoter votre texte sur l’image Les outils de transformation vous permettront de courber et donner une forme particulière à votre texte de manière à obtenir l’effet souhaité La plupart des éditeurs d’images sauvegarderont votre photo sous forme d’un ficher projet ; vous pouvez néanmoins l’exporter sous forme d’image, auquel cas il conviendra d’ajuster les paramètres de format et de qualité lorsque vous enregistrerez la version finale de votre photo. Comment obtenir des photos plus nettes Pour obtenir des photos plus nettes, deux procédés sont possibles ; il est toutefois plus simple de revoir vos techniques de photographie pour assurer un rendu optimal dès la prise de vue plutôt que de tenter d’améliorer le résultat par la suite. Effectuez une mise au point manuelle Même si la mise au point automatique offre souvent un résultat à la hauteur de nos attentes, l’idéal est d’opter pour la mise au point manuelle, même en cas de faible luminosité, pour obtenir des photos nettes. Après avoir sélectionné le mode manuel, faites simplement tourner la bague de mise au point jusqu’à ce que les détails apparaissent nettement. Verrouillez le miroir Lorsque vous prenez une photo, le miroir de votre appareil photo reflex se lève et se baisse pour laisser entrer la lumière dans le capteur. Ce mouvement fait parfois légèrement bouger l’appareil photo, ce qui peut générer un effet de flou, en particulier lorsque la vitesse d’obturation est faible. Recherchez l’option de verrouillage du miroir dans le menu de votre appareil photo. Nettoyez votre objectif Avant et pendant chaque séance photo, il faut impérativement assurer la propreté de l’objectif. De la poussière ou une tâche peuvent non seulement diminuer la netteté de vos photos, mais également altérer la lumière et les couleurs dans certains cas. Utilisez un trépied Plus votre appareil photo est stable, moins vos photos risquent d’être floues. Découvrez nos conseils à ce sujet link to how to hold your camera. Si vous avez déjà pris une photo et qu’elle est légèrement floue, il y a plusieurs façons de la modifier grâce à des outils d’amélioration de la netteté. Certaines applis comme Google Photos, VSCO Cam et Instagram proposent également de nombreux filtres qui pourront atténuer l’effet de flou de votre photo ou lui donner un côté plus artistique. Astuce Photoshop propose une panoplie d’outils d’amélioration de la netteté très efficaces, comme par exemple le Filtre accentuation et la Netteté optimisée Comment fusionner des photos Utilisateurs de Microsoft Paint Après l’avoir trouvée sur votre disque dur, cliquez avec le bouton droit de la souris sur l’une des photos que vous souhaitez fusionner puis cliquez sur Ouvrir avec » dans le menu contextuel. Choisissez Paint » dans le sous-menu pour ouvrir l’image avec Microsoft Paint. Dans le menu, cliquez sur la flèche située sous le bouton Coller » puis sur Coller à partir de ». Sélectionnez puis effectuez un double-clic sur votre deuxième image à partir de son emplacement sur votre disque dur. Elle sera ainsi collée sur la première image. Cliquez et faites glisser la deuxième image dans la fenêtre de Microsoft Paint pour la repositonner ; vous pouvez soit la superposer à la première, soit la placer à côté. Si nécessaire, déplacez votre curseur dans l’angle ou sur le bord de l’image, puis cliquez et faites glisser pour la redimensionner. Cliquez sur Fichier » tout à gauche du menu puis sur Enregistrer sous » pour sauvegarder les photos fusionnées en tant que nouvelle image. Astuce vous pouvez déplacer ou redimensionner une image collée directement après son insertion ; après avoir apporté d’autres modifications, par exemple si vous sélectionnez un pinceau, l’image collée ne pourra plus être modifiée indépendamment de l’arrière-plan Maintenant que vous connaissez ces quelques conseils, vous pourrez mettre en valeur vos photos comme jamais ! Alors sortez, prenez de jolies photos et créez de superbes produits photo à partir de vos clichés… Découvrir Inpaint Inpaint est un logiciel de retouche photo, qui permet de supprimer des objets d’une photo, en les remplaçant par un fond cohérent avec le reste de l’image. Il vous suffit d’uploader votre photo sur le site, puis de jouer avec les différents outils pour supprimer les parties indésirées de votre photo. Inpaint est disponible pour Windows, MacOS, iOS et sur navigateur web. L’outil dispose de nombreuses fonctionnalités, comme par exemple un curseur rond qui s’agrandi ou se rétréci, selon la précision du détourage que vous souhaiter effectuer un lasso pour sélectionner des zones de pixels facilement un outil de tracé vectoriel pour détourer des angles précis une gomme Grâce à ces différents outils, vous pouvez supprimer tout type d’objet ou de personne sur une photo. Lorsque vous avez fini votre sélection, cliquez sur Effacer pour supprimer la zone sélectionnée. L’outil va détecter l’objet précis, et le remplacer par une zone de couleur parfaitement correspondante avec le fond initial. Vous pouvez détourer autant d’objets que vous le souhaitez par photo. Inpaint permet également de reconstituer une photo abimée par le temps. En effet, à partir du fond de la photo, Inpaint va recréer automatiquement les morceaux manquant pour combler les trous. L’outil est destiné à ceux qui veulent effectuer des retouches rapides, sans avoir à utiliser de logiciel compliqué comme Photoshop. Inpaint est adapté pour des besoins de suppression d’objets, pour les photos e-commerce, mais également pour les designers qui ont besoin de gagner du temps, ou encore pour les photographes. Avec la formule gratuite il est possible de télécharger les images retouchées sans filigrane et sans inscription, mais uniquement dans des faibles résolutions. Si vous souhaitez avoir accès à la version complète, vous pouvez acheter les photos retouchées, à l’unité pour 50 centimes par image, ou payer 19,99 $ par mois pour une utilisation illimitée. Les images représentent une part très importante du temps de chargement d’un site web elles sont souvent bien plus lourdes que le code lui-même. Leur optimisation est donc essentielle afin d’alléger votre site et d’accélérer le chargement des pages pour une meilleure expérience utilisateur. Sommaire1/Le poids des images2/La résolution d’image3/Les différents formats d’image sur le web JPG, PNG, GIF, SVG… format JPEG1Avantages du JPEG2Inconvénients du JPEG3Quand utiliser le JPEG ? format PNG-241Avantages du PNG-242Inconvénients du PNG-243Quand utiliser le PNG-24 ? format PNG-81Avantages du PNG-82Inconvénients du PNG-83Quand utiliser le PNG-8 ? format GIF1Avantages du GIF2Inconvénients du GIF3Quand utiliser le GIF ? format SVG1Avantages du SVG2Inconvénients du SVG3Quand utiliser le SVG ? format BMP1Avantages du BMP2Inconvénients du BMP3Quand utiliser le BMP ?4/Enregistrer pour le web avec un JPEG avec un PNG-24 avec un PNG-8 avec de rendu5/Bien nommer son fichier6/Pour conclure Le poids des images En informatique, le poids » d’un fichier représente l’espace qu’il occupe sur la mémoire sur laquelle il est stocké disque dur, clé USB, SSD…. Ce poids s’exprime en octets bytes en anglais. Pour rappel 8 bits = 1 octet 1024 octets = 1 Ko kilo octet 1024 Ko = 1 Mo méga octet 1024 Mo = 1 Go giga octet 1024 Go = 1 To terra octet Le poids des images se mesure habituellement en Ko, voire en Mo pour les plus gros fichiers. Lorsque l’on envoie des images sur son site, il est important de garder à l’esprit qu’elles devront être téléchargées par le navigateur avant de pouvoir être affichées. Cela signifie que plus leur poids est important, plus le temps de chargement des pages sera long pour l’internaute. Ce n’est pas forcément un problème quand on dispose d’une bonne connexion internet et d’un forfait illimité. En revanche, imaginez un internaute souhaitant consulter votre site à partir d’un mobile dans une zone peu couverte avec des images trop lourdes, il abandonnera vite pour consulter un autre site plus rapide et plus léger. C’est ce que vous devez éviter impérativement ! Il faut donc prendre le temps d’optimiser vos images avant de les envoyer sur le serveur. L’idée est de réduire au maximum leur poids tout en conservant la meilleure qualité possible, dans la limite du raisonnable. Pour cela, il existe plusieurs formats de fichiers qui vous permettront d’obtenir le meilleur rapport qualité/poids selon la nature de vos images. La résolution d’image Une croyance répandue consiste à penser que les images pour le web doivent être enregistrées dans une résolution de 72 dpi on lit parfois 96 dpi. Cette affirmation est totalement fausse ! En effet, il existe une multitude de résolution d’écrans, surtout depuis l’arrivée des smartphones et tablettes sur le marché. La légende des 72dpi n’est donc pas une règle à suivre pour vos images, d’autant plus qu’il y a une incompréhension générale autour de la notion même de résolution. La réalité, c’est que la résolution d’image n’a aucune importance sur le web c’est la taille qui compte ! Ou en d’autres termes, la hauteur et la largeur en pixels, qui définissent le nombre total de pixels présents dans l’image. Selon la résolution de l’écran, votre image occupera donc plus ou moins d’espace en fonction de sa largeur et de sa hauteur en pixels, quelle que soit sa propre résolution. La seule différence entre deux images de même taille mais de résolution différente se verra au moment de l’impression. L’image de plus haute résolution sera imprimée en plus petit mais sera plus précise, puisque la résolution correspond au nombre de pixels présents dans une surface donnée. A l’inverse, une image de faible résolution pourra être énorme une fois imprimée, mais de très mauvaise qualité les pixels seront visibles. En bref, n’accordez pas trop d’importance à la résolution, le plus important étant de bien choisir votre taille d’image pour qu’elle soit adaptée à un celle d’un écran d’ordinateur. Bannissez-donc l’idée d’envoyer sur votre site des images de 5000px de large ! Attention toutefois lorsque vous modifiez la résolution d’une image sur Photoshop, assurez-vous que la case Rééchantillonage » soit décochée. Si elle reste cochée ce qui est le cas par défaut, Photoshop modifiera également les dimensions de l’image proportionnellement au changement de résolution. Les différents formats d’image sur le web JPG, PNG, GIF, SVG… La principale erreur à ne pas commettre est d’envoyer des images sur votre site sans connaître leur format de fichier. Celui-ci correspond à la manière dont votre image est encodée. Selon le format que vous aurez choisi, l’image sera plus ou moins lourde et contiendra ou non certaines informations qui changeront son apparence à l’écran. Il est donc essentiel de bien choisir le format de fichier selon les caractéristiques de l’image photographie, icône, dessin, transparence, nombre de couleurs, aplats, taille… Avant toute chose, vous devez connaître le format de fichier de vos images. Pour cela, il vous faut afficher les extensions de noms de fichiers sur votre ordinateur c’est très simple et indispensable Procédure pour Windows Procédure pour Mac Vous verrez alors apparaître le type de fichier dans le nom exemple ou Cela vous donnera une première indication du format dans lequel vos images sont enregistrées, bien qu’il existe plusieurs types d’encodage pour une même extension de fichier. Dans la suite de cet article, nous allons passer en revue les principaux formats d’images rencontrés sur le web, leurs caractéristiques, leurs avantages et leurs inconvénients. Vous saurez alors quel format de fichier utiliser pour chacune de vos images. Le format JPEG Nom complet Joint Photographic Experts Group Extension de fichier .jpg ou .jpeg Avantages du JPEG Léger Possibilité de choisir le niveau de compression 16 millions de couleurs Inconvénients du JPEG Aucune gestion de la transparence Rendu peu esthétique sur les aplats de couleur sauf JPG haute qualité, plus lourd Mauvaise qualité si la compression est trop poussée pixellisation Quand utiliser le JPEG ? Photos sans transparence Arrière-plans et images de grande taille Le format PNG-24 Nom complet Portable Newtork Graphics 24 bits Extension de fichier .png Avantages du PNG-24 Format sans perte pas de pixellisation 16 millions de couleurs Gestion de la transparence couche alpha, 256 niveaux, on parle alors de PNG-32 ou PNG-24+A Aucune pixellisation sur les aplats de couleur Inconvénients du PNG-24 Lourd, plus long à charger Quand utiliser le PNG-24 ? Visuels nécessitant une couche alpha dégradé sur fond transparent, opacité partielle… Visuels autres que photos avec un large spectre de couleurs et des aplats zones unies infographies, captures d’écrans, schémas, logos avec dégradés de couleurs… Le format PNG-8 Nom complet Portable Newtork Graphics 8 bits Extension de fichier .png Avantages du PNG-8 Léger Format sans perte pas de pixellisation Possibilité de choisir le nombre de couleurs indexées de 2 à 256 Gestion partielle de la transparence binaire Inconvénients du PNG-8 Limité à 256 couleurs maximum Pas de couche alpha, uniquement des zones entièrement transparentes Quand utiliser le PNG-8 ? Visuels autres que photos avec moins de 256 couleurs et sans couche alpha convient dans la majorité des cas logos, pictogrammes, schémas, icônes… Le format GIF Nom complet Graphics Interchange Format Extension de fichier .gif Avantages du GIF Gestion des animations Format sans perte pas de pixellisation Possibilité de choisir le nombre de couleurs indexées de 2 à 256 Gestion partielle de la transparence binaire Inconvénients du GIF Limité à 256 couleurs maximum Pas de couche alpha, uniquement des zones entièrement transparentes Plus lourd que le PNG-8 pour un rendu identique Quand utiliser le GIF ? Uniquement pour les animations Le format SVG Nom complet Scalable Vector Graphics Extension de fichier .svg Avantages du SVG Format vectoriel aucune pixellisation quel que soit l’agrandissement de l’image Très léger Gestion de la transparence fill-opacity Peut être combiné à SMIL pour créer des animations Peut être utilisé sous forme de police de caractères font-face Modifiable avec un éditeur de texte syntaxe XML Balise dédiée en HTML5 Inconvénients du SVG Non supporté par Internet Explorer 8 et ses versions antérieures SMIL non implémenté sur Internet Explorer pas d’animations Uniquement pour les images vectorielles Illustrator, Inkscape Intégration plus complexe que pour une image classique Implémentation variable de la balise selon les navigateurs Quand utiliser le SVG ? Icônes, logos et pictogrammes lorsque vous disposez des sources au format vectoriel, formes géométriques, polices de caractères Le format BMP Nom complet Bitmap Extension de fichier .bmp, .dib Avantages du BMP Format sans perte pas de pixellisation dans sa version 24 bits Existe aussi en versions 256 couleurs, 16 couleurs ou monochrome Inconvénients du BMP Très lourd et long à charger L’image se charge de bas en haut dans le navigateur Pas de gestion de transparence Quand utiliser le BMP ? Jamais sur le web ! Enregistrer pour le web avec Photoshop Pour enregistrer correctement vos images pour le web sur Photoshop, n’utilisez jamais l’option Enregistrer sous » cette fonctionnalité est destinée à sauvegarder votre travail. Pour l’export web, il existe un outil spécifique qui permet d’optimiser l’image et de réduire son poids de manière conséquente lors de l’enregistrement. Vous pouvez y accéder via Fichier > Enregistrer pour le Web… » ou en utilisant le raccourci ALT + CTRL + MAJ + S. Cet outil vous permet d’enregistrer vos images en JPEG, PNG-24, PNG-8, GIF ou WBMP. Ce dernier format ne sera que très rarement utilisé il s’agit d’un Bitmap monochrome destiné aux terminaux mobiles en noir et blanc. Voici quelques avantages de l’outil Enregistrer pour le Web… » de Photoshop Suppression des informations inutiles contenues dans le fichier Optimisation poussée choix du format, niveau de compression, nombre de couleurs, gestion de la transparence, taille de l’image, aperçu du poids du fichier… Possibilité de zoomer sur des zones de l’image pour voir le rendu Remplacement automatique des espaces par des tirets lors de la création du fichier Commencez par choisir le bon format selon les avantages et inconvénients vus précédemment. S’il s’agit d’une photo et que celle-ci ne doit pas contenir de transparence, utilisez toujours le format JPEG. Pour les autres types d’image tels que les logos, pictogrammes, schémas, icônes ou textes, on choisira du PNG. Dans la plupart des cas, le PNG-8 fera l’affaire. Le PNG-24, bien plus lourd, n’est à utiliser que lorsque l’image contient une transparence partielle en dégradé ou en opacité ou de très nombreuses couleurs typiquement des dégradés ou la présence de photos dans l’image. N’utilisez le format GIF que lorsque vous souhaitez exporter une animation. A noter qu’il n’est pas possible d’enregistrer des images au format SVG avec cet outil. Il vaut mieux privilégier Illustrator pour travailler sur des images vectorielles et les exporter. Nous allons maintenant voir comme enregistrer correctement les trois formats les plus utilisés sur le web, le JPG, le PNG-24 et le PNG-8, grâce à l’outil Enregistrer pour le Web… » de Photoshop. Enregistrer un JPEG avec Photoshop Le paramètre le plus important lors de l’export d’un JPEG est le niveau de compression, appelé ici Qualité ». Avec une qualité de 100, l’image aura un très haut niveau de détail pas de pixellisation visible sur les aplats de couleur par exemple mais aura un poids beaucoup plus important. A l’inverse, avec une qualité de 10, l’image sera très légère mais fortement dégradée et très pixellisée. Il vous faut ici trouver le bon compromis entre poids et qualité. L’outil Enregistrer pour le Web… » vous permet d’avoir un aperçu de l’image avec possibilité de zoomer pour voir les détails et vous indique le poids final du fichier. Pour une photo, une qualité comprise entre 60 et 80 conviendra parfaitement dans la plupart des cas. En revanche, vous devrez probablement augmenter la qualité pour les images contenant des aplats de couleurs ou du texte. Sachez toutefois quun JPEG en qualité 100 est souvent plus léger que son équivalent en PNG-24. C’est donc un format que vous pouvez utiliser sans problème tant que vous n’avez pas besoin de transparence dans l’image. Il est d’ailleurs vivement recommandé d’utiliser du JPEG pour les très grandes images de type arrière-plan photo ou non, le poids augmentant considérablement avec la taille. Avec du PNG-24, vous pourriez vite vous retrouver avec une image de 2 Mo, ce qui est beaucoup trop lourd pour une page web ! Enregistrer un PNG-24 avec Photoshop Contrairement au JPEG, le PNG-24 ne présente aucune compression. Chaque pixel de l’image est codé sur 24 bits soit 3 octets. Cette information se décompose en trois couches » d’un octet chacune, correspondant respectivement à la quantité de rouge, de vert et de bleu présente dans le pixel. Chaque couche peut contenir une valeur allant de 0 à 255, 0 correspondant au noir et 255 au rouge, au vert ou au bleu. Un pixel a donc 256 x 256 x 256 nuances possibles, ce qui donne environ 16,8 millions de couleurs. L’option importante ici est la transparence. Si cette option est activée, une quatrième couche, appelée couche alpha, va être ajoutée sur un octet supplémentaire pour enregistrer le degré d’opacité du pixel. Comme pour les trois autres couches, la valeur est comprise en 0 et 255, 0 correspondant à une transparence totale et 255 à une opacité totale. Lorsque la couche alpha est activée, l’information du pixel est codée sur 32 bits. On parle alors de PNG-32 ou de PNG-24+A. Pour faire simple, ne cochez la case Transparence » que si vous en avez besoin. Enregistrer un PNG-8 avec Photoshop Le PNG-8, comme son nom l’indique, ne stocke que 8 bits d’information par pixel soit un octet, ce qui représente 256 valeurs possibles. Cela signifie que l’image aura au maximum 256 nuances différentes. C’est la raison pour laquelle ce format n’est pas adapté aux photos, dégradés et images contenant un large spectre de couleurs. Il est en revanche idéal pour les images ayant peu de teintes différentes et des aplats de couleur, comme les logos, pictogrammes, icônes, etc. Son très faible poids lui donne un énorme avantage par rapport au PNG-24. Au moment d’enregistrer pour le web, Photoshop va analyser l’image et identifier les 256 couleurs à indexer dans la table de couleurs, chacune se voyant attribuer une valeur de 0 à 255. Chaque pixel utilisera alors l’une de ces couleurs. Vous avez la possibilité de réduire le nombre de couleurs indexées grâce à l’option Couleurs ». En effet, inutile de conserver 256 nuances différentes si votre image n’en présente qu’une dizaine. A vous donc de modifier cette valeur en vérifiant dans l’aperçu que votre image n’est pas dégradée et conserve une bonne qualité. Contrairement au PNG-24, le PNG-8 ne possède pas de couche alpha. La transparence est donc binaire soit le pixel est entièrement transparent, soit il ne l’est pas et a donc une couleur parmi celles de la table. Si vous cochez la case Transparence », vous verrez une nuance se rajouter dans la table des couleurs indexées, sous la forme d’un petit carré sur fond à carreaux blanc et gris. Si votre image ne contient pas de transparence, il est évidemment inutile de cocher cette case. Exemples de rendu Puisqu’une image vaut mille mots, voici des exemples concrets de rendu dans ces trois formats grâce à l’outil Enregistrer pour le Web… » de Photoshop. J’ai volontairement forcé sur les paramètres en appliquant une compression importante sur le JPEG qualité 30 et en réduisant fortement le nombre de couleurs sur le PNG-8 31 + la transparence, afin que les différences entre les trois formats soient bien visibles. Le rendu du PNG-24 est logiquement le plus beau. L’absence de compression permet une restitution parfaite des dégradés de couleurs et de transparence. Sur le PNG-8, on distingue bien la zone transparente qui s’arrête là où commence le dégradé avec le rose. L’absence de couche alpha ne permettant pas de jouer sur différents degrés d’opacité, la transparence est remplacée par du blanc dès lors qu’elle n’est plus totale. On voit aussi des bandes de couleur dans le dégradé, qui correspondent aux 31 couleurs indexées. Sur le JPEG, la transparence est entièrement remplacée par du blanc. On remarque aussi une dégradation de la qualité de l’image due à l’importante compression. La pixellisation est par exemple particulièrement visible sur le dégradé entre le bleu foncé et le rose, par rapport au rendu du PNG-24. Concernant le poids des images, il est ici réduit de 80 % avec le PNG-8 et de 92 % avec le JPEG. Evidemment, les paramètres étant très poussés dans cet exemple, la réduction de poids est plus conséquente qu’avec une utilisation normale » de cet outil. Mais même en conservant une bonne qualité d’image, vous parviendrez à alléger vos fichiers de manière importante en choisissant le bon format et les bons paramètres. Dans cet exemple, nous avons deux images de qualité identique à l’œil nu je vous mets au défi de différencier les deux sans leur légende. Pourtant, la deuxième image en JPEG est 5 fois plus légère que celle en PNG-24 ! Cet exemple démontre l’importance de bien choisir le format de son fichier avant l’export. Une erreur d’inattention peut coûter cher en temps de chargement. Ici, on réduit de 73 % le poids de l’image en passant d’un PNG-24+A à un PNG-8 de 32 couleurs. Encore une fois, il est très difficile de différencier les deux images. Elles deviendraient même absolument identiques en augmentant le nombre de couleurs du PNG-8. Je pense maintenant vous avoir convaincu de n’utiliser le PNG-24 que lorsque c’est vraiment nécessaire, à moins que vous ne cherchiez à ralentir votre site par tous les moyens ! En prenant de bonnes habitudes lors de l’export de vos images sur Photoshop, vous obtiendrez des résultats significatifs sur le temps de chargement de vos pages web. C’est d’autant plus visible quand celles-ci contiennent beaucoup d’images. Bien nommer son fichier Cette dernière étape n’aura pas d’incidence sur le temps de chargement mais pourrait vous épargner bien des soucis. Il s’agit tout simplement de renommer correctement vos images avant de les mettre en ligne. Les avantages sont multiples Pas d’erreurs 404 liées aux caractères spéciaux Optimisation pour le référencement Informations et confort pour l’internaute Images faciles à identifier dans le FTP et dans le code Voici la règle la plus importante lors que vous renommez vos fichiers n’utilisez jamais d’espaces, d’accents ou de caractères spéciaux. Cela s’applique aux images mais aussi à tout type de fichier que vous envoyez sur le web PDF, vidéo, document Word, archive ZIP… En envoyant des fichiers contenant ce type de caractères, vous pourriez vous retrouver avec des erreurs 404, des URL étranges et des problèmes d’affichage sur votre site. Vous pouvez en théorie utiliser des majuscules mais cela reste déconseillé, il est préconisé de n’utiliser que des minuscules lorsque vous nommez vos fichiers. Gardez en tête que le nom de votre fichier doit pouvoir s’intégrer sans problème dans une URL, qui ne comporte habituellement pas de majuscules. Sachez également que l’usage de majuscules dans les noms de fichiers pourrait corrompre vos sauvegardes ! Sur Windows, il est impossible de placer deux fichiers nommés et dans le même dossier, car Windows considère que les deux images ont le même nom. Or sur Linux système d’exploitation utilisé par la majorité des serveurs web, les minuscules et les majuscules sont traitées comme des caractères différents et ce doublon » est donc autorisé, vous pouvez donc uploader ces deux images dans un même répertoire de votre site. Mais si vous sauvegardez un jour votre site sur Windows, l’une des deux images sera écrasée lors de la copie des fichiers. Mieux vaut donc éviter purement et simplement les majuscules. Plutôt que de coller les mots, remplacez les espaces par des tirets -. Ils sont à privilégier aux underscores _ bien que les deux fonctionnent. Les tirets sont plus esthétiques et sont recommandés par le guide des bonnes pratiques » de Google. Le fait de séparer vos mots plutôt que de les coller permet une meilleure lisibilité mais aussi une meilleure identification des différents mots par les moteurs de recherche, qui peuvent alors mieux qualifier votre image. Cela nous mène au point suivant le choix des mots. Nommez toujours vos images selon leur contenu. Les noms de fichier de type sont à bannir. Ils ne donnent aucune information sur le contenu de l’image et ne sont pas esthétiques dans une URL. Privilégiez un nom clair et explicite. Exemple en lisant le nom de ce fichier, vous savez immédiatement ce que vous allez trouver sur l’image. Petite astuce pour gagner du temps lorsque vous renommez vos fichiers sur Windows la touche F2 vous permet d’éditer directement le nom du fichier sans avoir à faire un clic droit -> Renommer ! Pour conclure Il resterait encore bien des points à aborder en ce qui concerne l’optimisation des images pour le web. Nous pourrions par exemple étudier de plus près les possibilités offertes par le format SVG, la gestion des tailles d’images sur WordPress ou encore la fonctionnalité Interchange » embarquée dans Foundation qui permet d’afficher une image différente selon la largeur du navigateur afin d’optimiser le temps de chargement sur mobile. Toutefois, en suivant les recommandations de cet article, vous devriez déjà observer une nette amélioration au niveau du temps de chargement de vos pages, ainsi qu’un meilleur référencement sur Google Images. Pensez toujours aux internautes et aux robots d’indexation qui parcourent votre site vous devez leur faciliter la tâche afin que leur expérience soit la plus positive possible !

comment utiliser paint pour modifier une photo