Manejo apropiado de las imágenes para su sitio web

Todo lo que necesita saber para aprender manejar sus imágenes de forma sencilla.

Manejo apropiado de las imágenes para su sitio web

Actualizado el 01 de julio del 2016

Por Rafael Juárez

¡Ok! usted tiene un web site en el que puede controlar el contenido, el cual incluye imágenes. El manejo de las imágenes es un campo vasto y complejo, pero usted no tiene que saber TODO al respecto para poder llevar a cabo con éxito la tarea de subir imágenes que acompañen a sus páginas.

  • ¿Las imágenes son muy grandes o muy pesadas? ¿cómo saberlo?
  • ¿Por qué se tardan demasiado en cargar las imágenes?
  • ¿Por qué se ven deformes las imágenes en mi página web?
  • ¿Cuál es el formato adecuado de imágenes para su web site?
  • ¿Cómo cambiar el nombre a las imágenes?
  • ¿Cómo cambiar el tamaño de las imágenes?
  • ¿Por qué no puedo colocar una presentación de Power Point como imágen en mi página web?

Manejo de Archivos en su Computadora

1.- 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:

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

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

"camisas-ninas-marron.jpg" SI

2.- 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.

Es MUY importante saber qué extensión tienen su archivos, esto le dice que tipo de archivo es; la mayoría de las veces basta con el iconito, pero este NO es el caso.

Para poder ver las extensiones de los archivos (.JPG, .GIF, .PNG, etc.) haga lo siguiente:

    1. Vaya a Mi PC.
    2. Vaya al menú "Herramientas", en ese menú seleccione el sub menú "Opciones de carpeta". Dentro de Opciones, busque la pestaña "VER".
    3. Busque la opción "Ocultar las extensiones de archivo para tipos de archivo conocido". DESHABILÍTELA.
    4. Presione Aceptar.

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

3.- 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 su peso es innecesariamente mucho mayor para el formato WEB y en muchos casos, estas imágenes no son posibles de visualizar en la página. 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.

4.- Para saber el peso de sus archivos:

a.- 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 encuentra el tamaño en Kilobytes (KB) del mismo.

Por lo general sus imágenes NO deberían pesar más de 100 KB. Si usted ve alguna imagen de más de 300 KB, 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 Byte!!... Si usted no necesita una imagen tan grande, Usted NO debe subir a su web site la imagen en ese tamaño.

Manejar imágenes innecesariamente grandes solo le quitará tiempo y agregará frustración a todas sus operaciones.

¡Esta imagen pesa 50 KB!

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

  1. El formato: si es JPG tiende a pesar menos que si es BMP o PNG.
  2. El tamaño real de la imagen.
  3. La resolución o densidad de la imagen (se mide en DPI).
  4. La calidad de compresión del formato JPG (mientras mayor calidad, menos peso y viceversa).

Editando las imágenes

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, el software de su cámara de fotos, etc. Esos programas NO son para modificar imágenes, si acaso son para ordenarlas. Usted necesita un EDITOR de imágenes. No importa cuan sencillo sea, este debe tener las funciones básicas: cambiar de tamaño, cambiar de resolución y recortar.

Le proveemos de un sencillo y gratuito editor de imágenes, libre de virus y spyware, llamado FREE IMAGE EDITOR para que usted descargue e instale:

Descargar el Editor de Imágenes FREE IMAGE EDITOR (1.5MB)

  1. Instale el software y abra la imagen que desea o necesita modificar con el mismo...
  2. Para modificar el tamaño y resolución de su imagen, busque el menú "Raster" y seleccione la opción "Resample". Si su archivo tiene una resolución mayor a 72 dpi este tendra un peso mayor innecesario. Entonces, primero cambie la resolución a 72 dpi y luego seleccione el ancho que desea. Si Usted va a subir una imagen pequeña para un catálogo de productos, por ejemplo, hágala de 250 píxeles de ancho, si va a subir una imagen grande, hágala de 800 píxeles de ancho. Imágenes de más de 1024 píxeles son inútilmente grandes y pesadas.

ASEGÚRESE DE COLOCAR EL ZOOM A UN NIVEL DE 100% PARA VER EL TAMAÑO REAL DE SU IMAGEN ORIGINAL.

Al abrir la imagen en el editor podrá ver en la barra superior de la ventana los datos necesarios de su imagen: nombre, tamaño, profundidad y resolución en dpi.

Al modificar el tamaño Usted verá el resultado inmediatamente y obtendrá una imagen manejable y fácil de transferir a su servidor.

3.- Guarde la imagen con un nombre adecuado, considerando las sugerencias hechas al comienzo de este documento.

Antes de guardar presione el botón "Avanzados" y asegúrese que la compresión sea entre el 50% y el 70% (mientras mayor porcentaje, MAYOR será el tamaño de la imagen; por lo general 50% es suficiente y adecuado).

Usted obtendrá una imagen lista para poder ser trabajada en su página web. Asegúrese de conservar los archivos originales en otra carpeta. Confundirse es muy fácil, sobre todo cuando la cantidad de imágenes es grande. Solo el tener orden y método le salvará de perderse en la tarea y cometer errores incómodos.

Editor de Imágenes On line

Con este editor online Usted podrá cargar imágenes y editarlas, para luego salvarlas al disco duro. Solo hace falta saber un poquito de inglés.

ir al editor de imagenes Online Ahora

Haga click en la imagen para ir al editor de imágenes online de Aviary.

Disqus

Organizado por

Escuela de Emprendedores

info@escuelaemprendedores.co

Bogotá: +571 357 62 90 / 304 330 78 54

Agencia de Marketing y Diseño Web en Bogotá, Colombia | Marketing en Colombia