Manejo apropiado de las imágenes para tu sitio web

Todo lo que necesitas saber para aprender manejar tus imágenes de forma sencilla.

Actualizado el 10 de mayo del 2017

Por Rafael Juárez

¡Ok! tú tienes un web site en el que puedes controlar el contenido, el cual incluye imágenes. El manejo de las imágenes es un campo vasto y complejo, pero tú no tienes que saber TODO al respecto para poder llevar a cabo con éxito la tarea de subir imágenes que acompañen tus 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 tu 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 imagen en mi página web?

Manejo de archivos en su computadora

1.- Las imágenes o cualquier archivo que tú desees colocar en tu web site deben tener ciertos parámetros para su correcta visualización y para evitar problemas que te serán difíciles de detectar. Procura:

  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 te permitan reconocer tu archivo apenas lo veas, sin tener que abrirlo.
  5. Usar siempre un mismo sistema de nomenclatura para todas las imágenes de tu proyecto.

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

"camisas-ninas-marron.jpg"

2.- Para cambiar el nombre de un archivo tan solo ubícalo en el Explorador de Windows, haz UN click sobre el nombre del mismo y luego haz click otra vez. Inmediatamente el nombre se convertirá en editable. Procede a modificar tus archivos de la manera que creas conveniente, siguiendo las sugerencias anteriores.

Es MUY importante saber qué extensión tienen tu archivos, esto te 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.) haz lo siguiente:

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

Inmediatamente podrás ver qué extensiones tienen los archivos que tú manejas.

3.- No todos los tipos de archivos son adecuados para la web. Procura utilizar siempre archivos JPG o GIF, sobre todo si son fotos. No uses 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. Recuerda que mientras menos pesen las imágenes, mejor para tu servidor y tus usuarios, ya que la página cargará más rápido.

4.- Para saber el peso de tus archivos:

a.- En la barra del explorador, busca el menú "Ver" y selecciona "Detalles".

Inmediatamente podrás ver una lista de detalles del archivo entre las cuales se encuentra el tamaño en Kilobytes (KB) del mismo.

Por lo general tus imágenes NO deberían pesar más de 100 KB. Si ves alguna imagen de más de 300 KB, debes reducir el tamaño de la misma.

Para que tengas 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. ¡ASÍ DE GRANDE es una imagen de 1 Mega Byte!!... Si tú no necesitas una imagen tan grande, tú NO debes subir a tu web site la imagen en ese tamaño.

Manejar imágenes innecesariamente grandes solo te quitará tiempo y agregará frustración a todas tus 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ÍDATE 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. Tú necesitas 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.

Te ofrecemos un sencillo y gratuito editor de imágenes, libre de virus y spyware, llamado FREE IMAGE EDITOR para que descargues e instales en tu equipo:

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

  1. Instala el software y abre la imagen que deseas o necesitas modificar con el mismo...
  2. Para modificar el tamaño y resolución de tu imagen, busca el menú "Raster" y seleccione la opción "Resample". Si tu archivo tiene una resolución mayor a 72 dpi este tendra un peso mayor innecesario. Entonces, primero cambia la resolución a 72 dpi y luego selecciona el ancho que deseas. Si tú vas a subir una imagen pequeña para un catálogo de productos, por ejemplo, hazla de 250 píxeles de ancho. Si vas a subir una imagen grande, hazla de 800 píxeles de ancho. Imágenes de más de 1024 píxeles son inútilmente grandes y pesadas.

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

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

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

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

Antes de guardar presiona el botón "Avanzados" y asegúrate 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).

Obtendrás una imagen lista para poder ser trabajada en tu página web. Asegúrate 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 te salvará de perderte en la tarea y cometer errores incómodos.

Editor de Imágenes online

Con este editor online tú podrás 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

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

Marketing para emprendedores

Marketing para emprendedores
Temas de marketing para emprendedores y aspirantes.

Para Diseñadores

Para Diseñadores
Nuestra experiencia de agencia con clientes y situaciones comunes relacionadas al diseño como servicio.

Páginas Web

Páginas Web
Nuestra experiencia de más de 22 años en el diseño web nos da algunas ideas que pueden ser útiles para quienes deseen incursionar en este mundo, en el ámbito gerencial.

SEO

SEO
Técnicas, recursos y opiniones sobre el antiguo y misterioso arte de posicionar páginas web en los primeros resultados de Google.

Branding

Branding
Nuestro conocimiento sobre temas relacionados al desarrollo de marcas y sus visicitudes.

Email

Email
El servicio más antiguo y exitoso de toda la Internet, el revolucionario sistema de comunicación que ya es parte de nuestra vida, resulta que casi nadie sabe usarlo adecuadamente, y son muchas más las incógnitas que las certezas

Liderazgo

Liderazgo
Las empresas y emprendimientos exitosos poseen gerencias que van de la mano de líderes inspiradores con una visión global de las metas. Acá tratamos de recorrer todo lo que abarca el liderago y gestión empresarial.

Redacción creativa

Redacción creativa
El contenido precede al diseño. Diseño sin contenido no es diseño, es decoración.

Recursos y herramientas

Recursos y herramientas
Cosas que nos han sido útiles durante todos estos años y nos han hecho la vida más sencilla.

Humor

Humor
Convertimos las pequeñas tragedias en motivos para reirnos... ¡para no llorar!

Trabajando con Movidagrafica

Trabajando con Movidagrafica
Información para nuestros clientes que también puede ser útil para poder manejar la relación entre emprendedores y agencias de marketing.

Para pensar

Para pensar
No todo es dinero, no todo es diseño, no todo es marketing. Evolucionemos.

Talleres

Talleres
Esto es lo que tenemos para ti: conocimiento y experiencia de valor inigualable que te ayudarán en tu carrera.
Agencia de Marketing y Publicidad en Bogotá, Colombia | Diseño Web en Colombia