Strategie pour images (CSS ou srcset) dans un site responsif

Bonjour,

Après une longue période d’abstinence, je redécouvre les joies (et peines) du code HTML et CSS.

Travaillant actuellement sur mon nouveau site web perso (format en 1 page), j’apprends a le rendre responsif aux différents formats (ecran, Ipad, smartphone) et aux nouveaux challenges que cela peut apporter, tel que l’optimisation pour l'usage des data.

Désirant inclure des images de bonne qualité/résolution sur la version desktop de mon site web, je désire également diminuer l'usage des data sur les versions mobiles en les substituant par des images réduites et de moindre résolution.

A la base, j'avais pense dans les media queries (@media) remplacer les images (background, effet parallax , gallerie) directement via le code CSS.

Je viens recemment de découvrir l'attribut "srcset" et son usage dans les sites web responsifs.

Ma question est que je voudrais savoir si une des deux méthodes (css et/ou srcset) et recommandée ou conseillée pour optimiser un site web en version mobile ou si une des deux méthodes a plus d'avantage que l'autre. Pour information, mon site web doit contenir environ 15 - 20 images (galerie, photos et schémas d'illustration) et j'envisage de changer 1 a 2 images tous les 2 a 3 mois.

Merci d'avance pour vos réponses et vos points de vue.

Je ne suis pas un pro mais pour moi le @media va plutôt servir pour les background images et srcset pour les balises <img>

Bonjour,
je suppose que tes deux posts concernent le même problème.
srcset va te permettre de proposer plusieurs formats d'images, suivant la résolution des écrans.

https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Il faut plutôt garder les@media afin de proposer une autre structure de la page pour les mobiles.
À ta place, je supprimerais les effets parallaxe pour les mobiles, ce sont des gouffres de consommation. Je crois même que certains mobiles les désactivent d'office. Tu peux même supprimer pour les mobiles les images en background et les fontes spéciales. Il vaut mieux sacrifier un peu le "décor", au bénéfice de la rapidité; tout en gardant un œil, bien sûr. Tout ça se fait avec les @media.
Aussi, l'utilisation du lazyload pour les images est vivement conseillée dans ton cas d'un site onepage. C'est avec ce procédé que l'on réduit le plus la lourdeur des pages. Le lazyload est surtout efficace pour les sites onepage. Allié à srcset, c'est le top.

Bonjour. Je rejoins l'avis de kerlutinoec. Pour moi il s'agit de deux usages différents : les media queries pour l'optimisation des images placées en background (si elles sont trop volumineuses), le secret dans une balise picture pour les images proprement dites. Le top étant de les servir au format webp, quelque soit la technique employée.

Un exemple pour srcset : CodePen
Modifié par Olivier C (20 May 2022 - 15:31)

Webp n'est supporté par Safari que depuis moins de 2 ans. Un fallback est indispensable selon moi.

@kerlutinoec : On peut toujours laisser un .JPG en fallback.

Mon avis, on ne fait pas trop avancer son projet en débattant du webp, des incompatibilités de Safari ou du lazyload. Pas tout en même temps, si je lis bien ses trois posts, on a pour le moment un site pas finalisé.

@fgaaschtt, peux-tu mettre en place un site simple qui tient à peu près debout, html et css, et on verra après comment introduire les différentes options srcset, webp, lazyload. En ligne ou en copepen, ce serait encore mieux. Le modèle de slider que tu as proposé fonctionne, il te reste à chercher comment l'introduire dans ton code.

@Bongota : Effectivement, ne mettons pas la charrue avant les bœufs...

Bonjour,

Merci a tout le monde pour votre aide.

J'ai pu résoudre mon problème de CSS slider, il y avait une faute de frappe (méchante majuscule!).

Je travaille actuellement sur une version plus aboutie de mon site afin de pouvoir discuter plus tard quelles sont les meilleurs stratégies pour la gestion des images/photos en version responsive.