le crénage
Le crénage, ou approche de paire (kerning en anglais), est l’ajustement de l’espacement entre les paires de lettres d’une police de caractères à chasse variable. Dans une police bien crénée, l’espacement optique entre deux lettres est identique, quelle que soit la paire de lettres considérée. Dans une fonte de caractère créée dans les règles de l’art, le crénage est fait manuellement par le fondeur pour toutes les paires de caractères une à une. Dans le cas contraire, les logiciels de gestion de fonte peuvent le faire automatiquement, mais cela donne un moins bon résultat.
Les paires de caractères doivent être testées et réglées dans les deux combinaisons possibles (par exemple, « ab » et « ba »), l’espacement à droite et à gauche de chaque caractère étant souvent différent en fonction de sa forme.
Enfin, certaines lettres peuvent se toucher comme les doubles t, doubles f ou fi (tt, ff, fi) : ce sont les ligatures esthétiques.
Hello World!
La compression des images
La compression des images
Introduction
La compression d’image est une étape cruciale en design graphique, web, et photographie. Elle permet de réduire la taille des fichiers tout en conservant une qualité visuelle acceptable. Que ce soit pour accélérer le chargement d’un site web, économiser de l’espace ou préparer des fichiers à l’impression.
La compression d’image est un processus qui permet de réduire la taille d’un fichier image en limitant le nombre d’informations qu’il contient, tout en essayant de conserver un rendu visuel proche de l’original.
Il existe deux grands types de compression :
| Type de compression | Description | Qualité | Exemple |
|---|---|---|---|
| Avec perte (lossy) | Supprime des données pour réduire la taille | Peut dégrader l’image | JPG, WEBP, GIF |
| Sans perte (lossless) | Réduit la taille sans supprimer d’informations | Qualité inchangée | PNG, TIFF, SVG |
Compression avec perte (lossy)
Ce type de compression enlève des détails visuels que l’œil humain remarque peu, comme des variations subtiles de couleurs ou de texture.
Avantages :
- Fichiers très légers
-
Idéal pour le web, les réseaux sociaux, ou les archives volumineuses
Inconvénients :
- Perte de qualité irréversible
- Artéfacts visibles si trop compressé
Exemples :
- .JPG : parfait pour les photos (réduction par niveaux de détails)
- .WEBP : meilleure compression avec bonne qualité
- .GIF : couleurs limitées, mais léger
Compression sans perte (lossless)
Cette méthode conserve toute la qualité originale. Aucune donnée n’est supprimée : l’image peut être reconstruite à l’identique.
Avantages :
- Qualité intacte
- Idéal pour les illustrations, icônes, logos
Inconvénients :
- Fichiers plus lourds
- Moins adaptés au web mobile
Exemples :
- .PNG : gère la transparence, parfait pour les interfaces
- .TIFF : utilisé pour la photo professionnelle et l’impression
- .SVG : format vectoriel compressé sans perte
Comment fonctionne la compression ?
Compression JPEG (avec perte) :
- Divise l’image en blocs de pixels (généralement 8×8)
- Applique une transformation mathématique (DCT)
- Supprime les fréquences peu visibles
- Résultat : fichier plus léger, mais parfois flou ou « pixellisé »
Compression PNG (sans perte) :
- Repère les motifs répétés (comme les zones de couleur unie)
- Les encode de manière plus efficace (algorithmes comme DEFLATE)
- Résultat : fichier plus compact, sans perte
Cas pratiques
| Besoin | Format conseillé | Compression |
|---|---|---|
| Photo sur un site web | JPG / WEBP | Avec perte |
| Logo sur fond transparent | PNG / SVG | Sans perte |
| Illustration simple | SVG | Sans perte |
| Animation légère | GIF / Lottie | Avec perte (GIF), vectoriel (Lottie) |
| Impression haute qualité | TIFF / PDF | Sans perte |
Outils pour compresser des images
- Web :
- TinyPNG (PNG, JPG)
- Squoosh (de Google)
- Compressor.io
- Logiciels :
- Adobe Photoshop (export « Save for Web »)
- ImageOptim (macOS)
- FileOptimizer (Windows)
Bonnes pratiques
- Ne compresse pas une image déjà compressée plusieurs fois
- Choisis le bon format en fonction du type d’image
- Vérifie toujours la qualité après compression
- Pour le web : vise des images < 500 Ko si possible
- Utilise des formats vectoriels pour les éléments graphiques simples
Conclusion
La compression des images est un équilibre entre qualité visuelle et performance. Bien maîtrisée, elle permet de rendre un site plus rapide, un fichier plus léger, et une impression plus nette. Il est donc essentiel de choisir le bon format, la bonne méthode de compression et le bon outil pour chaque situation.
Les formats
Les Formats
Formats vectoriels
Idéal pour logos, illustrations, cartes, impression haute qualité
| Format | Description | Avantages | Utilisation courante |
|---|---|---|---|
| .SVG (Scalable Vector Graphics) | Format web-friendly XML | Léger, lisible par les navigateurs, interactif | Web, icônes, illustrations |
| .AI (Adobe Illustrator) | Format natif Illustrator | Puissant pour l’édition vectorielle | Identité visuelle, print |
| .EPS (Encapsulated PostScript) | Ancien format vectoriel standard | Compatible avec de nombreux logiciels | Logos, documents professionnels |
| .PDF (Portable Document Format) | Peut contenir vecteurs et images | Parfait pour impression et partage | Affiches, flyers, rapports |
Formats pour animation / vidéo
Pour le motion design, la vidéos, les transitions
| Format | Usage | Particularités |
|---|---|---|
| .MP4 | Vidéo | Léger, universel |
| .MOV | Vidéo (Apple) | Haute qualité |
| .GIF | Animation simple | Sans son |
| .Lottie (.json) | Animation vectorielle web | Ultra léger, interactif |
Formats d’impression classiques
Compatibilité imprimeur, sécurité, respect des marges
| Format | Description |
|---|---|
| .PDF/X | Variante pour impression professionnelle (normes ISO) |
| .PDF/A | Archivable, sans dépendances externes |
| Polyvalent : images, vecteurs, textes |
Formats bitmap.
Ils constituent des images de pixelisées et sont communément appelés format matriciel. Idéal pour photos, textures, visuels détaillés
| Format | Description | Avantages | Utilisation courante |
|---|---|---|---|
| .JPG / .JPEG | Format compressé (avec perte) | Léger, universel | Photos, web |
| .PNG | Bitmap compressé (sans perte) | Gère la transparence | Web, interfaces, logos |
| .GIF | Supporte l’animation simple | Léger, animé | Mèmes, icônes animés |
| .TIFF / .TIF | Format haute qualité | Sans perte, très détaillé | Impression, scan |
| .WEBP | Nouveau format Google | Très compressé, bonne qualité | Web (images rapides) |
Formats d’édition ou de projets
On les appelle souvent les fichiers source, ils sont modifiables pour retouches et collaboration
| Format | Logiciel associé | Description |
|---|---|---|
| .PSD | Photoshop | Calques, effets, haute qualité |
| .INDD | InDesign | Mise en page, magazines, livres |
| .XD | Adobe XD | Design UI/UX |
| .Figma / .FIG | Figma | UI/UX collaboratif, cloud |
| .SKETCH | Sketch App (Mac) | Design UI, apps |
| .CDR | CorelDRAW | Alternative à Illustrator |
Formats interactifs ou 3D
Pour web interactif, design produit, rendu 3D
| Format | Usage | Particularités |
|---|---|---|
| .GLTF / .GLB | 3D web | Léger, standard web |
| .OBJ / .FBX | Modélisation 3D | Pour jeux, animation |
| .HTML / .CSS / .JS | Interfaces | Pour le design web interactif |
Résumé rapide par usage
| Usage | Formats recommandés |
|---|---|
| Logo | SVG, AI, EPS, PDF |
| Affiche / Print | PDF, TIFF, AI |
| Site web | SVG (icônes), PNG, JPG, WEBP |
| Animation web | GIF, Lottie (JSON), MP4 |
| UI/UX | Figma, XD, Sketch |
| Réseaux sociaux | PNG, JPG, MP4 |
| Photo HD / impression | TIFF, PSD, JPG haute qualité |
Politic’art
Ils sont là et monopolisent l’attention, accapare les richesses et se les redistribue entre bourgeois. La société du spectacle, écrivait Guy Debord…Quand les comédiens jouent trop mal et qu’il est impossible de se lever et de se casser, est-ce que l’on n’aurait pas intérêt à les sortir de scène ?
Ces affiches sont sorties en sérigraphie à l’époque où les théâtres étaient en lute contre la réduction drastique des budgets, contre la marchandisation de la culture.
Graphics Interchange Format
Le Gif à fêter ses 30 ans en 2024, 36-15 graphisme se devait de faire un article dessus ! Plus connu sous l’acronyme GIF : est un format d’image numérique couramment utilisé sur Internet.
Démocratisé par Compuserve (ce nom est magique, il est dans la lignée de Cravatech et COGIP !) en 1987, ce format de fichier permettait de voir des images animées à l’époque où la vidéo était très lourde et les connections internet était très lentes ! Les plus vieux d’entre nous ont même connus le bruit du modem 56 k.
Le GIF est intemporel, il est obsolète par nature, mais revient en force régulièrement. Tout d’abord je vous conseille le petit documentaire du dessous des images sur le GIF. Une petite pépite ! En effet aujourd’hui le GIF est devenu une forme d’expression à part entière, mais il est plus que ça, il dit des choses de nous et de notre rapport à la communication. Dans la lignée des émojis, il ponctue les discussions d’émotions. Vous avez aimé, vous en voulez encore ? alors, vous pouvez regarder ce petit documentaire d’Arte sur les tréfonds de l’univers créatif.
Aie, le virus vous a contaminé, vous déambulez dans les couloirs de l’open space à la manière d’un zombie en répétant « GIIIIIIIIIF » Vous avez poncé Giphy et fait le tour d’internet deux fois ? Plus rien à vous mettre sous la dent ! Mais que faire ? !!!
Et bien vos propres GIF pardi ! Grâce au GIF Gun une extension after effect qui porte très bien son nom, vous allez pouvoir fabriquer du GIF aussi facilement que le parti socialiste trahi les classes populaires. Enfin, pour finir cet article, je vous encourage à vous pencher sur les Lottie files. À la frontière de l’image animée et du code une sorte de répétition de l’histoire se profile…
Les lottie files format de fichier d’animation basé sur JSON qui vous permet d’expédier des animations sur n’importe quelle plateforme aussi simplement que des actifs statiques. Il s’agit de petits fichiers qui fonctionnent sur n’importe quel appareil et qui peuvent être agrandis ou réduits sans pixellisation. Plus léger que le GIF mais tout aussi efficace en termes d’animation !
Rapporte la baballe !!
Va chercher !
Le motion design, c’est trop chouette, ce sont des images qui bougent, des sons qui subliment le tout, et des heures de taf qui filent sans qu’on les voie passer.
Sur un exercice de François Chatelain (un véritable Panzer de la discipline !) Voici les aventures d’une petite balle qui rebondit. Bon jusqu’à là rien d’extraordinaire. La vraies questions à se poser c’est « qu’est-ce qui fait qu’on percoi cette balle comme l’heroine de cette petite aventure ? »
Deux choses : les code des jeux vidéo qui viennent renforcer la suspension consentie de l’incrédulité, et les comportements de la balle (elle saute, rebondis, se déforme) toute l’importance de ces actions sont décortiquées dans le livre the illusion of life une œuvre à feuilleter !
Bonne année 1984
Fan des année 80
Le 3615 graphisme vous adresse ses meilleurs vœux pour cette nouvelle année !
https://36-15graphisme.fr/blog/wp-content/uploads/2024/04/bonne-annee-1984.mp4
Mise en boite
Mise en boite
Le packaging ça peut être relou, surtout si on a du mal avec la vue dans l’espace, ou bien si on n’a pas envie de faire douze mille tests de montage de volume.
Si vous avez besoins de produire de l’emballage dans des formes de base, template maker est fait pour vous. En gros, c’est un peu l’Ikea du packaging. Tu cherches une boite avec une forme basique ? Eh bien, tu la trouveras là !
Tu peux modifier les dimensions et exporter en PDF !
Youpi !
Bon par contre, c’est basique donc ça ne révolutionnera pas le monde du graphisme et du packaging, va falloir continuer à dessiner à la main et plier du papier 200g pour monter du volume qui se tient !
Autocongratulez vous !
Autocongratulez vous
Devenir un winner c’est un état d’esprit, quand on veut, on peut ! L’avenir appartient à ce qui se lave tôt ! C’est en forgeant qu’on devient forgeron, mais ce n’est pas en se mouchant que l’on devient un moucheron. Et autre connerie que l’on peut entendre de la part de son chief happyness manager, ou bien lire sur le LinkedIn du directive executor du market place holding.
Ah LinkedIn ! cet endroit merveilleux qui ne permet que très rarement de trouver du travail ! Pour éviter de tomber en dépression entre deux postes de suzie qui est Global knowledge director (secrétaire d’accueil en français dans le texte) et qui vous proposera de faire une formation payante qui l’a aidé à comprendre les enjeux du point de pilotage élargi pour concrétiser le gap sectoriel.
Bref, pour se défendre contre le verbiage de ces espèces nuisibles, voici un petit docu sympa propulsé par Arte TV.
Cet article a été écrit à l’aide du bullshitor un outil très efficace pour onboarder les jalons créateurs de valeur !
Rappelez-vous, si vous ne pouvez pas définir votre job en 3 ou 4 mots, vous avez un bullshit job
pour ma part : Je produis des images, je suis graphiste !
