Comment Créer Et Insérer Facilement Des Images Dans Une Page Web ?

il y a 5 mois

Dans cet article très simple et rapide, je vais te pointer quelques plateformes que j'utilise au quotidien pour avoir des belles images. Oui, je crée des designs facilement et tranquillement depuis chez moi.

Je vais aussi te montrer comment insérer facilement une image dans une page web. Ceci est rendu possible grâce à une balise HTML !

Lorsque tu développes un site web ou une maquette tu auras besoin de :

  • Trouver des images bien faites.
  • Créer des images Illustratif pour embellir ton site web.
  • Créer un logo.
  • Et Insérer tes belles images dans ta page web.

Au début tu n'auras pas forcément le temps de tout confier à un graphiste parce que tu voudras peut-être économisé un peu d'argent.

Qu'est ce qu'une image, concretement ?

Une image est une représentation visuelle ou mentale, d'un objet (un smartphone ou un ordinateur), un être vivant(ta photo) et un concept(Des schémas ou des diagrammes de ta future maison).

La perception d'une image dépend des paradigmes de chaque individu.

Elle peut être :

  • Naturelle (ton ombre, ton reflet) out artificielle (une sculpture, une peinture, une photographie).
  • Visuelle ou pas.
  • Tangible ou conceptuelle.
  • Elle peut avoir une petite ressemblance avec sa copie ou au contraire y être liée par un rapport plus symbolique.

Une image numérique est stockée sous forme binaire. Un mélange intelligent de 0 et 1. Rien que ça !

Les différents formats d'images

Pour avoir des belles images dans une page web, il est important de respecter :

  • 👍🏻 Le format d’image demandé sur web.
  • 👍🏻 La résolution standard sur le web est de 72 dpi soit 72 pixels x 72 pixels pour un carré de 2,54 cm de côté.
  • 👍🏻 et La colorimétrie standard est le RVB, Un mélange simple du Rouge, Bleu et Vert.
  • *➡️ Le jpg ou jpeg (Joint photographic experts group)* : Je te conseille ce format pour la photographie parce qu'il garde une bonne qualité et amplitudes résolutions après compression. Il peut combiner des millions de couleurs.
  • *➡️ Le gif (Graphics Interchange Format) :* Des animations(les smileys) que tu as l'habitude de voir sur les réseaux sociaux sont au format git. Il est codé en 8 bits, il s'occupe de la transparence et limité à 256 couleurs.
  • *➡️ Le png (Portable Network Graphic) :* c’est une version améliorée du gif avec la capacité de gérer plus de 16.7 millions de couleurs. Il a une qualité un peu trop supérieure au .gif sur tout le point.
  • *➡️ Le SVG (Scalable Vector Graphics) :* Un format à utiliser lorsque tu auras besoin représenté des formes simple sous forme de dessin vectoriel pratique par exemple pour des icônes. Très étirables sans perte de qualité et sans effet de pixellisation.

Le SVG est très avantageux, il peut être :

  • 👍🏻 Édité avec un éditeur avec un éditeur de texte car c’est du XML,
  • 👍🏻 Désigner grâce au CSS,
  • 👍🏻 Manipuler avec du JavaScript.

Outils pour créer des images pour son site web

Ces outils sont accessibles complètement en ligne, ils me permettent de travailler mes designs tranquillement. Oui ! L'esprit tranquille. AKUNA MATATA !

1. Canva

Canva est un outil de conception graphique simplifié que j'utilise pour mes designs, en ligne depuis 2012.

Il utilise un format glisser-déposer et donne accès à des photographies, des images vectorielles, des graphiques et des polices.

Il est tellement simple et fluide que même des non-designers ainsi que des professionnels l'utilise au quotidien.

Avec Canva, tu peux créer :

  • 👍🏻 des logos
  • 👍🏻 Des images adaptées aux réseaux sociaux(Pinterest, facebook, youtube, instagram, ...)
  • 👍🏻 Des posters
  • 👍🏻 Des cartes business
  • 👍🏻 Des bannières
  • 👍🏻 Des documents.
  • 👍🏻 Des affiches
  • 👍🏻 Des cartes d'identité
  • 👍🏻 Des Diapos.
  • 👍🏻 des vidéos.
  • 👍🏻 La liste est longue, Une création sans limite.

2. Easly

Tu aimes les bricolages, Easly est une arme secrète de conception. Il est l'outil de conception par glisser-déposer qui va t'aider à créer un contenu visuel qui ressemble aux conceptions des pros.

Avec Easly, tu peux créer :

  • 👍🏻 un logo
  • 👍🏻 Des images adapté aux réseaux sociaux(Pinterest, Facebook, Youtube, Instagram, ...)
  • 👍🏻 Des posters
  • 👍🏻 Des cartes business
  • 👍🏻 Des bannières
  • 👍🏻 Des documents.
  • etc ...

3. Photopea

Pour les amoureux de photoshop, photopea reprend presque le même concept mais cette fois l'outil est accessible uniquement en ligne, tu n'auras pas besoin d'installer quoi que ce soit.

Il est présenté comme un logiciel de retouche et de traitement d'images matricielles et vectorielles.

Il supporte la plupart des formats d'image, y compris les fichiers au format PSD ainsi que ceux issus de Sketch ou de GIMP.

Comment insérer les images dans une page web ?

Passons au code HTML pour découvrir comment insérer les images dans une page web. C'est facile et rapide !

Insertion d'une image

Pour ça tu auras besoin d'utiliser une balise orpheline. <img src="" alt="" />

La balise Img est toujours accompagnée de deux attributs obligatoires :

  • ➡️ src : À l'intérieur tu vas indiquer le chemin de ton image.

Soit tu utilises un chemin :

  • Absolu ou direct (ex. : https://www.trakode.com/static/2abc21a4467a53970feb28f0b8ff90fc/59139/css-responsive.png),
  • Relatif (le chemin vers ton dossier image par rapport à ton fichier HTML). Ainsi, si ton image est dans un sous-dossier img, vous devrez taper : src="img/soleil.png"
  • ➡️ alt : Tu auras besoin d'ajouter un texte alternatif pour indiquer au navigateur un texte à afficher au cas où l'image ne s'affiche pas, alt="Photo du Soleil".

C'est toujours mieux de mettre tes balise img dans un paragraphe.

Code HTML :

<p>
    Le terre tourne autour du soleil :<br />
    <img src="img/soleil.jpg" alt="Photo du Soleil" />
</p>

Oui, c'est trop facile mais Attention ! il faut éviter de nommer vos fichier et dossier avec les accents, majuscules et espaces.

Comment ajouter une infobulle ?

En fouillant la documentation officielle tu vas constater que la balise <img/> possède un attribut optionnel permettant d'afficher des informations sous forme de bulle. Oui, c'est l'attribut title. L'information apparait en survolant l'image avec la souris.

Exemple d'un code html :

<p>
    Le terre tourne autour du soleil :<br />
    <img src="img/soleil.jpg" alt="Photo du Soleil" title="Oh ! La vitesse de la terre"/>
</p>

Les figures

Au cours de la lecture de ce livre, vous avez déjà rencontré plusieurs fois des figures. Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.

Les figures peuvent être de différents types :

  • images ;
  • codes source ;
  • citations ;
  • etc.

Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.

Comment créer une figure ?

Une balise ajoutée depuis le HTML5, Il est accompagné d'une légende qui va te permettre de mieux décrire un groupe d'image dans une page web.

Exemple d'un code html avec figure :

<p>Les technologies du web :</p>


<figure>
    <img src="images/html.png" alt="HTML" />
    <img src="images/css.png" alt="CSS" />
    <img src="images/javascript.png" alt="JavaScript" />
    <figcaption>Technos web</figcaption>
</figure>

Conclusion

Maintenant, tu connais le nécessaire sur les images. C'est une bonne nouvelle !

Je viens de te donner des outils qui vont te permettre de créer des images extra ordinaires selon tes besoins. Vrai !

J'ai aussi montré comment utiliser la balise img pour insérer tes belles images dans une page web. Tes images persos que tu as créée avec l'un des outils libre de droit.

J'ai aussi ajouté la balise figure et figcaption pour te permettre d'insérer et décrire un groupe d'images. Super !

Tu as aimé cet article ? Partage-le avec tes collègues ou ami(e)s :

Hey oh ! , Ne rate rien !

1527 développeurs ont reçus mes conseils privés révolutionnaires

Reçois le guide gratuit "les 5 Façons de gagner sa vie avec le code"




Ecris avec le par BC DIBWE