Tips para el manejo apropiado de imágenes web

Las imágenes o cualquier archivo que usted desee colocar en su Web Site deben tener ciertos par�metros para su correcta visualización y para evitar problemas que le ser�n dif�ciles de detectar. Procure:

• NO utilizar caracteres especiales en los nombres de archivo (# % & ` ? ) = ( , etc)
• No dejar espacios en los nombres de archivo.
• Tener todo el nombre del archivo en minúscula
• Usar nombres descriptivos y ordenados que le permitan reconocer su archivo apenas lo vea, sin tener que abrirlo.
• Usar siempre un mismo sistema de nomenclatura para todas las imágenes de su proyecto.

Por ejemplo...

"camisa marrón para niñas .JPG" NO

"camisas-ninas-marron.jpg" SI

Cambiando el nombre de un archivo

Para cambiar el nombre de un archivo tan solo ubíquelo en el Explorador de Windows haga UN click sobre el nombre del mismo y luego haga click otra vez, inmediatamente el nombre se convertirá en editable. Proceda modificar sus archivos de la manera que crea conveniente, siguiendo las sugerencias anteriores.

¿Qué tipo de imagen es?

Existen muchos tipos e imágenes y solo algunas son visibles en la web; sin embargo el primer paso es que Usted logre aprender cómo saber qué tipo de imagen tiene en frente, mirando la extension del nombre del archivo. Normalmente las computadoras con Windows tienen la opción para ver las extensiones de los archivos deshabilitada; Usted debe habilitarla

Para saber qué tipo de extensión tienen sus archivos:

• Vaya a "Equipo"
• Vaya al menú "herramientas", en ese menú seleccione el sub menú "opciones de carpeta". Dentro de Opciones, busque la pestaña "ver"
• Busque las opciones "ocultar las extensiones de archivo para tipos de acrhivo conocidos". DESHABILÍTELA.
• Presione "Aceptar".

Inmediatamente usted podrá ver que extensiones tienen los archivos que usted maneja.

No todos los tipos de archivos son adecuados para la web. Procure Utilizar siempre archivos JPG o GIF, sobre todo si son fotos. No use archivos PNG, BMP, TIF, TGA, DOC, PPT (estos dos últimos NO son imágenes) ya que o son innecesariamente pesados o no son compatibles con el formato WEB. Recuerde que mientras menos pesen las imágenes, mejor para su servidor y sus usuarios, ya que la Página cargará más rápido.

En la barra del explorador, busque el men� "ver" y seleccione " detalles.

Inmediatamente usted podrá ver una lista de detalles del archivo entre las cuales se cneuntra el Tamaño en Kbytes del mismo.

Por lo general sus imágenes NO deberían pesar más de 100 K. si usted ve alguna imagen de más de 300 K, usted debe reducir el tamaño de la misma.

Para que tenga una idea, un CD ROM tiene una capacidad de 700 MEGA Bytes. Un Mega byte son 1024 Kilo bytes. Una Imagen de 1 MEGA Byte deber�a ser algo como esto. ASI DE GRANDE es una imagen de 1 Mega!. Si usted No necesita una imagen tan grande, usted NO debe subir a su Web site la imagen en ese tamaño. el manejar imágenes innecesariamente grandes solo le quitará tiempo y agregará furstración a todas sus operaciones.

El tamaño de archivo de una imagen es el tamaño digital del archivo de imagen calculado en kilobytes (K), megabytes (MB) o gigabytes (GB). El tamaño de archivo es proporcional a las dimensiones en píxeles de la imagen. Las imágenes con más píxeles muestran mejor los detalles a un tamaño de impresión determinado, pero necesitan mayor espacio en disco para su almacenamiento y requieren más tiempo para su edición e impresión. En consecuencia, la resolución de imagen llega a ser un compromiso entre la calidad de la imagen (capturando todos los datos necesarios) y el tamaño de archivo.

Otro factor que afecta al tamaño de archivo es el formato del mismo. En función de los distintos metodos de compresión que se usan en los formatos de archivo GIF, JPEG, PNG y TIFF, los tamaños de los archivos pueden ser muy distintos aun teniendo las mismas dimensiones en píxeles. De igual manera, la profundidad de los bits de color y la cantidad de capas y canales de una imagen afectan al tamaño de archivo.

Esta Im�gen pesa 50 K!

El peso o tamaño de una imagen lo dan básicamente 4 factores:

• El formato: si es JPG tiende a pesar menos que si es PNG.
• El tamaño real de la imagen
• Resolución o densidad de la imagen (se mide en DPI o PPP que significa puntos por pulgada)
• La calidad de compresión del formato JPG (mientras mayor calidad, menos peso y viceversa)

Ahora la pregunta ¿ y cómo le cambio el tamaño a mis imágenes?.

OLVÍDESE de PowerPoint, Word, Excel, el Visor de imágenes de windows, Picasa, el software de su cámara de fotos, Etc. Esos programas NO son para modificar imágenes, si acaso son para verlas y ordenarlas. Usted necesita un EDITOR de imágenes. No importa cuan sencillo sea, éste debe tener las funciones básicas: Cambiar de tamaño, Cambiar de Resolución y Recortar.

Usted también puede hacer alguna investigación y lograr entenderse con otros editores de imágenes mucho mas modernos y en línea:

Este es un tema extremadamente importante en el manejo de las imágenes que Usted debe asegurarse de entender a la perfección.

La relación de aspecto, ratio, ratio de aspecto, proporción de aspecto o razón de aspecto (traducciones literales de la expresión en inglés: "aspect ratio") de una imagen es la proporción entre su ancho y su altura. Se calcula dividiendo el ancho por la altura de la imagen visible en pantalla, y se expresa normalmente como X:Y. Por ejemplo, un cuadrado es 1 : 1; un rectánfulo donde el ancho es el doble del alto se expresaría 2:1 , un rectángulo en el que el ancho es la mitad del ancho se expresaría asi 1:2 , etc.

La relación de aspecto de una pantalla de televisión antigua es de 4:3, que a simple vista parece cuadrada, pero no lo es. Los televisores panorámicos más recientes (incluyendo los de alta definición) suelen tener una relación de aspecto de 16:9. Esta es la relación utilizada por los DVD, lo que en una pantalla tradicional deja dos franjas negras arriba y abajo de la imagen.

Esta imagen está en relación de aspecto 4:3

Esta imagen está en realción de aspecto 16:9

Esta imagen está en realción de aspecto 1:1

Por lo general, las imágenes para su Página web han sido diseñaadas por nosotros para que las pueda cargar en formatos de 4:3, 16:9 o 1:1 eso quiere decir que su imagen debe quedar en alguno de los siguientes tamaños en píxeles:

Si es 16:9

• 1600 x 900 px
• 2000 x 1125 px

Si es 4:3

• 1000 x 750 px
• 1024 x 768 px
• 1280 x 1024 px

Si es 1:1

• 8000 x 800 px
• 1000*1000 px

A tener en cuenta

Nuestro sistema fuerza el tamaño de las imágenes a unas ciertas medidas ubicadas en la opción " tamaño de las imágenes" en el panel de opciones. Si Usted carga imágenes con una relación de aspecto diferentes, éstas se deformarán.

Si el sistema estuviere configurado para para modificar las imágenes en una relación de aspecto 4:3 y sube una imagen como esta:

Se verá así

Solucionando el problema de las imágenes verticales

Es muy frecuente encontrar que la imagen que deseamos cargar está en una orientación vertical (quizas 9:16 o 3:4), pero por lo general la necesitamos en formato 4:3, ¿Como hacer?

La primera opcion es el recorte: recortamos la imagen de manera tal que no se le afecte el ancho, solo el alto, perdiendo parte de la imagen y re encuadrando la porción que más nos importa:

La segunda opción es menos atractiva pero a veces es la única disponible: agregar espacio. Agregamos espacio vacío al ancho de la imagen hasta que la imagen esté en la relacion de aspecto que necesitamos:

La tercera opción es mucho más complicada pero cualquier que domine cualquier software gráfico lo puede hacer: componer. Dependiendo de la imagen es posible hacer cosas como siluetear la porcion importante de la imagen y ponerla sobre otro fondo, duplicar el fondo, estirar el fondo, etc. Los resultados son mucho más atractivos que los de la opción anterior:

más información y herramientas

Si necesita ayuda calculando la relación de aspecto de sus imágenes puede usar este calculador

Investigue más sobre la relación de aspecto

No siempre se necesita la imagen entera, si su imagen es bastante grande, usted quizas vaya a requerir mostrar una parte de la misma, todos los editores de imagenes tiene la opción para recortar (cortar, trim, crop) y lograr re encuadrar la imagen. siempre debe tener en cuenta que el recorte debe dejarle la imagen en la relación de aspecto que necesita.

Por ejemplo, tenemos esta imagen:

Imagen original, con una r.a. que no nos sirve y más informacion de la que necesitamos

Dado el caso, podemos recortarla para obtener el encuadre que necesitamos, siempre y cuando la imagen tenga suficiente tamaño como para que el recorte siga quedando en AL MENOS las dimensiones y relación de aspecto que necesitamos:

Imagen recortada, ya en relacion de aspecto 4:3 y con solo lo que necesitamos

La resolución es un término utilizado en fotografía digital para indicar la cantidad de información que hay en pixeles (Teoría aditiva del color, luz - Canales RGB) o puntos de impresión (Teoría sustractiva del color, pigmentos - Canales CMYK) en un área dada en centímetros o en pulgadas; siendo pulgadas, las más utilizada.

Cuando hablamos de la resolución de una imagen para pantalla, tenemos los términos: PPI (En inglés points per inch) o en español PPP (Pixeles por pulgada).

Existen 2 estandar relacionados con la resolución en la imagen digital: 72 dpi usado para visualizar las imágenes en pantalla (Aplicativos web o multimedia) y 300 dpi, utilizado en los sistemas de impresión. .

La resolución o densidad de la imagen para su Página web debe ser de 72 ppp, todos los editores le permiten cambiar esta característica de la imagen. Por lo general las fotos tomadas con las cámaras digitales están a 300 dpi (calidad de impresión); esta densidad es innecesaria y sólo hará que su imagen sea mucho mas pesada de lo recomendable; busque y encuentre cómo cambiar la resolución de su imagen a 72 dpi sin alterar el tamaño que desea obtener

Éste no es un tema sencillo, pero definitivamente imprescindible si Usted tiene como meta gerenciar su página web sin la ayuda de un experto, por suerte Google está repleto de información útil al respecto, sólo hace falta un poco de voluntad y tiempo para manejarlo

Cambiando la resolución de la imagen con Pain.net

Abrimos la imagen JPG con Paint.net.

Chequeamos la resolución por el men� � Imagen � Cambiar el tamaño. (Para cambiar el idioma de Paint.Net, vaya por el men� � utilidades -idioma)

Si en la resolución aparece 72 dpi. Realizamos el ajuste a 300 dpi. Observe que el tamaño en pixeles permanece intacto. Esto quiere decir que no se interpolo, ni positiva ni negativamente.

Oprima aceptar. El cambio de resolución se realiz� con �xito.

Cambiando la resolución de la imagen en Adobe Photoshop

Abra el archivo JPG.

Vaya al men�: Imagen � tamaño de Imagen.

Verifique la resolución. Si est� a 72 dpi, deseleccione la opción: Remuestrar imagen. Esto inactiva la interpolación.

Cambie la resolución a 300 dpi. Observe que el tamaño en pixeles no vari�. Esto significa que no hubo interpolación.