10. Ordenarás las imágenes.

Todo diseño de calidad exige que cada elemento que integremos a la Web esté debidamente justificado, ordenado y que cumpla una función específica. Esto mismo se aplica a las imágenes, así que no podemos simplemente colocarlas en un espacio para que las ocupen, ya que deben integrarse al diseño de una página Web. Es recomendable que para esto se defina el tamaño de cada imagen de acuerdo a la posición que ocupen, así mismo se les asigne una jerarquía a fin de que en vez de que compitan entre ellas todas armonicen lo mejor posible.

Hay veces que el sitio solamente proyecta una gran cantidad de imágenes como son las galerías, los catálogos, los muestrarios, o cualquier otro sitio similar, pero esa no es excusa para no crear un espacio bien organizado a fin de que el usuario pueda localizar cada una de ellas.

9. Prevendrás fallas de visualización.

Hay varios factores que pueden provocar que una imagen que previamente fue colocada en una página Web, no aparezca de inmediato, se visualice en unas computadoras solamente o simplemente desaparezcan para siempre.

Antes que nada debemos evitar nombrar las imágenes con caracteres extraños al idioma inglés como es la letra ñ, las diéresis, puntuaciones, mayúsculas y guiones poco convencionales.  Si tu imagen no aparece inmediatamente en la página verifica si escribiste bien el nombre de ésta, de la carpeta o del origen de la misma.

En el segundo caso hay que recordar que no todas las tecnologías tienen las mismas  posibilidades técnicas para proyectar ciertos formatos como por ejemplo los archivos PNG no se llegan a visualizar en computadoras desactualizadas o mínimo pierden su efecto de transparencia.

En caso de que una imagen desaparezca sin que se haya editado accidentalmente en el código de una página puede que el destino de origen haya sido cambiado de lugar, fuera renombrado el archivo o la carpeta, fuese borrado manualmente o por algún virus informático o simplemente como suele pasar a principiantes o por accidente que proyectamos una imagen alojada en una computadora en vez de un alojamiento Web. Apagándose la computadora se pierde el enlace de la misma.

8. Optimizarás las imágenes para la Web.

Es raro que una imagen no tenga que ser optimizada para la Web, casi siempre hay que editarla, cortarla, cambiarle el tamaño o mejorarle alguna apariencia como son el brillo, el contraste o el color.

A veces incluso debemos desenfocar una imagen, añadir un filtro, girarla o reducir la resolución a la imagen.

Hay varios programas que nos ayudan a realizar esta tarea de manera automática, con la opción “guardar para la web”, y según la naturaleza de cada una de ellas nos permite seleccionar distintas variantes como son los formatos de archivo o la calidad de la imagen. Esta última es importante prestarle una atención especial porque muchas imágenes se reducen bastante en peso y se ven bien incluso a un 60% de calidad, mientras otras funcionan a un 80%.

Si tenemos la necesidad de reducir de peso una imagen al máximo primero conviene en su tamaño real o lo más grande posible simplificar los gradientes y sombreados complejos, después lo pasamos de RGB a color indexado, selecciona paleta Web-safe y no aplicamos “dithering”, luego hay que cambiar de nuevo a RGB, pasándola nuevamente a color indexado pero ahora activando exacto en paleta de color, con ello eliminamos todos los colores que no usa la paleta. Después exportamos como GIF 89 A  y sin activar la opción de entrelazar en gráficos de pequeña talla. Finalmente guarda las imágenes para Web y así tendrá una buena calidad para ese fin. Esta receta la podemos utilizar cuando estamos en un sistema que solo permite ingresar GIF o GIF animados y queremos lograr el mejor resultado posible.

7. Darás una resolución adecuada a las imágenes.

La resolución de una imagen para la Web debe de ser de 72 puntos por pulgada o menos como una medida de estándar recomendada.  Si le damos una mayor resolución estaremos desperdiciando recursos, ya que tardará mucho más en bajarse desde el servidor sin conseguir realmente una ventaja visual con ello.  Si reducimos las imágenes manualmente, no conseguiremos que el archivo baje de peso, sino todo lo contrario ya que obtendremos una imagen “pequeña” que pesa lo que una grande.

Las resoluciones de pantalla de las computadoras a veces son insuficientes para mostrar en forma correcta los esquemas que tengan muchas líneas curvas o ángulos, las líneas que no siguen las retículas del píxel tendrán dentados, pero puedes optimizarlos con un suavizado para que sean menos evidentes.

6. Usarás formatos seguros para la Web

Selecciona el formato según el tipo de gráfico y los alcances técnicos de tus usuarios, evita usar imágenes de formatos no comprimidos (BMP o TIFF por ejemplo), recurre a los que están comprimidos y son más usuales en internet como son GIF, JPGE (JPG) y PNG. También existen otros menos comunes que se pueden incluir en una página Web, pero que no siempre tienen las especificaciones adecuadas para Internet. (DIB, RLE, PAL, RDI, CGM, DRW, DXF, IGS, EPS, PCX, PIC, PLT, TGA, TIF, WMF o WPG por comentar algunos)

No olvides que independientemente el formato que utilices debes optimizarlo para la Web, pues una imagen pequeña puede pesar varias veces lo que una grande si no tenemos cuidado.

5. Recurrirás a copias diminutas en galerías de imágenes

Si vas a usar muchos archivos gráficos como una galería de imágenes podemos crear una copia diminuta de las imágenes para luego vincularlos con otra de buen tamaño en otra página a cada una.

La imagen en miniatura deberá tener una calidad baja de acuerdo a su tamaño.

Si un gráfico muy pesado está planeado para ser impreso es una buena opción colocar una copia de baja calidad en la página y ofrecer una descarga de la imagen.

4. Evitarás las descargas lentas.

A veces no podemos evitar utilizar imágenes de gran peso o una gran cantidad de ellas en una misma página por lo que no debemos olvidar que cuantos más gráficos incorporemos más tiempo esperará el usuario para acceder a ellas. Lo mismo ocurre con una imagen que cubra todo el fondo o tuviese demasiado peso.

Hay muchas maneras de evitar que exista una página sobrecargada de gráficos pero si esto sucede lo mejor es indicarle a los usuarios que la descarga puede llevar cierto tiempo así estará preparado para ello, y sobra recomendar que mínimo el contenido tendrá que ser valioso.

Cuando se requiere de un gran tamaño en una imagen se recomienda crear un vínculo con una imagen pequeña idéntica a otra página donde contiene la mayor o colocar un botón para la descarga directa de la imagen.

Puedes usar una misma imagen en una página Web para que bajen más rápido sus múltiples proyecciones y ahorrar peso de la página pero cuida en no reutilizar demasiados elementos muy notorios. (Por ejemplo botones, barras, flechas o iconos porque incluso refuerzan la imagen del sitio)

3. Verificará el tiempo de descarga de la imagen Web.

Un ejercicio para saber si nuestra imagen es muy pesada consiste en aguantar la respiración para verificar si el tiempo es demasiado. En caso de no poder evitar utilizar imágenes de gran peso lo mejor es permitir que se descarguen progresivamente (entrelazado) para que sea más soportable la espera, ésta no lo hace de arriba hacia abajo sino que empieza a construir una imagen en baja resolución mientras baja la imagen real. Esta aplicación no es recomendable en botones o imágenes pequeñas.

No olvides que la descarga de un archivo Web debe probarse en distintas capacidades y soportes estándar para estar concientes de cómo lo verán la mayoría de los usuarios.

2. Reducirás el peso de las imágenes.

Para reducir el peso de una imagen que será utilizado para un sitio Web no debemos dejar de optimizarla en un programa especializado para esto, ya que escalando la imagen en un editor de páginas Web no se logra reducir en absoluto el peso de la misma.  Lo mejor es proyectarla en tamaño real y aligerarla lo más que se pueda sin que se pierda una calidad aceptable.

1. Facilitarás la descarga de las imágenes

Todo peso innecesario en una página Web debe eliminarse y esto aplica sobre todo a los gráficos Web por ser los más comunes y al mismo tiempo más fáciles de preparar para este medio. Cuando nos referimos al peso no es precisamente sobre el tamaño de la imagen ya que el tipo de formato, el método de compresión utilizado y la profundidad de color influyen en gran medida. La regla es “cuanto menos ocupen los archivos de memoria sin perder la calidad, es lo ideal”

Así que debemos procurar que en la Web las imágenes pesen lo menos si queremos que se descarguen de manera rápida para la mayoría de los usuarios. Por lo que es buena idea utilizar solamente los gráficos más necesarios e impactantes para nuestro público, para conseguir que la descarga de las páginas sea dinámica y rápida. También podemos aprovechar el hecho de que si una imagen se repite indefinidamente en un sitio como los estampados de un fondo de escritorio no aumenta el peso de la página ya que solamente se proyecta de un mismo archivo.

Tomemos en cuenta de que los encabezamientos decorados con publicidad suelen alentar la descarga y normalmente frustran al usuario por lo que es mejor evitar poner elementos publicitarios o que lo parezcan pues los usuarios suelen pasarlos por alto por lo que difícilmente se justifica su presencia.