Fournir une image optimale à tous à partir du site Web, quel que soit l'appareil
J'étais profondément impliqué dans d'autres travaux et, à l'improviste, le copropriétaire du site m'informe que le site Web ne convient pas à 100% à tout le monde. Bien qu'il ne soit pas techniquement enclin par rapport à moi, c'est ce qui se passe.
Lorsque j'ai créé le site, j'ai créé une version de bureau (pour les écrans de grande résolution, en particulier les ordinateurs de bureau) qui montre les photos que les gens veulent voir à une taille normale. Je n'ai reçu aucune plainte là-bas.
J'ai ensuite ajouté une version mobile sur le site avec des images réduites pour s'adapter à l'écran de l'utilisateur sans avoir besoin de faire défiler l'écran. Cela est également conforme aux normes d'utilisabilité mobile de Google.
Une plainte que j'ai reçue était que la qualité de l'image était mauvaise. Je me suis rendu compte que cela est vrai, car un client de leur ancienne génération a utilisé le site mobile et a raconté la photo à un ami, puis l’ami avec un tout nouveau téléphone a vu la même chose, mais dans un format de photo moche.
Maintenant, la chose est sur le site de bureau, l'image est en taille originale. Sur le site mobile, le serveur réduit l'image à la moitié avant son chargement.
On m'a également dit que les utilisateurs du site mobile utilisaient souvent le bouton de téléchargement pour recevoir la photo d'origine (ce qui correspond à l'intention du bouton), mais que cela leur semblait gênant.
Alors maintenant, je suis pris au dépourvu et j'ai quelques options qui ont toutes des conséquences négatives.
option 1
Rendre les fichiers d'image les mêmes pour les deux sites. Si je le fais, je vais utiliser plus de bande passante de serveur et les clients utiliseront davantage de bande passante et les coûts augmenteront pour tous.
option 2
Forcer les utilisateurs qui ne sont pas sur des appareils mobiles basse résolution sur le site de bureau. Si je le fais et si un utilisateur utilise des navigateurs Web inhabituels, la détection risque de ne pas fonctionner comme prévu.
option
Avant de charger la page, demandez à l'utilisateur d'utiliser le site de bureau si son appareil peut gérer la résolution d'écran du bureau. Si je fais cela, ce sera un clic/tapotement supplémentaire qu'un utilisateur doit faire pour accéder à l'image.
option 4
Écrivez sous forme de texte l'URL de la photo de haute qualité sur le site de bureau situé à côté de la photo sur le site mobile. Le seul problème avec cette option est que les gens n'aiment pas lire quand tout ce qu'ils veulent voir sont des images.
option 5
Fournissez un lien actif vers l'image de haute qualité à partir du site de bureau sur le site mobile. Le problème ici est que si je fais le lien avec la balise anchor, Google pensera que mon site sera moins convivial pour les mobiles, et si j'utilise un bouton pour rendre le lien (formulaire post), la page sera moche sur de plus petits appareils, car J'ai besoin de rendre le lien descriptif et les boutons ne fonctionnent pas bien avec CSS.
J'ai essayé des requêtes de médias pour charger l'image à la taille optimale pour tous les utilisateurs, mais je reçois une plainte tous les 5 mois, disons, à propos d'une image non parfaite. J'ai aussi essayé javascript.
Je sais comment coder mais je ne cherche pas d’idées de codage ni de plugins. Ce que je recherche, c’est la meilleure approche de ma situation. que suggéreriez-vous que je fasse et pourquoi?
Pour que les images s'affichent correctement sur différents appareils, vous devez disposer d'images réactives. C'est préférable d'avoir plusieurs "sites" pour différents types de périphériques. Il ne nécessite pas de grands changements de bande passante. La clé consiste à utiliser des images sensibles afin que le CSS et le navigateur fonctionnent ensemble pour découvrir le type/la résolution du périphérique et la bande passante disponible, puis livrer une image dimensionnée en conséquence. Une conception Web fluide avec des grilles aidera à garder les choses en place.
Je n'utiliserais qu'une seule taille et qualité d'image. Cela oblige en fait les navigateurs mobiles à travailler plus dur car ils ont plus à télécharger - traiter - afficher. En utilisant des images sensibles, vous maintiendrez la qualité sur différents appareils.
N'oubliez pas que vous n'avez pas besoin de créer toutes les images en "haute qualité". L'œil humain ne peut pas distinguer la plupart des réglages de résolution. Par exemple, prendre une image haute résolution d’une largeur de 600 pixels, puis la réduire à 80% de la qualité (en conservant le rapport hauteur/largeur) ne produirait aucun changement pour l’œil humain sur les périphériques standard. Pourtant, ce fichier représenterait 14% de sa qualité. format original. Pensez donc à réduire la résolution de vos images afin d’obtenir un équilibre entre taille et qualité. Les images auront l’air attrayant pour les clients, elles et votre site Web se chargeront plus rapidement, ce qui permettra d’économiser de la bande passante.
Vous pouvez utiliser les attributs <scrset> et <size> de la balise <img> pour que vos pages affichent différentes résolutions de vos images. Et il existe des moyens de manipuler les images de manière dynamique et d'automatiser ce dimensionnement à l'aide de langages courants tels que JavaScript. Voici un article expliquant plus en détail les balises utilisées dans images sensibles .
Bootstrap class="image-responsive", ça va marcher?
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp