Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Affichage image

18 réponses
Avatar
Photo
Bonjour,

Savez-vous comment afficher une image de 800px quand on se trouve sur un
desktop et afficher une image de 200px quand on se trouve sur un mobile
? Tout cela pour pouvoir être accepté par PageSpeed Insights...

Merci.

--
http://grenault.net/accueil.htm

10 réponses

1 2
Avatar
Mac Larinett
Le 27/05/2015 10:13, Photo a écrit :

Savez-vous comment afficher une image de 800px quand on se trouve sur un
desktop et afficher une image de 200px quand on se trouve sur un mobile
? Tout cela pour pouvoir être accepté par PageSpeed Insights...



@media screen and (max-width: 800px) {
img { width: 200 px; height: auto }
}
Avatar
SAM
Le 27/05/15 10:34, Mac Larinett a écrit :
Le 27/05/2015 10:13, Photo a écrit :

Savez-vous comment afficher une image de 800px quand on se trouve sur un
desktop et afficher une image de 200px quand on se trouve sur un mobile
? Tout cela pour pouvoir être accepté par PageSpeed Insights...



@media screen and (max-width: 800px) {
img { width: 200 px; height: auto }
}




Si c'est vraiment pour du "Page Speed" ne faudrait-il pas *aussi*
modifier l'image ?
(servir celle en 200px ici et celle en 800 ailleurs)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
Le 27/05/2015 11:29, SAM a écrit :
Le 27/05/15 10:34, Mac Larinett a écrit :
Le 27/05/2015 10:13, Photo a écrit :

Savez-vous comment afficher une image de 800px quand on se trouve sur un
desktop et afficher une image de 200px quand on se trouve sur un mobile
? Tout cela pour pouvoir être accepté par PageSpeed Insights...



@media screen and (max-width: 800px) {
img { width: 200 px; height: auto }
}




Si c'est vraiment pour du "Page Speed" ne faudrait-il pas *aussi*
modifier l'image ?
(servir celle en 200px ici et celle en 800 ailleurs)



Cordialement,



Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?

--
http://grenault.net/accueil.htm
Avatar
SAM
Le 27/05/15 11:40, Photo a écrit :
Le 27/05/2015 11:29, SAM a écrit :
Le 27/05/15 10:34, Mac Larinett a écrit :
Le 27/05/2015 10:13, Photo a écrit :

Savez-vous comment afficher une image de 800px quand on se trouve
sur un
desktop et afficher une image de 200px quand on se trouve sur un mobile
? Tout cela pour pouvoir être accepté par PageSpeed Insights...



@media screen and (max-width: 800px) {
img { width: 200 px; height: auto }
}




Si c'est vraiment pour du "Page Speed" ne faudrait-il pas *aussi*
modifier l'image ?
(servir celle en 200px ici et celle en 800 ailleurs)



Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?



tu la mets en background et tu précises en CSS celle que tu veux suivant
le média

mais ... il y a peut-être plus simple et direct ?

Ils n'esspliquent pas comment faire chez GG ?



<body>
<div>
<img src="grande.jpg" alt="">
<img class="mini" src="petite.jpg" alt="">




img { width: 800px }
img.mini { width:200px; display: none }

@media screen and (max-width: 800px) {
img { display: none }
img.mini { display: inline }
}


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Denis Beauregard
Le Wed, 27 May 2015 11:40:16 +0200, Photo
écrivait dans fr.comp.infosystemes.www.auteurs:

Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?



On m'a suggéré de regarder la largeur de l'affichage au moment
de générer la page.

En fouillant un peu, il semble qu'il faille passer par javascript
pour aller chercher la taille de l'écran. Le hic, c'est qu'avec
googlebot par exemple, on doit fournir tout de suite le format
mobile. Le css est une solution peut-être plus universelle ?

Par ailleurs, un site propose une méthode en précisant qu'elle ne
fonctionne pas dans IE. En d'autres mots, les dimensions du
navigateur ne sont pas calculables par une façon unique.

Dois-je conclure que je dois faire 2 versions de mon site avec
m.monsite pour la version mobile ?


Denis
Avatar
Jean Francois Ortolo
Le 27/05/2015 17:03, Denis Beauregard a écrit :
Le Wed, 27 May 2015 11:40:16 +0200, Photo
écrivait dans fr.comp.infosystemes.www.auteurs:

Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?



On m'a suggéré de regarder la largeur de l'affichage au moment
de générer la page.

En fouillant un peu, il semble qu'il faille passer par javascript
pour aller chercher la taille de l'écran. Le hic, c'est qu'avec
googlebot par exemple, on doit fournir tout de suite le format
mobile. Le css est une solution peut-être plus universelle ?

Par ailleurs, un site propose une méthode en précisant qu'elle ne
fonctionne pas dans IE. En d'autres mots, les dimensions du
navigateur ne sont pas calculables par une façon unique.

Dois-je conclure que je dois faire 2 versions de mon site avec
m.monsite pour la version mobile ?


Denis





Bonjour Monsieur

Il y a une classe en PHP qui détecte si le client est un mobile, ou
une tablette.

Voir le site http://mobiledetect.net

Respectueusement.

Jean François Ortolo
Avatar
SAM
Le 27/05/15 18:16, Jean Francois Ortolo a écrit :
Le 27/05/2015 17:03, Denis Beauregard a écrit :
Le Wed, 27 May 2015 11:40:16 +0200, Photo
écrivait dans fr.comp.infosystemes.www.auteurs:

Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?



On m'a suggéré de regarder la largeur de l'affichage au moment
de générer la page.




(snip)
Dois-je conclure que je dois faire 2 versions de mon site avec
m.monsite pour la version mobile ?

Denis



Bonjour Monsieur

Il y a une classe en PHP qui détecte si le client est un mobile, ou
une tablette.

Voir le site http://mobiledetect.net



Je suis curieux de connaitre où ils font la distinction entre "mobile"
et "tablette"
Qu'est-ce qui, pour eux, différencie un mobile d'une tablette.

De même : tablette et PC tactile




De tous temps (enfin ... de ce siècle) on nous a dit que le sniffage de
navigateur était "mal"
que le 'userAgent' pouvait facilement être falsifié par le brouteur



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 27/05/15 17:03, Denis Beauregard a écrit :
Le Wed, 27 May 2015 11:40:16 +0200, Photo
écrivait dans fr.comp.infosystemes.www.auteurs:

Oui, mais comment servir celle en 200px sur les mobiles et celle en
800px sur les pc ?



On m'a suggéré de regarder la largeur de l'affichage au moment
de générer la page.



Donc cette "feature" se fait côté serveur ?
Pas facile là en effet de créer une page d'une largeur définie si le
navigateur n'en communique pas la mesure dans ses en-têtes d'appel au
serveur !!!

En fouillant un peu, il semble qu'il faille passer par javascript
pour aller chercher la taille de l'écran.



Non !
Pas la taille de l'*écran*
la taille du "view-port" (l'intérieur de la fenêtre de l'application de
navigation Internet)

Le hic, c'est qu'avec
googlebot par exemple, on doit fournir tout de suite le format
mobile.



Ha ?
Alors, je trouve que Google à vouloir se mêler de tout est de + en +
débile !!!
Rien que son GoogleSpeed que le pote 'Photo' m'a fait découvrir !!! :-(

Le css est une solution peut-être plus universelle ?



À mon idée (non documentée ni étayée) il me semble que la soluce
HTML.5/CSS.3 devrait à tendre vers
Mais ... trop simple pour Google ???
(qui ne pourra monnayer ses API d'optimisations dont il en a créé
lui-même le besoin)

Par ailleurs, un site propose une méthode en précisant qu'elle ne
fonctionne pas dans IE. En d'autres mots, les dimensions du
navigateur ne sont pas calculables par une façon unique.



Il y a des trucs en JS qui y arrivent (assez laborieusement)
mais ... il a de tous temps été dit que c'était "mal" :-/
D'autant que ... à mon idée encore ... ça va à l'encontre des
GoogleSpeederies
un JS (beurk! et, en +, en en-têtes avant ligne de flottaison!)
d'analyse du view-port
avant moulinage PHP de création de la page
code html "final" qui sera gzippé à la volée côté serveur puis dé-gzippé
côté navigateur, histoire de bien faire durer le plaisir sous de faux
prétextes d’accélération de chargement ...

Dois-je conclure que je dois faire 2 versions de mon site avec
m.monsite pour la version mobile ?



Vu la complexité de ce que tu y exposes (je n'ai jamais compris comment
m'en servir*) je vois mal comment se passer d'une version "mobile"
(sacrément repensée ?!)

Je ne sais si les tablettes ont vraiment d'une version spécifique
relative à la taille ?
Il faut là plus se pencher sur leur fonctionnement (pas de survol, clic
glissé, à 1 doigt, 2 doigts, 3 doigts, etc.) et y compris pour les "PC"
à écran tactile qui se multiplient.




(*) il est vrai que le sujet ne me passionne pas vraiment et qu'en plus
le site ne m'apparait pas s’intéresser à la région où j'ai mes origines

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Sergio
Le 27/05/2015 19:12, SAM a écrit :

Bonjour Monsieur

Il y a une classe en PHP qui détecte si le client est un mobile, ou
une tablette.

Voir le site http://mobiledetect.net



Je suis curieux de connaitre où ils font la distinction entre "mobile" et "tablette"
Qu'est-ce qui, pour eux, différencie un mobile d'une tablette.

De même : tablette et PC tactile



Sans oublier les résolutions gargantuesques de certains mobiles qui affichent une résolution HD, voir 4K...


--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Jean Francois Ortolo
Le 27/05/2015 19:12, SAM a écrit :

Je suis curieux de connaitre où ils font la distinction entre "mobile"
et "tablette"
Qu'est-ce qui, pour eux, différencie un mobile d'une tablette.

De même : tablette et PC tactile





Bonjour Monsieur

D'après l'user-agent.

Mais... Malheureusement, il faut parfois ( pas souvent ), mettre à
jour le soft, car de nouveaux smartphones et tablettes, apparaissent
sans crier gare.

Respectueusement.

Jean François Ortolo
1 2