1178 sujets

Accessibilité du Web

[Résolu] Résolution pour image plein écran

Bonsoir,

j'aurais souhaité savoir quelle résolution minimale d'image vous me conseilleriez pour un background en plein écran ? (qui bien sûr s'adapterait à plusieurs écrans de manière responsive)

Dans cet article http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html j'ai pu lire 2000*1300px mais j'ai peur que ça alourdisse les performances du site si plusieurs images défilent comme ça risque d'être le cas.

Et vous, qu'en pensez-vous ?
Moi je suis parti d'une image de 1228 x 1024 ce qui visuellement donne un bon aspect sur un écran de 1920 x 1080

après pour les petites résolutions rien ne sert charger de trop grosses images alors je m'adapte avec les media queries


media only screen and (max-width: 1024px)
{
    html
    {
        background: url(Background_1024.jpg) no-repeat center top;
        background-size: cover;
        background-color:#691919;
    }
}

Modifié par Nikolian (18 Apr 2013 - 22:51)
Nikolian a écrit :
après pour les petites résolutions rien ne sert charger de trop grosses images alors je m'adapte avec les media queries


Est-ce que l'image avec une grande résolution n'est pas également chargée ?
Merci pour ta réponse Nikolian, mais étant sur un thème Wordpress responsive, je ne sais pas si ce serait judicieux de rajouter ta ligne de code dans le fichier function.php

Quoiqu'il en soit, le thème me conseillait des images en 1200 minimum, l'article en 2000, j'ai donc tranché et mis en 1600 de large.

Je ne met pas encore le sujet en résolu au cas où d'autres voudraient donner leur avis mais pour moi je pense que je vais partir comme ça.
Bonjour,
si j'ai bien compris tu comptes faire un design avec slide en arrière-plan. Si tu comptes réellement satisfaire toute les résolutions d'écran, je penses que tu devrais en effet avoir une imade de 2000/1300 px comme expliqué dans le tutoriel dont tu parles plus haut.
Je comprends ton problème, tu dois, primo, donc essayer de minimiser le poids de tes images tout en gardant une assez bonne qualité. Secundo, je ne te conseille pas d'avoir plus de 4 images si tu comptes faire un slide d'arrière-plan, ça risquerait de faire trop lourd.

J'espère que tu trouveras un bon compromis entre les différentes propositions qui te sont offertes.
mais il faut savoir que les images en résolution élévé sont source de ralentissement et de surcharge ressource dans un navigateur tel que chrome ( 2000px étant justement je crois le début des soucis ) par exemple ...
Modifié par tazzkiller (22 Apr 2013 - 20:47)
Après divers tests de performances, j'ai descendu la résolution à 1200 px. En effet, je pense qu'il vaut mieux privilégier les performances de chargement du site au détriment d'un design qui ne sera accessible qu'à une minorité.

D'ailleurs, si je prends mon exemple, j'ai beau travaillé sur un écran 27", je ne surfe que très rarement en mode plein écran. J'espère donc que je ne suis pas le seul dans ce cas Smiley smile

Quoi qu'il en soit, merci pour vos réponses. Je marque le sujet comme résolu.
Sujet clos
Aller à