Rien ne sert de charger des fichiers de 5000 × 5000px si c’est pour n’afficher à l’écran qu’une petite vignette de 200 × 200px, il faut donc que vous soyiez conscients de la taille des images que votre site va afficher.
En règle générale, rien ne sert de charger des images de plus de 1920px de côté (quand vous souhaitez les afficher en plein largeur sur un site Desktop par exemple). C’est un bon compromis entre la taille moyenne d’un écran, le temps de chargement de l’image, et ça vous protège également contre le vol d’images (vous ne donnez pas les images sources, mais des images plus petites).
Si votre site utilise des vignettes (ex: une galerie de projets avec des petites photos des projets, puis une page avec toutes les photos en pleine largeur), il peut être intéressant de créer à la fois l’image 1920px et une seconde plus petite, adapté à la taille des vignettes (par exemple projet-1.png (1920px) et projet-1-vignette.png (400px)).
Pour re-dimensionner rapidement un lot d’images, vous pouvez utiliser le traitement par lot de photoshop en suivant ce tutoriel.
Plus les dimensions de l’image sont petites, plus son poids est réduit. Plus le poids est réduit, plus l’image chargera vite sur votre site.
Concernant la résolution des images, mesurée en DPI, n’utilisez que du 72 dpi : au-delà ce n’est utile qu’à l’impression. Si vous souhaitez supporter les écrans Retina, doublez les dimensions de l’image plutôt que d’augmentez les DPI.
Ceci dit dans le cadre de vos portfolio et de l’espace disque que vous avez à disposition sur AlwaysData, ne vous embêtez pas trop, une bonne image de 1920px suffira dans 90% des cas.
Sur macOs, un petit programme gratuit appelé ImageOptim permet par simple drag’n’drop d’optimiser le poids des images que vous mettrez sur votre site.
Ces deux formats d’images se distinguent par deux algorithmes de compression très différents. Sans rentrer dans les détails, on peut noter que :
Le format JPEG, surtout lorsque très compressé, aura tendance à créer des artefacts (pixels de la mauvaise couleur) sur les applats, c’est pour ça qu’il est a privilégier pour les photographies.
Pour JPEG, 90% de qualité en taille 1920px et pour des vignettes, on peut descendre facilement jusqu’à 60-70%. En-dessous le gain de poids est anecdotique.
Lorsque vous chargez une page web, toutes les images présentes sur cette page vont être chargées au chargement de la page.
Si votre page contient beaucoup d’images « hors-cadre » (ex : une très longue liste d’images, mais seulement deux peuvent être vues à l’écran en même temps), une optimisation intéressante consiste à lazy-loader les images, c’est-à-dire à indiquer au navigateur de ne charger les images que quand elles deviennent visible sur la page.
Cela permet dans certains cas de réduire énormément le temps de chargement initial de la page.
Il a longtemps fallu utiliser du JavaScript pour faire en sorte que les images ne chargent que quand elles deviennent visibles, mais beaucoup de navigateurs supportent désormais l’attribut loading="lazy" :
<img src="mon-image.jpg" loading="lazy">Cette image ne sera chargée que quand elle apparaîtra à l’écran.
cursor: pointer;
cursor: zoom-in;
cursor: url("/images/curseur.png"), auto;
cursor: url("/images/curseur.png") 4 12, auto;