Comment utiliser un appareil photo numérique pour ajouter des images à votre HTML5 et CSS3 pages Web en fonction

Caméras numériques et les scanners sont incroyables ces jours. Vous pouvez les utiliser pour ajouter des images à vos pages web HTML5 et CSS3. Même les caméras à prix modéré peuvent maintenant approcher la résolution des caméras analogiques de la vieille école. Scanners sont également capables de prendre des images traditionnelles et les convertir en formats numériques qui utilisent des ordinateurs.

Dans les deux cas, cependant, l'image par défaut peut être dans un format qui provoque des problèmes. Les images numériques sont stockées sous forme d'une série de points, ou pixels. Dans la presse écrite, les points sont très rapprochés, mais les écrans d'ordinateur ont des points plus gros. Cette image est directement à partir de l'appareil photo numérique.

image0.jpg

Cette image (pris sur un appareil photo numérique et plus) enregistre à 6 mégapixels (MP). Voilà une très bonne résolution, mais les caméras numériques modernes sont beaucoup plus élevés. Si vous imprimez cette image sur papier, tous ces points sont très petites, et vous obtenez une belle photo. Si vous essayez de montrer la même image sur l'écran d'ordinateur, vous ne voyez qu'un seul coin.

Cette image réelle est ressorti à 2,816 pixels de large par 2112 pixels de hauteur. Vous voyez seulement un petit coin de l'image parce que les captures d'écran sont prises à 1024x768 pixels. Moins d'un quart de l'image est visible.

Quand vous regardez une grande image dans la plupart des navigateurs, il est automatiquement redimensionnée à la taille de la page. Le curseur se transforme souvent en une sorte de loupe, et si vous cliquez sur l'image, vous pouvez le voir dans sa taille réelle ou la plus petite taille.




Certains téléspectateurs d'image prennent de très grandes images et de redimensionner automatiquement eux afin qu'ils intègrent l'écran. (Ceci est le comportement par défaut de l'image par défaut la visionneuse de Windows et la plupart des navigateurs.) L'image peut sembler être une taille raisonnable en raison de cette fonction, mais ça va être énorme et difficile à télécharger dans une page Web réelle. Assurez-vous de connaître la taille réelle d'une image avant de l'utiliser.

Bien que le rétrécissement d'une image de sorte qu'il peut être vu dans son intégralité est évidemment bénéfique, il ya une raison encore plus impérieuse de le faire. Chaque pixel de l'écran nécessite 3 octets de mémoire de l'ordinateur. (UN octet est l'unité de base de la mémoire dans un ordinateur.) Pour des fins de comparaison, un caractère de texte nécessite environ 1 octet.

L'image non compressée du navire pèse la bagatelle de 17 mégaoctets (Mo). Si vous pensez à un mot que cinq caractères, une photo directement depuis l'appareil photo numérique prend la même quantité d'espace de stockage et le temps de transmission environ 3,4 millions de mots. Cette image nécessite près de trois minutes pour télécharger sur un modem 56K!

Dans une page Web, de petites images sont souvent montrés à environ 320x240 pixels, et des images plus grandes sont souvent 640x480 pixels. Si vous utilisez un logiciel pour rééchantillonner l'image à la taille vous avez réellement besoin et utiliser un algorithme de compression approprié, vous pouvez obtenir l'image pour regarder à droite.

image1.jpg

La nouvelle version de l'image est le format de fichier et la taille qui est nécessaire, il est tout aussi bonne, et il pèse 88 kilo-octets un beaucoup plus raisonnable. Voilà 2 pour cent de la taille de l'image originale.

Bien que cette image est beaucoup plus petit que l'image d'origine, il faut encore une mémoire beaucoup plus que du texte. Même cette petite image prend le temps de transmission beaucoup et un espace de stockage de 1600 mots! Il faut encore 10 secondes pour télécharger sans une connexion haut débit. Utiliser des images à bon escient.

Les images sont très bien, mais garder certaines choses à l'esprit lorsque vous les utilisez:

  • Assurez-vous que les images valent affichage. Ne pas utiliser une photo sans une bonne raison, car chaque image rend votre page considérablement plus lente à l'accès.

  • Utiliser un logiciel pour redimensionner votre image. Vous pouvez même utiliser des logiciels libres pour changer l'image exactement la taille que vous avez besoin.

  • Utilisez un format compressé. Les images sont presque jamais utilisés dans leur format natif sur le web parce qu'ils sont tout simplement trop grand. Plusieurs formats sont apparus qui sont utiles pour travailler avec différents types d'images.


» » » » Comment utiliser un appareil photo numérique pour ajouter des images à votre HTML5 et CSS3 pages Web en fonction