Meilleures pratiques - gestion des images sur le site Web

Je porte un ancien site de commerce électronique sur MVC 3 et je voudrais profiter des améliorations de conception. Le site a actuellement des images de produits stockées en 3 tailles: miniature, moyenne (pour affichage dans une liste) et développée pour un look zoomé. En ce moment, nous devons télécharger 3 images distinctes qui sont exactement de la bonne taille, fournir 3 noms différents qui correspondent à ce que le site attend, etc., c'est pénible.

Je souhaite télécharger un seul fichier, le plus grand, puis laisser le site le réduire aux tailles nécessaires, et j'aimerais avoir la possibilité de modifier la taille des miniatures et des listes en fonction des préférences de l'utilisateur, du facteur de forme (par exemple mobile, iPad , ordinateur de bureau), etc. peut donc nécessiter plusieurs copies de la même image. Ma question est de savoir si l'image doit être réduite puis enregistrée plusieurs fois lors du téléchargement et si oui, quelle est une bonne convention de stockage / de nommage?

L'autre idée est de stocker uniquement l'image unique mais de la redimensionner par programme avant de la servir au client. Quelqu'un at-il fait cela et quels sont les compromis à part quelques cycles de machine supplémentaires? Comment passez-vous une image temporaire en mémoire au client (il n'y a pas d'URL)?

Je suis développeur principal pour une entreprise de voyages basée au Royaume-Uni. L'un des projets que j'ai mis en œuvre était une version Web de notre bibliothèque d'images qui peut être interrogée automatiquement pour fournir des photographies pour notre site. Il contient environ 150 000 images, dont environ 60 à 70 000 sont disponibles sur le site Web (les mieux notées).

Nous avons commencé par définir environ 5 tailles, en créant ces versions de taille à la volée et en les stockant dans Amazon S3. Le prix était minime mais Amazon est conçu pour échouer gracieusement, donc nous voyions souvent des images manquantes. Plus nous développions notre site, plus nous détestions avoir seulement cinq tailles d'image disponibles.

Nous sommes passés à un modèle de redimensionnement dynamique, en ce sens que nous pouvons ajouter des paramètres de largeur et / ou de hauteur à l'URI de n'importe quelle image pour qu'elle s'affiche dans cette taille à la volée. Nous mettons en cache l'image redimensionnée (en utilisant un hachage MD5 de l'URI de demande comme nom de fichier).

Pour obtenir l'image # 12345 (nos images sont récupérées via une base de données, mais vous pouvez la remplacer par un chemin de fichier) avec une largeur de 200 et une qualité jpg de 80%, le format URI serait:

http://images.domain.com/?imageid=12345&w=200&q=80

Cette solution était facile à mettre en œuvre et fonctionne de manière transparente - il n'y a pas de retard perceptible pour le visiteur du site Web, même sur les pages avec 20-30 images.

Nous faisons tout cela avec .net, même si j'ai également écrit un script de redimensionnement d'image PHP qui fait la même chose.

J'espère que ça aide, Adam

Processeur d'image

Imageprocessor est une bibliothèque légère et extensible écrite en C # qui vous permet de manipuler des images à la volée à l'aide de .NET

Redimensionnement à la volée:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

ImageProcessor.Web est livré avec la mise en cache en standard. Toute image traitée est mise en cache de manière asynchrone à la fois dans le navigateur et sur le serveur pour une durée de votre choix. Le cache du serveur stocke intelligemment des millions d'images et se met à jour silencieusement en cas de changement de l'image d'origine ou d'expiration du cache.

En supposant que la vignette est simplement une version redimensionnée de l'image principale, je pense que cela devrait être fait au moment du téléchargement, mais peut-être planifié comme un travail d'arrière-plan afin de ne pas avoir d'impact sur les autres processus. Si vous redimensionnez à la volée, assurez-vous de mettre en cache l'image.

Le hic dans tout cela est que la meilleure vignette pour certaines images n'est pas un simple redimensionnement du maître; vous devrez peut-être zoomer et recadrer d'une manière qui est conduite par l'homme. Vous voudrez peut-être le redimensionnement automatique, mais avoir un mécanisme qui permet un remplacement dans ces cas particuliers.

Une légère variation sur ce qu'Adam a mentionné:

(1) créer une page d'erreur personnalisée (règle pour les images)

(2) La structure des noms de fichiers image doit être:

ImageId_Width_Height_Quality

La seule exception est l'image d'origine et doit être nommée:

ImageId_Original

(3) Lors du téléchargement de fichier, par exemple: 1245_Original -> tous les fichiers avec 1245_ * doivent être supprimés

(4) La page d'erreur personnalisée (en supposant que 1245_Original Exists) devrait créer dynamiquement le fichier image demandé, par exemple:

1245_250_400_80.jpg

et le servir également la première fois.

En effet, le téléchargement d'une nouvelle image purge le cache.