Une image pour différentes tailles d'image - taille physique sur le site Web
Nous avons une boutique en ligne avec différentes tailles d’image pour la démonstration d’un produit. un pour la page de catégorie et un pour la page de produit. Lorsque les utilisateurs cliquent sur agrandir, une grande image s’affiche. Cela signifie que pour chaque produit, nous devons créer l'image en 3 tailles différentes et les télécharger sur le serveur.
Est-il possible d'utiliser une seule image, celle avec la résolution la plus élevée, et de laisser la boutique en ligne la redimensionner automatiquement pour différentes pages? Je sais que la dimension peut être définie en utilisant CSS. Je pense plus à la taille de l'image physique, peut-elle aussi être mise à l'échelle en fonction de la dimension?
Un responsable du commerce électronique m'a dit que dans son travail précédent, ils ne téléchargeaient qu'une image pour montrer différentes tailles sur leur boutique en ligne, et chaque résolution d'image avait sa propre taille physique. Je me demande comment cela peut être fait, techniquement. .
Notre configuration est:
- Centos
- PHP
- Mysql
- CreLoaded (système de commerce électronique)
La "technique derrière" est simple. Vous téléchargez une image sur le serveur via un formulaire HTML, puis le serveur traite l'image en enregistrant chaque fichier dans son dossier respectif.
Ou bien, vous pouvez uniquement enregistrer le fichier volumineux mais créer des liens qui redimensionnent l'image à la volée, par exemple. <img src="/getimage.php?src=picture.jpg&width=300&height=200">. (Vous devrez également ajouter la mise en cache car cette méthode nécessite généralement davantage de ressources.)
Dans PHP, le redimensionnement peut être effectué avec la bibliothèque bibliothèque Gd ou ImageMagick . Pour des exemples de code spécifiques, voir les liens vers le manuel ci-dessus ou effectuez une recherche sur le dépassement de capacité de la pile (par exemple, cette question ).
Toutes les plates-formes de commerce électronique que j'ai vues disposent de cette fonctionnalité, donc je suis sûr que ce doit être celle que vous utilisez. Parfois, ces fonctionnalités sont disponibles à partir de plugins/extensions.
Vous pouvez forcer les images à la taille souhaitée en utilisant HTML width = et height = sur la balise IMG. Ou utilisez CSS width: height: en utilisant l'image haute résolution de chaque élément.
Les avantages nécessitent seulement 1 image téléchargée et des caches pour toutes les versions.
Les inconvénients sont que les images peuvent sembler déformées en fonction des formats d'image, mais si la même image ne pose pas ce problème.
Il se peut que je manque quelque chose puisque je n'utilise pas Loaded .... mais c'est un peu étrange, ils n'ont pas d'image redimensionnée + répertoire en cache par défaut Donc, ce que vous pouvez faire est de plier une classe d’image similaire à une plateforme dans sa structure de répertoires (en cache).
L'itinéraire PHP Gd class:
Votre classe Loaded7 actuelle comprend/classes/image.php: https://github.com/loadedcommerce/loaded7/blob/master/catalog/includes/classes/image.php
Une classe système/bibliothèque/image.php OpenCart basée sur Gd: https://github.com/opencart/opencart/blob/master/upload/system/library/image.php
Comme vous pouvez le constater, OpenCart possède une pile de fonctions de pré-traitement qui utilisent Gd pour créer des dérivés d’image. Je suis sûr qu'il existe d'autres plates-formes open source qui ont aussi des classes d'images décentes (Gd). Avec quelques légères modifications, vous devriez pouvoir exploiter leur logique générale de pré-traitement.
L'itinéraire Apache mod_pagespeed:
Si une nouvelle classe d’images nécessite trop de travail, Google dispose d’un mod Apache qui pourrait tenter d’aider à redimensionner et mettre en cache les images. On ne sait pas si cela répondrait à vos besoins, mais au moins vous ne seriez pas pénalisé par des images mal dimensionnées utilisant une image source brute (grande). https://developers.google.com/speed/pagespeed/module
Si je comprends bien votre question, vous souhaitez pouvoir télécharger une seule image de produit et que Cre soit en mesure de vous donner la même image dans différentes tailles de fichier (mise à l'échelle de manière à réduire la taille des images lorsque cela est possible).
Avec notre boutique Cre, nous utilisons la contribution ici . Cela fonctionne bien pour nous et nous utilisons environ 6 tailles différentes de chaque image. Je suis sûr qu'il existe de meilleures solutions, mais celle-ci fonctionne bien pour nous depuis plusieurs années.