Images sur les sites Web

Question

J'ai besoin de conseils sur les avantages et les inconvénients de certaines stratégies d'image. Lors de la création de sites Web très lourds, il est important que toutes les images soient de la meilleure qualité possible avec un impact aussi faible sur les performances. Prenons par exemple une page qui imite une révision d'un produit. Vous pouvez avoir une photo de produit de taille normale et plusieurs miniatures de tailles différentes. Deux techniques pour résoudre ce problème pourraient être, en utilisant le produit tiré et en créant toutes les vignettes nécessaires en copiant l'image originale et en la redimensionnant ou la recadrant à toutes les tailles désirées, ou on pourrait créer ces miniatures "à la demande" par les redimensionner chaque fois que nécessaire et envoyer une image "temporaire" au client.

Quelqu'un at-il d'autres expériences sur la façon dont cela pourrait être mis en œuvre, ou les avantages et les inconvénients des façons discutées ci-dessus?

Merci,

Answer 1

Le stockage est généralement moins cher que la bande passante et le traitement, donc dans la plupart des cas - en particulier Lorsque vous parlez uniquement d'un ensemble de miniatures relativement restreint, il est préférable de procéder au traitement initial. Cela a également l'avantage de faciliter les stratégies de mise en cache.

Answer 2

Redimensionnement et de culture sur la demande beaucoup de ressources. Vous devriez le faire une fois puis le mettre en cache.

Pour les sites Web lourds, toutes les images doivent être codées en JPEG et compressées jusqu'à ce que vous puissiez commencer à voir les artefacts de compression dans l'image.

Si vous avez beaucoup de petites images, ou des images qui sont chargées chaque demande, pensez à les puting dans votre CSS en utilisant les URIs de données: http://en.wikipedia.org/wiki/Data_URI_scheme

Answer 3

Je suis d'accord avec Andy et Petah (sauf pour l'URI de données car il ne serait pas cacheable ou largement pris en charge).

Pour aller encore plus loin. Je préfère le redimensionnement à la demande. Il peut s'agir de ressources intensives, mais avec une mise en cache appropriée, il s'agit du meilleur équilibre entre le maintien d'une image originale de haute qualité et la fourniture dynamique de toutes les tailles d'image requises par votre conception. Vous avez noté PHP, j'ai utilisé le SLIR Library.