3ème : Module 11 – Utilisation de l’informatique dans une optique multimédia

Share Article

1. Adapter une image à son domaine d’utilisation

1.1. Qu’est-ce qu’une image numérique ?

Une image numérique est une image composée de pixels.
Un pixel est un petit carré de couleur. Plus il y a de pixels, plus l’image peut être précise.

Exemple :
Une image de 1920 × 1080 pixels contient 1920 pixels en largeur et 1080 pixels en hauteur.

La qualité d’une image dépend principalement de :

  • sa résolution ;
  • son format ;
  • son poids ;
  • son mode de couleurs ;
  • son niveau de compression.

1.2. La résolution d’une image

La résolution correspond au nombre de pixels présents dans une image.

On parle souvent de :

  • largeur × hauteur, par exemple 800 × 600 pixels ;
  • PPP ou DPI, c’est-à-dire pixels par pouce, surtout pour l’impression.

Pour le web

Pour une image destinée à un site internet, une résolution trop élevée n’est pas toujours utile.
Elle peut ralentir le chargement de la page.

Exemple :
Une image de 800 px de large peut suffire pour un article de blog.

Pour l’impression

Pour imprimer une image avec une bonne qualité, il faut une résolution plus élevée.
On utilise souvent 300 DPI pour une impression de qualité.

1.3. Le poids d’une image

Le poids d’une image correspond à la place qu’elle occupe dans la mémoire de l’ordinateur.

Il est généralement exprimé en :

  • Ko : kilooctets ;
  • Mo : mégaoctets.

Plus une image est lourde, plus elle prend du temps à charger ou à envoyer.

Une image lourde peut être utile pour l’impression, mais elle est souvent problématique pour le web.

1.4. Les principaux formats d’image

JPEG ou JPG

Le format JPEG est très utilisé pour les photographies.

Avantages :

  • poids généralement léger ;
  • compatible avec presque tous les appareils ;
  • idéal pour les photos.

Inconvénients :

  • compression avec perte de qualité ;
  • moins adapté aux logos ou dessins avec texte ;
  • ne gère pas la transparence.

Utilisation conseillée :
photos pour le web, réseaux sociaux, documents numériques.

PNG

Le format PNG est souvent utilisé pour les images avec transparence.

Avantages :

  • bonne qualité ;
  • gère la transparence ;
  • adapté aux logos, icônes et captures d’écran.

Inconvénients :

  • fichier parfois plus lourd qu’un JPEG ;
  • moins adapté aux grandes photos.

Utilisation conseillée :
logos, pictogrammes, images avec fond transparent, captures d’écran.

GIF

Le format GIF est surtout connu pour les petites animations.

Avantages :

  • permet de créer des images animées ;
  • compatible avec le web.

Inconvénients :

  • nombre de couleurs limité ;
  • qualité faible pour les photos.

Utilisation conseillée :
petites animations simples.

WebP

Le format WebP est un format moderne utilisé sur internet.

Avantages :

  • bonne qualité ;
  • poids réduit ;
  • peut gérer la transparence et l’animation.

Inconvénients :

  • moins universel que JPG ou PNG, même s’il est de plus en plus utilisé.

Utilisation conseillée :
images optimisées pour les sites web.

SVG

Le format SVG est un format vectoriel.

Contrairement aux images composées de pixels, une image vectorielle est composée de formes géométriques.

Avantages :

  • peut être agrandie sans perte de qualité ;
  • très léger pour les logos simples ;
  • idéal pour le web.

Inconvénients :

  • pas adapté aux photographies.

Utilisation conseillée :
logos, icônes, illustrations simples.

1.5. Comparer une même image dans différents formats

Une même image peut avoir des caractéristiques différentes selon le format utilisé.

FormatQualitéPoidsTransparenceUtilisation principale
JPEGBonneLégerNonPhotos
PNGTrès bonneMoyen à lourdOuiLogos, captures
GIFFaible à moyenneLégerOui, limitéAnimations
WebPBonne à très bonneLégerOuiWeb
SVGExcellente pour formes simplesTrès légerOuiLogos, icônes

1.6. Encodage des couleurs

RVB

Le mode RVB signifie :

  • Rouge ;
  • Vert ;
  • Bleu.

C’est le mode utilisé par les écrans : ordinateur, tablette, smartphone, télévision.

Chaque couleur est créée en mélangeant ces trois couleurs lumineuses.

Exemple :
Rouge + Vert + Bleu = Blanc.

Utilisation :
écrans, sites web, vidéos, images numériques.

CMJN

Le mode CMJN signifie :

  • Cyan ;
  • Magenta ;
  • Jaune ;
  • Noir.

C’est le mode utilisé pour l’impression.

Les imprimantes utilisent des encres. Le CMJN est donc plus adapté aux supports papier.

Utilisation :
affiches, flyers, cartes de visite, brochures.

Hexadécimal

Le code hexadécimal est utilisé principalement en webdesign.

Il commence par le symbole # et contient six caractères.

Exemples :

  • #000000 = noir ;
  • #FFFFFF = blanc ;
  • #FF0000 = rouge ;
  • #00FF00 = vert ;
  • #0000FF = bleu.

Utilisation :
HTML, CSS, création de sites web.

1.7. Choisir le bon format selon l’utilisation

UtilisationFormat conseilléRaison
Photo sur un site webJPEG ou WebPBon rapport qualité/poids
Logo avec fond transparentPNG ou SVGTransparence possible
Impression de qualitéTIFF, PNG ou JPEG haute qualitéMeilleure résolution
Icône pour un siteSVGLéger et redimensionnable
Animation courteGIF ou WebPAnimation possible
Réseaux sociauxJPEG ou PNGCompatibilité élevée

2. Créer des pages web

2.1. Qu’est-ce qu’une page web ?

Une page web est un document qui peut être lu par un navigateur internet.

Exemples de navigateurs :

  • Google Chrome ;
  • Mozilla Firefox ;
  • Microsoft Edge ;
  • Safari.

Une page web est généralement construite avec plusieurs langages :

  • HTML pour la structure ;
  • CSS pour la mise en forme ;
  • parfois JavaScript pour l’interactivité.

2.2. Le HTML

HTML signifie HyperText Markup Language.

Le HTML sert à organiser le contenu d’une page web.

Il permet d’ajouter :

  • des titres ;
  • des paragraphes ;
  • des images ;
  • des liens ;
  • des listes ;
  • des tableaux ;
  • des sections.

2.3. La notion de balise

Le HTML fonctionne avec des balises.

Une balise indique au navigateur le rôle d’un élément.

Exemple :

<p>Ceci est un paragraphe.</p>

Ici :

  • <p> ouvre le paragraphe ;
  • </p> ferme le paragraphe.

Certaines balises fonctionnent seules, comme :

<img src="image.jpg" alt="Description de l’image">

2.4. Quelques balises HTML importantes

BaliseRôle
<html>Contient toute la page
<head>Contient les informations invisibles
<body>Contient ce qui est visible sur la page
<h1>Titre principal
<h2>Sous-titre
<p>Paragraphe
<a>Lien hypertexte
<img>Image
<ul>Liste non ordonnée
<ol>Liste ordonnée
<li>Élément de liste
<div>Bloc générique
<span>Élément en ligne

2.5. Le squelette d’une page HTML

Une page HTML possède une structure de base.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma première page web</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est ma première page web.</p>
</body>
</html>

Explication :

  • <!DOCTYPE html> indique que le document est en HTML5 ;
  • <html lang="fr"> indique que la langue de la page est le français ;
  • <head> contient les informations techniques ;
  • <meta charset="UTF-8"> permet d’afficher correctement les accents ;
  • <title> définit le titre affiché dans l’onglet du navigateur ;
  • <body> contient le contenu visible.

2.6. Les liens hypertextes

Un lien hypertexte permet de passer d’une page à une autre.

Exemple :

<a href="https://www.google.com">Aller sur Google</a>

La balise <a> sert à créer un lien.
L’attribut href indique la destination du lien.

2.7. Chemin relatif et chemin absolu

Chemin absolu

Un chemin absolu donne l’adresse complète d’un fichier ou d’une page.

Exemple :

<a href="https://www.exemple.com/page.html">Voir la page</a>

On l’utilise souvent pour faire un lien vers un autre site.

Chemin relatif

Un chemin relatif indique l’emplacement d’un fichier par rapport à la page actuelle.

Exemple :

<img src="images/photo.jpg" alt="Photo de paysage">

Ici, l’image se trouve dans un dossier appelé images.

On utilise souvent les chemins relatifs pour les fichiers d’un même site.

2.8. Le CSS

CSS signifie Cascading Style Sheets.

Le CSS sert à modifier l’apparence d’une page web.

Il permet de changer :

  • les couleurs ;
  • les polices ;
  • les tailles de texte ;
  • les marges ;
  • les bordures ;
  • l’alignement ;
  • la disposition des éléments.

2.9. Exemple de CSS

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c3e50;
    text-align: center;
}

p {
    font-size: 16px;
    color: #333333;
}

Explication :

  • body sélectionne toute la page ;
  • background-color change la couleur de fond ;
  • font-family change la police ;
  • color change la couleur du texte ;
  • text-align aligne le texte ;
  • font-size change la taille du texte.

2.10. Relier un fichier CSS à une page HTML

Pour utiliser un fichier CSS externe, on l’ajoute dans le <head> de la page HTML.

Exemple :

<link rel="stylesheet" href="style.css">

Cela signifie que la page HTML utilise le fichier style.css.

2.11. La notion de classe en CSS

Une classe permet d’appliquer un même style à plusieurs éléments.

En HTML :

<p class="important">Texte important</p>

En CSS :

.important {
    color: red;
    font-weight: bold;
}

Le point . devant important indique qu’il s’agit d’une classe CSS.

2.12. Exemple complet HTML + CSS

Fichier index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site personnel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mon site personnel</h1>
    </header>

    <main>
        <h2>Présentation</h2>
        <p>Bienvenue sur mon site. Je présente ici mes passions et mes projets.</p>

        <img src="images/photo.jpg" alt="Photo de présentation">

        <p>
            Visitez aussi 
            <a href="https://www.wikipedia.org">Wikipédia</a>.
        </p>
    </main>

    <footer>
        <p class="copyright">© 2026 - Mon site personnel</p>
    </footer>
</body>
</html>

Fichier style.css

body {
    font-family: Arial, sans-serif;
    background-color: #eeeeee;
    color: #222222;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

main {
    background-color: white;
    width: 80%;
    margin: auto;
    padding: 20px;
}

img {
    width: 300px;
    max-width: 100%;
}

a {
    color: #0066cc;
}

.copyright {
    font-size: 12px;
    text-align: center;
}

3. Synthèse

Pour utiliser l’informatique dans une optique multimédia, il faut savoir adapter les fichiers à leur usage.

Une image destinée au web doit être légère et adaptée à l’écran.
Une image destinée à l’impression doit avoir une bonne résolution.
Le choix du format dépend donc de l’objectif : photo, logo, animation, impression ou site internet.

Pour créer une page web, il faut connaître les bases du HTML et du CSS.
Le HTML structure le contenu, tandis que le CSS améliore l’apparence visuelle.

Ces compétences permettent de créer un projet personnel simple, par exemple :

  • une page de présentation ;
  • un portfolio ;
  • une fiche produit ;
  • un mini-site sur une passion ;
  • une page pour un événement.

You might also like
3ème année

Charte graphique – Brand Identiy

Exercice Transformez votre logo avec les exemples que j’ai donné. Soyez-le plus complet possible. Aidez-vous de AI ou de site de génération de Brand identity

septembre 3, 2025

#Mindey

@mindey