1485 sujets

Web Mobile et responsive web design

Image responsive : comment envoyer la bonne taille d'image ?

bonjour

je travaille actuellement sur un thème "responsive" pour la galerie photo zenphoto.

je cherche à optimiser au mieux la bande passante en cas de navigation via mobile et je souhaite envoyer des images plus ou moins grandes (et donc plus ou moins lourdes) en fonction du média.

j'ai cherché des infos sur les forum alsacréations et sur le net, et j'ai trouvé plusieurs solutions :
1- https://github.com/filamentgroup/Responsive-Images
2- http://adaptive-images.com/
3- http://www.monoliitti.com/images/
4- http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
5- https://github.com/garetjax/phpbrowscap

les solutions 1- et 2- passent par des modifications du .htaccess (bof, bof : c'est un thème qui a pour vocation d'être publié : je ne souhaite pas que les utilisateurs doivent toucher à du code en plus d'installer le thème).

la solution 3-, si j'ai bien tout compris, repose sur chargement conditionnel de l'image décidé depuis le navigateur

les solutions 4- et 5- passent par un envoi conditionnel de l'image décidé depuis le serveur, en fonction des données client.


sachant que c'est une fonction zenphoto qui permet de générer l'image qui sera envoyée depuis le serveur, quelles solutions préconisez-vous ?

quels sont les avantages/inconvénients des différentes solutions proposées ?

merci d'avance de vos réponses précieuses.
Modifié par vincent3569 (28 Mar 2012 - 23:50)
Bonjour,

Il n'y a actuellement aucune solution réellement satisfaisante. D'ailleurs, adpative-image et la solution du filament group ne fonctionnent plus réellement depuis les dernières mises à jour de certains navigateurs.

Alors... Entre temps eh bien, on parle d'image adaptable ici: http://www.w3.org/community/respimg/

Tu pourras sans doute y trouver quelques polyfills des solutions proposées, mais ce sont encore des solutions à l'état d'ébauche; alors tout dépend du genre de site sur lequel tu souhaite présenter ces images.
Modifié par Vaxilart (29 Mar 2012 - 05:50)
Tiens, je suis tombé également sur ce code aujourd'hui qui a l'air plutôt complet.

C'est encore du javascript et ça rejoint pas mal toutes les autres propositions sur le marché (ie: les avantages et les désavantages de ces solutions en soit).

http://github.com/adamdbradley/foresight.js
Modifié par Vaxilart (29 Mar 2012 - 05:51)
Vaxilart a écrit :
[...]tout dépend du genre de site sur lequel tu souhaite présenter ces images.


zenphoto (www.zenphoto.org) est un cms qui permet de gérer entièrement une galerie photo.
tu peux voir une exemple de site produit ici (il s'agit de mon site photo, basé sur un thème que j'ai développé et publié).

je suis en train de travailler sur un nouveau thème responsive.
la maquette html est disponible ici en draft :
accueil
galerie
album
image

je souhaite optimiser le chargement des images sur la page d'accueil (pour le slider) et sur la page image (les autres pages contiennent des thumbnails, pas très lourds), sachant que les images sont générées par du code php.

j'en suis arrivé à la conclusion suivante : pour que ça marche, il faudrait que je récupère, coté serveur, des info sur le média coté client et mettre en place l'algo suivant :


recup_info_media (is_mobile);
if (is_mobile) {generer_image(300);} else {generer_image(800);}


est-ce que je suis sur la bonne voie ?
du coup, est-ce bien vers les solutions 4 ou 5 qu'il faut que je m'oriente ?
connaissez-vous ces scripts et lequel a votre préférence ?
Modifié par vincent3569 (29 Mar 2012 - 09:02)
vincent3569 a écrit :


zenphoto (www.zenphoto.org) est un cms qui permet de gérer entièrement une galerie photo.
tu peux voir une exemple de site produit ici (il s'agit de mon site photo, basé sur un thème que j'ai développé et publié).

je suis en train de travailler sur un nouveau thème responsive.
la maquette html est disponible ici en draft et le theme est basé sur le framwork bootstrap-twitter (http://twitter.github.com/bootstrap/) :
accueil
galerie
album
image

je souhaite optimiser le chargement des images sur la page d'accueil (pour le slider) et sur la page image (les autres pages contiennent des thumbnails, pas très lourds), sachant que les images sont générées par du code php.

j'en suis arrivé à la conclusion suivante : pour que ça marche, il faudrait que je récupère, coté serveur, des info sur le média coté client et mettre en place l'algo suivant :


recup_info_media (is_mobile);
if (is_mobile) {generer_image(300);} else {generer_image(800);}


est-ce que je suis sur la bonne voie ?
du coup, est-ce bien vers les solutions 4 ou 5 qu'il faut que je m'oriente ?
connaissez-vous ces scripts et lequel a votre préférence ?
a écrit :
j'en suis arrivé à la conclusion suivante : pour que ça marche, il faudrait que je récupère, coté serveur, des info sur le média coté client et mettre en place l'algo suivant :


Idéalement oui, mais présentement non.

"Idéalement" car la seule manière satisfaisante d'avoir ces informations serait que le navigateur les envoie via les entêtes HTTP. Cela dit, ces entêtes ne sont pas compressés (gzip) et donc coûtent assez cher en terme de performance. Alors au final ce ne serait peut-être même pas réellement une solution idéale.

Autrement, il faudrait passer par un cookie, mais ces derniers entrainent d'autres problèmes, et ils seront habituellement généré après que le serveur ait généré et envoyé les pages (puisqu'ils font parties des pages). C'est d'ailleurs cet aspect qui rend les solutions comme adaptive image et celle du Filament group inutilisable.

Et donc, aujourd'hui, la meilleure solution me parait encore d'envoyer des balises <img> sans attribut "src" et de les remplir automatiquement avec Javascript après le chargement de la page.

Dans ton cas, tu devrais regarder aussi du côté du lazy-loading. Ça sauvera énormément sur le chargement de page initial.
Vaxilart a écrit :
[...]la meilleure solution me parait encore d'envoyer des balises &lt;img&gt; sans attribut &quot;src&quot; et de les remplir automatiquement avec Javascript après le chargement de la page.

Dans ton cas, tu devrais regarder aussi du côté du lazy-loading. Ça sauvera énormément sur le chargement de page initial.


merci de ton aide
pour la solution javascript, ça dépasse mes compétences.
comment faut-il faire ? est-ce que cela repose sur le fait que coté serveur, j'ai 2 images stockées (low et high) ?
Sujet clos
Aller à