2017-10-19 27 views
0

J'ai un site Web qui va héberger des milliers d'images. Non seulement cela, mais chaque image a une taille différente selon l'endroit où vous êtes dans la page Web - sur la page de liste, l'image est affichée en rectangle 350x200, sur les images de la barre latérale sont 100x100 etcComment gérer différentes tailles d'image sur un site Web

Ainsi quand un utilisateur télécharge un image sur le site, je garde l'original et fais 4 copies redimensionnées pour chaque taille. Donc, si 100 utilisateurs téléchargent une image, le résultat sera de 500 images. Je ne peux pas penser à ce qui se passera avec les différentes tailles des différents appareils mobiles ...

J'ai commencé à utiliser CloudFront pour optimiser la vitesse. Et quand un utilisateur télécharge une image, je télécharge l'original et les copies redimensionnées dans le compartiment Amazon S3. Mais si demain je décide d'ajouter une autre taille, ou de modifier une taille existante, je dois exécuter un script qui supprime les anciennes images et les nouvelles images, ce qui signifie "récupérer l'original de S3, le redimensionner, télécharger le nouvelle taille ". Ce n'est pas pratique du tout. Imaginez que lorsque j'effectue une refonte complète du site Web et que la taille des images change complètement, il me faudrait exécuter un script qui redimensionne chaque image selon les nouvelles exigences et supprimer les vieilles images.

Existe-t-il un moyen plus pratique d'y parvenir?

Je voulais acheive le scénario suivant:

  • Lorsque l'utilisateur télécharge une image, je remets à la côte et le télécharger à S3
  • CloudFront prendra les images qui sont redimensionnées directement
  • Quand je ajouter une autre taille, je veux que CloudFront voit que cette taille est manquante sur S3 et la retirer d'une origine de mon site web.

Je n'arrive pas à trouver un moyen de l'implémenter. Toute aide ou partage des meilleures pratiques sera apprécié.

+1

Une option peut être simplement de stocker l'image ayant la résolution la plus élevée, puis de générer dynamiquement d'autres tailles * "à la volée" *. J'ai fait un petit script PHP qui montre le genre de chose, sauf que vous passeriez un nom de fichier d'image et la largeur et la hauteur comme paramètres et appelez l'une des méthodes 'imagecopyresampled()' de PHP https://stackoverflow.com/a/25835507/ 2836621. Un autre exemple https://stackoverflow.com/a/30573825/2836621 –

+0

Nous vous remercions de votre suggestion. J'ai oublié de mentionner que j'ai fait exactement cela (voir mon commentaire sur la réponse de John Rotenstein). Si c'est la seule bonne solution, je vais le laisser tel quel. Je pensais juste qu'il y a quelque chose que je ne peux pas penser. –

Répondre

1

Plutôt que de faire tout cela vous-même, vous pouvez utiliser un service de redimensionnement d'image tels que:

Ils peuvent redimensionner les images sur la volée si vous n'avez pas besoin de les créer et de les stocker vous-même. Ils peuvent également les manipuler (faire pivoter, filigraner, coloriser) des images à la volée. Vidéos aussi!

Si vous choisissez de ne pas utiliser un tel service, vous pouvez créer votre propre service de redimensionnement virtuel. Le principal choix est de savoir si:

  • Redimensionner sur la volée (en utilisant CloudFront pour la mise en cache, mais ne nécessitant pas le stockage des images redimensionnées), ou
  • Redimensionner sur demande et stocker le résultat pour un accès ultérieur (moins le coût de traitement, mais implique un coût de stockage)

il est pas possible d'avoir CloudFront « voir que cette taille est manquant sur S3 et tirez-le à partir d'une origine de mon site Web ». (Vous pourriez être en mesure de faire des choses sophistiquées avec 404 pages, mais cela ne vaudrait pas la peine.

+0

Merci pour votre réponse! Ce que j'ai déjà fait est d'utiliser mon serveur pour une source et non S3. Je ne télécharge pas toutes les tailles sur S3, juste l'original. Ensuite, lorsque CloudFront n'a pas d'image, il le demande à mon serveur. Je récupère l'original de S3, redimensionne l'original, en fonction de ce que veut CloudFront, et c'est tout. Je n'aime pas cette approche, parce que lorsque j'essaie d'ouvrir une image plus tard, il y a du retard. Après cela, CloudFront les renvoie directement et tout est extrêmement rapide. Juste que la première fois m'ennuie, mais peut-être que c'est la seule solution. –

+0

Sinon, j'ai fait beaucoup de recherches et trouvé ce que vous avez énuméré avant même Amazon, mais c'est cher et parfois vous payez même si vous ne l'utilisez pas. –