Cómo utilizar una cámara digital para añadir imágenes a su html5 y css3 páginas web basadas

Las cámaras digitales y escáneres son increíbles en estos días. Puede utilizarlos para añadir imágenes a sus páginas web HTML5 y CSS3. Incluso las cámaras de precio moderado ahora pueden acercarse a la resolución de las cámaras analógicas de la vieja escuela. Los analizadores también son capaces de tomar imágenes tradicionales y convertirlos en formatos digitales que utilizan los ordenadores.

En ambos casos, sin embargo, la imagen predeterminada puede estar en un formato que causa problemas. Las imágenes digitales se almacenan como una serie de puntos, o píxeles. En la prensa escrita, los puntos están muy próximos entre sí, pero las pantallas de ordenador tienen puntos más grandes. Esta imagen es directamente desde la cámara digital.

Esta foto (tomada en una cámara digital más) registra a los 6 megapíxeles (MP). Esa es una muy buena resolución, pero las cámaras digitales modernas son mucho más altos. Si imprime esa imagen en el papel, todos esos puntos son muy pequeñas, y se obtiene una imagen agradable. Si intenta mostrar la misma imagen en la pantalla del ordenador, sólo se ve una esquina.

Esta imagen real salió en 2.816 píxeles de ancho por 2.112 píxeles de alto. Sólo se ve una pequeña esquina de la imagen debido a las capturas de pantalla se toman a 1024 × 768 píxeles. Menos de una cuarta parte de la imagen es visible.

Cuando nos fijamos en una imagen grande en la mayoría de los navegadores, se cambia de tamaño automáticamente para ajustarse a la página. El cursor general se convierte en una especie de lupa, y si hace clic en la imagen, se puede ver en tamaño completo o el tamaño más pequeño.

Algunos visores de imágenes toman imágenes muy grandes y cambian de tamaño automáticamente para que quepan la pantalla. (Este es el comportamiento por defecto del visor de imágenes predeterminado de Windows y la mayoría de los navegadores.) La imagen puede parecer ser de un tamaño razonable debido a esta característica, pero va a ser enorme y difícil de descargar en una página web real. Asegúrese de que conoce el tamaño real de una imagen antes de usarla.

A pesar de la reducción de una imagen para que pueda ser visto en su totalidad es evidentemente beneficioso, hay una razón aún más de peso para hacerlo. Cada píxel de la pantalla requiere 3 bytes de memoria de la computadora. (UN byte es la unidad básica de memoria en una computadora.) Para fines de comparación, un carácter de texto requiere más o menos 1 byte.

La imagen no comprimida de la nave pesa la friolera de 17 megabytes (MB). Si se piensa en una palabra como cinco caracteres de longitud, una imagen directamente desde la cámara digital, ocupa la misma cantidad de espacio de almacenamiento y tiempo de transmisión como aproximadamente 3.400.000 palabras. Esta imagen requiere cerca de tres minutos para descargar con un módem de 56K!

En una página Web, imágenes pequeñas a menudo se muestran en alrededor de 320 × 240 píxeles, y las imágenes más grandes son a menudo 640 × 480 píxeles. Si utiliza software para volver a muestrear la imagen al tamaño que realmente necesita y utiliza un algoritmo de compresión apropiada, se puede obtener la imagen se vea bien.

Video: Guia definitiva de Web Icon Fonts

La nueva versión de la imagen es el formato de archivo de tamaño y que se necesita, se ve igual de bien, y pesa mucho más razonable de 88 kilobytes. Eso es 2 por ciento del tamaño de imagen original.

Aunque esta imagen es mucho más pequeño que la imagen original, que todavía ocupa mucho más memoria que el texto. Incluso esta imagen más pequeña ocupa el mismo tiempo de transmisión y espacio de almacenamiento, 1.600 palabras! Todavía tiene 10 segundos para descargar sin una conexión de banda ancha. Utilizar imágenes con prudencia.

Las imágenes son grandes, pero mantener algunas cosas en mente cuando se utilizan:

• Asegúrese de que las imágenes valen mostrar. No utilice una imagen sin alguna buena razón, porque cada imagen hace que su página dramáticamente más lento para el acceso.

  Video: crear slider en dreamweaver, curso dreamweaver basicos video 9

• Utilice el software para cambiar el tamaño de la imagen. Incluso se puede utilizar software libre para cambiar la imagen de exactamente el tamaño que necesita.

• Use un formato comprimido. Las imágenes se utilizan casi nunca en su formato original en la web porque son demasiado grandes. Varios formatos han surgido que son útiles para trabajar con diferentes tipos de imágenes.