Optimisation : img de background

Bonjour à tous,

Dans la phase optimisation de la nouvelle version d'un site Internet sur lequel je travaille, j'aurais une question concernant la taille "limite" d'une image utilisé en background de la page HTML via le plugin Vegas.

Quels sont, d'après vous, les bonnes tailles ? Sachant que sur les grands formats (et là je parle d'ordinateurs de bureau) il faut tenir compte de la 4K qui sort de plus en plus sur ce marché ?

Mon image la plus grande fait 3072x2037 (697ko), c'est énorme pour du web, je sais mais alors ? Que faire ? Je pense bien évidemment à réduire cette image mais la vrai question est : quel taille viser ?

Pour info, je n'utilise les grands formats d'image (comme celui dont je parle juste avant) à partir d'un screen.width supérieur à 1800. Peut-être que je dois ajouter/modifier ce genre de règle ? Je pense notamment aux media queries pixel-ratio.

Pour info aussi, c'est un petit site mais l'aspect "graphique" ainsi que le "produit" sont mis en avant, d'où l'importance de la qualité sur ces images.

Merci pour votre aide.
Modifié par MagicCarpet (28 Jan 2015 - 10:55)

Bonsoir. Dans un premier temps, pensez bien à supprimer les métadonnées de l'image, vous supprimerez du poids (jusqu'à 50% et plus parfois) sans toucher à sa qualité. C'est idiot mais ce n'est pas toujours automatique chez les intégrateurs...

Pour supprimer ces données inutiles, sur Mac, il existe des logiciel comme ImageOptim. En ligne nous avons le fameux smush.it, dont un plugin existe pour WordPress.

Alors "normalement", je les ai passé à ImageOptim, par contre je ne savais pas qu'il supprimé les métadonnées et je ne pensais pas que ça pouvait réduite au tant.

Par contre je les passes aussi (je connaissais pas avant, alors pour tester) sur imagemin (tâche Grunt) donc lui, devrait le faire au pire.

Plus haut, j'ai dis "normalement", parce que je me suis aperçus qu'il est probablement possible que j'ai oublié de ne pas optimiser les grandes images (ou alors je l'ai fais mais sans descendre, comme je viens de le faire, la qualité de compression jpg. Sous Photoshop, enregistré pour le web, j'ai mis le curseur de compression à 40).

Du coup, maintenant, le poids de mes fichiers est tombé entre 200 et 350ko, donc en gros, de 50% de gagné. C'est quand même pas mal.

Merci pour la réponse.