Table des matières
JPEG
GIF
Graphiques vectoriels évolutifs (Graphiques vectoriels évolutifs ) sont différents du format raster mentionné précédemment, comme son nom l'indique, il s'agit d'un format vectoriel. Cela signifie qu'il ne stocke pas de données basées sur des pixels, mais stocke des informations graphiques sous forme de coordonnées enregistrées. SVG utilise une structure de balises sémantiques basée sur XML, qui ressemble un peu à HTML. Grâce à la structure DOM, vous pouvez obtenir des éléments SVG par ID et les manipuler. Cela ouvre de nombreuses possibilités, comme modifier et animer des éléments ou créer des graphiques réactifs à l'aide de JavaScript et CSS
. Si vous utilisez Adobe Illustrator pour modifier votre SVG, assurez-vous de l'enregistrer en utilisant Exporter >Exporter sous... plutôt que Fichier >Enregistrer sous... car cela produit un fichier réduit, ce qui présente bien sûr d'autres avantages
Maison interface Web tutoriel HTML Comment utiliser parfaitement les formats graphiques tels que JPG sur le web

Comment utiliser parfaitement les formats graphiques tels que JPG sur le web

Sep 07, 2017 pm 03:06 PM
web 图形 格式

JPEG

JPEG a été créé en 1992 par le Joint Photographic Experts Group et porte le nom de son créateur. JPEG est un format d'image raster avec perte, ce qui signifie que chaque fois qu'un JPEG est enregistré avec compression, certaines informations

sont perdues de manière irréversible.

JPEG profite des défauts de perception de l'œil humain - étant plus sensible à la luminosité qu'à la couleur - en utilisant un algorithme de compression qui élimine les informations que nous ne parvenons pas à obtenir, et constitue donc un "format avec perte". Le paramètre de compression déterminera la taille et la qualité du fichier final enregistré.


Utilisations du JPEG

Parce que le JPEG convient à la luminosité et à la compression des couleurs, il est utilisé dans les photos et autres images réalistes ou ombrées telles que les peintures et Rendu 3D) avec de bons résultats. C'est pourquoi il s'agit du format de stockage d'images le plus populaire depuis de nombreuses années.

Pour la même raison, JPEG ne convient pas aux images vectorielles, telles que les logos, les figures géométriques, les captures d'écran, etc.


Les photos, ainsi que les images complexes ou ombrées telles que les peintures, sont de bons exemples d'utilisation du JPEG.


JPEG compressé

En tant que format avec perte, le taux de compression d'un fichier JPEG est inversement proportionnel à la qualité de l'image finale. Lorsque vous enregistrez un JPEG dans un outil comme Photoshop, vous verrez un paramètre de qualité compris entre 0 et 100. Photoshop définit certaines plages de qualité d'image :

Faible — 10 %

Moyenne — 30 %


Élevée — 60 %

Très élevée — 80 %

Meilleur — 100 %

Meilleur 100 % (61 Ko), Très élevé 80 % (29 Ko). 🎜>

Élevé 60 % (16 Ko), Moyen 80 % (7 Ko).



Faible 100 % (6 Ko), Minimum 0% (3 Ko).


Il est recommandé d'utiliser JPEG entre 50% et 60% de qualité sur la page Web, car il combine une bonne qualité d'image avec un petit fichier. taille. La suppression des métadonnées peut également réduire la taille du fichier JPEG.

Dans Photoshop, la compression peut être effectuée en sélectionnant « Métadonnées : Aucune » ou « Enregistrer pour le Web (héritage) » dans « Exporter ». Le flou de tout ou partie d’une image produira également des fichiers de plus petite taille.

Veuillez noter que puisque JPEG est un format avec perte, même enregistrer le même fichier avec une qualité de 100 % entraînera une réduction de la qualité de l'image après plusieurs fois car l'algorithme de compression est appliqué encore et encore sur la même image. . Mais ce changement peut ne pas


apparaître comme un changement dans la taille du fichier.

PNG

Portable Network Graphics est également un format d'image raster qui existe depuis 1995. Il est différent du JPEG en ce sens qu'il s'agit d'un format sans perte et qu'il s'agit actuellement du format


sans perte le plus courant sur le Web. Cela signifie que grâce à son algorithme de compression, aucune information n'est perdue lorsque le fichier est enregistré et compressé.

PNG possède de nombreuses fonctionnalités intéressantes telles que :

Canal de transparence - signifie que chaque pixel peut avoir une transparence différente ;


Les fichiers 8 bits peuvent utiliser un modèle de couleurs basé sur une palette (également appelé couleur indexée) - ce qui signifie que le fichier peut être plus petit si le nombre de couleurs est réduit ;
  • La compression PNG est 25 % plus efficace que la compression GIF

  • 2D entrelacée — l'image s'affiche progressivement pendant le chargement, plutôt que seulement lorsque l'image est complètement chargée. Vous devez utiliser cette option avec prudence car elle augmente la taille du fichier.

  • Utilisations du PNG
  • Le PNG est idéal pour les dessins au trait, les LOGOs, les icônes et les images avec moins de couleurs. Les photos et images aux couleurs complexes généreront d’énormes fichiers au format PNG. Un autre avantage du PNG est qu’il prend en charge les arrière-plans transparents. Dans ce cas, même si
est une image complexe, vous devez quand même utiliser PNG, car la transparence de l'image ne peut pas être obtenue en JPEG.

Le PNG peut être bien utilisé dans les œuvres en ligne, les logos et les icônes.


Compresser PNG

Étant donné que l'algorithme de compression en PNG est sans perte, vous pouvez réduire sélectivement ses couleurs et ainsi réduire la taille de l'image grâce à des outils externes.


Pour la plupart des scénarios d'utilisation du PNG (dessins au trait, graphiques, icônes), 256 couleurs suffisent. Par conséquent, la taille du fichier peut être encore réduite en réduisant le nombre de couleurs dans la palette.

GIF

Graphics Interchange Format est également un format bitmap et est apparu plus tôt que les autres formats mentionnés dans cet article. Il a été créé par Steve Wilhite en 1989 et était le format d'image 8 bits le plus populaire jusqu'à la création du PNG. Le GIF a des caractéristiques similaires au PNG, mais présente quelques inconvénients :

    ne prend en charge que 256 couleurs
  • Entrelacement unidimensionnel — l'image sera progressive ; affichage, mais pas assez fluide ;
  • Mauvaise compression par rapport au PNG
  • Transparence binaire - les pixels ne peuvent être qu'à 100 % transparents ou 100 % visibles ;
  • Prononciation ambiguë


SVG

Graphiques vectoriels évolutifs (Graphiques vectoriels évolutifs ) sont différents du format raster mentionné précédemment, comme son nom l'indique, il s'agit d'un format vectoriel. Cela signifie qu'il ne stocke pas de données basées sur des pixels, mais stocke des informations graphiques sous forme de coordonnées enregistrées. SVG utilise une structure de balises sémantiques basée sur XML, qui ressemble un peu à HTML. Grâce à la structure DOM, vous pouvez obtenir des éléments SVG par ID et les manipuler. Cela ouvre de nombreuses possibilités, comme modifier et animer des éléments ou créer des graphiques réactifs à l'aide de JavaScript et CSS

.

Comme les autres formats vectoriels, les images SVG peuvent être agrandies à n'importe quelle taille sans perdre aucun détail.

Utilisations de SVG

SVG est largement utilisé dans les dessins au trait, les logos, les icônes, les illustrations et la visualisation de données. Mais il ne convient pas aux images réalistes et aux images complexes comportant de nombreux détails. Dans certains cas, SVG et PNG remplissent très bien le même objectif


. Pour les dessins au trait, SVG produit généralement des fichiers de plus petite taille. Mais ce n’est pas inévitable. Selon le nombre de points d’ancrage de l’image vectorielle, elle peut même générer un fichier plus volumineux que PNG. Là où SVG excelle vraiment, c'est dans la visualisation de données. Étant donné que les animations vectorielles peuvent être manipulées et créées à l'aide de JavaScript, les bibliothèques comme D3 offrent des possibilités infinies

SVG compressé

Dans la plupart des cas, utilisez des outils tels que SVGz (GZipped SVG). ) ne sont pas nécessaires pour compresser les fichiers SVG à utiliser dans les pages Web. Vous pouvez (et devez) activer Gzip sur le serveur pour obtenir la compression, même si cela peut

avoir peu d'effet. Une meilleure approche consisterait à réduire la taille du fichier en supprimant les ancres, éléments et attributs inutiles des graphiques vectoriels SVG. Les points d'ancrage dessinent l'image vectorielle, vous devez donc vous assurer que les points d'ancrage supprimés n'affectent pas la forme finale de la forme vectorielle

. Si vous utilisez Adobe Illustrator pour modifier votre SVG, assurez-vous de l'enregistrer en utilisant Exporter >Exporter sous... plutôt que Fichier >Enregistrer sous... car cela produit un fichier réduit, ce qui présente bien sûr d'autres avantages

Pointez. Dans Sketch, veillez à ne pas utiliser de dossiers inutiles car ils seront également enregistrés en tant que balises supplémentaires dans le SVG.

Nettoyer les nœuds inutiles est un moyen de réduire la taille du SVG. La balise d'élément

correspond à tout ce qui est contenu dans le fichier SVG, y compris les balises d'ouverture et de fermeture. Les logiciels d'édition vectorielle tels qu'Adobe Illustrator et Sketch peuvent encombrer le SVG d'éléments et d'attributs inutiles. Les compresseurs SVG peuvent être utilisés pour

supprimer ces informations redondantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les guillemets dans Apple Notes Comment utiliser les guillemets dans Apple Notes Oct 12, 2023 pm 11:49 PM

Dans iOS 17 et macOS Sonoma, Apple a ajouté de nouvelles options de formatage pour Apple Notes, notamment des guillemets et un nouveau style Monostyle. Voici comment les utiliser. Avec des options de formatage supplémentaires dans Apple Notes, vous pouvez désormais ajouter des guillemets à vos notes. Le format de citation en bloc facilite le décalage visuel des sections d'écriture à l'aide de la barre de citation à gauche du texte. Appuyez/cliquez simplement sur le bouton de format « Aa » et sélectionnez l'option de citation en bloc avant de taper ou lorsque vous êtes sur la ligne que vous souhaitez convertir en citation en bloc. Cette option s'applique à tous les types de texte, options de style et listes, y compris les listes de contrôle. Dans le même menu Format, vous pouvez trouver la nouvelle option Style unique. Il s'agit d'une révision du précédent modèle "à largeur égale".

Comment écrire le format de boîte aux lettres qq ? Qu'est-ce que le format de boîte aux lettres qq ? Comment écrire le format de boîte aux lettres qq ? Qu'est-ce que le format de boîte aux lettres qq ? Feb 22, 2024 pm 03:40 PM

E-mail QQ : QQ number@qq.com, anglais QQ email : anglais ou number@qq.com, compte de messagerie foxmail : créez votre propre compte@foxmail.com, compte de messagerie de téléphone mobile : numéro de téléphone mobile@qq.com. Tutoriel Modèle applicable : iPhone13 Système : IOS15.3 Version : QQ Mailbox 6.3.3 Analyse La boîte aux lettres 1QQ a quatre formats, boîte aux lettres QQ couramment utilisée : QQ number@qq.com, anglais Boîte aux lettres QQ : anglais ou number@qq.com, foxmail Email compte : créez votre propre compte@foxmail.com, compte de messagerie de téléphone mobile : numéro de téléphone mobile@qq.com. Supplément : Qu'est-ce que la boîte aux lettres QQ ? 1 La première boîte aux lettres QQ était réservée aux utilisateurs QQ.

Comment utiliser HEIF Max (48 MP) et optimiser le stockage sur iPhone 14 Pro Comment utiliser HEIF Max (48 MP) et optimiser le stockage sur iPhone 14 Pro Sep 21, 2023 pm 02:13 PM

La dernière série d'iPhone Pro est équipée d'un puissant capteur de 48 MP qui garantit des photos très détaillées et d'une clarté cristalline pour capturer chaque instant précieux. Cependant, un inconvénient potentiel est la taille des images en pleine résolution, notamment celles au format ProRAW. Bien que l'espace de stockage maximum offert par l'iPhone soit de 512 Go, la capture de nombreuses images ProRAW (environ 75 MP chacune) et de vidéos (440 Mo par minute, 60 FPS) peut rapidement consommer votre espace de stockage. Cela peut poser des problèmes si vous envisagez d'utiliser votre iPhone comme appareil photo principal pour de grands projets ou des voyages. Mais ne serait-il pas formidable si vous pouviez prendre ces photos haute résolution de 48 MP sans vous soucier des limitations de stockage ? c'est rapide

Comment implémenter la validation de formulaire pour les applications Web à l'aide de Golang Comment implémenter la validation de formulaire pour les applications Web à l'aide de Golang Jun 24, 2023 am 09:08 AM

La validation du formulaire est un maillon très important dans le développement d'applications Web. Elle permet de vérifier la validité des données avant de soumettre les données du formulaire afin d'éviter les failles de sécurité et les erreurs de données dans l'application. La validation de formulaire pour les applications Web peut être facilement implémentée à l'aide de Golang. Cet article explique comment utiliser Golang pour implémenter la validation de formulaire pour les applications Web. 1. Éléments de base de la validation de formulaire Avant de présenter comment implémenter la validation de formulaire, nous devons savoir quels sont les éléments de base de la validation de formulaire. Éléments de formulaire : les éléments de formulaire sont

PHP est-il front-end ou back-end dans le développement Web ? PHP est-il front-end ou back-end dans le développement Web ? Mar 24, 2024 pm 02:18 PM

PHP appartient au backend du développement Web. PHP est un langage de script côté serveur, principalement utilisé pour traiter la logique côté serveur et générer du contenu Web dynamique. Par rapport à la technologie front-end, PHP est davantage utilisé pour les opérations back-end telles que l'interaction avec les bases de données, le traitement des demandes des utilisateurs et la génération du contenu des pages. Ensuite, des exemples de code spécifiques seront utilisés pour illustrer l'application de PHP dans le développement back-end. Tout d'abord, regardons un exemple de code PHP simple pour se connecter à une base de données et interroger des données :

Apple M3 Ultra lance une nouvelle version, ajoutant 32 cœurs CPU et 80 cœurs GPU Apple M3 Ultra lance une nouvelle version, ajoutant 32 cœurs CPU et 80 cœurs GPU Nov 13, 2023 pm 11:13 PM

Cette puce peut être équipée de jusqu'à 80 cœurs GPU, ce qui en fait le produit le plus puissant de la série M3. Max a deux fois plus de cœurs. À en juger par le modèle de développement des séries M1 et M2, la version « Ultra » d'Apple a essentiellement deux fois plus de cœurs que la version « Max ». puces en interne. Les technologies de connexion sont combinées pour former M1Ultra et M2Ultra. 80 cœurs GPU M3Ultra peut avoir « jusqu'à 80 cœurs de traitement graphique ». Cette prédiction est basée sur le parcours de développement des puces Apple : de la version de base à la version "Pro", en passant par la version "Max" avec deux fois plus de cœurs graphiques, et la version "Ultra" avec deux fois plus de CPU et Cœurs GPU. Par exemple

Tutoriel sur la modification du format de texte du Bloc-notes de l'ordinateur Win10 Tutoriel sur la modification du format de texte du Bloc-notes de l'ordinateur Win10 Dec 25, 2023 pm 06:31 PM

Lorsque vous utilisez l'outil Bloc-notes pour enregistrer du texte, vous devez parfois le faire glisser dans un logiciel tel que Word pour l'utiliser. Cependant, de nombreux utilisateurs ne savent pas comment modifier le format du Bloc-notes, jetons donc un œil au didacticiel détaillé. ~Comment changer le format du Bloc-notes sur un ordinateur Win10 : 1. Après avoir ouvert le Bloc-notes, cliquez sur "Fichier-Enregistrer sous" en haut. 2. Ajoutez ensuite le format souhaité au nom du fichier, par exemple, l'éditeur a ajouté ".rtf". Sélectionnez "Tous les fichiers" comme type de sauvegarde et enregistrez. 3. Ensuite, notre format de fichier deviendra un fichier au format RTF. 4. On double-clique pour ouvrir le fichier modifié, et tout le contenu est là.

Comment activer l'accès administratif à partir de l'interface utilisateur Web du cockpit Comment activer l'accès administratif à partir de l'interface utilisateur Web du cockpit Mar 20, 2024 pm 06:56 PM

Cockpit est une interface graphique Web pour les serveurs Linux. Il est principalement destiné à faciliter la gestion des serveurs Linux pour les utilisateurs nouveaux/experts. Dans cet article, nous aborderons les modes d'accès à Cockpit et comment basculer l'accès administratif à Cockpit depuis CockpitWebUI. Sujets de contenu : Modes d'entrée du cockpit Trouver le mode d'accès actuel au cockpit Activer l'accès administratif au cockpit à partir de CockpitWebUI Désactiver l'accès administratif au cockpit à partir de CockpitWebUI Conclusion Modes d'entrée au cockpit Le cockpit dispose de deux modes d'accès : Accès restreint : il s'agit de la valeur par défaut pour le mode d'accès au cockpit. Dans ce mode d'accès vous ne pouvez pas accéder à l'internaute depuis le cockpit

See all articles