background preloader

Le Web c’est pas en 72 dpi, coco!

Le Web c’est pas en 72 dpi, coco!
Pour fêter ma présence sur ce blog — youloulou, foule en liesse! — je vous propose de dézinguer un mythe du petit monde de l’informatique et du graphisme. Ce mythe dans sa plus simple expression: Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. Et donc, ça c’est faux. Le Web n’est pas en 72 dpi (ou ppi ou pixels par pouce), et il n’est pas non plus en 96 dpi. Densité des pixels d’un écran: à vos calculettes! Petit exercice pratique: nous allons calculer ensemble la densité de pixels d’un écran. Sur cet écran, 1 mm correspond à un peu moins de 4 pixels.On aura un résultat différent sur d’autres écrans. Pour notre exercice, prenons par exemple l’écran de mon iMac (insérez ici un troll de votre choix). Sa diagonale est de 20 pouces (à peu près, c’est probablement une valeur arrondie).Sa définition native est de 1680 pixels en largeur, et 1050 en hauteur. Mon écran a une densité de pixels d’à peu près 99 pixels par pouce (99 ppi). Chaque écran est différent

http://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/

Related:  Images, photos : traitements

Bien optimiser vos images pour le web J’ai choisi d’illustrer cet article avec la carte “Gorille de Beringeï” 3e édition bords noirs du jeu “Magic The Gathering” pour faire plaisir à mon grand frère ainsi qu’au parrain de ma fille, à Quentin et à Romain. Le rapport poids /qualité Nous sommes nombreux à publier des images régulièrement sur les internets. Sur les réseaux sociaux (Facebook, Twitter, Instagram, Google +…) on ne se pose même pas la question du format et de la compression, ils s’occupent de tout.

Optimiser les images Web Formats Outil pour les intégrateurs Un outil simple d'utilisation a été mis en place pour les intégrateurs Web. Il permet d'optimiser les fichiers PNG et JPG automatiquement et rapidement avec ou sans pertes. Définition et résolution d'une photo : pourquoi il ne faut plus utiliser le 72 dpi ? Pour commencer une petite devinette ! Connaissez-vous la résolution de votre écran ? un indice se trouve dans le titre de cet article… Commencçons par deux notions de vocabulaire importantes : La définition d’une photoLa résolution d’une photo La définition d’une photo ou d’une image représente le nombre de pixels de cette photo ou dit autrement sa taille en pixels; par exemple le capteur du nouveau Canon 6D a une définition de 20,2 MPixels soit 5472 x 3648 pixels.

Taille des écrans, responsive design, et point de rupture Très régulièrement, on me pose des questions sur les tailles des écrans pour faire un design « responsive ». Pour ceux qui connaisse le terme, mais qui ne savent pas vraiment ce que cela veut dire, sachez qu’on appelle « design responsive » (ou responsive design ) la capacité d’un site web à s’adapter au terminal de lecture. Mais pourquoi faire ? PhotoFiltre : supprimer les yeux rouges 1 - Téléchargement et installation du plugin Voici l'archive qu'il vous faut télécharger : Une fois l'archive téléchargée, il vous faut extraire le fichier "readjust.pfl" dans le dossier "Plugins" de PhotoFiltre ( exemple : C:\programmes\photofiltre\plugins). LCProd.net : Les diapositives des supports de cours. Tweeter vos commentaires !Toutes les remarques sont lesbienvenues ! @lcprod Ces supports de cours sont fournis au format PDF non protégés sous licence CreativeCommons avec les règles suivantes : BY/NC/ND Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).Pas d'Utilisation Commerciale.

Guide 2020 : la taille des images sur Facebook, Twitter, Instagram, YouTube, LinkedIn... Retrouvez toutes les dimensions des images sur les réseaux sociaux : Facebook, Twitter, Instagram, YouTube, LinkedIn, Snapchat, TikTok, Pinterest, Tumblr... La taille des images sur les réseaux sociaux. Crédits : Pixabay / Pexels. Les tailles des photos sur Facebook, Twitter, Instagram et consorts viennent d’être mises à jour. Vous pouvez conserver cette page en favori pour accéder plus facilement à toutes les dimensions des images et des photos. Nous l’avons conçue car pour tout projet en lien avec les réseaux sociaux, les mêmes questions se posent : @font-face : astuces et outils pour bien l’utiliser La déclaration CSS @font-face permet d’utiliser n’importe quelle police de caractères sur le web. Mais ce qui peut paraître un changement mineur dans l’apparence d’un site peut le rendre illisible pour une partie de l’audience, alourdir le poids des pages au-delà du raisonnable, voire vous coûter un procès ! Voici donc une liste de conseils, astuces et techniques pour utiliser cette possibilité sans risques et dans les règles de l’art, ainsi qu’un aperçu des utilisations alternatives de cette fonctionnalité.

Responsive webdesign avangtages et bonnes pratiques Ce n'est un secret pour personne, la navigation mobile sur internet fera mordre la poussière au traffic de bureau classique -plus tôt que vous le pensez. Aux États-Unis, il représente déjà 20% du web global. En Asie et en Afrique, plus de la moitié de tout le traffic provient du mobile.

Les commandes de Google En bref... Voici une liste quasi-exhaustive des commandes Google. Notez qu'il n'y a jamais d'espace avant et après les deux points. Rechercher une expression dans une zone particulière de la page Technologies Web pour Développeurs Le Web fournit d'incroyables opportunités aux développeuses et développeurs. Pour tirer le meilleur parti de ces technologies, il est nécessaire de savoir comment les utiliser. Voici différents liens qui vous permettront de naviguer dans la documentation de ces technologies web. Documentation pour le développement web Références Une liste de l'ensemble des références sur les technologies web dont celles sur HTML, CSS, etc.

Related: