Les meilleurs Plein écran Tailles Fond d’image pour la conception de Web

Les meilleurs Plein écran Tailles Fond d'image pour la conception de WebLes meilleurs Plein écran Tailles Fond d’image pour la conception de Web

Dispositifs Retina

affiche Retina sont de plus en plus fréquentes et ont leur propre numéro spécial&# 8211; pour maintenir la clarté de l’image que nous espérons, l’image doit être 2x plus grand. Cela est vrai pour les images de fond, ainsi que des éléments d’image standard.

affiche Retina, comme celles sur iPad 3ème génération et plus, iPhone 4 et plus, et bien d’autres, utilisent plus de pixels par pouce qu’un écran standard (voici quelques bons détails sur ce à partir de Wikipedia). Cela rend les images de taille standard regardent un peu floue lorsqu’il est vu sur les écrans à haute densité. Les développeurs Web à surmonter cela en créant des images qui sont deux fois plus grand que la normale, puis de les afficher à la moitié de la taille. Le résultat final est une image qui est la même taille que vous vouliez qu’il soit en premier lieu, mais il semble grand sur les deux écrans standard et à haute densité.

Cela peut faire pour certains très gros images lorsque vous parlez de milieux en plein écran. Si vous n’êtes pas prudent, cela peut augmenter la taille de téléchargement de votre page, et donc, la vitesse de téléchargement. La bonne chose à propos de milieux, cependant, est qu’ils ne sont généralement pas récupérés par votre appareil à moins qu’ils soient visibles à l’écran. Donc, si vous mettez un fond dans une requête de médias qui est jamais appelé par la page, cette image est jamais récupéré, économisant la bande passante.

Je l’ai fait une étude de cas rapide en utilisant apple.com/iphone et ils manipulé en doublant simplement la taille de leurs images de fond à trois résolutions d’écran différentes. Voir cette discussion dans les commentaires ci-dessous pour le détail complet et le code CSS.

Pomme est allé avec eux pour les non-Retina:

  • 1440px x 678px pour les écrans 1024 et plus
  • 1068px x 648px pour moins de 1024
  • 736px x 460px pour moins de 768

Pour Retina (en utilisant « -webkit-min-device-pixel ratio: 1,5 » requêtes des médias), ils sont allés avec:

  • 2880px x 1356px pour les écrans 1024 et plus
  • 2136px x 1296px pour moins de 1024
  • 1472px x 920px pour moins de 768

Chacune des images de fond sont doublés pour Retina. Donc, si vous faites confiance à Apple comme un bon niveau, alors je dirais aller avec double.

Vitesse de téléchargement / Page Temps de chargement

Il y a eu quelques études plus grandes (de gomez.com et Akamai.com) discuter comment le temps de chargement des pages affecte les ventes. Ils concluent que:

Le ralentissement du temps de charge = utilisateurs mécontents = moins de ventes

Alors, combien cette image d’arrière-plan parfait est intéressant à votre conception? Et, si vous utilisez plusieurs images d’arrière-plan pour un curseur ou fader, la taille est juste assez grand pour garder les temps de chargement accrocheur?

Si je sais une page doit avoir de grands éléments d’image, je tire habituellement de garder la page entière sous 1Mo taille totale. (Ceci est trop grand à mon avis, mais encore faisable pour la plupart des visiteurs aujourd’hui.) J’essaie de garder une image unique à moins de 100KB.

Une autre considération est de savoir si oui ou non la même image (s) de fond sera réutilisée dans le site. Si vous utilisez la même image grande de fond sur tous, ou même plusieurs, les pages de votre site, vous pouvez vous permettre d’utiliser une résolution plus élevée, car après la charge initiale, il sera mis en cache dans le navigateur de votre visiteur. Toutefois, si vous utilisez une image différente sur chaque page ou chaque nouvelle section, votre visiteur aura pour télécharger chacun, ce qui provoque de plus longs temps de chargement de page.

De même, si vous utilisez une image de fond unique, vous pouvez évidemment se permettre une résolution plus élevée que si vous devez charger plusieurs images pour un curseur d’arrière-plan.

la mise en oeuvre

Taille fixe vs Fluid vs Responsive

Peut-être la plus grande partie de la mise en œuvre est de savoir si oui ou non votre site est une taille statique. Si vous avez un site de mise en page fluide ou un site qui utilise des requêtes de médias pour servir différentes structures, vous aurez des besoins différents.

Sur un site de taille fixe, vous vous inquiétez au sujet des bords de l’image d’arrière-plan par rapport à la taille de l’écran. Allez-vous garder l’image centrée, à gauche, ou à droite? Sera-t-étirer, rogner, fade out, ou répéter? Si elle étend, sont les éléments de premier plan toujours lisible? Etc.

Sur un site fluide, vous devez considérer toutes les questions du site de taille fixe à toutes les tailles d’écran possibles. Est-ce que l’image de fond se déplacer avec le contenu? Est-il redimensionner pour réduire ou étirer? Si elle se redimensionne pour petit ou grand-t-il l’air ridicule ou avoir des marges vierges?

Sur un site réactif qui utilise des requêtes des médias, vous examiner les questions de taille fixe, mais ont un « sortir de prison libre» carte … eh bien peut-être pas «libre». Avec les requêtes des médias, vous aurez la possibilité d’échanger sur l’image (s) de fond pour répondre aux besoins exacts de chaque taille de l’écran que vous souhaitez. Création d’images d’arrière-plan pour plusieurs tailles d’écran spécifiques peut être beaucoup de travail, mais cela signifie que vous pouvez garder le site à la recherche comme vous le voudriez.

CSS et JavaScript

Une autre partie de la réponse à la question est de penser à la façon dont vous allez y arriver. Il existe actuellement au moins une demi-douzaine de façons de mettre en œuvre une image de fond d’écran plein ou curseur. En dehors de plugins et des curseurs prédéfinis qui prennent soin d’elle pour nous, il y a ces méthodes relativement simples:

      • CSS3: background-size. couverture
      • CSS3: background-size: contenir
      • CSS appliquée à lt; imggt ;: width: 100%; height: auto; min-height: 100%; min-width: 1440px
      • CSS appliquée à lt; imggt ;: top: 0; left: 0; position: fixed; min-width: 100%; min-height: 100%;
      • jQuery: Voir cet article CSS-Tricks

      Chacune de ces méthodes a ses forces et ses faiblesses, mais vous aurez besoin de trier à travers laquelle on va être le mieux pour chaque site spécifique.

      Note spéciale pour la mise en œuvre Curseur

      Si vous êtes en utilisant plusieurs images à tourner dans le fond, je recommande fortement d’utiliser le javascript pour charge paresseux les images. L’idée est d’attendre jusqu’à ce que la page se termine le chargement avant de charger les images de fond de curseur (sauf la première, qui devrait charger initialement). Sinon, les visiteurs devront attendre patiemment tandis que les grandes images télécharger … et qui est malade ces jours-ci.

      Considérations sur la conception

      Dans de nombreux dessins de l’image d’arrière-plan peut se tenir en dehors des éléments de premier plan. Souvent, la navigation et le contenu principal des blocs ont assez de séparation visuelle de l’image d’arrière-plan que vous avez plus de flexibilité dans la façon dont l’image de fond ressemble. Si l’image est un peu écrasé ou coupé un peu ou déplacé vers la gauche ou la droite un peu, il n’a aucune incidence sur la conception globale.

      Parfois, cependant, l’image de fond est intégré dans la conception et le dimensionnement et le positionnement nécessite spécifique. Disons, par exemple, que vous avez un grand swoosh dans l’image de fond qui doit traverser la tête juste au bon endroit. Ou, disons que vous avez un visage ou d’une personne qui ressemblerait totalement hors de si elle est déplacée ou couvert par un élément de premier plan. Dans ces cas, vous avez beaucoup moins de flexibilité dans la taille de l’image de fond. La décision est essentiellement dictée par la conception et vous faites ce qu’il faut pour le faire rentrer. Souvent, «ce qu’il faut» est l’utilisation de requêtes des médias pour fournir la même image à plusieurs tailles pour convenir à différentes tailles d’écran.

      pensées finales

      Avec toutes ces résolutions d’écran, le temps de téléchargement, et les mises en œuvre à prendre en considération, comment choisir la taille de l’image de fond appropriée pour garder l’expérience utilisateur solide? Beaucoup de développeurs tirent quelque chose dans le milieu, la cueillette une taille d’image qui est assez grand pour ne pas obtenir pixely, assez petit pour télécharger rapidement et fonctionner correctement, et avec un rapport qui causeront que peu de distorsion&# 8211; squishing ou étirement&# 8211; ou recadrage possible.

          1. personnes combinées, en utilisant un rapport de 1,6 constituent la majeure partie des utilisateurs actuels
          2. Il est de plus en plus la popularité et la disponibilité de 16: 9 (1,78 ratio)
          3. Cependant, des millions de personnes utilisent encore le bon vieux 1024 x 768 (1,33 ratio)
          4. Je veux en général tout à l’image d’être vu&# 8211; il ne sont pas jeter souvent loin des parties sur mes images
          5. Une couleur jpg image optimisée de 1440 x 900 finit par être autour de 100KB dans mon expérience, ce qui est grand, mais pas énorme pour la plupart des appareils et des vitesses de téléchargement aujourd’hui.

        Compte tenu de tout cela, je l’ai choisi d’utiliser un ratio de 1,6 pour servir les utilisateurs d’aujourd’hui, sachant que mes images vont souvent être recadrée ou ratatinée par des moniteurs et des appareils plus récents.

        Le ratio 1.6 rend habituellement mes images ont tout montrer quand redimensionnée si je travaille sur un site qui ne maintient pas le ratio d’aspect ou exige de pousser une partie de l’image dans une zone unviewable. Je choisis 1,440 large pour accueillir la plupart des nouveaux écrans.

        Donc alors

          • 1440 x 900 est mon nombre magique de fonds d’écran plein généraux.
          • Si elle est une conception partielle de la hauteur de l’écran, puis je continue à 1440 et faire tout ce que la hauteur est nécessaire.
          • Si elle est un plein curseur largeur de fond avec plus de 3 ou 4 images, je taille, il aussi loin que 960 x 600 à économiser sur le temps de charge sans diminuer la qualité d’image trop quand ils tendent.
          • Si vous pouvez, utiliser des requêtes des médias pour servir d’un pool de 3 ou 4 images parfaitement de taille pour chaque image dans votre arrière-plan

          D’autres messages vous pouvez profiter:

          gt; @media que tous et (max-width: 1024px) et (max-height: 768px) lt;
          corps lt;
          -moz-background-size: 1024px 768px;
          background-size: 1024px 768px;
          gt;

          Avec un background-position: déclaration fixe, vous devez juste besoin l’arrière-plan de taille: la couverture (et ses variations de fournisseurs comme -moz-background-size). Parce qu’il semble que vous êtes désireux l’arrière-plan pour remplir tout l’écran à toutes les tailles d’écran, vous ne devriez pas avoir besoin d’utiliser une requête de support pour la taille 1024px. Au lieu de cela, le bodylt non-media-requête; gt; déclaration devrait prendre soin de tout cela.

          Je ne suis pas familier avec les problèmes spécifiques qui rendraient se comporter différemment sur la tablette Android. Il semble que les éléments suivants devraient travailler pour vous:

          merci pour l’info, a été utile, mais im toujours coincé sur la façon de placer exactement mon expérience dans dreamweaver pour répondre à tous les écrans (taille de l’automobile). mon premier attemp SAQB haute résolution à 2880&# 215; 1800, qui je suppose est trop grand hey. im en utilisant CS5.5
          tous les codes ive essayé ne fonctionnent pas et dosnt apte à l’écran et faire défiler que je ne veux pas du tout comme ma page d’accueil du sol en arrière. pouvez-vous me faire plaisir? donc je suppose que 1440&# 215; 900 est mon meilleur pari comme vous le dites.

          merci beaucoup et une grande info! &# 128578;

          Mon plaisir Shea.

          Pour faire un fond pas défiler avec la page&# 8211; rester en place pendant que tout le reste se déplace au-dessus de celui-ci&# 8211; vous devez définir son CSS background-position à « fixe comme ceci:

          En termes de taille, vous aurez à faire l’appel à ce qui est le plus important: que l’image maintenir son ratio d’aspect – pas squish ou étirer; ou que l’image remplisse tout l’écran.

          Pour faire remplir tout l’écran sans bords durs sur les côtés, vous pouvez utiliser la propriété background-size et sélectionnez le meilleur de "contenir" ou "couverture" pour toi. Ou, si vous utilisez une image qui se trouve derrière tout (par opposition à une technique "image de fond") Alors vous pouvez définir sa largeur à 100% et la hauteur de l’auto et de choisir une taille qui ne sera pas coupée verticalement pour la plupart des écrans.

          Notez que cela est fait dans le CSS. Donc, en DreamWeaver vous devez rechercher les fichiers d’aide pour savoir comment modifier le CSS de votre page, que ce soit CSS en ligne ou une feuille séparée.

          Grand article et ces informations précieuses. Je ne jamais commenter les articles mais ne pouvait pas partir sans dire « travail bien fait. Je vais signet et étudier vos conseils. Merci beaucoup.

          Mon plaisir Fran, heureux vous trouvé utile.

          Votre question a beaucoup de variables à considérer pour arriver à une bonne réponse (remarquez que je dis « bon de ne pas« droit parce que je ne suis pas convaincu qu’il ya une bonne réponse ici). Par exemple, sera le principal public soit en utilisant une connexion rapide ou lent? Soyez sur un bureau ou un appareil mobile? Tablet ou par téléphone? Ou tout ce qui précède? Le site est mis en place comme la plupart brochure ou pour l’e-commerce? Est-il des informations importantes lourde ou image? Quelle est l’importance des images d’arrière-plan à l’image de marque et le message du site? Est-ce l’espace serveur, bande passante, CPU, etc une contrepartie?

          Pour répondre, je vais penser à un «site » de type brochure typique qui reçoit les visiteurs surtout bureau avec une plus petite partie des visiteurs mobiles et aucune restriction sur la bande passante du serveur.

          Compte tenu de cela, ma règle de base est que la page entière devrait être sous 1Mo en taille. Ceci est un numéro que je suis venu dans le temps et est pris en charge uniquement par des preuves anecdotiques, les données dures pas réelles. 1MB semble charger assez rapidement pour que la plupart des gens aujourd’hui qu’ils ne rebondissent pas, qu’ils ne sont pas ennuyé sur un site lent-chargement, et que les visiteurs prennent encore les actions que vous voulez qu’ils. J’utilise 1MB comme une limite supérieure absolue, pas une cible à atteindre. Idéalement, toutes les pages seraient 1 / 10ème de cette taille. Ainsi, selon les autres images de pages, scripts, etc, la taille du fichier de l’image d’arrière-plan peut être plus grand ou plus petit.

          article impressionnant, merci de poster!

          Je l’ai acheté un thème wordpress qui avait un fond carreler. Je voulais que le fond d’être une image, quand je téléchargé l’image il a travaillé beaucoup sur mon 15&# 8242; pouces portable. Quand je faisais de mon site Web sur un écran plus grand, l’arrière-plan ne correspondait pas à la totalité de l’écran et les côtés air terrible. Je demandai donc à un moyen de faire rentrer toute taille de l’écran, et je suis le code suivant

          Maintenant, le fond ressemble beaucoup et pour toutes les tailles d’écran, mais un problème dans l’en-tête se pose après avoir utilisé ce code. Quand je défiler vers le bas, les choses deviennent de sous mon nom dans l’en-tête, car il est transparent. Je ne veux pas utiliser un fond différent pour l’en-tête. Avez-vous une solution pour cela? Je peux faire l’image d’arrière-plan si grand pour adapter toutes les tailles d’écran sans utiliser le code fourni ci-dessus, mais la taille de l’image va être autour de 400 Ko qui est pas une bonne idée. Pouvez-vous m’aider s’il vous plaît?

          Merci pour votre question Ouss.

          Après un rapide coup d’oeil sur votre site, je vois la question que vous décrivez. Il semble que votre thème définit la même image de fond pour le corps et l’en-tête et utilise ensuite le positionnement pour le faire paraître droite.

          D’autres options pourraient être:
          une. Rendre l’image de fond assez grand pour le plus grand écran que vous souhaitez recevoir (comme vous l’avez mentionné)
          b. Créer une image de fond séparé pour la div #header qui est pas clair
          c. Utilisez une couleur d’arrière-plan pour #header qui complimente votre thème et a l’air bien remplir la partie supérieure pour cacher le défilement

          Ça a marché! Aaron vous êtes un génie! J’ai demandé 3 concepteurs de sites Web, y compris la personne qui en fait le thème et aucun d’eux ne pensait correspondre le positionnement. J’apprécie ton aide. Je vous remercie! &# 128578;

          Il me reste une question, il est pas lié à fond, mais je ne savais pas où je devrais le poster dans le blog si je suis désolé à l’avance si je ne devrais pas poster ici.
          Je suis en train de créer des sous-titres sur chaque photo dans le curseur avec le même style / situation telle qu’elle est faite dans ce thème http://theme.semicolonweb.com/pageflow/
          Ça ne fonctionne pas. Est-ce quelque chose que vous pouvez me aider?

          Je ne suis pas familier avec le thème, mais il semble que, dans l’exemple, ils utilisent ce qu’ils appellent le « ei-slider alors que vous utilisez le » flex-slider. Avez-vous la capacité dans le thème de choisir un curseur différent pour la page d’accueil? Si oui, je suppose qu’il ya des options spécifiques au titre et le texte subhead pour vous là-bas.

          Comme vous pouvez le voir dans l’exemple, voici le format qu’ils utilisent pour la zone de texte de diapositive:

          lt; div class ="ei-titre"gt;
          lt; h2 de style ="opacité: 1; bloc de visualisation; margin-right: 0px;"gt; lt; spangt; texte de la printinglt; / spangt; lt; / h2gt;
          lt; h3 style ="opacité: 1; bloc de visualisation; margin-right: 0px;"gt; lt; spangt; lorem ipsum est simplement faux texte de l’impression et de la composition industry.lt; / spangt; lt; / h3gt;
          lt; / divgt;

          Source: www.webmalama.com

          Laisser un commentaire

          Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

          11 − quatre =