11544 sujets

JavaScript, DOM et API Web HTML5

Charger une image de 140 000 pixels de côté... Rapidement ?

Bonjour à tous,

(si mon sujet n'est pas dans la bonne catégorie, n'hésitez pas à le déplacer)

J'ai une question pour les petits génies du dev et de l'intégration web parmi vous Smiley smile parce que ça va pas être de la tarte.

Voilà j'ai besoin, pour un site, d'afficher une image de 140 000 pixels de côté (donc une ENORME image, oui oui ^^) en entier dans la fenêtre du navigateur. Smiley lol

Il faudrait que l'utilisateur puisse zoomer / dézoomer sur cette image également. Et pour bien compliquer les choses, cette image risque d'être en format bitmap (peut-être y a t-il des moyens pour la vectoriser d'ailleurs, je ne sais pas je n'y connais pas grand chose).

En termes de vitesse de chargement de la page, est-ce faisable ? A quelles conditions ? Quelles astuces peut-on mettre en place ? Smiley cligne

Merci à tous pour votre aide ! Smiley biggrin
Bonjour

Je ne pense pas que ce soit faisable tel quel. De toute façon même avec la fibre, il te faudrait beaucoup trop de temps pour charger l'image, ton utilisateur aura abandonné avnt la fin du chargement.
Si tu regardes comment fonctionne GoogleEarth, il charge des images de plus en plus fines au fur et à mesure que tu zoomes. C'est ce genre de solution qu'il faudrait essayer de réaliser.
Tu pourrais découper l'image sous forme de grille, placer chaque élément en background en background-size:contain d'un div pour recréer ta grille image.
Au zoom (boutons ?) agrandir le div concerné de manière proportionnelle pour ne pas déformer.

Le chargement sera plus rapide puisque le navigateur peut charger plusieurs images en même temps
Il n'y a aucun format d'image destiné au Web ni aucun navigateur qui supporte des images de cette taille. La largeur ou hauteur maximum d'une image JPG ou PNG c'est 65535 pixels.
Ok j'aime bien la solution de geoff :

Geoff0_1 a écrit :
Tu pourrais découper l'image sous forme de grille, placer chaque élément en background en background-size:contain d'un div pour recréer ta grille image.
Au zoom (boutons ?) agrandir le div concerné de manière proportionnelle pour ne pas déformer.

Le chargement sera plus rapide puisque le navigateur peut charger plusieurs images en même temps


Du coup juste pour que je me rende bien compte, si on part sur un prédécoupage d'images en 100x100 pixels par exemple, combien de temps ça prendrait pour charger l'image complète avec un débit ADSL standard ?

Et est ce que cette solution est compatible avec celle de PapyJP ?
PapyJP a écrit :
charger des images de plus en plus fines au fur et à mesure que tu zoomes.


Merci pour vos inputs Smiley cligne
Oui cette solution est compatible avec l'idée de Papy.

Tu pourrais via un jquery, remplacer l'image de background de chacun de tes div dès qu'ils atteignent une certaine taille, pour mettre une image de meilleure définition.

Si tu découpes ton image en 100x100, tu devrais avoir des jpg optimisés de seulement quelques ko, ça devrait charger très vite. Je pense que tu pourrais même partir sur des découpages d'images plus grand, genre 600x600, ça te fera gagner pas mal de temps.
Geoff0_1 a écrit :
Oui cette solution est compatible avec l'idée de Papy.

Tu pourrais via un jquery, remplacer l'image de background de chacun de tes div dès qu'ils atteignent une certaine taille, pour mettre une image de meilleure définition.

Si tu découpes ton image en 100x100, tu devrais avoir des jpg optimisés de seulement quelques ko, ça devrait charger très vite. Je pense que tu pourrais même partir sur des découpages d'images plus grand, genre 600x600, ça te fera gagner pas mal de temps.

Papy approuve Smiley cligne
Au temps où il n'y avait pas d'ADSL, on avait des vitesses de transmissions tellement lentes (9600 bits/s) que l'on avait des logiciels tout fait pour découper les images en rectangles et générer le HTML correspondant pour les charger progressivement.

Regarde également si des fichiers au format png ne seraient pas également appropriés. Habituellement ils prennent moins de place que les jpg, mais il faut voir quel genre d'image tu utilises.
Modifié par PapyJP (19 Mar 2015 - 11:06)
Ok ben écoutez ça m'a l'air super tout ça. Merci pour vos conseils éclairés. Smiley cligne Smiley biggrin

Est-ce compliqué de coder un script qui prédécoupe cette grande image en plus petites de 600x600 ? Ou me conseillez-vous de chercher un script tout fait plutôt ? (le site sera en JS)

Reste une dernière interrogation : charger rapidement, c'est à dire ? En partant du principe que tout est optimisé correctement : 5 secondes ? 10 secondes ? 3 secondes ? J'aimerais savoir jusqu'à quel point le temps de chargement va impacter l'expérience utilisateur et si ça ne va pas trop lui nuire, parce que si c'est trop long, ben ça vaut même pas le coup de se lancer dans ce projet.... Smiley confus
lacourgettemasquee a écrit :
Ok ben écoutez ça m'a l'air super tout ça. Merci pour vos conseils éclairés. Smiley cligne Smiley biggrin

Est-ce compliqué de coder un script qui prédécoupe cette grande image en plus petites de 600x600 ? Ou me conseillez-vous de chercher un script tout fait plutôt ? (le site sera en JS)

Reste une dernière interrogation : charger rapidement, c'est à dire ? En partant du principe que tout est optimisé correctement : 5 secondes ? 10 secondes ? 3 secondes ? J'aimerais savoir jusqu'à quel point le temps de chargement va impacter l'expérience utilisateur et si ça ne va pas trop lui nuire, parce que si c'est trop long, ben ça vaut même pas le coup de se lancer dans ce projet.... Smiley confus

Si tu découpes une image de 140000 pixels de côté en carrés de 600 pixels de côté, tu en auras (140000/600)², soit 54444. Ça va se compter en minutes.
lacourgettemasquee a écrit :
Ah quelques minutes quand même... ok va falloir ne pas tout afficher tout de suite alors Smiley lol

Et puis combien de place cela va-t-il tenir en mémoire?
J'ai récemment eu un problème de mémoire avec une image de grande taille que je voulais retravailler. Il est vrai que je n'ai pas une machine adaptée a ce genre de travail. Comme les systèmes d'exploitation utilisent des mécanismes de mémoire virtuelle, cela se traduit par des entrées sorties avec le disque système qui ralentissent tellement le système que l'utilisateur finit par tout laisser tomber.
Je pense que tu ne tiens pas à afficher cette image "hors norme" simplement pour le plaisir. Tu dois avoir une idée d'une application derrière la tête. Je te recommande de chercher un autre design pour cette application pour revenir dans les normes de notre époque.
Bien entendu d'ici quelques années le matériel informatique et les moyens de transmission permettront sans doute de manipuler de tels objets. Mais il n'est jamais bon d'être trop en avance. Pendant des années mes sites ne contenaient que très peu de photos parce que le temps de transmission étaient trop longs. Depuis que l'ADSL est dominant, je n'essaie même plus de réduire leur taille (ce que je devrais faire, ben entendu).
Modifié par PapyJP (20 Mar 2015 - 22:55)
Donc l'image fait 140.000 x 140.000 pixel = 19.600.000.000 pixels et elle a quelle définition cette image, combien de couleurs ? Quelle place occupe t elle sur ton disque dur ?

Je ne sais si j'ai réellement bien compris la question, cependant j'ai une idée, mais pas le moyen de la mettre en pratique.
C'est le principe des tuiles, utilisé par les sites de navigation. Il existe des programmes pour créer les niveaux de zoom et toutes les tuiles à utiliser, aussi bien pour les vues satellites que les cartes routières.
Avec un moteur de recherche, tu devrais trouver tout ça.
Sujet clos
Aller à