Optimiser les images pour le web

Natalia Zhukova Master CAWEB

1

La règle des tiers (la règle d’or)

2

• Pertinentes

• Uniformes

• Vivantes

• Inanimées

Améliorer le message grâce aux images

3

Une image numérique

• Le profil colorimétrique

• La résolution

• La taille

• Le poids

• Le format

• Le nom

4

RGB les écrans d’ordinateur

le bon profil colorimétrique

CMJN l’impression

5

la bonne résolution

les écrans d’ordinateur l’impression

6

• la largeur et

la hauteur (HxL)

en pixels (px)

• la largeur (un site Web) < 1000 px

• La balise <img>

(height et width)

les bonnes dimensions (taille de l’image)

7

• < de 200 Ko

• réduisez sa taille ( HxL)

et/ou

• la compression

le bon poids

8

le bon format

JPEG GIF PNG une photographie et une image haute qualité

la qualité le poids

les images contenant du texte

floue moins de possibilités

une image avec transparence

incompatible supporte très peu

les icônes, les graphiques, des logos

le poids

les animations

la compression

la qualité 95%

taille ½

modification de la taille par logiciel

> 80% le poids

• en minuscules • sans accent ni ponctuation

• sans espace (- ou _)

le bon nom

10

Éditeurs d’images en ligne gratuits

• Pixlr

• BeFunky

• Photoshop en ligne

• PicMonkey

• Editor

• Splashup

• Fotoflexer

• Picadilo

• Ipiccy

• Photofiltre

• Gimp Mac et Windows

• Paint.Net

• Photo Pos Pro

• PhotoScape Windows

• Acorn Mac

(version gratuite et payante)

Les logiciels gratuits

11

Optimiser les images pour le référencement

12

Optimiser les images pour référencement

• Le bon rapport qualité/poids

• La légende de l’image

• Backlinks

• Le nom de l’image ( )

mots-clés pertinents

• La balise « alt » (le texte alternatif)

13

Trouver des images libres de droits sur Internet et gratuites

• Google Images

• ImageBase

• Stock Photos for Free

• Bajstock

• Flickr

• Getty Images

14

Pour bien photographier

15

16

Montrer aux gens les choses d’un point de vue qu’ils ne sont pas habitués à voir

Photo droite

Photo de travers

17

Le détail

18

Une photo bien composée

La règle des tiers

Les points forts de l'image

19

Gestion de la lumière 20

ISO

La sensibilité à la lumière

21

le diaphragme

L'ouverture du diaphragme

La profondeur de champ

maximiser la profondeur de champ minimiser la profondeur de champ

22

La vitesse d'obturation

Le temps que va prendre votre appareil photo pour laisser entrer de la lumière

23

24

Le mode S : priorité vitesse

25

Le flash

26

27

28